Complete a 5-page Static Website

Duration: 180 minutes

Module 1: Mini-Project

Learning Objectives

Master the concepts in this lesson
Apply knowledge through practice
Build practical skills
Prepare for next topics

Introduction

Congratulations on reaching the final project of Module 1! In this project, you'll apply everything you've learned about HTML, CSS, JavaScript, and basic PHP to create a complete, functional static website. This is your opportunity to demonstrate your understanding of web development fundamentals and create a portfolio piece you can be proud of.

Objective: Create a 5-page static website with consistent navigation, styling, forms, and interactive elements.

Due Date: End of Module 1 (Session 10)

Weight: 40% of Module 1 grade

Polya's Problem Solving Approach for Website Development

Step 1: Understand the Problem

Before diving into code, let's clarify the project requirements:

Create a 5-page static website on a topic of your choice
Implement consistent navigation across all pages
Apply responsive styling using CSS
Include at least one form with validation
Add interactivity using JavaScript
Use basic PHP includes for header and footer

Input: Your knowledge of HTML, CSS, JavaScript, and basic PHP

Output: A 5-page static website that showcases your skills

Step 2: Devise a Plan

Let's break down the project into manageable steps:

Choose a website topic and determine the purpose of your site
Plan your site structure (sitemap) and sketch page layouts (wireframes)
Set up your project directory structure
Create the basic HTML structure for all pages
Implement PHP includes for header and footer
Develop CSS styling for a consistent look and responsive design
Add navigation menu that works across all pages
Create and validate forms
Implement JavaScript for interactivity and form validation
Test your website across different devices and browsers
Debug and refine

Step 3: Execute the Plan

Now let's follow our plan step by step:

Planning Your Website

Choose a Topic

Select a topic that interests you and allows you to showcase your skills. Some ideas include:

Personal portfolio site
Small business website (restaurant, shop, service business)
Hobby or interest showcase (photography, cooking, travel)
Event or organization website
Educational resource on a topic you're knowledgeable about

Note: Choose something that you can realistically complete within the project timeframe, but that still allows you to demonstrate your skills.

Define Your Pages

A typical 5-page website might include:

Home - Welcome page with site overview and main navigation
About - Information about you, your business, or your topic
Services/Products/Gallery - Showcase what you offer
Blog/Articles - Content related to your topic
Contact - Contact form and information

Create Wireframes

Before coding, sketch layouts for each page. This helps you visualize the structure and ensures consistency across your site. Here's a simple example of a home page wireframe:

Tools for wireframing: You can use pen and paper, or digital tools like Figma, Adobe XD, or even PowerPoint/Google Slides to create wireframes.

Setting Up Your Project

Project Directory Structure

Organize your files with a clear directory structure:

my_website/
├── index.php          # Home page
├── about.php          # About page
├── services.php       # Services/Products page
├── blog.php           # Blog/Articles page
├── contact.php        # Contact page
├── includes/
│   ├── header.php     # Header include file
│   └── footer.php     # Footer include file
├── css/
│   ├── style.css      # Main stylesheet
│   └── responsive.css # Responsive design rules
├── js/
│   ├── main.js        # Main JavaScript file
│   └── validation.js  # Form validation script
└── images/
    ├── logo.png
    └── [other images]

Setting Up Your Local Server

Remember to use your local server environment:

Docker: As recommended in Module 1, Session 1
XAMPP/MAMP: As introduced in Module 1, Session 9

Make sure your project folder is in the correct location for your server to access it:

XAMPP: C:\xampp\htdocs\my_website\ (Windows) or /Applications/XAMPP/htdocs/my_website/ (Mac)
MAMP: /Applications/MAMP/htdocs/my_website/ (Mac) or MAMP installation directory (Windows)
Docker: The directory you mapped to your container's web root

Creating Your Website Pages

PHP Includes for Header and Footer

Let's start by creating the PHP include files for your header and footer:

includes/header.php

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> - Your Site Name</title>
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/responsive.css">
    <!-- You can add Google Fonts link here -->
    <!-- Example: <link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&display=swap" rel="stylesheet"> -->
