Project 3: Structuring a Tech Website Homepage Skeleton
Before applying CSS styles or choosing a Javascript framework, professional web developers sketch out the core structural layout skeleton of a landing page. In this project, you will build the raw HTML backbone of a modern tech product homepage (resembling Astro's or GitHub's structures).
1. Project Specifications
Your homepage layout skeleton must represent these 4 regions:
- Header (Brand Navigation): Logo, text nav links, and a call-to-action registration link.
- Hero Section (Introduction): High-impact main title (
<h1>), a descriptive paragraph, and primary buttons. - Features Grid (Content): Grouped articles (
<article>) inside a container (<section>) representing main features. - Footer (Links Directory): Multi-column sitemaps, copyright info, and legal links.
2. Completed Landing Page HTML Structure
Create an index.html file in a dedicated folder, paste this code inside, and view it:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>GoIshine - Next-Generation Dev Platform</title>
</head>
<body>
<!-- 1. HEADER BRAND BAR -->
<header>
<div class="logo">
<strong>GoIshine Platform</strong>
</div>
<nav>
<ul>
<li><a href="/features">Features</a></li>
<li><a href="/pricing">Pricing</a></li>
<li><a href="/docs">Docs</a></li>
<li><a href="/blog">Blog</a></li>
</ul>
</nav>
<div class="actions">
<a href="/login">Sign In</a> |
<a href="/register"><strong>Get Started →</strong></a>
</div>
</header>
<hr>
<!-- MAIN WRAPPER -->
<main>
<!-- 2. HERO SECTION -->
<section id="hero">
<h1>The fastest way to build web platforms.</h1>
<p>
Deliver lightning-fast web pages, automatically optimized assets, and intuitive developer portals using GoIshine's open-source server components.
</p>
<div>
<a href="/register">Start Free Trial</a>
<a href="/docs/intro">Read Documentation</a>
</div>
</section>
<hr>
<!-- 3. PRODUCT FEATURES GRID -->
<section id="features">
<h2>Why developers love GoIshine</h2>
<p>Built for optimal performance and maximum developer productivity.</p>
<div class="grid">
<!-- Feature Card 1 -->
<article>
<h3>Automatic Asset Optimization</h3>
<p>
Upload high-res images and videos; our server automatically compiles modern WebP structures and source fallbacks.
</p>
<a href="/features/assets">Learn about assets</a>
</article>
<!-- Feature Card 2 -->
<article>
<h3>Zero-JS by Default</h3>
<p>
Keep your browser runtime light. We render pure HTML layouts on the server, only downloading JS when required.
</p>
<a href="/features/zero-js">Learn about rendering</a>
</article>
<!-- Feature Card 3 -->
<article>
<h3>Built-in Semantic SEO</h3>
<p>
Every template is built on semantic landmark tags, ensuring high Google PageSpeed scores and optimal search indexing.
</p>
<a href="/features/seo">Learn about SEO features</a>
</article>
</div>
</section>
</main>
<hr>
<!-- 4. SITEMAP FOOTER -->
<footer>
<div>
<div>
<h4>Product</h4>
<ul>
<li><a href="/pricing">Pricing Plans</a></li>
<li><a href="/releases">Changelog</a></li>
</ul>
</div>
<div>
<h4>Resources</h4>
<ul>
<li><a href="/docs">Guides</a></li>
<li><a href="/tutorials">Tutorials</a></li>
</ul>
</div>
<div>
<h4>Legal</h4>
<ul>
<li><a href="/privacy">Privacy Policy</a></li>
<li><a href="/terms">Terms of Service</a></li>
</ul>
</div>
</div>
<br>
<p>© 2026 GoIshine Inc. All trademarks belong to their respective owners.</p>
</footer>
</body>
</html>3. Reflection
Without CSS, the layout elements stacked sequentially in a vertical list. However, notice how easy it is to identify the logical sections of the site. When you learn CSS layout models (Flexbox and Grid) later, you can position these semantic boxes into multi-column navigation bars, grids, and layouts effortlessly!