Building a Complete Website

Bring everything together! Build a complete, professional multi-page website from scratch applying all the HTML skills you’ve learned—semantic structure, forms, navigation, accessibility, and responsive design.

What You’ll Build

In this comprehensive tutorial, we’ll build a complete business website with:

This is your capstone project—let’s build something impressive!

Planning Your Website

Before coding, plan your structure:

Site Structure:

/
├── index.html (Homepage)
├── about.html (About Us)
├── services.html (Our Services)
├── contact.html (Contact)
├── css/
│   └── styles.css
├── js/
│   └── main.js
└── images/
    ├── logo.svg
    ├── hero.jpg
    └── ...

Key Pages:

  1. Homepage — First impression, clear value proposition
  2. About — Build trust, share story
  3. Services — Explain what you offer
  4. Contact — Easy way to reach you

Step 1: HTML Template Structure

Create a consistent base template for all pages:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Professional web development services - Modern, responsive websites built with HTML, CSS, and JavaScript">
<meta name="keywords" content="web development, HTML, CSS, responsive design, website creation">
<meta name="author" content="Your Company Name">

<!-- Open Graph / Social Media -->
<meta property="og:title" content="WebDev Pro - Professional Web Development">
<meta property="og:description" content="Creating beautiful, responsive websites for businesses">
<meta property="og:image" content="https://yoursite.com/images/og-image.jpg">
<meta property="og:url" content="https://yoursite.com/">

<title>WebDev Pro - Professional Web Development Services</title>

<link rel="stylesheet" href="css/styles.css">
<link rel="icon" type="image/svg+xml" href="images/favicon.svg">

<!-- Preconnect to speed up loading -->
<link rel="preconnect" href="https://fonts.googleapis.com">
</head>
<body>
<!-- Skip to main content for accessibility -->
<a href="#main-content" class="skip-link">Skip to main content</a>

<!-- Site Header -->
<header class="site-header">
  <div class="container">
    <nav class="main-nav" aria-label="Main navigation">
      <a href="/" class="logo">
        <img src="images/logo.svg" alt="WebDev Pro">
      </a>
      
      <button 
        class="mobile-menu-toggle" 
        aria-label="Toggle menu"
        aria-expanded="false"
        aria-controls="nav-menu">
        <span></span>
        <span></span>
        <span></span>
      </button>
      
      <ul id="nav-menu" class="nav-menu">
        <li><a href="/" aria-current="page">Home</a></li>
        <li><a href="/about.html">About</a></li>
        <li><a href="/services.html">Services</a></li>
        <li><a href="/contact.html">Contact</a></li>
      </ul>
    </nav>
  </div>
</header>

<!-- Main Content -->
<main id="main-content">
  <!-- Page-specific content goes here -->
</main>

<!-- Site Footer -->
<footer class="site-footer">
  <div class="container">
    <div class="footer-content">
      <div class="footer-section">
        <h3>WebDev Pro</h3>
        <p>Creating beautiful, responsive websites for businesses of all sizes.</p>
      </div>
      
      <div class="footer-section">
        <h3>Quick Links</h3>
        <ul>
          <li><a href="/">Home</a></li>
          <li><a href="/about.html">About</a></li>
          <li><a href="/services.html">Services</a></li>
          <li><a href="/contact.html">Contact</a></li>
        </ul>
      </div>
      
      <div class="footer-section">
        <h3>Contact</h3>
        <ul>
          <li>Email: [email protected]</li>
          <li>Phone: (555) 123-4567</li>
          <li>123 Web St, Digital City, DC 12345</li>
        </ul>
      </div>
      
      <div class="footer-section">
        <h3>Follow Us</h3>
        <ul class="social-links">
          <li><a href="#" aria-label="Twitter">Twitter</a></li>
          <li><a href="#" aria-label="LinkedIn">LinkedIn</a></li>
          <li><a href="#" aria-label="GitHub">GitHub</a></li>
        </ul>
      </div>
    </div>
    
    <div class="footer-bottom">
      <p>&copy; 2025 WebDev Pro. All rights reserved.</p>
      <ul class="legal-links">
        <li><a href="/privacy.html">Privacy Policy</a></li>
        <li><a href="/terms.html">Terms of Service</a></li>
      </ul>
    </div>
  </div>