</head>
<body>
    <header>
        <div class="container">
            <div class="logo">
                <a href="index.php">
                    <img src="images/logo.png" alt="Site Logo">
                </a>
            </div>
            <nav>
                <ul>
                    <li><a href="index.php" >Home</a></li>
                    <li><a href="about.php" >About</a></li>
                    <li><a href="services.php" >Services</a></li>
                    <li><a href="blog.php" >Blog</a></li>
                    <li><a href="contact.php" >Contact</a></li>
                </ul>
                <div class="mobile-menu-toggle">
                    <span></span>
                    <span></span>
                    <span></span>
                </div>
            </nav>
        </div>
    </header>
    <main>

includes/footer.php

    </main>
    <footer>
        <div class="container">
            <div class="footer-content">
                <div class="footer-section about">
                    <h3>About Us</h3>
                    <p>Brief description of your website or business.</p>
                </div>
                <div class="footer-section links">
                    <h3>Quick Links</h3>
                    <ul>
                        <li><a href="index.php">Home</a></li>
                        <li><a href="about.php">About</a></li>
                        <li><a href="services.php">Services</a></li>
                        <li><a href="blog.php">Blog</a></li>
                        <li><a href="contact.php">Contact</a></li>
                    </ul>
                </div>
                <div class="footer-section contact">
                    <h3>Contact Info</h3>
                    <p><i class="fas fa-map-marker-alt"></i> 123 Street Name, City, Country</p>
                    <p><i class="fas fa-phone"></i> (123) 456-7890</p>
                    <p><i class="fas fa-envelope"></i> info@yourwebsite.com</p>
                </div>
            </div>
            <div class="footer-bottom">
                <p>©  Your Website Name. All Rights Reserved.</p>
            </div>
        </div>
    </footer>
    
    <script src="js/main.js"></script>
    <!-- You can add additional script tags here as needed -->
</body>
</html>

Key Elements in the Header and Footer:

PHP Variables: $page_title and $current_page for dynamic content
Navigation Menu: With active page highlighting
Mobile Menu Toggle: For responsive design
Dynamic Year: <?php echo date('Y'); ?> in the copyright

Creating Individual Pages

Now let's set up the structure for each page, starting with the home page:

index.php (Home Page)

<?php
// Page-specific variables
$page_title = "Home";
$current_page = "home";

// Include header
include('includes/header.php');
?>

<!-- Hero Section -->
<section class="hero">
    <div class="container">
        <h1>Welcome to Your Website</h1>
        <p>Your compelling tagline or brief description goes here.</p>
        <a href="contact.php" class="btn btn-primary">Get Started</a>
    </div>
</section>

<!-- Features Section -->
<section class="features">
    <div class="container">
        <h2>Our Features</h2>
        <div class="feature-grid">
            <div class="feature-item">
                <img src="images/feature1.png" alt="Feature 1">
                <h3>Feature 1</h3>
                <p>Description of feature 1 and its benefits.</p>
            </div>
            <div class="feature-item">
                <img src="images/feature2.png" alt="Feature 2">
                <h3>Feature 2</h3>
                <p>Description of feature 2 and its benefits.</p>
            </div>
            <div class="feature-item">
                <img src="images/feature3.png" alt="Feature 3">
                <h3>Feature 3</h3>
                <p>Description of feature 3 and its benefits.</p>
            </div>
        </div>
    </div>
</section>

<!-- Testimonials or Call to Action -->
<section class="cta-section">
    <div class="container">
        <h2>Ready to Get Started?</h2>
        <p>Join our satisfied customers and experience the difference.</p>
        <a href="contact.php" class="btn btn-secondary">Contact Us Today</a>
    </div>
</section>

<?php
// Include footer
include('includes/footer.php');
?>

Follow a similar pattern for the other pages. Here's a template for the about page:

about.php

<?php
// Page-specific variables
$page_title = "About Us";
$current_page = "about";

// Include header
include('includes/header.php');
?>

<section class="page-header">
    <div class="container">
        <h1>About Us</h1>
    </div>
</section>

