Learn to Code: How to Use the Inspect Tool to Get Better at Coding

Hey—want some one-on-one help getting this set up? Book a 20-minute consultation and we can work through it via video chat!

In today’s day and age, learning to code is a really valuable skill to have. But how are you supposed to learn to code without investing a ton of money into your own website?

The good news is, it’s actually quite easy! You can learn the basics of HTML and CSS by studying your favorite websites with the Inspect Tool!

What is the Inspect Tool?

The Inspect Tool is a feature of your web browser (Google Chrome, Firefox, etc.) that allows you to see how the page you’re viewing is coded. You can click on a specific element (for example, a line of text or a button) and view the CSS for that particular snippet, or you can view the entire page and drill down into smaller elements as you need.

Plus, one of the nicest things about the Inspect Tool: it allows you to change the style of any of the elements so you can preview what it would look like! This won’t change it on the site itself, so when you refresh the page, your changes will be gone.

To get to the Inspect Tool, simply right-click on the element you’re interested in and click “Inspect.” A window will pop up on your screen (the location varies based on your browser) that will show you the elements on the page and the CSS stylesheet for the item you’ve selected. The element will also be highlighted on the regular page to show you which element(s) you’ve selected.

Here’s what it looks like when I use the Inspect Tool on one of my H5 headers in my Sunday Scratches #29 blog post:

The window in the top right shows you all of the HTML on the page, while the window just underneath it shows you the styles. I right clicked on the “The Week in Review” text and chose Inspect, so that’s where it went in the HTML window. You can see that it’s highlighted blue in the live page, and the HTML is highlighted blue in the HTML window. As you select different elements in the HTML window, the highlight will change on the live page, and the information in the style section will update to reflect the styles applied to that piece of code.

You’ll also notice the square in the bottom right — those show you the dimensions for the piece of code. For the heading selected, you’ll notice that the bright blue section (the main element) is 927 pixels wide by 16 pixels tall, and it has a margin of 10 for the bottom. The margin is the orange line underneath the heading.

In the stylesheet next to the square in the bottom right, you’ll see the CSS elements for the selected element. In this example, my H5 is set to a font size of 14px, a font weight of 600, letter spacing of .5 pixels, and the color #474747. If you scrolled down, you’d also notice that the font family is Lato and the text transform is set to uppercase. That’s why the HTML shows the text written out as “The Week in Review” but the page displays it in uppercase as “THE WEEK IN REVIEW.”

How does the Inspect Tool help me learn to code?

There are so many ways you can use the Inspect Tool to learn to code!

See How Existing Websites are Coded

First, I recommend using the Inspect tool to understand how existing websites are coded. If you’re just starting out, look at some of your favorite blogs to see how they’re editing the style of their site elements. I say blogs because they’re typically more simply coded and styled; I wouldn’t recommend starting with a more developed site like Facebook.

Let’s start with my blog. First, click on the “How does the Inspect Tool help me learn to code?” header. You’ll notice it’s labeled as H2. See all of the various levels I’ve applied to it. When you hover over a style, you’ll notice a checkbox appears to the left of it. Try unselecting those checkboxes to turn different elements on and off so you can get an idea of what each line does.

Then click on the “See How Existing Websites are Coded” header. You’ll notice is an H3, which has different style elements applied. Click those on and off as well.

The more you observe the styles of different websites, the more confident you’ll become with CSS and HTML!

I really like using the Inspect Tool on other websites when I’m curious about how they coded a specific element. For example, I’ve poked around in the code of sites with cool lines behind their headers, or fun icons in their Click to Tweet content blocks. You can really learn a lot from other designers and developers!

Play Around with the Code of Existing Websites

Once you’re comfortable with the Inspect Tool and have an understanding of how some of your favorite blogs are set up, try changing the CSS around! Just like you clicked the checkboxes on and off, you can change existing CSS elements and add new ones.

For example, select a heading on this page and change the color. You’ll notice that it not only applied it to the header you selected, but all of the other headers of the same level! So if you change the blue in “Play Around with the Code of Existing Websites” to a hot pink, you’d notice that “See How Existing Websites are Coded” also changes to hot pink. But the two light pink headers won’t have changed, because you changed the style of H3 and they’re H2.

It would go from this:

To this:

You’ll notice that the only thing I changed is the “color:” value, from #7ab5c7 to #ec008b.

If you want to add a style element, simply click on one of the style lines, go to the end of the text, and click enter. A new style line will appear, and you can put in whatever qualifier you want. I recommend trying out things like align, font-family, color, background-color, padding, and font-size.

Keep in mind, these changes will only last until you refresh the page. If you close out the window, all of your new settings will be lost.

Preview Changes on Your Site Before You Make Them Live

I often use the Inspect Tool to preview a change on my site before it goes live. I’ll go to the page I’m interested in coding, type in the changes I’m interested in making, and then bring those into the Edit CSS tool in WordPress once I’m confident it will look cool.

You never know, something might look terrible and you won’t know until you’ve already published the new code!

You can do this to an extent in the Customize tool in WordPress, but it’s a little harder if it’s a hidden / unpublished page or a very specific page that you don’t want to have to click around for. I think it makes the process a little bit faster.

---

So there you have it! Practicing CSS and HTML without having to actually invest in your own website! Play around with the Inspect Tool and you’ll be sure to grow your coding confidence in no time.