</footer>

<script src="js/main.js"></script>
</body>
</html>

This template provides a solid foundation. Now let’s build each page!

Step 2: Homepage (index.html)

Create an engaging homepage with hero section and features:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>WebDev Pro - Professional Web Development Services</title>
<meta name="description" content="Transform your online presence with custom web development. Expert HTML, CSS, and JavaScript solutions.">
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<a href="#main-content" class="skip-link">Skip to main content</a>

<!-- Header (same as template) -->
<header class="site-header">
  <!-- Navigation here -->
</header>

<main id="main-content">
  <!-- Hero Section -->
  <section class="hero">
    <div class="container">
      <div class="hero-content">
        <h1>Build Your Digital Future</h1>
        <p class="hero-subtitle">
          Professional web development services that turn your vision 
          into reality. Modern, responsive, and user-friendly websites.
        </p>
        <div class="hero-cta">
          <a href="/contact.html" class="btn btn-primary">Get Started</a>
          <a href="/services.html" class="btn btn-secondary">Our Services</a>
        </div>
      </div>
      <div class="hero-image">
        <img 
          src="images/hero-illustration.svg" 
          alt="Web development illustration"
          width="600"
          height="500">
      </div>
    </div>
  </section>
  
  <!-- Features Section -->
  <section class="features">
    <div class="container">
      <h2>Why Choose Us</h2>
      <p class="section-subtitle">
        We deliver exceptional web solutions tailored to your needs
      </p>
      
      <div class="features-grid">
        <article class="feature-card">
          <div class="feature-icon">🎨</div>
          <h3>Modern Design</h3>
          <p>
            Beautiful, user-friendly interfaces that engage your 
            audience and drive conversions.
          </p>
        </article>
        
        <article class="feature-card">
          <div class="feature-icon">📱</div>
          <h3>Fully Responsive</h3>
          <p>
            Websites that look perfect on all devices—desktop, 
            tablet, and mobile.
          </p>
        </article>
        
        <article class="feature-card">
          <div class="feature-icon">⚡</div>
          <h3>Fast Performance</h3>
          <p>
            Lightning-fast loading times and optimized code for 
            the best user experience.
          </p>
        </article>
        
        <article class="feature-card">
          <div class="feature-icon">♿</div>
          <h3>Accessible</h3>
          <p>
            WCAG compliant websites that everyone can use, 
            including people with disabilities.
          </p>
        </article>
        
        <article class="feature-card">
          <div class="feature-icon">🔍</div>
          <h3>SEO Optimized</h3>
          <p>
            Built with SEO best practices to help your site rank 
            higher in search engines.
          </p>
        </article>
        
        <article class="feature-card">
          <div class="feature-icon">🛠️</div>
          <h3>Easy Maintenance</h3>
          <p>
            Clean, well-documented code that's easy to update 
            and maintain.
          </p>
        </article>
      </div>
    </div>
  </section>
  
  <!-- Call to Action -->
  <section class="cta-section">
    <div class="container">
      <h2>Ready to Get Started?</h2>
      <p>
        Let's discuss your project and bring your ideas to life
      </p>
      <a href="/contact.html" class="btn btn-primary btn-large">
        Contact Us Today
      </a>
    </div>
  </section>
</main>

<!-- Footer (same as template) -->
<footer class="site-footer">
  <!-- Footer content here -->
</footer>

<script src="js/main.js"></script>
</body>
</html>

Step 3: About Page (about.html)

Share your story and build credibility:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>About Us - WebDev Pro</title>
<meta name="description" content="Learn about our team of expert web developers and our mission to create exceptional digital experiences.">
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<a href="#main-content" class="skip-link">Skip to main content</a>

<header class="site-header">
  <!-- Navigation -->