<section class="about-content">
    <div class="container">
        <div class="about-grid">
            <div class="about-text">
                <h2>Our Story</h2>
                <p>Share your story, mission, and values here.</p>
                <p>Add more paragraphs as needed to tell your complete story.</p>
            </div>
            <div class="about-image">
                <img src="images/about-image.jpg" alt="About Us">
            </div>
        </div>
    </div>
</section>

<section class="team-section">
    <div class="container">
        <h2>Our Team</h2>
        <div class="team-grid">
            <div class="team-member">
                <img src="images/team1.jpg" alt="Team Member 1">
                <h3>Name</h3>
                <p>Position</p>
            </div>
            <div class="team-member">
                <img src="images/team2.jpg" alt="Team Member 2">
                <h3>Name</h3>
                <p>Position</p>
            </div>
            <div class="team-member">
                <img src="images/team3.jpg" alt="Team Member 3">
                <h3>Name</h3>
                <p>Position</p>
            </div>
        </div>
    </div>
</section>

<?php
// Include footer
include('includes/footer.php');
?>

Create other pages: Follow the same pattern to create services.php, blog.php, and contact.php, customizing the content for each page's purpose.

Creating the Contact Form

For the contact page, let's create a form with validation. Here's how to structure your contact.php page:

contact.php

<?php
// Page-specific variables
$page_title = "Contact Us";
$current_page = "contact";

// Initialize variables for form
$name = $email = $subject = $message = "";
$name_error = $email_error = $subject_error = $message_error = "";
$form_valid = false;
$form_submitted = false;

// Form processing
if ($_SERVER["REQUEST_METHOD"] == "POST") {
    $form_submitted = true;
    
    // Validate name
    if (empty($_POST["name"])) {
        $name_error = "Name is required";
    } else {
        $name = test_input($_POST["name"]);
        if (!preg_match("/^[a-zA-Z ]*$/", $name)) {
            $name_error = "Only letters and white space allowed";
        }
    }
    
    // Validate email
    if (empty($_POST["email"])) {
        $email_error = "Email is required";
    } else {
        $email = test_input($_POST["email"]);
        if (!filter_var($email, FILTER_VALIDATE_EMAIL)) {
            $email_error = "Invalid email format";
        }
    }
    
    // Validate subject
    if (empty($_POST["subject"])) {
        $subject_error = "Subject is required";
    } else {
        $subject = test_input($_POST["subject"]);
    }
    
    // Validate message
    if (empty($_POST["message"])) {
        $message_error = "Message is required";
    } else {
        $message = test_input($_POST["message"]);
    }
    
    // Check if form is valid
    if (empty($name_error) && empty($email_error) && empty($subject_error) && empty($message_error)) {
        $form_valid = true;
        // Here you would typically process the form data (e.g., send email)
        // For this project, we'll just display a success message
    }
}

// Helper function to sanitize input
function test_input($data) {
    $data = trim($data);
    $data = stripslashes($data);
    $data = htmlspecialchars($data);
    return $data;
}

// Include header
include('includes/header.php');
?>

<section class="page-header">
    <div class="container">
        <h1>Contact Us</h1>
    </div>
</section>

<section class="contact-content">
    <div class="container">
        <div class="contact-grid">
            <div class="contact-info">
                <h2>Get in Touch</h2>
                <p>We'd love to hear from you. Contact us using the form or the information below.</p>
                
                <div class="contact-details">
                    <div class="contact-item">
                        <i class="fas fa-map-marker-alt"></i>
                        <div>
                            <h3>Address</h3>
                            <p>123 Street Name, City, Country</p>
                        </div>
                    </div>
                    
                    <div class="contact-item">
                        <i class="fas fa-phone"></i>
                        <div>
                            <h3>Phone</h3>
                            <p>(123) 456-7890</p>
                        </div>
                    </div>
                    
                    <div class="contact-item">
                        <i class="fas fa-envelope"></i>
                        <div>
                            <h3>Email</h3>
                            <p>info@yourwebsite.com</p>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="contact-form">
                <?php if ($form_submitted && $form_valid): ?>
                    <div class="success-message">
                        <h3>Thank You!</h3>
                        <p>Your message has been sent successfully. We'll get back to you soon.</p>
                    </div>
                <?php else: ?>
                    <form id="contactForm" method="post" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]); ?>">
                        <div class="form-group">
                            <label for="name">Name</label>
                            <input type="text" id="name" name="name" value="<?php echo $name; ?>">
                            <span class="error"><?php echo $name_error; ?></span>
                        </div>
                        
                        <div class="form-group">
                            <label for="email">Email</label>
                            <input type="email" id="email" name="email" value="<?php echo $email; ?>">
                            <span class="error"><?php echo $email_error; ?></span>
                        </div>
                        
                        <div class="form-group">
                            <label for="subject">Subject</label>
                            <input type="text" id="subject" name="subject" value="<?php echo $subject; ?>">
                            <span class="error"><?php echo $subject_error; ?></span>
                        </div>
                        
                        <div class="form-group">
                            <label for="message">Message</label>
                            <textarea id="message" name="message" rows="5"><?php echo $message; ?></textarea>
                            <span class="error"><?php echo $message_error; ?></span>
                        </div>
                        
                        <button type="submit" class="btn btn-primary">Send Message</button>
                    </form>
                <?php endif; ?>
            </div>
        </div>
    </div>
