HTML Tutorial
HTML Project: Landing Page
A one-page site with a nav, a hero, three feature blocks, and a footer.
What you will build
A one-page site for Quiet Line Press. The visitor gets a site-name nav, a hero with a headline and a call-to-action link, three feature articles, and a footer. That is the whole map: nav, header, three sections, footer.
A landing page is still HTML landmarks. Do not flatten it into a stack of identicaldivs. The hero is a header. Each feature is an article inside its own section.
Preview the full page at /html/try with Try it in HTML. You are checking structure and a little CSS, not a compiled program.
Tags you will use
| Tag | Job on this page |
|---|---|
nav | Site name plus in-page links |
header | Hero headline, support line, CTA link |
section | One feature region |
article | The feature itself: title and paragraph |
footer | Address, hours, or a quiet legal line |
Build in slices
Nav first. The first link can be the site name. In-page targets use hashes that match laterid values.
Example
<nav aria-label="Site">
<a class="site" href="#top">Quiet Line Press</a>
<a href="#editions">Editions</a>
<a href="#studio">Studio</a>
<a href="#subscribe">Subscribe</a>
</nav>Then the hero. One headline. One sentence. One link that looks like a button because CSS says so, not because you used a button for navigation.
Example
<header id="top">
<h1>Small books, sewn by hand</h1>
<p>Poetry and field notes in runs of two hundred.</p>
<p><a class="cta" href="#subscribe">Join the next list</a></p>
</header>Hash links only work when the target id exists. Add the three sections before you judge the nav. Then open /html/try and click through.
Complete document
Nav, hero header, three feature sections, footer. Short CSS: a dark band for the hero, three columns that wrap, a quiet footer. The viewport tag tells a phone to use its real width. The media query restacks the features when the preview is narrower than 640 pixels.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Quiet Line Press</title>
<style>
body { margin: 0; font-family: Georgia, serif; color: #1c1917; background: #f5f0e8; }
nav {
display: flex;
flex-wrap: wrap;
gap: 0.9rem;
padding: 0.9rem 1.2rem;
background: #1c1917;
}
nav a { color: #f5f0e8; text-decoration: none; }
nav .site { font-weight: 700; margin-right: auto; }
header {
padding: 3rem 1.2rem 2.5rem;
background: #292524;
color: #fafaf9;
}
header h1 { margin: 0 0 0.5rem; font-size: 2rem; }
.cta {
display: inline-block;
margin-top: 0.6rem;
padding: 0.5rem 0.95rem;
background: #d97706;
color: #1c1917;
text-decoration: none;
}
.features {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
}
section { padding: 1.2rem; }
article { max-width: 22rem; }
footer {
padding: 1.2rem;
background: #1c1917;
color: #d6d3d1;
font-size: 0.9rem;
}
@media (max-width: 640px) {
header { padding: 1.6rem 1rem; }
header h1 { font-size: 1.55rem; }
.features { grid-template-columns: 1fr; }
article { max-width: none; }
}
</style>
</head>
<body>
<nav aria-label="Site">
<a class="site" href="#top">Quiet Line Press</a>
<a href="#editions">Editions</a>
<a href="#studio">Studio</a>
<a href="#subscribe">Subscribe</a>
</nav>
<header id="top">
<h1>Small books, sewn by hand</h1>
<p>Poetry and field notes in runs of two hundred.</p>
<p><a class="cta" href="#subscribe">Join the next list</a></p>
</header>
<div class="features">
<section id="editions">
<article>
<h2>Short editions</h2>
<p>Each title is numbered. When the last copy sells, we do not reprint that cover.</p>
</article>
</section>
<section id="studio">
<article>
<h2>Open studio days</h2>
<p>The bindery is open the first Saturday of the month. Watch a signature get sewn.</p>
</article>
</section>
<section id="subscribe">
<article>
<h2>The letter, not a feed</h2>
<p>Four notes a year: a title, a paper stock, a date. No banners.</p>
</article>
</section>
</div>
<footer>
<p>Quiet Line Press, Mill Lane 4. Open Friday 10–16.</p>
</footer>
</body>
</html>A second complete landing page
Same landmarks for a walking club. Nav, hero, three features, footer. Change the copy, keep the bones.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Low Tide Walks</title>
<style>
body { margin: 0; font-family: "Segoe UI", sans-serif; background: #ecfeff; color: #164e63; }
nav { padding: 0.8rem 1rem; background: #155e75; }
nav a { color: #ecfeff; margin-right: 0.8rem; }
header { padding: 2.5rem 1rem; background: #0891b2; color: #fff; }
.cta { display: inline-block; background: #fff; color: #155e75; padding: 0.45rem 0.8rem; text-decoration: none; }
section { padding: 1rem; }
footer { padding: 1rem; background: #164e63; color: #cffafe; }
@media (max-width: 640px) {
nav a { display: inline-block; margin: 0.35rem 0.75rem 0.35rem 0; }
header h1 { font-size: 1.45rem; }
}
</style>
</head>
<body>
<nav aria-label="Site">
<a href="#top">Low Tide Walks</a>
<a href="#routes">Routes</a>
<a href="#kit">Kit</a>
<a href="#join">Join</a>
</nav>
<header id="top">
<h1>Walks that wait for the water to leave</h1>
<p>Guided crossings on sand that is only a path twice a day.</p>
<p><a class="cta" href="#join">See the next tide</a></p>
</header>
<section id="routes">
<article><h2>Mapped routes</h2><p>Three crossings, each with a turn-back time printed on the card.</p></article>
</section>
<section id="kit">
<article><h2>What you carry</h2><p>Boots, a layer, water. We bring the tide table.</p></article>
</section>
<section id="join">
<article><h2>Join a crossing</h2><p>Groups of eight. No new walkers on spring tides.</p></article>
</section>
<footer><p>Meet at the harbour wall. Cancelled if the wind is above 40 knots.</p></footer>
</body>
</html>Make it fit a phone
A finished laptop layout can still fail on a phone: the hero type stays huge, and three feature columns refuse to stack. Two lines fix that. First, a viewport meta tag so the phone does not fake a 980-pixel desktop. Second, a @media (max-width: 640px) rule that sets the features grid to one column and shrinks the headline.
Preview at /html/try, then narrow the window. The nav already wraps because it uses flex-wrap. The features should drop from three columns to one. Wide tables, like a weekly timetable, should scroll sideways with overflow-x: auto instead of crushing the cells.
Common mistakes
- A call-to-action that is a
buttonwith no form. If it goes to another place on the page, use a link. - Three features as
divs with bold text. Use headings so the outline matches the nav. - Nav links that point at pages you did not write. Hash targets on this page are enough.
- Hero copy that is five slogans. One headline. One supporting sentence. One action.
- Footer links that duplicate the whole nav. The footer can be an address and a closing hour.
Practice tasks
- Rename Quiet Line Press and rewrite the hero. Keep nav, header, three sections, and footer.
- Add a fourth nav link that jumps to the footer. Give the footer an
id. - Change the CTA background color. Click every nav item in /html/try.
- Narrow the preview until it is phone-wide. The features must stack. If they do not, check the media query.