</header>

<main id="main-content">
  <!-- Page Header -->
  <section class="page-header">
    <div class="container">
      <h1>About WebDev Pro</h1>
      <p>Building the web, one pixel at a time</p>
    </div>
  </section>
  
  <!-- Our Story -->
  <section class="content-section">
    <div class="container">
      <div class="two-column">
        <div class="column">
          <h2>Our Story</h2>
          <p>
            Founded in 2020, WebDev Pro started with a simple mission: 
            make professional web development accessible to businesses 
            of all sizes.
          </p>
          <p>
            What began as a two-person operation has grown into a team 
            of passionate developers, designers, and digital strategists. 
            We've helped over 100 businesses establish their online presence 
            and achieve their digital goals.
          </p>
          <p>
            Our approach combines technical excellence with creative 
            problem-solving. We don't just build websites—we create 
            digital experiences that engage users and drive results.
          </p>
        </div>
        <div class="column">
          <img 
            src="images/team-photo.jpg" 
            alt="WebDev Pro team working together"
            width="600"
            height="400">
        </div>
      </div>
    </div>
  </section>
  
  <!-- Our Values -->
  <section class="content-section bg-light">
    <div class="container">
      <h2>Our Values</h2>
      <div class="values-grid">
        <article class="value-card">
          <h3>Quality First</h3>
          <p>
            We never compromise on quality. Every line of code is 
            carefully crafted and thoroughly tested.
          </p>
        </article>
        
        <article class="value-card">
          <h3>Client-Focused</h3>
          <p>
            Your success is our success. We listen, understand, and 
            deliver solutions that exceed expectations.
          </p>
        </article>
        
        <article class="value-card">
          <h3>Innovation</h3>
          <p>
            We stay current with the latest web technologies and best 
            practices to deliver cutting-edge solutions.
          </p>
        </article>
        
        <article class="value-card">
          <h3>Transparency</h3>
          <p>
            Clear communication, honest timelines, and no surprises. 
            You're part of the process every step of the way.
          </p>
        </article>
      </div>
    </div>
  </section>
  
  <!-- Team -->
  <section class="content-section">
    <div class="container">
      <h2>Meet the Team</h2>
      <div class="team-grid">
        <article class="team-member">
          <img 
            src="images/team-member-1.jpg" 
            alt="Jane Smith, Founder & Lead Developer"
            width="300"
            height="300">
          <h3>Jane Smith</h3>
          <p class="role">Founder & Lead Developer</p>
          <p>
            10+ years building responsive websites and web applications.
          </p>
        </article>
        
        <article class="team-member">
          <img 
            src="images/team-member-2.jpg" 
            alt="John Doe, Senior Designer"
            width="300"
            height="300">
          <h3>John Doe</h3>
          <p class="role">Senior Designer</p>
          <p>
            Creates beautiful, user-centered designs that convert.
          </p>
        </article>
        
        <article class="team-member">
          <img 
            src="images/team-member-3.jpg" 
            alt="Sarah Johnson, Frontend Specialist"
            width="300"
            height="300">
          <h3>Sarah Johnson</h3>
          <p class="role">Frontend Specialist</p>
          <p>
            Expert in modern JavaScript frameworks and animation.
          </p>
        </article>
      </div>
    </div>
  </section>
</main>

<footer class="site-footer">
  <!-- Footer content -->
</footer>

<script src="js/main.js"></script>
</body>
</html>

Step 4: Services Page (services.html)

Detail what you offer:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Our Services - WebDev Pro</title>
<meta name="description" content="Web development services including responsive design, e-commerce, custom applications, and maintenance.">
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<a href="#main-content" class="skip-link">Skip to main content</a>

<header class="site-header">
  <!-- Navigation -->
</header>