</section>

<?php
// Include footer
include('includes/footer.php');
?>

Styling Your Website

CSS Structure

Let's create the main stylesheet. Here's a basic structure for your css/style.css file:

/* Reset and Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Open Sans', Arial, sans-serif;
    line-height: 1.6;
    color: #333;
}

.container {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Typography */
h1, h2, h3, h4, h5, h6 {
    margin-bottom: 15px;
    font-weight: 700;
    line-height: 1.2;
}

h1 {
    font-size: 2.5rem;
}

h2 {
    font-size: 2rem;
}

h3 {
    font-size: 1.5rem;
}

p {
    margin-bottom: 20px;
}

a {
    text-decoration: none;
    color: #0066cc;
    transition: color 0.3s;
}

a:hover {
    color: #004080;
}

/* Buttons */
.btn {
    display: inline-block;
    padding: 12px 30px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-weight: 600;
    text-align: center;
    transition: all 0.3s;
}

.btn-primary {
    background-color: #0066cc;
    color: white;
}

.btn-primary:hover {
    background-color: #004080;
    color: white;
}

.btn-secondary {
    background-color: #333;
    color: white;
}

.btn-secondary:hover {
    background-color: #555;
    color: white;
}

/* Header Styles */
header {
    background-color: white;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    padding: 20px 0;
    position: sticky;
    top: 0;
    z-index: 100;
}

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

.logo img {
    max-height: 50px;
}

nav ul {
    display: flex;
    list-style: none;
}

nav ul li {
    margin-left: 20px;
}

nav ul li a {
    color: #333;
    font-weight: 600;
    padding: 5px 0;
    position: relative;
}

nav ul li a:hover,
nav ul li a.active {
    color: #0066cc;
}

nav ul li a.active::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: #0066cc;
}

.mobile-menu-toggle {
    display: none;
    flex-direction: column;
    cursor: pointer;
}

.mobile-menu-toggle span {
    width: 25px;
    height: 3px;
    background-color: #333;
    margin: 2px 0;
    border-radius: 3px;
}

/* Hero Section */
.hero {
    background-color: #f8f9fa;
    padding: 100px 0;
    text-align: center;
}

.hero h1 {
    margin-bottom: 20px;
}

.hero p {
    max-width: 600px;
    margin: 0 auto 30px;
    font-size: 1.2rem;
}

/* Features Section */
.features {
    padding: 80px 0;
}

.features h2 {
    text-align: center;
    margin-bottom: 40px;
}

.feature-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.feature-item {
    text-align: center;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 15px rgba(0,0,0,0.1);
    transition: transform 0.3s;
}

.feature-item:hover {
    transform: translateY(-10px);
}

.feature-item img {
    max-width: 100px;
    margin-bottom: 20px;
}

/* CTA Section */
.cta-section {
    background-color: #0066cc;
    color: white;
    padding: 80px 0;
    text-align: center;
}

.cta-section h2 {
    margin-bottom: 20px;
}

.cta-section p {
    max-width: 600px;
    margin: 0 auto 30px;
}

