Lesson #3: The Nitty Gritty Details

"MADI THERE IS SO MUCH GOING ON HERE!!"

Yes, I'm not going to lie to you. This new index.html file can look pretty overwhelming when you first open it and you're like, "What in the world is going on?!!". 😨 But remember, building blocks and connecting dots. I'm going to show you a fun, little trick that has really helped me discover new things and analyze what's going on.

The Inspect Tool

View Page Source and Inspect are probably my most favorite web development tools. If you right click on any website, you'll have options similar to these (don't mind the extensions):

If you select View Page Source, you'll open the html file for the page you're currently on. Some (take facebook for example) are extremely confusing and overwhelming. I often use this option when I want to see the structure of how a certain part of a webpage is created. This is also a great resource for learning new html elements and figuring out how/where to use them!!

If you select Inspect, a section should appear on this page. This is by far my most favorite tool (and the most useful) in figuring out what exactly is going on with my page. I'm going to teach you really quick on how to use it, because I promise you this will be your best friend with testing out css styles on your webpage.

• Right click on this page > Inspect > something similar to this will appear on your page #inception:
• The Elements tab will show you the html file you are currently looking at, and this is where we'll focus on for now. The other tabs give you insight on other things you can learn about the website you are on, feel free to play around!
• Within this Elements section, find this tag: <div role="main" class="application-main">. (click inside the Elements section > Command + F > type main in the Elements search bar).
• Highlight that line by clicking on it (it should turn from blue background when you're clicking it to grey when your cursor is elsewhere). This means that this specific html element is selected.
• Navigate to the Styles | Computed | Event Listeners tabs on the right side of my Inspect tool (your's might be located in a different place).
• When in Styles we can play with the css that specific html elements pull from. Find the element.style {} section (this should be at the top of the section).
• Click inside the two { }'s and type background-color: blue;. WOULD YOU LOOK AT THAT?!💙

You can make all the changes you want - move text boxes to the left and right, adding a border around an image, changing the colors of the text. ALL OF IT. However, once you hit refresh all of that fun and play goes away (foreverrrrrr), so if you like something you did be sure to transfer it over to your own .css file.

Next > Lesson #3: Less Is More