Weekend Project: Build a Responsive Multi-Page Website with Modern CSS Layout Techniques and Animations

Introduction to the Weekend Project

Welcome to the Module 6 weekend project! This culminating activity will allow you to apply everything we've learned this week about modern CSS layouts, responsive design, animations, and CSS architecture. You'll build a complete multi-page website that showcases your ability to create responsive, animated, and well-structured CSS.

To guide your process, we'll use George Polya's famous 4-step problem-solving procedure:

graph TD A[George Polya's Problem-Solving Process] --> B[1. Understand the Problem] A --> C[2. Devise a Plan] A --> D[3. Execute the Plan] A --> E[4. Look Back & Refine] B --> B1[Identify requirements] B --> B2[Clarify constraints] B --> B3[Define success criteria] C --> C1[Break down into components] C --> C2[Choose design patterns] C --> C3[Plan implementation stages] D --> D1[Build incrementally] D --> D2[Test throughout] D --> D3[Document process] E --> E1[Review implementation] E --> E2[Optimize performance] E --> E3[Refine details]

This approach will ensure that you tackle this complex project systematically, rather than diving straight into code. Let's explore each step in detail as it applies to our website project.

Step 1: Understand the Problem

Project Requirements

You'll be building a responsive multi-page website for a fictional business or organization of your choice. The website should include:

Technical Requirements

Project Constraints

Success Criteria

Your project will be successful if it:

Clarifying Questions

Before moving forward, ask yourself the following questions:

Having clear answers to these questions will help you create a more focused and coherent website.

Step 2: Devise a Plan

Project Planning

Choosing a Website Theme

Select a theme for your website that you can realistically implement over a weekend. Some ideas include:

Sitemap and Page Structure

Plan the structure of your website, including:

  1. Home page: Introduction and key calls to action
  2. About page: Information about the business/organization
  3. Services/Products page: What the business offers
  4. Contact page: Contact form and information
  5. Optional additional pages: Blog, gallery, testimonials, etc.

Content Planning

For each page, outline the major content sections. For example:

Home Page Structure Header with Logo and Navigation Hero Section with Image and Call-to-Action Feature 1 Feature 2 Feature 3 Footer with Links and Copyright

Design System Planning

Plan your design system elements: 

/* CSS Variables (Custom Properties) */
:root {
  /* Colors */
  --color-primary: #3498db;
  --color-secondary: #2ecc71;
  --color-accent: #e74c3c;
  --color-text: #333333;
  --color-text-light: #666666;
  --color-background: #ffffff;
  --color-background-alt: #f5f7fa;
  
  /* Typography */
  --font-primary: 'Roboto', sans-serif;
  --font-secondary: 'Playfair Display', serif;
  --font-size-base: 16px;
  --font-size-h1: 2.5rem;
  --font-size-h2: 2rem;
  --font-size-h3: 1.5rem;
  --font-size-h4: 1.25rem;
  
  /* Spacing */
  --spacing-xs: 0.25rem;
  --spacing-sm: 0.5rem;
  --spacing-md: 1rem;
  --spacing-lg: 2rem;
  --spacing-xl: 3rem;
  
  /* Layout */
  --container-max-width: 1200px;
  --border-radius: 4px;
  
  /* Animations */
  --transition-fast: 0.2s ease;
  --transition-medium: 0.3s ease;
  --transition-slow: 0.5s ease;
}

CSS Organization

Choose and plan your CSS organization method. For example, using BEM: 

/* Component: Header */
.header {}
.header__logo {}
.header__nav {}
.header__nav-item {}
.header__nav-link {}
.header__nav-link--active {}

/* Component: Hero */
.hero {}
.hero__content {}
.hero__title {}
.hero__subtitle {}
.hero__button {}

/* Component: Feature */
.feature {}
.feature__icon {}
.feature__title {}
.feature__text {}

CSS File Structure

Plan how to organize your CSS files: 

css/
├── reset.css        /* CSS reset or normalize */
├── variables.css    /* CSS custom properties */
├── typography.css   /* Base typography styles */
├── layout.css       /* Layout components */
├── components.css   /* UI components */
├── animations.css   /* Animation definitions */
├── utilities.css    /* Utility classes */
└── pages/           /* Page-specific styles */
    ├── home.css
    ├── about.css
    ├── services.css
    └── contact.css

Responsive Breakpoints

Plan your responsive breakpoints: 

/* Mobile-first approach */
/* Base styles for mobile */

/* Tablet and up */
@media (min-width: 768px) {
  /* Tablet styles */
}

/* Desktop and up */
@media (min-width: 1024px) {
  /* Desktop styles */
}

/* Large desktop and up */
@media (min-width: 1200px) {
  /* Large desktop styles */
}

Animation Plan

Plan at least three animations:

  1. Navigation hover/active effects: Subtle transitions for interactive elements
  2. Page transition or entrance animations: Elements animating into place on page load
  3. Interactive component animation: Such as expanding cards, accordion effects, or form feedback
  4. Optional decorative animation: Background elements or subtle ambient motion

Implementation Timeline

Break the project into manageable chunks:

  1. Day 1 Morning: Set up project structure, create basic HTML for all pages
  2. Day 1 Afternoon: Implement CSS foundation (reset, variables, typography) and global components (header, footer)
  3. Day 1 Evening: Create home page layout and styles
  4. Day 2 Morning: Build remaining page layouts and styles
  5. Day 2 Afternoon: Implement responsive design adjustments and animations
  6. Day 2 Evening: Testing, refinement, and documentation

Step 3: Execute the Plan

Setting Up the Project

  1. Create the project folder structure: 
    project-folder/
├── index.html
├── about.html
├── services.html
├── contact.html
├── css/
│   ├── reset.css
│   ├── variables.css
│   ├── main.css
│   └── animations.css
└── img/
    └── (image files)
  2. Set up the basic HTML template with proper meta tags and CSS links: 
    <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>[Page Title] | [Site Name]</title>
  <meta name="description" content="[Page description]">
  
  <link rel="stylesheet" href="css/reset.css">
  <link rel="stylesheet" href="css/variables.css">
  <link rel="stylesheet" href="css/main.css">
  <link rel="stylesheet" href="css/animations.css">
  
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&family=Playfair+Display:wght@700&display=swap" rel="stylesheet">
</head>
<body>
  <header class="header">
    <!-- Header content -->
  </header>
  
  <main>
    <!-- Main content -->
  </main>
  
  <footer class="footer">
    <!-- Footer content -->
  </footer>
</body>
</html>

Implementing the CSS Foundation

Reset CSS

Start with a minimal CSS reset: 

/* reset.css */
*, *::before, *::after {
  box-sizing: border-box;
}

body, h1, h2, h3, h4, h5, h6, p, figure, blockquote, ul, ol, dl, dd {
  margin: 0;
}

ul, ol {
  padding: 0;
  list-style: none;
}

body {
  min-height: 100vh;
  line-height: 1.5;
}

img, picture {
  max-width: 100%;
  display: block;
}

input, button, textarea, select {
  font: inherit;
}

CSS Variables

Define your design tokens as CSS custom properties: 

/* variables.css */
:root {
  /* Colors */
  --color-primary: #3498db;
  --color-primary-dark: #2980b9;
  --color-secondary: #2ecc71;
  --color-secondary-dark: #27ae60;
  --color-accent: #e74c3c;
  --color-accent-dark: #c0392b;
  
  --color-text: #333333;
  --color-text-light: #666666;
  --color-text-lighter: #999999;
  
  --color-background: #ffffff;
  --color-background-alt: #f5f7fa;
  --color-border: #e1e1e1;
  
  /* Typography */
  --font-primary: 'Roboto', sans-serif;
  --font-secondary: 'Playfair Display', serif;
  
  --font-size-base: 16px;
  --font-size-sm: 0.875rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.25rem;
  
  --font-size-h1: 2.5rem;
  --font-size-h2: 2rem;
  --font-size-h3: 1.5rem;
  --font-size-h4: 1.25rem;
  
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-bold: 700;
  
  /* Spacing */
  --spacing-xs: 0.25rem;
  --spacing-sm: 0.5rem;
  --spacing-md: 1rem;
  --spacing-lg: 2rem;
  --spacing-xl: 3rem;
  --spacing-xxl: 5rem;
  
  /* Layout */
  --container-max-width: 1200px;
  --container-padding: var(--spacing-md);
  
  --border-radius-sm: 4px;
  --border-radius-md: 8px;
  --border-radius-lg: 16px;
  
  /* Animations */
  --transition-fast: 0.2s ease;
  --transition-medium: 0.3s ease;
  --transition-slow: 0.5s ease;
  
  /* Z-index levels */
  --z-index-dropdown: 100;
  --z-index-sticky: 200;
  --z-index-fixed: 300;
  --z-index-modal: 400;
}

/* Dark theme (optional) */
@media (prefers-color-scheme: dark) {
  :root {
    --color-background: #121212;
    --color-background-alt: #1e1e1e;
    --color-text: #f5f5f5;
    --color-text-light: #e0e0e0;
    --color-text-lighter: #a0a0a0;
    --color-border: #333333;
    
    /* Adjust other colors as needed for dark mode */
  }
}

Main CSS

Implement your base styles and components: 

/* main.css */

/* Base Typography */
body {
  font-family: var(--font-primary);
  font-size: var(--font-size-base);
  color: var(--color-text);
  background-color: var(--color-background);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-secondary);
  font-weight: var(--font-weight-bold);
  line-height: 1.2;
  margin-bottom: var(--spacing-md);
}