.cta-section .btn-secondary {
    background-color: white;
    color: #0066cc;
}

.cta-section .btn-secondary:hover {
    background-color: #f0f0f0;
}

/* Page Header */
.page-header {
    background-color: #f8f9fa;
    padding: 60px 0;
    text-align: center;
}

/* About Page */
.about-content {
    padding: 80px 0;
}

.about-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: center;
}

.about-image img {
    width: 100%;
    border-radius: 8px;
}

.team-section {
    padding: 80px 0;
    background-color: #f8f9fa;
}

.team-section h2 {
    text-align: center;
    margin-bottom: 40px;
}

.team-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.team-member {
    text-align: center;
}

.team-member img {
    width: 100%;
    border-radius: 50%;
    margin-bottom: 15px;
}

/* Contact Page */
.contact-content {
    padding: 80px 0;
}

.contact-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
}

.contact-item {
    display: flex;
    margin-bottom: 30px;
}

.contact-item i {
    font-size: 24px;
    margin-right: 20px;
    color: #0066cc;
}

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    margin-bottom: 5px;
    font-weight: 600;
}

.form-group input,
.form-group textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
}

.error {
    color: red;
    font-size: 0.9rem;
    margin-top: 5px;
    display: block;
}

.success-message {
    background-color: #dff0d8;
    color: #3c763d;
    padding: 20px;
    border-radius: 4px;
    margin-bottom: 20px;
}

/* Footer Styles */
footer {
    background-color: #333;
    color: white;
    padding: 60px 0 20px;
}

.footer-content {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
    margin-bottom: 40px;
}

.footer-section h3 {
    position: relative;
    padding-bottom: 10px;
    margin-bottom: 20px;
}

.footer-section h3::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 50px;
    height: 2px;
    background-color: #0066cc;
}

.footer-section ul {
    list-style: none;
}

.footer-section ul li {
    margin-bottom: 10px;
}

.footer-section ul li a {
    color: #ccc;
}

.footer-section ul li a:hover {
    color: white;
}

.footer-bottom {
    text-align: center;
    padding-top: 20px;
    border-top: 1px solid rgba(255,255,255,0.1);
}

Responsive Design

Now let's create the responsive stylesheet. Add this to your css/responsive.css file:

/* Larger Screens */
@media (min-width: 1400px) {
    .container {
        max-width: 1320px;
    }
}

/* Desktop and Laptop */
@media (max-width: 1200px) {
    .container {
        max-width: 960px;
    }
}

