Follow Along: Modify this Article with Inspect Element

Have you ever been on a website and accidentally clicked or pressed the wrong thing and had a big, code-filled box pop up on your screen? Well then, you might have unexpectedly come across the Inspect Element tool in your browser.

If you’ve never seen this before, it can seem a bit scary or overwhelming to try to navigate through all of the coding and rules. Luckily, once you understand the basics, it is relatively easy to understand. For those new to all things coding, welcome! This won’t hurt a bit.

The Inspect Element tool is a browser development tool that offers the most convenient way to learn and practice web development skills, learn HTML, and understand the foundation of coding and web development. The best way to get a grasp for the easiness of the inspect element is to just use it.

While knowing how to use Inspect Element will undoubtedly make you the hero at your next cocktail party, this isn’t just a pedagogical exercise. Knowing HTML and CSS rules (or even earning an HTML certificate or attending a CSS boot camp) can dramatically improve your career.

Follow along to learn how to (temporarily) modify the style and content of this (and any) webpage content to gain a better understanding of CSS rules and learn HTML basics.

*Chrome is (by far) the most popular web browser worldwide; however, all browsers have a version of these tools. For this article, the focus will center on Chrome browsers.*

Browser Development Tools (DevTools)

The first thing to know is how to access the Inspect Element tool. Simply right-click on this page and choose ‘Inspect’ from the bottom of the pop-up menu. This will open a window on either the right side or bottom of the screen. (Don’t worry: if it looks like gibberish, that is okay. As you continue to follow this article, things will get less abstract and more familiar.)

While the DevTools window holds a lot of options and information on websites, it is best to start with modifying HTML content and CSS rules. This is the easiest and quickest way to get familiar.

Reminders and Tips!

• When changing or modifying a CSS rule, you may affect more than one element.
• DevTools offers further tools for assistance. For example, a color chart is provided when a developer is making changes to the color within the website.
• These tools are categorized as SandBox tools, meaning that all changes made are temporary and will not be saved upon exiting the site.
• Make notes during practice to remember changes, both good and bad.

Where to begin? Font Color Change!

To get started, right-click on this paragraph (or any for that matter) and then click Inspect. Select the “styles” tab at the bottom of the DevTools window. Scroll down the styles window until you see a subheading called “Inherited from body.post-template.” There will be a few “Inherited from…” so keep looking.

Once found, the first CSS rule in that section should appear as “color: #141c3a;”. The exact number-letter combination is less important because it just means it is a different color. The important thing is you found it. Click on the color square to choose a new look, then hit enter or return to view changes.

Pretty cool, right?

New CSS Styles

DevTools can also be used to add new rules and styles as well. While there are many different things you can do with CSS styles, a simple one is changing the background color.

First things first, select an area and right click. Choose Inspect, and DevTools will highlight the chosen passage’s HTML element. Next to the styles tab you will see a “+” sign in the right corner, click it. This will open an empty CSS rule for the selected text.

It is within that sector, between the curly brackets that you add your new CSS declaration. Try this for starters (no need to type in the brackets when in DevTools): {background-color: blue;}

After you end it with the semi-colon, hit enter and check out the changes. Your background color should be blue. If it isn’t, make sure you entered the code in between the curly brackets and that all punctuation and words have been typed correctly.

Modify HTML with DevTools

Like all of the things above, modifying HTML with DevTools gets you familiar with simple coding, and allows you to see the changes you have made, even if only temporarily. This knowledge can then be applied to the development of websites and content behind the screen.

To directly modify HTML content of a site, begin as always: right click on the paragraph and hit Inspect. When the Inspect window opens, the corresponding HTML will be highlighted.

Note how the highlight section is between an open and closing tag (<p>,</p>). Double-click the highlighted part and write something over it. Once you are done, hit the enter or return key to see the changes.

After this brief insight to the Inspect element and working with CSS rules and HTML, it is easy to see how this essential skill set is a fairly easy one to grasp in theory, and once you learn HTML and CSS rules, expanding your knowledge of code becomes far easier.

Those who find themselves interested in pursuing coding and DevTools further can consider attending a CSS bootcamp or obtaining an HTML certificate of completion. CSS bootcamps are a more intensive way to learn in-depth coding skills quickly. The amount of time to complete a bootcamp that covers CSS fluctuates anywhere from nine weeks to 24 months.

Those applying for HTML certificates, on the other hand, are expected to learn HTML and have a fundamental knowledge of the language. HTML certificates of completion and CSS boot camp backgrounds are great to have when looking for a promotion, building out your resume, or looking for that perfect career change.