Within Chrome, we have a very handy tool called the web inspector. Using it, we can troubleshoot issues, observe the applied styling of various elements, and preview new ones. This extremely helpful for learning the names of the elements, refining a design quickly, and for troubleshooting issues.
To open them up, you can go to view/developer/developer tools, or right/⌘ click on an element on the page and select“Inspect”
💻 Demo, Writing HTML
HTML is made up of a series of HTML elements. Cut and paste the following and save it over your“index.html” file.
For a full list of HTML elements, you can explore this page. But for now, let’s stick to a few basics:
👀 Slides, Basic Vocabulary & Review
💻 Demo, The Web Inspector
💻 Demo, Writing HTML
<!DOCTYPE html><html><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>My site</title></head><body>
<h1>This is heading 1</h1> <h2>This is heading 2</h2> <h3>This is heading 3</h3> <h4>This is heading 4</h4> <h5>This is heading 5</h5> <h6>This is heading 6</h6>
<p>This is a paragraph</p>
To break<br>lines<br>in a<br>paragraph,<br>use the br element.
<hr> The hr tag creates a horizontal line in an HTML page.
<em>This is emphasized text</em>
<strong>This is strong text</strong>
<!--This is a comment. Comments are not displayed in the browser-->
<ol> <li>This is an</li> <li>Ordered</li> <li>List</li> </ol>