/* Tablets */
@media (max-width: 992px) {
    .container {
        max-width: 720px;
    }
    
    h1 {
        font-size: 2.2rem;
    }
    
    h2 {
        font-size: 1.8rem;
    }
    
    /* Adjust grid layouts */
    .feature-grid,
    .team-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Small Tablets and Large Phones */
@media (max-width: 768px) {
    .container {
        max-width: 540px;
    }
    
    /* Header and navigation for mobile */
    nav ul {
        display: none;
        position: absolute;
        top: 80px;
        left: 0;
        width: 100%;
        background-color: white;
        flex-direction: column;
        text-align: center;
        box-shadow: 0 5px 10px rgba(0,0,0,0.1);
    }
    
    nav ul.active {
        display: flex;
    }
    
    nav ul li {
        margin: 0;
        padding: 15px 0;
        border-bottom: 1px solid #eee;
    }
    
    .mobile-menu-toggle {
        display: flex;
    }
    
    /* Adjust layouts for smaller screens */
    .about-grid,
    .contact-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    
    .about-text {
        order: 2;
    }
    
    .about-image {
        order: 1;
    }
    
    .footer-content {
        grid-template-columns: 1fr;
        gap: 30px;
    }
}

/* Phones */
@media (max-width: 576px) {
    .container {
        width: 100%;
        padding: 0 15px;
    }
    
    h1 {
        font-size: 2rem;
    }
    
    h2 {
        font-size: 1.6rem;
    }
    
    /* Hero section adjustments */
    .hero {
        padding: 60px 0;
    }
    
    /* Adjust grid layouts */
    .feature-grid,
    .team-grid {
        grid-template-columns: 1fr;
    }
    
    /* Form adjustments */
    .form-group input,
    .form-group textarea {
        font-size: 16px; /* Prevents zoom on input focus on iOS */
    }
}

Adding Interactivity with JavaScript

Main JavaScript File

Create your js/main.js file with basic functionality:

// Wait for the DOM to be fully loaded
document.addEventListener('DOMContentLoaded', function() {
    // Mobile Menu Toggle
    const menuToggle = document.querySelector('.mobile-menu-toggle');
    const navMenu = document.querySelector('nav ul');
    
    if (menuToggle && navMenu) {
        menuToggle.addEventListener('click', function() {
            navMenu.classList.toggle('active');
        });
    }
    
    // Handle smooth scrolling for anchor links
    const anchorLinks = document.querySelectorAll('a[href^="#"]');
    
    anchorLinks.forEach(link => {
        link.addEventListener('click', function(e) {
            const targetId = this.getAttribute('href');
            
            // Skip if it's just "#"
            if (targetId === '#') return;
            
            const targetElement = document.querySelector(targetId);
            
            if (targetElement) {
                e.preventDefault();
                
                window.scrollTo({
                    top: targetElement.offsetTop - 80, // Adjust for fixed header
                    behavior: 'smooth'
                });
            }
        });
    });
    
    // Simple fade-in animation for sections (optional)
    const fadeElements = document.querySelectorAll('.feature-item, .team-member');
    
    const fadeInOptions = {
        threshold: 0.3,
        rootMargin: '0px 0px -100px 0px'
    };
    
    const fadeInObserver = new IntersectionObserver(function(entries, observer) {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
                entry.target.classList.add('fade-in');
                observer.unobserve(entry.target);
            }
        });
    }, fadeInOptions);
    
    fadeElements.forEach(element => {
        fadeInObserver.observe(element);
    });
});

Form Validation JavaScript

Create a separate file for form validation, js/validation.js:

// Wait for the DOM to be fully loaded
document.addEventListener('DOMContentLoaded', function() {
    // Get the contact form element
    const contactForm = document.getElementById('contactForm');
    
    // Only proceed if the form exists on the page
    if (contactForm) {
        // Add client-side validation before form submission
        contactForm.addEventListener('submit', function(e) {
            let isValid = true;
            
            // Get form fields
            const nameField = document.getElementById('name');
            const emailField = document.getElementById('email');
            const subjectField = document.getElementById('subject');
            const messageField = document.getElementById('message');
            
            // Reset previous error messages
            const errorElements = contactForm.querySelectorAll('.error');
            errorElements.forEach(error => {
                error.textContent = '';
            });
            
            // Validate name
            if (!nameField.value.trim()) {
                document.querySelector('[for="name"] + input + .error').textContent = 'Name is required';
                isValid = false;
            } else if (!/^[a-zA-Z ]*$/.test(nameField.value)) {
                document.querySelector('[for="name"] + input + .error').textContent = 'Only letters and white space allowed';
                isValid = false;
            }
            
            // Validate email
            if (!emailField.value.trim()) {
                document.querySelector('[for="email"] + input + .error').textContent = 'Email is required';
                isValid = false;
            } else {
                // Simple email validation regex
                const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
                if (!emailRegex.test(emailField.value)) {
                    document.querySelector('[for="email"] + input + .error').textContent = 'Invalid email format';
                    isValid = false;
                }
            }
            
            // Validate subject
            if (!subjectField.value.trim()) {
                document.querySelector('[for="subject"] + input + .error').textContent = 'Subject is required';
                isValid = false;
            }
            
            // Validate message
            if (!messageField.value.trim()) {
                document.querySelector('[for="message"] + textarea + .error').textContent = 'Message is required';
                isValid = false;
            }
            
            // Prevent form submission if validation fails
            if (!isValid) {
                e.preventDefault();
            }
        });
        
        // Real-time validation feedback (optional enhancement)
        const formInputs = contactForm.querySelectorAll('input, textarea');
        
        formInputs.forEach(input => {
            input.addEventListener('blur', function() {
                // Clear error when user starts typing
                const errorElement = this.nextElementSibling;
                
                // Simple validation based on input type
                if (this.value.trim() === '') {
                    errorElement.textContent = this.previousElementSibling.textContent.replace(':', '') + ' is required';
                } else {
                    errorElement.textContent = '';
                }
                
                // Additional validation for email
                if (this.type === 'email' && this.value.trim() !== '') {
                    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
                    if (!emailRegex.test(this.value)) {
                        errorElement.textContent = 'Invalid email format';
                    }
                }
            });
        });
    }
});