<main id="main-content">
  <section class="page-header">
    <div class="container">
      <h1>Our Services</h1>
      <p>Comprehensive web development solutions for your business</p>
    </div>
  </section>
  
  <!-- Services List -->
  <section class="content-section">
    <div class="container">
      <article class="service-detail">
        <div class="service-content">
          <h2>Website Design & Development</h2>
          <p>
            Custom websites built from scratch to match your brand and 
            business goals. We create responsive, fast-loading sites 
            that work beautifully on all devices.
          </p>
          <h3>What's Included:</h3>
          <ul>
            <li>Custom responsive design</li>
            <li>Mobile-first development</li>
            <li>SEO optimization</li>
            <li>Performance optimization</li>
            <li>Cross-browser compatibility</li>
            <li>Accessibility compliance</li>
          </ul>
          <p class="service-price">Starting at $2,500</p>
          <a href="/contact.html" class="btn btn-primary">Get Quote</a>
        </div>
        <div class="service-image">
          <img 
            src="images/service-web-design.jpg" 
            alt="Website design mockup"
            width="600"
            height="400">
        </div>
      </article>
      
      <article class="service-detail reverse">
        <div class="service-content">
          <h2>E-Commerce Solutions</h2>
          <p>
            Sell online with custom e-commerce websites. Secure payment 
            processing, inventory management, and beautiful product displays.
          </p>
          <h3>What's Included:</h3>
          <ul>
            <li>Shopping cart functionality</li>
            <li>Payment gateway integration</li>
            <li>Product catalog management</li>
            <li>Order tracking system</li>
            <li>Customer accounts</li>
            <li>Mobile shopping experience</li>
          </ul>
          <p class="service-price">Starting at $5,000</p>
          <a href="/contact.html" class="btn btn-primary">Get Quote</a>
        </div>
        <div class="service-image">
          <img 
            src="images/service-ecommerce.jpg" 
            alt="E-commerce website example"
            width="600"
            height="400">
        </div>
      </article>
      
      <article class="service-detail">
        <div class="service-content">
          <h2>Website Maintenance</h2>
          <p>
            Keep your website running smoothly with our maintenance packages. 
            Regular updates, security monitoring, and technical support.
          </p>
          <h3>What's Included:</h3>
          <ul>
            <li>Regular backups</li>
            <li>Security updates</li>
            <li>Content updates</li>
            <li>Performance monitoring</li>
            <li>Technical support</li>
            <li>Monthly reports</li>
          </ul>
          <p class="service-price">Starting at $199/month</p>
          <a href="/contact.html" class="btn btn-primary">Get Quote</a>
        </div>
        <div class="service-image">
          <img 
            src="images/service-maintenance.jpg" 
            alt="Website maintenance illustration"
            width="600"
            height="400">
        </div>
      </article>
    </div>
  </section>
  
  <!-- Process -->
  <section class="content-section bg-light">
    <div class="container">
      <h2>Our Process</h2>
      <div class="process-steps">
        <article class="process-step">
          <div class="step-number">1</div>
          <h3>Discovery</h3>
          <p>We learn about your business, goals, and target audience</p>
        </article>
        
        <article class="process-step">
          <div class="step-number">2</div>
          <h3>Planning</h3>
          <p>Create detailed project plans and technical specifications</p>
        </article>
        
        <article class="process-step">
          <div class="step-number">3</div>
          <h3>Design</h3>
          <p>Develop mockups and get your approval on the visual direction</p>
        </article>
        
        <article class="process-step">
          <div class="step-number">4</div>
          <h3>Development</h3>
          <p>Build your website with clean, efficient code</p>
        </article>
        
        <article class="process-step">
          <div class="step-number">5</div>
          <h3>Testing</h3>
          <p>Thoroughly test across devices and browsers</p>
        </article>
        
        <article class="process-step">
          <div class="step-number">6</div>
          <h3>Launch</h3>
          <p>Deploy your site and provide training on how to use it</p>
        </article>
      </div>
    </div>
  </section>
</main>

<footer class="site-footer">
  <!-- Footer content -->
</footer>

<script src="js/main.js"></script>
</body>
</html>

Step 5: Contact Page (contact.html)