h1 {
  font-size: var(--font-size-h1);
}

h2 {
  font-size: var(--font-size-h2);
}

h3 {
  font-size: var(--font-size-h3);
}

h4 {
  font-size: var(--font-size-h4);
}

p, ul, ol {
  margin-bottom: var(--spacing-md);
}

a {
  color: var(--color-primary);
  text-decoration: none;
  transition: color var(--transition-fast);
}

a:hover, a:focus {
  color: var(--color-primary-dark);
  text-decoration: underline;
}

/* Layout Components */
.container {
  width: 100%;
  max-width: var(--container-max-width);
  margin: 0 auto;
  padding: 0 var(--container-padding);
}

.section {
  padding: var(--spacing-xl) 0;
}

.section--alt {
  background-color: var(--color-background-alt);
}

/* Grid and Flexbox Layouts */
.grid {
  display: grid;
  gap: var(--spacing-md);
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.flex {
  display: flex;
  flex-wrap: wrap;
}

.flex-center {
  justify-content: center;
  align-items: center;
}

.flex-between {
  justify-content: space-between;
  align-items: center;
}

/* Component: Header */
.header {
  padding: var(--spacing-md) 0;
  border-bottom: 1px solid var(--color-border);
  position: sticky;
  top: 0;
  background-color: var(--color-background);
  z-index: var(--z-index-sticky);
}

.header__inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header__logo {
  font-family: var(--font-secondary);
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
}

.header__nav {
  display: none;
}

@media (min-width: 768px) {
  .header__nav {
    display: flex;
    gap: var(--spacing-md);
  }
}

.header__nav-link {
  color: var(--color-text);
  font-weight: var(--font-weight-medium);
  padding: var(--spacing-xs) var(--spacing-sm);
  position: relative;
}

.header__nav-link--active,
.header__nav-link:hover {
  color: var(--color-primary);
  text-decoration: none;
}

.header__nav-link--active::after {
  content: '';
  position: absolute;
  left: var(--spacing-sm);
  right: var(--spacing-sm);
  bottom: 0;
  height: 2px;
  background-color: var(--color-primary);
}

.header__nav-toggle {
  display: block;
  cursor: pointer;
}

@media (min-width: 768px) {
  .header__nav-toggle {
    display: none;
  }
}

/* Continue with other components... */

Animations CSS

Create your animations: 

/* animations.css */

/* Keyframe Animations */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes slideInLeft {
  from {
    transform: translateX(-100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes slideInRight {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

/* Animation Utility Classes */
.animate-fade-in {
  animation: fadeIn 0.6s ease-out forwards;
}

.animate-pulse {
  animation: pulse 2s ease-in-out infinite;
}

.animate-slide-left {
  animation: slideInLeft 0.4s ease-out forwards;
}

.animate-slide-right {
  animation: slideInRight 0.4s ease-out forwards;
}

/* Staggered delays for lists */
.stagger-fade-in > * {
  opacity: 0;
  animation: fadeIn 0.5s ease-out forwards;
}

.stagger-fade-in > *:nth-child(1) { animation-delay: 0.1s; }
.stagger-fade-in > *:nth-child(2) { animation-delay: 0.2s; }
.stagger-fade-in > *:nth-child(3) { animation-delay: 0.3s; }
.stagger-fade-in > *:nth-child(4) { animation-delay: 0.4s; }
.stagger-fade-in > *:nth-child(5) { animation-delay: 0.5s; }
.stagger-fade-in > *:nth-child(6) { animation-delay: 0.6s; }

/* Interactive Animations */
.btn {
  transition: transform var(--transition-fast), 
              box-shadow var(--transition-fast);
}

.btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.btn:active {
  transform: translateY(0);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Respect user preferences */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  
  .animate-fade-in,
  .animate-pulse,
  .animate-slide-left,
  .animate-slide-right,
  .stagger-fade-in > * {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

Building the Pages

For each page, you'll follow a similar pattern:

  1. Create the HTML structure with semantic elements
  2. Apply your CSS classes according to your chosen methodology
  3. Add responsive adaptations for different screen sizes
  4. Implement animations where appropriate

Example: Home Page Hero Section

<section class="hero">
  <div class="container">
    <div class="hero__content">
      <h1 class="hero__title animate-fade-in">Creative Solutions for Your Business</h1>
      <p class="hero__subtitle animate-fade-in" style="animation-delay: 0.2s;">
        We help businesses like yours grow through innovative digital strategies.
      </p>
      <div class="hero__buttons" style="animation-delay: 0.4s;">
        <a href="services.html" class="btn btn--primary animate-fade-in">Our Services</a>
        <a href="contact.html" class="btn btn--secondary animate-fade-in">Contact Us</a>
      </div>
    </div>
    <div class="hero__image animate-slide-right">
      <img src="img/hero-image.jpg" alt="Business team collaborating">
    </div>
  </div>
</section>

Example: Services Grid with CSS Grid

<section class="section section--alt">
  <div class="container">
    <h2 class="section__title">Our Services</h2>
    <div class="services-grid">
      <div class="service-card animate-fade-in">
        <div class="service-card__icon">
          <svg>...</svg>
        </div>
        <h3 class="service-card__title">Web Design</h3>
        <p class="service-card__description">
          Beautiful, responsive websites that engage your audience.
        </p>
        <a href="#" class="service-card__link">Learn more</a>
      </div>
      
      <!-- More service cards... -->
    </div>
  </div>
</section>
/* CSS for Services Grid */
.services-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-lg);
}

@media (min-width: 768px) {
  .services-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .services-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.service-card {
  background-color: var(--color-background);
  border-radius: var(--border-radius-md);
  padding: var(--spacing-lg);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  transition: transform var(--transition-medium), 
              box-shadow var(--transition-medium);
}

.service-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
}

Example: Contact Form with Validation

<section class="section">
  <div class="container">
    <h2 class="section__title">Contact Us</h2>
    <div class="contact-grid">
      <div class="contact-info animate-fade-in">
        <h3>Get in Touch</h3>
        <p>We'd love to hear from you. Fill out the form or use the contact information below.</p>
        
        <div class="contact-info__item">
          <svg>...</svg>
          <span>123 Business Street, City, Country</span>
        </div>
        
        <div class="contact-info__item">
          <svg>...</svg>
          <span>info@example.com</span>
        </div>
        
        <div class="contact-info__item">
          <svg>...</svg>
          <span>+1 (555) 123-4567</span>
        </div>
      </div>
      
      <form class="contact-form animate-fade-in">
        <div class="form-group">
          <label for="name" class="form-label">Your Name</label>
          <input type="text" id="name" class="form-control" required>
        </div>
        
        <div class="form-group">
          <label for="email" class="form-label">Email Address</label>
          <input type="email" id="email" class="form-control" required>
        </div>
        
        <div class="form-group">
          <label for="message" class="form-label">Your Message</label>
          <textarea id="message" class="form-control" rows="5" required></textarea>
        </div>
        
        <button type="submit" class="btn btn--primary">Send Message</button>
      </form>
    </div>
  </div>
</section>
/* CSS for Contact Form */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-xl);
}

@media (min-width: 768px) {
  .contact-grid {
    grid-template-columns: 1fr 2fr;
  }
}

.contact-info__item {
  display: flex;
  align-items: center;
  margin-bottom: var(--spacing-md);
}

.contact-info__item svg {
  width: 24px;
  height: 24px;
  margin-right: var(--spacing-sm);
  color: var(--color-primary);
}

.form-group {
  margin-bottom: var(--spacing-md);
}

.form-label {
  display: block;
  margin-bottom: var(--spacing-xs);
  font-weight: var(--font-weight-medium);
}

.form-control {
  width: 100%;
  padding: var(--spacing-sm);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius-sm);
  transition: border-color var(--transition-fast), 
              box-shadow var(--transition-fast);
}

.form-control:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.1);
  outline: none;
}

