Lesson 15: Complete Website Project - Putting It All Together
What You'll Build
A complete, professional, responsive website using only HTML and CSS with:
- Sticky navigation
- Hero section with call-to-action
- Features section
- Services section with cards
- About section
- Contact form
- Footer
- Fully responsive design
- Smooth hover effects and transitions
Why This Matters
This project combines everything you've learned in this course - HTML structure, CSS styling, Flexbox layouts, and responsive design. Building a complete website from scratch solidifies your skills and gives you a portfolio piece to show potential clients or employers!
Note: This project uses only HTML and CSS - no JavaScript needed! Everything works with pure CSS.
Part 1: Project Planning
Sections We'll Build
- Navigation - Sticky header with responsive menu
- Hero - Eye-catching landing section
- Features - Highlight key benefits
- Services - What you offer
- About - Tell your story
- Contact - Get in touch form
- Footer - Links and info
Folder Structure
final-project/
├── index.html
├── css/
│ └── styles.css
└── images/
└── (your images)Part 2: HTML Structure
index.html:<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>WebDesign Studio - Professional Web Solutions</title>
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<!-- NAVIGATION -->
<header class="header" id="header">
<div class="logo">
<span class="logo-icon">🎨</span>
<span class="logo-text">WebDesign Studio</span>
</div>
<nav class="nav">
<a href="#home" class="nav-link">Home</a>
<a href="#features" class="nav-link">Features</a>
<a href="#services" class="nav-link">Services</a>
<a href="#about" class="nav-link">About</a>
<a href="#contact" class="nav-link">Contact</a>
</nav>
<a href="#contact" class="cta-button">Get Started</a>
</header>
<!-- HERO SECTION -->
<section class="hero" id="home">
<div class="hero-content">
<h1 class="hero-title">Build Your Dream Website</h1>
<p class="hero-subtitle">
Professional, responsive, and beautiful websites tailored to your needs
</p>
<div class="hero-buttons">
<a href="#services" class="btn btn-primary">Our Services</a>
<a href="#about" class="btn btn-secondary">Learn More</a>
</div>
</div>
</section>
<!-- FEATURES SECTION -->
<section class="features" id="features">
<div class="container">
<h2 class="section-title">Why Choose Us</h2>
<p class="section-subtitle">We deliver excellence in every project</p>
<div class="features-grid">
<div class="feature-card">
<div class="feature-icon">⚡</div>
<h3>Lightning Fast</h3>
<p>Optimized performance for the best user experience</p>
</div>
<div class="feature-card">
<div class="feature-icon">📱</div>
<h3>Fully Responsive</h3>
<p>Perfect on all devices, from mobile to desktop</p>
</div>
<div class="feature-card">
<div class="feature-icon">🎨</div>
<h3>Modern Design</h3>
<p>Beautiful, contemporary designs that stand out</p>
</div>
<div class="feature-card">
<div class="feature-icon">🔒</div>
<h3>Secure</h3>
<p>Built with security best practices in mind</p>
</div>
<div class="feature-card">
<div class="feature-icon">♿</div>
<h3>Accessible</h3>
<p>Inclusive design for everyone to use</p>
</div>
<div class="feature-card">
<div class="feature-icon">🚀</div>
<h3>SEO Optimized</h3>
<p>Built to rank well in search engines</p>
</div>
</div>
</div>
</section>
<!-- SERVICES SECTION -->
<section class="services" id="services">
<div class="container">
<h2 class="section-title">Our Services</h2>
<p class="section-subtitle">Everything you need to succeed online</p>
<div class="services-grid">
<div class="service-card">
<div class="service-icon">💻</div>
<h3>Web Design</h3>
<p>Custom designs that reflect your brand and engage your audience</p>
<ul class="service-features">
<li>Custom layouts</li>
<li>Brand integration</li>
<li>User experience focus</li>
</ul>
<a href="#contact" class="service-link">Learn More →</a>
</div>
<div class="service-card featured">
<div class="badge">Popular</div>
<div class="service-icon">🛠️</div>
<h3>Web Development</h3>
<p>Robust, scalable websites built with modern technologies</p>
<ul class="service-features">
<li>Clean code</li>
<li>Fast loading</li>
<li>Responsive design</li>
</ul>
<a href="#contact" class="service-link">Learn More →</a>
</div>
<div class="service-card">
<div class="service-icon">📈</div>
<h3>SEO & Marketing</h3>
<p>Get found online and attract more customers</p>
<ul class="service-features">
<li>Keyword research</li>
<li>On-page SEO</li>
<li>Content strategy</li>
</ul>
<a href="#contact" class="service-link">Learn More →</a>
</div>
</div>
</div>
</section>
<!-- ABOUT SECTION -->
<section class="about" id="about">
<div class="container">
<div class="about-content">
<div class="about-text">
<h2>About Our Studio</h2>
<p>
We're a team of passionate web designers and developers dedicated
to creating exceptional digital experiences. With over 10 years of
experience, we've helped hundreds of businesses establish their
online presence.
</p>
<p>
Our approach combines creativity with technical expertise to deliver
websites that not only look great but also perform exceptionally well.
</p>
<div class="about-stats">
<div class="stat">
<div class="stat-number">500+</div>
<div class="stat-label">Projects Completed</div>
</div>
<div class="stat">
<div class="stat-number">98%</div>
<div class="stat-label">Client Satisfaction</div>
</div>
<div class="stat">
<div class="stat-number">10+</div>
<div class="stat-label">Years Experience</div>
</div>
</div>
</div>
<div class="about-image">
<div class="image-placeholder">
👥<br>Our Team
</div>
</div>
</div>
</div>
</section>
<!-- CONTACT SECTION -->
<section class="contact" id="contact">
<div class="container">
<h2 class="section-title">Get In Touch</h2>
<p class="section-subtitle">Let's discuss your project</p>
<div class="contact-content">
<div class="contact-info">
<div class="contact-item">
<div class="contact-icon">📧</div>
<div>
<h4>Email</h4>
<p>hello@webdesignstudio.com</p>
</div>
</div>
<div class="contact-item">
<div class="contact-icon">📞</div>
<div>
<h4>Phone</h4>
<p>+1 (555) 123-4567</p>
</div>
</div>
<div class="contact-item">
<div class="contact-icon">📍</div>
<div>
<h4>Location</h4>
<p>123 Design Street<br>San Francisco, CA 94102</p>
</div>
</div>
</div>
<form class="contact-form">
<div class="form-group">
<input type="text" id="name" placeholder="Your Name" required>
</div>
<div class="form-group">
<input type="email" id="email" placeholder="Your Email" required>
</div>
<div class="form-group">
<input type="text" id="subject" placeholder="Subject" required>
</div>
<div class="form-group">
<textarea id="message" rows="5" placeholder="Your Message" required></textarea>
</div>
<button type="submit" class="btn btn-primary btn-block">Send Message</button>
</form>
</div>
</div>
</section>
<!-- FOOTER -->
<footer class="footer">
<div class="container">
<div class="footer-content">
<div class="footer-section">
<h3>WebDesign Studio</h3>
<p>Creating beautiful websites that drive results.</p>
</div>
<div class="footer-section">
<h4>Quick Links</h4>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#features">Features</a></li>
<li><a href="#services">Services</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div>
<div class="footer-section">
<h4>Services</h4>
<ul>
<li><a href="#services">Web Design</a></li>
<li><a href="#services">Web Development</a></li>
<li><a href="#services">SEO</a></li>
<li><a href="#services">Marketing</a></li>
</ul>
</div>
<div class="footer-section">
<h4>Follow Us</h4>
<div class="social-links">
<a href="#" aria-label="Facebook">📘</a>
<a href="#" aria-label="Twitter">🐦</a>
<a href="#" aria-label="Instagram">📷</a>
<a href="#" aria-label="LinkedIn">💼</a>
</div>
</div>
</div>
<div class="footer-bottom">
<p>© 2024 WebDesign Studio. All rights reserved.</p>
</div>
</div>
</footer>
</body>
</html>Part 3: CSS (Complete Styling)
css/styles.css:/* ============================================
RESET & BASE STYLES
============================================ */
- {
margin: 0;
padding: 0;
box-sizing: border-box;
}
:root {
--primary-color: #667eea;
--secondary-color: #764ba2;
--accent-color: #f093fb;
--text-dark: #2c3e50;
--text-light: #666;
--bg-light: #f8f9fa;
--white: #ffffff;
--shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
--shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.15);
}
html {
scroll-behavior: smooth;
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
line-height: 1.6;
color: var(--text-dark);
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
/* ============================================
HEADER & NAVIGATION
============================================ */
.header {
position: sticky;
top: 0;
display: flex;
justify-content: space-between;
align-items: center;
padding: 15px 30px;
background-color: var(--white);
box-shadow: var(--shadow);
z-index: 1000;
transition: all 0.3s;
}
.header.scrolled {
padding: 10px 30px;
box-shadow: var(--shadow-lg);
}
.logo {
display: flex;
align-items: center;
gap: 10px;
font-size: 24px;
font-weight: bold;
color: var(--text-dark);
z-index: 1001;
}
.logo-icon {
font-size: 32px;
}
.nav {
display: flex;
align-items: center;
gap: 5px;
}
.nav-link {
color: var(--text-dark);
text-decoration: none;
padding: 10px 18px;
font-weight: 500;
transition: all 0.3s;
border-radius: 6px;
}
.nav-link:hover {
background-color: var(--bg-light);
color: var(--primary-color);
}
.cta-button {
padding: 10px 25px;
background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
color: var(--white);
text-decoration: none;
border-radius: 25px;
font-weight: 600;
transition: all 0.3s;
white-space: nowrap;
}
.cta-button:hover {
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
}
/* ============================================
HERO SECTION
============================================ */
.hero {
display: flex;
align-items: center;
justify-content: center;
min-height: 600px;
padding: 80px 20px;
background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
color: var(--white);
text-align: center;
}
.hero-title {
font-size: clamp(2.5rem, 6vw, 4rem);
margin-bottom: 20px;
font-weight: 700;
line-height: 1.2;
}
.hero-subtitle {
font-size: clamp(1.1rem, 2.5vw, 1.5rem);
margin-bottom: 40px;
opacity: 0.95;
max-width: 600px;
margin-left: auto;
margin-right: auto;
}
.hero-buttons {
display: flex;
gap: 20px;
justify-content: center;
flex-wrap: wrap;
}
.btn {
padding: 15px 35px;
text-decoration: none;
border-radius: 30px;
font-weight: 600;
font-size: 16px;
transition: all 0.3s;
display: inline-block;
}
.btn-primary {
background-color: var(--white);
color: var(--primary-color);
}
.btn-primary:hover {
transform: translateY(-3px);
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
}
.btn-secondary {
background-color: transparent;
color: var(--white);
border: 2px solid var(--white);
}
.btn-secondary:hover {
background-color: var(--white);
color: var(--primary-color);
}
/* ============================================
SECTION STYLES
============================================ */
section {
padding: 80px 0;
}
.section-title {
font-size: clamp(2rem, 4vw, 2.5rem);
text-align: center;
margin-bottom: 15px;
color: var(--text-dark);
}
.section-subtitle {
text-align: center;
color: var(--text-light);
font-size: 1.1rem;
margin-bottom: 50px;
}
/* ============================================
FEATURES SECTION
============================================ */
.features {
background-color: var(--bg-light);
}
.features-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 30px;
}
.feature-card {
background-color: var(--white);
padding: 40px 30px;
border-radius: 12px;
text-align: center;
box-shadow: var(--shadow);
transition: all 0.3s;
}
.feature-card:hover {
transform: translateY(-5px);
box-shadow: var(--shadow-lg);
}
.feature-icon {
font-size: 60px;
margin-bottom: 20px;
}
.feature-card h3 {
font-size: 1.5rem;
margin-bottom: 15px;
color: var(--text-dark);
}
.feature-card p {
color: var(--text-light);
line-height: 1.7;
}
/* ============================================
SERVICES SECTION
============================================ */
.services-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 30px;
}
.service-card {
position: relative;
background-color: var(--white);
padding: 40px;
border-radius: 12px;
box-shadow: var(--shadow);
transition: all 0.3s;
}
.service-card:hover {
transform: translateY(-5px);
box-shadow: var(--shadow-lg);
}
.service-card.featured {
border: 3px solid var(--primary-color);
}
.badge {
position: absolute;
top: -15px;
right: 20px;
background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
color: var(--white);
padding: 6px 15px;
border-radius: 20px;
font-size: 0.85rem;
font-weight: 600;
}
.service-icon {
font-size: 50px;
margin-bottom: 20px;
}
.service-card h3 {
font-size: 1.8rem;
margin-bottom: 15px;
color: var(--text-dark);
}
.service-card > p {
color: var(--text-light);
margin-bottom: 20px;
}
.service-features {
list-style: none;
margin-bottom: 25px;
}
.service-features li {
padding: 8px 0;
color: var(--text-light);
}
.service-features li::before {
content: '✓ ';
color: var(--primary-color);
font-weight: bold;
margin-right: 8px;
}
.service-link {
color: var(--primary-color);
text-decoration: none;
font-weight: 600;
transition: all 0.3s;
}
.service-link:hover {
color: var(--secondary-color);
}
/* ============================================
ABOUT SECTION
============================================ */
.about {
background-color: var(--bg-light);
}
.about-content {
display: flex;
gap: 60px;
align-items: center;
}
.about-text {
flex: 1;
}
.about-text h2 {
font-size: 2.5rem;
margin-bottom: 25px;
color: var(--text-dark);
}
.about-text p {
font-size: 1.1rem;
color: var(--text-light);
margin-bottom: 20px;
line-height: 1.8;
}
.about-stats {
display: flex;
gap: 40px;
margin-top: 40px;
}
.stat {
text-align: center;
}
.stat-number {
font-size: 3rem;
font-weight: 700;
color: var(--primary-color);
line-height: 1;
margin-bottom: 10px;
}
.stat-label {
color: var(--text-light);
font-size: 0.95rem;
}
.about-image {
flex: 1;
}
.image-placeholder {
aspect-ratio: 1;
background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
color: var(--white);
font-size: 4rem;
text-align: center;
line-height: 1.3;
}
/* ============================================
CONTACT SECTION
============================================ */
.contact-content {
display: flex;
gap: 60px;
max-width: 1000px;
margin: 0 auto;
}
.contact-info {
flex: 1;
}
.contact-item {
display: flex;
gap: 20px;
margin-bottom: 30px;
}
.contact-icon {
font-size: 40px;
flex-shrink: 0;
}
.contact-item h4 {
font-size: 1.2rem;
margin-bottom: 8px;
color: var(--text-dark);
}
.contact-item p {
color: var(--text-light);
line-height: 1.6;
}
.contact-form {
flex: 1;
}
.form-group {
margin-bottom: 20px;
}
.form-group input,
.form-group textarea {
width: 100%;
padding: 15px;
border: 2px solid #e0e0e0;
border-radius: 8px;
font-size: 16px;
font-family: inherit;
transition: all 0.3s;
}
.form-group input:focus,
.form-group textarea:focus {
outline: none;
border-color: var(--primary-color);
}
.btn-block {
width: 100%;
border: none;
cursor: pointer;
}
/* ============================================
FOOTER
============================================ */
.footer {
background-color: var(--text-dark);
color: var(--white);
padding: 60px 0 20px;
}
.footer-content {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 40px;
margin-bottom: 40px;
}
.footer-section h3 {
font-size: 1.5rem;
margin-bottom: 15px;
}
.footer-section h4 {
font-size: 1.2rem;
margin-bottom: 15px;
color: var(--white);
}
.footer-section p {
color: rgba(255, 255, 255, 0.7);
line-height: 1.7;
}
.footer-section ul {
list-style: none;
}
.footer-section ul li {
margin-bottom: 10px;
}
.footer-section ul li a {
color: rgba(255, 255, 255, 0.7);
text-decoration: none;
transition: all 0.3s;
}
.footer-section ul li a:hover {
color: var(--white);
padding-left: 5px;
}
.social-links {
display: flex;
gap: 15px;
}
.social-links a {
font-size: 30px;
transition: all 0.3s;
}
.social-links a:hover {
transform: translateY(-3px);
}
.footer-bottom {
text-align: center;
padding-top: 30px;
border-top: 1px solid rgba(255, 255, 255, 0.1);
color: rgba(255, 255, 255, 0.7);
}
/* ============================================
RESPONSIVE DESIGN
============================================ */
@media (max-width: 768px) {
.header {
flex-wrap: wrap;
gap: 15px;
}
.nav {
order: 3;
width: 100%;
flex-direction: column;
gap: 0;
background-color: var(--bg-light);
border-radius: 8px;
overflow: hidden;
}
.nav-link {
width: 100%;
padding: 15px;
text-align: center;
border-bottom: 1px solid #e0e0e0;
}
.nav-link:last-child {
border-bottom: none;
}
.cta-button {
order: 2;
}
.about-content {
flex-direction: column;
}
.about-stats {
flex-direction: column;
gap: 25px;
}
.contact-content {
flex-direction: column;
gap: 40px;
}
.footer-content {
grid-template-columns: 1fr;
text-align: center;
}
.social-links {
justify-content: center;
}
}Part 4: Understanding the CSS
Let's break down some key CSS concepts used in this project:
1. CSS Custom Properties (Variables)
:root {
--primary-color: #667eea;
--secondary-color: #764ba2;
--text-dark: #2c3e50;
}- Easy to change colors throughout the entire site
- Maintain consistency
- One place to update theme colors
2. Flexbox for Layouts
.header {
display: flex;
justify-content: space-between;
align-items: center;
}display: flex- Makes children flexiblejustify-content: space-between- Spreads items apartalign-items: center- Centers items vertically
3. CSS Grid for Card Layouts
.features-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 30px;
}- Creates responsive grid
auto-fit- Automatically adjusts columnsminmax(280px, 1fr)- Cards minimum 280px, grow to fill spacegap: 30px- Space between cards
4. Smooth Transitions
.nav-link {
transition: all 0.3s;
}- Smoothly animates all property changes
- Takes 0.3 seconds to complete
- Makes hover effects smooth
5. Responsive Design
@media (max-width: 768px) {
.nav {
flex-direction: column;
}
}- Applies styles only on screens 768px or smaller
- Stacks navigation vertically on mobile
- Makes website mobile-friendly
6. Hover Effects
.feature-card:hover {
transform: translateY(-5px);
box-shadow: var(--shadow-lg);
}- Lifts card up 5px when hovering
- Adds larger shadow
- Creates interactive feel
Part 5: Testing Your Website
Test Checklist
- ✅ All links work (use anchor links like #home, #services, etc.)
- ✅ Navigation is responsive
- ✅ Navigation displays properly on mobile
- ✅ All sections are visible and styled correctly
- ✅ Form inputs work
- ✅ Hover effects work on cards and buttons
- ✅ Website works on mobile, tablet, and desktop
- ✅ Colors and spacing look good
- ✅ Text is readable
Test at These Widths
- Mobile: 375px, 414px
- Tablet: 768px, 1024px
- Desktop: 1280px, 1920px
Congratulations! 🎉
You've built a complete, professional, responsive website!
What You've Accomplished
- ✅ Created a 7-section professional website
- ✅ Implemented responsive navigation
- ✅ Used Flexbox and Grid for layouts
- ✅ Made it fully responsive for all devices
- ✅ Added smooth hover effects and transitions
- ✅ Implemented modern CSS techniques
- ✅ Created a beautiful user experience with pure HTML and CSS
Next Steps
- Customize it - Change colors, text, and images to make it yours
- Add more pages - Create About, Services detail pages
- Learn JavaScript - Add more interactivity
- Deploy it - Put it online (GitHub Pages, Netlify, Vercel)
- Keep learning - Study CSS Grid, Animations, JavaScript frameworks
Resources for Continued Learning
- MDN Web Docs - Comprehensive web development documentation
- CSS-Tricks - Tips, tricks, and tutorials
- freeCodeCamp - Free coding lessons
- Frontend Mentor - Practice projects
- Codepen - See and create code examples
Final Thoughts
You've completed the beginner HTML/CSS course! You now have the skills to:
- Build structured HTML documents
- Style websites with CSS
- Create responsive layouts with Flexbox
- Build navigation bars and forms
- Make mobile-friendly websites
- Put together complete web projects
Keep practicing, keep building, and never stop learning! 🚀