Create an accessible contact form:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Contact Us - WebDev Pro</title>
<meta name="description" content="Get in touch with our web development team. Free consultations and project quotes.">
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<a href="#main-content" class="skip-link">Skip to main content</a>

<header class="site-header">
  <!-- Navigation -->
</header>

<main id="main-content">
  <section class="page-header">
    <div class="container">
      <h1>Get In Touch</h1>
      <p>Let's discuss your project</p>
    </div>
  </section>
  
  <section class="content-section">
    <div class="container">
      <div class="contact-wrapper">
        <!-- Contact Information -->
        <div class="contact-info">
          <h2>Contact Information</h2>
          <p>
            Ready to start your project? Fill out the form or reach us 
            directly using the information below.
          </p>
          
          <div class="contact-details">
            <div class="contact-item">
              <h3>Email</h3>
              <p><a href="mailto:[email protected]">[email protected]</a></p>
            </div>
            
            <div class="contact-item">
              <h3>Phone</h3>
              <p><a href="tel:+15551234567">(555) 123-4567</a></p>
            </div>
            
            <div class="contact-item">
              <h3>Office</h3>
              <p>
                123 Web Street<br>
                Digital City, DC 12345<br>
                United States
              </p>
            </div>
            
            <div class="contact-item">
              <h3>Hours</h3>
              <p>
                Monday - Friday: 9am - 6pm<br>
                Saturday: 10am - 4pm<br>
                Sunday: Closed
              </p>
            </div>
          </div>
        </div>
        
        <!-- Contact Form -->
        <div class="contact-form-container">
          <h2>Send Us a Message</h2>
          <form action="/submit-form" method="POST" class="contact-form">
            <div class="form-group">
              <label for="name">
                Your Name <span class="required" aria-label="required">*</span>
              </label>
              <input 
                type="text" 
                id="name" 
                name="name"
                required
                aria-required="true"
                placeholder="John Doe">
            </div>
            
            <div class="form-group">
              <label for="email">
                Email Address <span class="required" aria-label="required">*</span>
              </label>
              <input 
                type="email" 
                id="email" 
                name="email"
                required
                aria-required="true"
                placeholder="[email protected]">
            </div>
            
            <div class="form-group">
              <label for="phone">
                Phone Number
              </label>
              <input 
                type="tel" 
                id="phone" 
                name="phone"
                placeholder="(555) 123-4567">
            </div>
            
            <div class="form-group">
              <label for="service">
                Service Interested In <span class="required" aria-label="required">*</span>
              </label>
              <select 
                id="service" 
                name="service"
                required
                aria-required="true">
                <option value="">-- Select a service --</option>
                <option value="web-design">Website Design & Development</option>
                <option value="ecommerce">E-Commerce Solutions</option>
                <option value="maintenance">Website Maintenance</option>
                <option value="consultation">Free Consultation</option>
                <option value="other">Other</option>
              </select>
            </div>
            
            <div class="form-group">
              <label for="budget">
                Budget Range
              </label>
              <select id="budget" name="budget">
                <option value="">-- Select budget --</option>
                <option value="under-5k">Under $5,000</option>
                <option value="5k-10k">$5,000 - $10,000</option>
                <option value="10k-25k">$10,000 - $25,000</option>
                <option value="over-25k">Over $25,000</option>
              </select>
            </div>
            
            <div class="form-group">
              <label for="message">
                Project Details <span class="required" aria-label="required">*</span>
              </label>
              <textarea 
                id="message" 
                name="message"
                rows="6"
                required
                aria-required="true"
                placeholder="Tell us about your project..."></textarea>
            </div>
            
            <div class="form-group">
              <label class="checkbox-label">
                <input 
                  type="checkbox" 
                  name="newsletter"
                  value="yes">
                Subscribe to our newsletter for web development tips
              </label>
            </div>
            
            <button type="submit" class="btn btn-primary btn-large">
              Send Message
            </button>
            
            <p class="form-note">
              * Required fields. We'll respond within 24 hours.
            </p>
          </form>
        </div>
      </div>
    </div>
  </section>
