DEV Community

Cover image for Day 20/180 of Frontend Dev: Final HTML Project - Complete Multi-Page Website
CodeWithDhanian
CodeWithDhanian

Posted on

Day 20/180 of Frontend Dev: Final HTML Project - Complete Multi-Page Website

#frontend #frontendchallenge #webdev

Welcome to your final HTML challenge in the 180 Days of Frontend Development series. Today you'll combine everything you've learned to build a professional multi-page website with full navigation. For advanced website architecture techniques, see the Learn Frontend Development in 180 Days ebook.

Project Requirements

1. Website Structure 

my-website/
├── index.html          # Homepage
├── about.html          # About page
├── services/
│   ├── web-dev.html    # Service page
│   └── consulting.html # Service page
├── blog/
│   ├── post-1.html     # Blog post
│   └── post-2.html     # Blog post
├── contact.html        # Contact page
└── assets/
    ├── images/         # All website images
    └── styles/         # (For future CSS)
Enter fullscreen mode Exit fullscreen mode

2. Core Components

A. Shared Header (All Pages) 

<header>
  <nav aria-label="Main navigation">
    <ul>
      <li><a href="index.html">Home</a></li>
      <li><a href="about.html">About</a></li>
      <li>
        <a href="services/web-dev.html">Services</a>
        <ul>
          <li><a href="services/web-dev.html">Web Development</a></li>
          <li><a href="services/consulting.html">Consulting</a></li>
        </ul>
      </li>
      <li><a href="blog/post-1.html">Blog</a></li>
      <li><a href="contact.html">Contact</a></li>
    </ul>
  </nav>
</header>
Enter fullscreen mode Exit fullscreen mode

B. Shared Footer (All Pages) 

<footer>
  <div>
    <p>&copy; 2023 Your Name. All rights reserved.</p>
    <nav aria-label="Legal links">
      <ul>
        <li><a href="privacy.html">Privacy Policy</a></li>
        <li><a href="terms.html">Terms of Service</a></li>
      </ul>
    </nav>
  </div>

  <div>
    <nav aria-label="Social media links">
      <ul>
        <li><a href="https://github.com/yourusername">GitHub</a></li>
        <li><a href="https://linkedin.com/in/yourprofile">LinkedIn</a></li>
        <li><a href="https://twitter.com/yourhandle">Twitter</a></li>
      </ul>
    </nav>
  </div>
</footer>
Enter fullscreen mode Exit fullscreen mode

3. Complete Page Templates

A. Homepage (index.html) 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Professional Web Services | Your Name</title>
  <meta name="description" content="Web development and consulting services">
</head>
<body>
  <!-- Shared Header Here -->

  <main>
    <section aria-labelledby="hero-heading">
      <h1 id="hero-heading">Custom Web Solutions</h1>
      <p>Building performant, accessible websites for modern businesses</p>
      <a href="services/web-dev.html">View Services</a>
    </section>

    <section aria-labelledby="featured-work">
      <h2 id="featured-work">Featured Work</h2>
      <article>
        <h3>E-Commerce Platform</h3>
        <p>React-based store with Stripe integration</p>
        <a href="projects/ecommerce.html" aria-label="View E-Commerce Project">View Case Study</a>
      </article>
    </section>
  </main>

  <!-- Shared Footer Here -->
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

B. Service Page (services/web-dev.html) 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Web Development Services | Your Name</title>
  <meta name="description" content="Professional web development services">
</head>
<body>
  <!-- Shared Header Here -->

  <main>
    <article>
      <header>
        <h1>Web Development Services</h1>
        <p>Custom solutions for your online presence</p>
      </header>

      <section aria-labelledby="offerings">
        <h2 id="offerings">What I Offer</h2>
        <ul>
          <li>Responsive Website Development</li>
          <li>Performance Optimization</li>
          <li>Accessibility Audits</li>
        </ul>
      </section>

      <section aria-labelledby="process">
        <h2 id="process">Development Process</h2>
        <ol>
          <li>Requirement Analysis</li>
          <li>Design Mockups</li>
          <li>Development</li>
          <li>Testing</li>
        </ol>
      </section>
    </article>
  </main>

  <!-- Shared Footer Here -->
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

C. Blog Post (blog/post-1.html) 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Understanding Semantic HTML | Your Blog</title>
  <meta name="description" content="Learn why semantic HTML matters for modern web development">
</head>
<body>
  <!-- Shared Header Here -->

  <main>
    <article>
      <header>
        <h1>Understanding Semantic HTML</h1>
        <p>Published <time datetime="2023-05-20">May 20, 2023</time></p>
      </header>

      <section aria-labelledby="intro">
        <h2 id="intro">Why It Matters</h2>
        <p>Semantic HTML provides meaning to your content...</p>
      </section>

      <section aria-labelledby="examples">
        <h2 id="examples">Key Elements</h2>
        <ul>
          <li><code>&lt;header&gt;</code></li>
          <li><code>&lt;nav&gt;</code></li>
          <li><code>&lt;article&gt;</code></li>
        </ul>
      </section>

      <footer>
        <nav aria-label="Blog post navigation">
          <a href="post-2.html">Next: CSS Fundamentals →</a>
        </nav>
      </footer>
    </article>
  </main>

  <!-- Shared Footer Here -->
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

4. Professional Features to Implement

  1. Accessibility

    • Skip navigation link
    • ARIA landmarks
    • Proper heading hierarchy

  2. SEO Optimization

    • Unique title/description per page
    • Semantic HTML structure
    • Properly linked navigation

  3. Navigation

    • Consistent across all pages
    • Relative paths that work locally
    • Nested navigation for sections

  4. Future-Readiness

    • Organized file structure
    • CSS-ready class names
    • Image optimization

Final Project Checklist

  1. Complete These Pages:

    • [ ] Homepage
    • [ ] About page
    • [ ] 2+ Service pages
    • [ ] 2+ Blog posts
    • [ ] Contact page

  2. Verify These Features:

    • [ ] All internal links work
    • [ ] Consistent navigation
    • [ ] Semantic HTML structure
    • [ ] Accessible forms

  3. Advanced Options:

    • [ ] 404 error page
    • [ ] Sitemap.xml
    • [ ] RSS feed for blog

What's Next?

Congratulations on completing the HTML portion of your frontend journey! Tomorrow begins your CSS training where you'll learn to style this website. For advanced HTML techniques and full project examples, see the Learn Frontend Development in 180 Days ebook.

Pro Tip: Validate your entire site with:

# Install validator
npm install html-validator -g

# Check all HTML files
html-validator --quiet --file *.html **/*.html
Enter fullscreen mode Exit fullscreen mode

Top comments (0)