Use these files when practicing basic HTML document structure, text hierarchy, links, image paths, and external CSS.
Setup
- Download the starter project.
- Unzip it.
- Rename the extracted folder with a clear name, such as
lastname-html-demo.
- Open the folder in Phoenix Code or another editor.
- Open
index.html.
- Preview the page in a browser.
What We Practice
- HTML document structure
- The difference between
head and body
- Headings, paragraphs, and lists
- Links and relative image paths
- Connecting an external stylesheet
The goal is not polish. The goal is to make the parts of an HTML document visible and editable.
<header>
<h1>My First HTML Page</h1>
<p>A small page for practicing document structure.</p>
</header>
<main>
<section>
<h2>What I am learning</h2>
<ul>
<li>Headings create hierarchy.</li>
<li>Paragraphs hold readable text.</li>
<li>Links connect pages together.</li>
</ul>
</section>
<p>
Visit <a href="https://developer.mozilla.org/">MDN Web Docs</a>
when you need a deeper reference.
</p>
</main> body {
margin: 0;
font-family: Georgia, serif;
background: #f5f3ef;
color: #1a1814;
line-height: 1.6;
}
header,
main {
max-width: 42rem;
margin: 0 auto;
padding: 2rem;
}
header {
border-bottom: 1px solid #e0ddd8;
}
h1 {
font-size: 3rem;
line-height: 1;
}
a {
color: #3d6b5e;
}