</main>

<footer class="site-footer">
  <!-- Footer content -->
</footer>

<script src="js/main.js"></script>
</body>
</html>

Step 6: JavaScript for Navigation

Add mobile menu functionality:

// js/main.js

// Mobile Menu Toggle
document.addEventListener('DOMContentLoaded', function() {
const menuToggle = document.querySelector('.mobile-menu-toggle');
const navMenu = document.querySelector('.nav-menu');

if (menuToggle && navMenu) {
  menuToggle.addEventListener('click', function() {
    const isExpanded = this.getAttribute('aria-expanded') === 'true';
    
    this.setAttribute('aria-expanded', !isExpanded);
    navMenu.classList.toggle('active');
    document.body.classList.toggle('menu-open');
  });
}

// Close menu when clicking outside
document.addEventListener('click', function(event) {
  if (!event.target.closest('.main-nav') && navMenu.classList.contains('active')) {
    menuToggle.setAttribute('aria-expanded', 'false');
    navMenu.classList.remove('active');
    document.body.classList.remove('menu-open');
  }
});

// Close menu on Escape key
document.addEventListener('keydown', function(event) {
  if (event.key === 'Escape' && navMenu.classList.contains('active')) {
    menuToggle.setAttribute('aria-expanded', 'false');
    navMenu.classList.remove('active');
    document.body.classList.remove('menu-open');
    menuToggle.focus();
  }
});

// Form Validation Enhancement
const forms = document.querySelectorAll('form');
forms.forEach(form => {
  form.addEventListener('submit', function(event) {
    // Check HTML5 validation
    if (!form.checkValidity()) {
      event.preventDefault();
      
      // Focus first invalid field
      const firstInvalid = form.querySelector(':invalid');
      if (firstInvalid) {
        firstInvalid.focus();
      }
    }
  });
});

// Smooth scroll for anchor links
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
  anchor.addEventListener('click', function(event) {
    const href = this.getAttribute('href');
    
    if (href !== '#' && href !== '') {
      event.preventDefault();
      const target = document.querySelector(href);
      
      if (target) {
        target.scrollIntoView({
          behavior: 'smooth',
          block: 'start'
        });
        
        // Focus target for accessibility
        target.focus();
      }
    }
  });
});
});

Common Mistakes to Avoid

Mistake 1: Inconsistent Navigation

Problematic example: Different navigation on each page

Improved example: Same navigation structure across all pages

Why: Consistency helps users navigate confidently.

Mistake 2: Missing Meta Tags

Problematic example:

<head>
  <title>Page</title>
</head>

Improved example:

<head>
  <title>Specific Page Title | Site Name</title>
  <meta name="description" content="...">
  <meta property="og:title" content="...">
</head>

Why: SEO and social sharing require proper meta tags.

Mistake 3: Non-Responsive Design

Problematic example: Fixed-width layout

Improved example: Responsive design with media queries

Why: Mobile traffic is over 50% of web traffic!

Problematic example: Not testing internal links

Improved example: Test all links before launch

Why: Broken links frustrate users and hurt SEO.

Try It Yourself

Ready to build your complete website? Try this capstone project:

Final Project: Complete Business Website

Build a 5-page website for a real or fictional business:

Requirements:

Bonus Challenges:

Deploy Your Site:

Share your completed website and get feedback!

What You Learned

Congratulations! You now know how to:

Next Steps

You’ve completed the HTML tutorial series! Here’s what to do next:

  1. Build Your Portfolio — Showcase your best projects
  2. Learn CSS — Make your sites beautiful
  3. Master JavaScript — Add advanced interactivity
  4. Study Frameworks — React, Vue, or Angular
  5. Backend Development — Node.js, Python, or PHP
  6. Keep Building — Practice makes perfect!

Congratulations on completing this comprehensive HTML journey! You’re now equipped to build professional websites. Keep learning, keep building, and most importantly—have fun creating for the web!

Want to continue learning? Explore our other tutorials or start building in our interactive HTML editor!

Back to all tutorials