Remember to include this file in your contact page by adding this line before the closing body tag in includes/footer.php:

<script src="js/validation.js"></script>

Testing Your Website

Cross-Browser and Responsive Testing

Once your website is completed, it's important to test it thoroughly:

Browser Testing: Check your site in different browsers (Chrome, Firefox, Safari, Edge)
Responsive Testing: Test on different screen sizes by resizing your browser window
Mobile Testing: Use browser developer tools to simulate mobile devices
Form Testing: Test your contact form with valid and invalid inputs
Navigation Testing: Ensure all links work correctly
Performance Testing: Check page load times and optimize as needed

Common Issues to Watch For

Layout Breaks: Elements that don't resize properly on smaller screens
Navigation Issues: Mobile menu not working correctly
Form Validation Errors: Error messages not displaying properly
Image Sizing: Images too large or not responsive
PHP Include Errors: Path issues with includes
JavaScript Errors: Check browser console for errors

Project Extensions (Optional)

If you want to go beyond the basic requirements, consider these enhancements:

Content Management

Create a simple blog system where you store posts in a JSON file or array and display them dynamically.

// Example: Storing blog posts in a PHP array
$blog_posts = [
    [
        'id' => 1,
        'title' => 'First Blog Post',
        'date' => '2025-03-15',
        'excerpt' => 'This is a short excerpt from the first blog post...',
        'content' => 'Full content of the first blog post goes here...'
    ],
    [
        'id' => 2,
        'title' => 'Second Blog Post',
        'date' => '2025-03-22',
        'excerpt' => 'This is a short excerpt from the second blog post...',
        'content' => 'Full content of the second blog post goes here...'
    ]
];

// Then in blog.php, loop through and display them

Image Gallery

Create a JavaScript-powered image gallery with lightbox functionality.

Dark Mode Toggle

Implement a dark mode option that users can toggle and that remembers their preference using localStorage.

Animation Effects

Add more sophisticated animations using CSS transitions and JavaScript.

Project Submission

How to Submit

To submit your project:

Create a ZIP file of your entire project directory
Upload the ZIP file to the course submission portal
Include a README.txt file with:
- Your name and contact information
- Brief description of your website
- Any special features you implemented
- Instructions for running the site locally
- List of resources or references used

Grading Criteria

Your project will be evaluated based on the following criteria:

Functionality (40%): All pages and features work as expected
Design and Responsive Implementation (25%): Visual appeal and responsive behavior
Code Quality (20%): Clean, well-organized, properly indented code
Form Validation (10%): Both client-side and server-side validation
Extra Features (5%): Additional elements beyond basic requirements

Helpful Resources

Documentation and References

MDN Web Docs - Comprehensive web development documentation
W3Schools - Tutorials and references for HTML, CSS, JavaScript, and PHP
CSS-Tricks - Helpful articles and guides for CSS techniques
PHP Documentation - Official PHP language reference

Tools

W3C HTML Validator - Validate your HTML code
W3C CSS Validator - Validate your CSS code
Google Fonts - Free web fonts to enhance your design
Font Awesome - Icon library for your navigation and UI elements
Favicon Generator - Create a favicon for your site

Conclusion

Congratulations on reaching the end of Module 1! This final project brings together everything you've learned about HTML, CSS, JavaScript, and basic PHP. Creating a complete 5-page static website is an accomplishment to be proud of and will serve as a solid foundation as you continue your web development journey.

Remember that web development is a continuous learning process. The skills you've gained in this module are just the beginning, and you'll build upon them throughout the course as you dive deeper into PHP and WordPress development.

Coming Up in Module 2: You'll learn about databases, PHP programming, and start exploring the WordPress ecosystem.

Course Progress