.form-control.has-error {
  border-color: var(--color-accent);
}

.form-error {
  margin-top: var(--spacing-xs);
  font-size: var(--font-size-sm);
  color: var(--color-accent);
  animation: fadeIn 0.3s ease-out;
}

Testing and Iteration

Throughout the implementation process, you should:

Step 4: Look Back and Refine

Review Your Implementation

After completing the initial implementation, take time to review your work:

Optimizations

Look for opportunities to improve your implementation:

CSS Optimizations

Accessibility Improvements

Responsive Edge Cases

Documentation

Document your project for future reference:

Further Enhancements

If time permits, consider these enhancements:

Project Examples and Inspiration

Example Layout Structures

Portfolio Website Structure

Restaurant Website Structure

Animation Ideas

Design Inspiration Resources

Submission Requirements

What to Submit

  1. All HTML files: At least 4 pages (Home, About, Services/Products, Contact)
  2. All CSS files: Organized according to the structure you chose
  3. Images folder: With all images used in the project
  4. README file: Documentation explaining your project

Readme Documentation

Your README should include:

Evaluation Criteria

Your project will be evaluated based on:

Conclusion

This weekend project provides an excellent opportunity to solidify your understanding of the CSS concepts covered in Module 6. By building a complete website, you'll gain practical experience with:

Remember to follow George Polya's 4-step problem-solving process:

  1. Understand the Problem: Be clear about what you're building before you start
  2. Devise a Plan: Create a structured plan for your implementation
  3. Execute the Plan: Build your website following your plan
  4. Look Back: Review and refine your work to improve it

This systematic approach will help you create a more cohesive, well-structured website and will serve you well in your future web development career.

Good luck with your project, and enjoy the process of bringing your website to life!