Developer Tools are built into modern browsers. Right-click a visible element and choose Inspect to see the HTML element and the CSS affecting it. You do not need to learn everything at once. Follow the example, see what changes, and then try a small change of your own.
What You Need to Know
You can temporarily change text or attributes inside DevTools without editing your file. The change is not permanent; refreshing usually restores the page from its source.
Start small. Save your files in one folder and change one thing at a time. If the page does not look right, check the file you actually opened before changing the code again.
Example: See It in Action
This example keeps the idea small. Copy it carefully, then follow the explanation instead of guessing what the browser will do.
This is a short HTML fragment. To try it as a webpage, put it inside the body element of a complete HTML document.
<main id="content">
<h1 class="page-title">School Club</h1>
<p>Open DevTools and inspect this paragraph.</p>
</main>Let’s Understand the Example
- Main identifies the central content of the page; it should not be duplicated as separate visible main landmarks.
- An h1 introduces the main subject of the page. Use the heading level for structure rather than font size.
- A p groups a paragraph of related text. Start another paragraph for a new thought.
- Id gives one element a unique name within the page, so a link, label, or script can point to it.
- Class is a reusable label for styling or scripts; several elements may share the same class.
Save the example first, then open the right file in a browser. If you change the source, refresh the browser to compare before and after.
What Should You See?
The page should display “School Club” as a heading, followed by its related content. Change the heading text and refresh the browser to see the result.
Save a copy of your working file before experimenting. Change just one thing, test it in the browser, and compare the result to the original.
Try It Yourself
- Use Inspect on the heading, change its text temporarily, then refresh and compare.
- Save your changes, open or refresh the page, and compare the result with the original example.
- Tell a friend what your change did. If you are not sure, undo it, refresh the page, and compare.
Common Beginner Mistakes
- Believing that an edit in Inspect automatically updates the saved HTML file.
- If a result does not change, check that the file was saved and that the browser is showing the right path.
Key Takeaways
- Developer Tools are built into modern browsers.
- Main identifies the central content of the page; it should not be duplicated as separate visible main landmarks.
- You can temporarily change text or attributes inside DevTools without editing your file. The change is not permanent; refreshing usually restores the page from its source.