Course Recap - Essential Web Development Review

Comprehensive recap covering the most important concepts from Phases 1-3 and 5-6 for your web project assignment.

Course Recap - Essential Web Development Review

After three intense weeks of learning, this recap session consolidates the most critical concepts for your web project assignment. We'll review essential knowledge from Phases 1-3 (Fundamentals, HTML, CSS) and Phases 5-6 (Project Development, Deployment).

Project Focus: All concepts are directly relevant to your 4-page web project assignment. Apply these principles to create a professional, complete, and well-structured website.

Session 1: Web Fundamentals & HTML

Web Fundamentals

Client-Server Architecture

The web operates on a client-server model:

┌─────────┐                          ┌─────────┐
│         │   1. HTTP Request        │         │
│ Client  │ ───────────────────────> │ Server  │
│(Browser)│                          │         │
│         │   2. HTTP Response       │         │
│         │ <─────────────────────── │         │
└─────────┘                          └─────────┘

The Journey of Your Project's Web Page:

  1. User types your project URL in browser
  2. DNS translates domain name → IP address
  3. Browser sends HTTP request to server
  4. Server sends back HTML, CSS, JavaScript files
  5. Browser renders your webpage

For your project: When deployed on Netlify/Vercel, your HTML files live on their servers and are delivered to users worldwide via this client-server model.

📚 Learn more: Lesson 1.1: Introduction to the World Wide Web

Browser Rendering Pipeline

When a user visits your project, the browser follows this process:

1. Parse HTML → Build DOM Tree
2. Parse CSS → Build CSSOM Tree
3. Combine → Render Tree
4. Layout → Calculate positions
5. Paint → Display pixels on screen

For your project: This means:

  • Clean HTML structure = faster DOM building
  • Efficient CSS = faster CSSOM building
  • Optimized images = faster painting
  • Result: Professional, fast-loading website

📚 Learn more: Lesson 1.1: Introduction to the World Wide Web

URL Structure

Understanding URLs is essential for your project's navigation:

https://www.example.com:443/path/to/page?name=value#section
│      │   │           │   │            │          │
│      │   │           │   │            │          └─ Fragment
│      │   │           │   │            └─ Query string
│      │   │           │   └─ Path
│      │   │           │   └─ Port (optional)
│      │   │           └─ Domain name
│      │   └─ Subdomain
└─ Protocol

For your project:

  • Use https:// when deployed (Netlify/Vercel provide this automatically)
  • Keep paths simple and descriptive: /about.html, /contact.html
  • Use fragments for smooth scrolling: <a href="#section"> links to <section id="section">

📚 Learn more: Lesson 1.1: Introduction to the World Wide Web

HTTP Methods

MethodPurposeIn Your Project
GETRetrieve dataLoading pages, images, CSS files
POSTCreate/submit dataContact form submissions

For your project: Your contact form should use <form method="post"> to properly submit user data.

📚 Learn more: Lesson 1.3: HTTP and Web Communication

HTTP Status Codes

When debugging your project, you'll encounter these status codes:

Success:

  • 200 OK: Page loaded successfully ✅
  • 301 Moved Permanently: Redirect (SEO-friendly)

Client Errors:

  • 400 Bad Request: Invalid request syntax
  • 401 Unauthorized: Authentication required
  • 402 Payment Required: Reserved for future use
  • 403 Forbidden: Access denied (even if logged in)
  • 404 Not Found: Page doesn't exist
  • 405 Method Not Allowed: Wrong HTTP method used

Server Errors:

  • 500 Internal Server Error: Server crashed
  • 502 Bad Gateway: Server connection failed
  • 503 Service Unavailable: Server temporarily down

For your project:

  • Check the Network tab in DevTools to see status codes
  • If you see 404, check your file paths and names
  • Create a custom 404.html page for missing pages

📚 Learn more: Lesson 1.3: HTTP and Web Communication

Browser DevTools

Your most important debugging tool:

Essential Panels:

  1. Elements/Inspector: Inspect and modify HTML/CSS in real-time
  2. Console: See JavaScript errors
  3. Network: Monitor HTTP requests, check file sizes
  4. Application: View cookies, localStorage

DevTools Shortcuts:

  • F12 or Ctrl+Shift+I (Cmd+Option+I on Mac): Open DevTools
  • Ctrl+Shift+C (Cmd+Option+C): Inspect element
  • Ctrl+Shift+M (Cmd+Option+M): Toggle responsive design mode

For your project:

  • Use Elements panel to test CSS changes before editing files
  • Check Network panel: images should be < 200KB
  • Test responsive design mode at different screen sizes
  • Fix console errors (red messages) before submission

📚 Learn more: Lesson 1.2: Browser Developer Tools

Web Standards & Validation

W3C Standards: Ensure your project works across all browsers

For your project - Validation is mandatory:

  1. HTML Validation: validator.w3.org
    • Upload your HTML files
    • Fix all errors (warnings are optional)
  2. CSS Validation: jigsaw.w3.org/css-validator
    • Upload your CSS file
    • Fix errors for consistent rendering

Browser Testing: Test your project on multiple browsers:

  • ✅ Chrome (most users)
  • ✅ Safari (Mac/iOS users)
  • ✅ Firefox (good standards compliance)
  • ✅ Edge (Windows users)

📚 Learn more: Lesson 1.4: Web Standards and W3C

HTML Essentials for Your Project

HTML Document Structure

Every page in your project must have this structure:

<!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="Brief page description for SEO">
    <title>Page Title - Your Project Name</title>
    <link rel="stylesheet" href="css/styles.css">
    <link rel="icon" href="images/favicon.ico">
</head>
<body>
    <!-- Your content here -->
    <script src="js/script.js"></script>
</body>
</html>

Critical for exam grading:

  • ✅ <!DOCTYPE html> - Must be first line
  • ✅ <meta charset="UTF-8"> - Character encoding
  • ✅ <meta name="viewport"> - Required for responsive design
  • ✅ <meta name="description"> - SEO description (different for each page)
  • ✅ <title> - Unique title for each page
  • ✅ <link rel="icon"> - Favicon (shows in browser tab)

📚 Learn more: Lesson 2.1: HTML Document Structure

Semantic HTML5 - Project Requirement

Why semantic HTML matters for your project:

  • Exam Criteria: Clean, professional code structure
  • Accessibility: Screen reader navigation
  • SEO: Better search engine understanding
  • Maintainability: Self-documenting code

Required semantic structure for your project:

<header>
    <!-- Logo, site title, main navigation -->
    <nav>
        <ul>
            <li><a href="index.html">Home</a></li>
            <li><a href="about.html">About</a></li>
            <li><a href="portfolio.html">Portfolio</a></li>
            <li><a href="contact.html">Contact</a></li>
        </ul>
    </nav>
</header>

<main>
    <!-- Main content of each page -->
    <article>
        <header>
            <h1>Page Heading</h1>
        </header>
        <section>
            <h2>Section Heading</h2>
            <p>Content...</p>
        </section>
    </article>

    <aside>
        <!-- Sidebar, related content -->
    </aside>
</main>

<footer>
    <!-- Copyright, contact info -->
    <p>&copy; 2024 Your Name. All rights reserved.</p>
</footer>

Element Guidelines for Your Project:

ElementUsageExample in Your Project
<header>Top section of pageLogo + navigation menu
<nav>Navigation linksMain menu (on all pages)
<main>Main contentOnly ONE per page
<article>Self-contained contentBlog post, portfolio item
<section>Thematic grouping"About Me", "Skills", "Projects"
<aside>Sidebar contentRelated links, additional info
<footer>Bottom sectionCopyright, social links

Exam Deduction: Using <div id="header"> instead of <header> shows lack of understanding. Always use semantic elements!

📚 Learn more: Lesson 2.7: Semantic HTML5

Forms - Contact Page Requirement

Your project contact form must have proper labels and validation:

<form action="/submit" method="post">
    <!-- ✅ GOOD: Explicit label with 'for' attribute -->
    <label for="name">Your Name:</label>
    <input type="text" id="name" name="name" required>

    <label for="email">Email:</label>
    <input type="email" id="email" name="email" required>

    <label for="message">Message:</label>
    <textarea id="message" name="message" rows="5" required></textarea>

    <button type="submit">Send Message</button>
</form>

Form Requirements for Exam:

  • ✅ Use method="post" (not GET!)
  • ✅ Every input must have a <label> with matching for attribute
  • ✅ Use appropriate input types: email, tel, date, url
  • ✅ Add required attribute for mandatory fields
  • ✅ Use minlength and maxlength for text validation

GET vs POST in Your Project:

GETPOST
❌ Data visible in URL✅ Data hidden in request body
❌ Use for search forms only✅ Use for contact forms
❌ Not secure for sensitive data✅ Better for user information

📚 Learn more: Lesson 2.6: Forms & Input Elements

Images - Critical Requirements

Hotlinking = Using images from external URLs instead of storing them locally.

<!-- ❌ HOTLINK - WILL FAIL EXAM -->
<img src="https://example.com/images/photo.jpg" alt="Photo">

<!-- ✅ CORRECT - LOCAL IMAGE -->
<img src="images/photo.jpg" alt="Photo">

Why hotlinks are not allowed in your project:

  1. Exam Deduction: Automatic grade reduction
  2. Broken images: External site can delete the image
  3. Copyright: Using others' bandwidth is theft
  4. Performance: External images load slower
  5. No control: Can't optimize or modify

Project Rule: ALL images must be in your images/ folder!

Proper Image Usage

<img src="images/portrait.jpg"
     alt="Descriptive text for screen readers"
     width="800"
     height="600"
     loading="lazy">

Image Requirements for Exam:

  • ✅ Store all images in images/ folder (in your project directory)
  • ✅ Use relative paths: images/photo.jpg (not absolute paths!)
  • ✅ Always include alt attribute (accessibility requirement)
  • ✅ Optimize file size: < 200KB per image
  • ✅ Use appropriate format:
    • Photos → JPG
    • Graphics/logos → PNG
    • Icons → SVG

Alt Text Guidelines:

<!-- ✅ Informative image -->
<img src="images/team-2024.jpg" alt="Web development team at 2024 conference">

<!-- ✅ Decorative image -->
<img src="images/decoration.jpg" alt="">

<!-- ✅ Functional image (button) -->
<img src="images/search-icon.svg" alt="Search">

<!-- ❌ BAD alt text -->
<img src="images/photo.jpg" alt="image">
<img src="images/photo.jpg" alt="photo.jpg">

📚 Learn more: Lesson 2.4: Images & Media

Your project needs consistent navigation on all 4 pages:

<nav>
    <ul>
        <li><a href="index.html">Home</a></li>
        <li><a href="about.html">About</a></li>
        <li><a href="portfolio.html">Portfolio</a></li>
        <li><a href="contact.html">Contact</a></li>
    </ul>
</nav>

Link Requirements for Exam:

  • ✅ No dead links: Every link must work
  • ✅ Use relative paths for internal pages: about.html (not https://...)
  • ✅ Same navigation on all pages (consistency)
  • ✅ Clear, descriptive link text (not "click here")

Special Link Types:

<!-- Email link -->
<a href="mailto:your.email@example.com">Contact me</a>

<!-- Phone link -->
<a href="tel:+1234567890">Call us</a>

<!-- Smooth scroll to section -->
<a href="#about">Jump to About section</a>
<!-- Then somewhere on page: -->
<section id="about">...</section>

📚 Learn more: Lesson 2.3: Links & Navigation

Session 2: CSS Styling & Responsive Design

CSS Fundamentals

Linking CSS to Your Project

Only one correct way for your project:

<!-- ✅ External stylesheet (REQUIRED) -->
<head>
    <link rel="stylesheet" href="css/styles.css">
</head>

<!-- ❌ Inline styles (AVOID - shows bad practice) -->
<p style="color: red;">Text</p>

<!-- ❌ Internal styles (DON'T USE in project) -->
<style>
    p { color: red; }
</style>

For your project: Create css/styles.css and link it from all HTML pages.

📚 Learn more: Lesson 3.1: CSS Introduction & Syntax

Selectors & Specificity

/* Element selector (specificity: 0,0,1) */
p { color: black; }

/* Class selector (specificity: 0,1,0) - PREFER THIS */
.highlight { background: yellow; }

/* ID selector (specificity: 1,0,0) - AVOID for styling */
#header { color: blue; }

/* Multiple selectors */
h1, h2, h3 { font-family: Arial, sans-serif; }

/* Descendant selector */
nav a { text-decoration: none; }

/* Pseudo-classes */
a:hover { color: red; }
li:first-child { font-weight: bold; }

Specificity Hierarchy (low to high):

  1. Element selectors (p, div)
  2. Class selectors (.button, .card)
  3. ID selectors (#header)
  4. Inline styles (avoid!)
  5. !important (never use!)

For your project: Use classes for styling. IDs should only be used for JavaScript and anchor links.

📚 Learn more: Lesson 3.2: Selectors & Specificity

Box Model - Essential Concept

Every element in your project is a box with four areas:

CSS Box Model

Box Model CSS:

.box {
    /* Content size */
    width: 300px;
    height: 200px;

    /* Padding (inside) */
    padding: 20px;

    /* Border */
    border: 2px solid #333;
    border-radius: 8px; /* rounded corners */

    /* Margin (outside) */
    margin: 20px;
    margin: 0 auto; /* center horizontally */
}

IMPORTANT - Box Sizing:

/* Add this to your CSS file (RECOMMENDED) */
* {
    box-sizing: border-box;
}

/* Now width includes padding and border */
.box {
    width: 300px; /* Total width = 300px (includes padding & border) */
    padding: 20px;
    border: 2px solid black;
}

For your project: Add box-sizing: border-box to prevent layout surprises!

📚 Learn more: Lesson 3.3: Box Model & Layout Fundamentals

CSS Layout - Flexbox & Grid

Flexbox - One-Dimensional Layout

Flexbox is perfect for:

  • Navigation menus (horizontal or vertical)
  • Card layouts in a row
  • Centering content
  • Distributing space between items

Basic Flexbox Pattern:

/* Container */
.nav-menu {
    display: flex;
    gap: 20px; /* space between items */
    justify-content: space-between; /* distribute horizontally */
    align-items: center; /* align vertically */
}

Flexbox Direction:

  • flex-direction: row; - Horizontal (default) →
  • flex-direction: column; - Vertical ↓

Main Axis Alignment (justify-content):

  • flex-start - Align to start
  • center - Center items
  • space-between - Space between items
  • space-around - Space around items

Cross Axis Alignment (align-items):

  • flex-start - Align to top
  • center - Center vertically
  • flex-end - Align to bottom

For your project - Common patterns:

/* 1. Navigation menu */
nav ul {
    display: flex;
    gap: 20px;
    list-style: none;
}

/* 2. Center content */
.hero {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 400px;
}

/* 3. Card layout */
.cards {
    display: flex;
    gap: 20px;
    flex-wrap: wrap; /* wrap to multiple lines */
}

.card {
    flex: 1 1 300px; /* grow, shrink, min-width */
}

📚 Learn more: Lesson 3.4: Flexbox Layout

Grid Layout - Two-Dimensional Layout

Grid is perfect for:

  • Page layouts (header, main, sidebar, footer)
  • Image galleries
  • Card grids with consistent sizing

Basic Grid Pattern:

.container {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 equal columns */
    gap: 20px;
}

Responsive Grid (no media queries needed!):

.gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
}
/* Automatically adjusts:
   - Desktop: 4-5 columns
   - Tablet: 2-3 columns
   - Mobile: 1 column
*/

For your project - Page layout:

body {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr auto;
    min-height: 100vh;
}

header { grid-row: 1; }
main { grid-row: 2; }
footer { grid-row: 3; }

📚 Learn more: Lesson 3.5: Grid Layout

Responsive Design for Your Project

What is Responsive Design?

Responsive design means your website adapts to different screen sizes:

  • Desktop: Wide screens (1200px+)
  • Tablet: Medium screens (600-1199px)
  • Mobile: Small screens (<600px)

Why it matters for your project:

  • Exam Requirement: Your site must work on mobile and desktop
  • User Experience: 50%+ of web traffic is mobile
  • Professional Standard: All modern websites are responsive

Key Principle: Design mobile-first, then enhance for larger screens.

Responsive Meta Tag (REQUIRED)

This ONE line makes your site responsive:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

For your project: This tag MUST be in the <head> of all pages. Without it, your site won't scale properly on mobile devices!

Understanding device-width

device-width is a special keyword - you don't need to replace it with anything else. It tells the browser to set the viewport width to match the actual width of the device's screen.

What each part does:

  • width=device-width - Sets the viewport width to be the same as the device's screen width
    • On a phone with a 375px wide screen → viewport will be 375px wide
    • On a tablet with a 768px wide screen → viewport will be 768px wide
  • initial-scale=1.0 - Sets the initial zoom level to 100% (no zoom)

Why this matters:

Without this meta tag, mobile browsers often try to display desktop-sized web pages by zooming out, making everything tiny and hard to read. This viewport tag tells the browser: "Hey, this page is designed to work well on mobile devices, so display it at the actual device width."

What you might see WITHOUT this meta tag:

  • Text appears very small
  • User has to pinch and zoom to read content
  • Page appears as if it's designed for a much wider screen

Bottom line: Don't change device-width - it's exactly what you want to use for responsive web design!

📚 Learn more: Lesson 3.6: Responsive Design & Media Queries

Media Queries

Media queries adjust styling based on screen size:

/* Mobile-first approach (recommended) */

/* Base styles for mobile (< 600px) */
.container {
    padding: 10px;
    font-size: 14px;
}

nav ul {
    flex-direction: column; /* vertical menu */
}

/* Tablet (≥ 600px) */
@media (min-width: 600px) {
    .container {
        padding: 20px;
        font-size: 16px;
    }
}

/* Desktop (≥ 1200px) */
@media (min-width: 1200px) {
    .container {
        max-width: 1200px;
        margin: 0 auto;
        padding: 40px;
    }

    nav ul {
        flex-direction: row; /* horizontal menu */
    }
}

For your project: Test at these breakpoints:

  • 📱 Mobile: 320px, 375px, 414px
  • 📱 Tablet: 768px, 1024px
  • 💻 Desktop: 1200px, 1920px

Responsive Images

img {
    max-width: 100%;
    height: auto;
}

This ensures images never overflow their container!

📚 Learn more: Lesson 3.6: Responsive Design & Media Queries

Sticky Header Concept

What is a sticky header?

A sticky header "sticks" to the top of the viewport when you scroll down, keeping navigation always accessible.

Before scrolling:

┌──────────────────┐
│ HEADER (normal)  │
└──────────────────┘
│  Content...      │
│                  │
│  Content...      │

After scrolling:

┌──────────────────┐ ← Header stays at top
│ HEADER (sticky)  │
└──────────────────┘
│  Content...      │ ← Content scrolls underneath
│                  │

CSS for sticky header:

header {
    position: sticky;
    top: 0;
    background: white;
    z-index: 100; /* ensures header stays on top */
}

For your project:

  • Improves navigation accessibility
  • Professional UX pattern
  • Works on mobile and desktop
  • Bonus points: Shows attention to detail

Important: Parent element must NOT have overflow: hidden.

📚 Learn more: Lesson 3.3: Box Model & Layout Fundamentals

Session 3: Project Development & Deployment

Project File Structure

Required folder structure for your project:

my-project/
├── index.html              # Homepage (REQUIRED)
├── about.html              # About page
├── portfolio.html          # Portfolio/work page
├── contact.html            # Contact page
├── css/
│   └── styles.css          # Main stylesheet
├── js/
│   └── script.js           # JavaScript (optional)
├── images/
│   ├── logo.png
│   ├── hero-image.jpg
│   ├── photo1.jpg
│   └── ...
└── README.md               # Project description

File Naming Rules:

  • ✅ Use lowercase: about.html (not About.html)
  • ✅ Use hyphens: my-portfolio.html (not my_portfolio.html or myPortfolio.html)
  • ✅ Be descriptive: team-photo-2024.jpg (not img001.jpg)
  • ✅ No spaces: Use hyphens instead

📚 Learn more: Lesson 5.2: Personal Homepage Structure

Content Guidelines

Writing for the Web

Key principles for your project content:

  1. Scannability: Users scan, don't read
    • Short paragraphs (3-4 lines max)
    • Use bullet points
    • Bold important information
    • Clear headings
  2. Front-load important information:
    <!-- ✅ GOOD -->
<p>We offer web design services starting at $500. Contact us for a quote.</p>

<!-- ❌ BAD -->
<p>After years of experience and working with many clients, we have developed
a comprehensive pricing structure that takes into account various factors, and
our web design services start at $500.</p>
  3. Active voice:
    • ✅ "I built this website"
    • ❌ "This website was built by me"
  4. Clear call-to-action:
    <a href="contact.html" class="button">Get in Touch</a>

For your project:

  • No "Lorem ipsum" placeholder text (exam deduction!)
  • All content should be final and meaningful
  • Avoid AI-generated filler content

📚 Learn more: Lesson 5.3: Content & Navigation

Image Optimization

Image requirements for exam grading:

  • ✅ File size: < 200KB per image
  • ✅ Appropriate format: JPG for photos, PNG for graphics, SVG for icons
  • ✅ Descriptive filenames: team-meeting-2024.jpg (not DSC_1234.jpg)
  • ✅ Proper dimensions: Resize before uploading (don't use CSS to shrink large images)

Recommended sizes for your project:

  • Hero/banner images: 1920 x 1080 px
  • Content images: 800 x 600 px
  • Thumbnails: 400 x 300 px
  • Profile photos: 400 x 400 px

Optimization tools:

  • TinyPNG - Compress PNG and JPEG (free)
  • Squoosh - Advanced compression (Google)
  • ImageOptim - Mac app for batch optimization

For your project: Optimize ALL images before adding to your images/ folder!

📚 Learn more: Lesson 5.4: Adding Media & Interactive Elements

Testing Your Project

Testing Checklist (Before Submission)

Functionality (Mandatory):

  • All 4+ pages load without errors
  • All navigation links work (no 404 errors)
  • All images display correctly
  • Contact form has proper labels
  • No broken links or missing files

Quality (Grading Criteria):

  • HTML validates at validator.w3.org
  • CSS validates at jigsaw.w3.org/css-validator
  • No console errors (check DevTools Console tab)
  • Works on mobile (test with DevTools responsive mode)
  • Works on desktop
  • Images < 200KB each
  • Page loads in < 3 seconds

Code Quality (Grading Criteria):

  • Semantic HTML used (<header>, <nav>, <main>, <footer>)
  • External CSS (not inline styles)
  • Consistent indentation
  • Descriptive class names
  • Comments explaining complex code

Content (Exam Requirements):

  • No placeholder images (no hotlinks!)
  • No "Lorem ipsum" text
  • No AI-generated filler content
  • Professional, complete content

Cross-Browser Testing

Test your project in multiple browsers:

  1. Chrome (primary browser - most users)
  2. Safari (Mac/iOS users)
  3. Firefox (standards compliance)
  4. Edge (Windows users)

How to test: Open your index.html in each browser and check:

  • Layout looks correct
  • Fonts load properly
  • Images display
  • Navigation works
  • No console errors

Responsive Testing

Test at these sizes using DevTools:

  1. Mobile:
    • iPhone SE: 375 x 667 px
    • iPhone 12: 390 x 844 px
    • Samsung Galaxy: 360 x 740 px
  2. Tablet:
    • iPad: 768 x 1024 px
    • iPad Pro: 1024 x 1366 px
  3. Desktop:
    • Laptop: 1366 x 768 px
    • Desktop: 1920 x 1080 px

How to test in DevTools:

  1. Press F12 (or Cmd+Option+I)
  2. Click device toolbar icon (Ctrl+Shift+M)
  3. Select device from dropdown
  4. Test navigation, scrolling, forms

📚 Learn more: Lesson 5.5: Testing & Debugging

Git & Version Control

Git Basics for Your Project

Git is a version control system. The purpose and function of Git in web development is:

  1. Version control - Track all changes to code over time
  2. Collaboration - Multiple developers can work on same project
  3. Backup - Code is stored safely and can be recovered
  4. Branching - Experiment with features without affecting main code
  5. History - See who changed what and when
  6. Deployment - Required for modern hosting platforms

Why use Git for your project:

  • Track all changes to your code
  • Revert mistakes easily
  • Required for deployment to Github
  • Professional development practice

Git Setup (Do Once):

# Set your identity (REQUIRED before first commit)
git config --global user.name "Your Name"
git config --global user.email "your.email@example.com"

# Set default branch name
git config --global init.defaultBranch main

Basic Git Workflow for Your Project:

# 1. Initialize repository (do once at project start)
cd my-project
git init

# 2. Check what changed
git status

# 3. Add files to staging
git add .                  # Add all files
git add index.html         # Add specific file

# 4. Commit with descriptive message
git commit -m "Add homepage structure and navigation"

# 5. View history
git log --oneline

Commit Message Guidelines:

# ✅ GOOD commit messages (descriptive)
git commit -m "Add contact form with email validation"
git commit -m "Fix mobile navigation menu overflow"
git commit -m "Optimize hero image file size"

# ❌ BAD commit messages (too vague)
git commit -m "update"
git commit -m "fix bug"
git commit -m "changes"

For your project: Make commits after completing each feature (e.g., "Add about page", "Style navigation menu", "Add contact form").

📚 Learn more: Git & GitHub Guide and Lesson 6.1: Git & Version Control

Deploying Your Project

Why Netlify for your project:

  • Free hosting
  • Automatic HTTPS
  • Custom domain support
  • Deploys from GitHub automatically
  • Perfect for static HTML/CSS/JS sites

Deployment Steps:

Step 1: Push to GitHub

# Create repository on github.com, then:
git remote add origin https://github.com/yourusername/your-project.git
git branch -M main
git push -u origin main

Pre-Submission Checklist

Use this checklist before your exam presentation:

Technical Requirements

  • Minimum 4 pages (homepage + 3 sub-pages)
  • All pages have proper HTML5 structure
  • Semantic HTML used throughout
  • External CSS stylesheet (no inline styles)
  • Responsive meta tag in <head>
  • All images stored locally in images/ folder (no hotlinks!)
  • All images < 200KB
  • All navigation links work (no 404 errors)
  • Contact form has proper labels and method="post"

Validation & Testing

  • HTML validates (validator.w3.org)
  • CSS validates (jigsaw.w3.org/css-validator)
  • No console errors in DevTools
  • Works in Chrome, Safari, Firefox, Edge
  • Responsive on mobile (tested in DevTools)
  • Page loads in < 3 seconds

Content Quality

  • No placeholder images
  • No "Lorem ipsum" text
  • No AI-generated filler
  • Professional, complete content
  • Unique <title> and <meta description> on each page

Code Quality

  • Clean, organized HTML structure
  • Consistent indentation (2 or 4 spaces)
  • Descriptive class names
  • Comments for complex sections
  • Proper folder structure (css/, images/, js/)

Deployment

  • Project uploaded to webproject.lrock.net
  • Representative screenshots uploaded
  • Local files backed up

Presentation Prep

  • Can explain all code in project
  • Prepared 3-minute presentation
  • Tested project on laptop
  • Ready to answer technical questions

Exam Tips for Success

Presentation Structure (3 minutes)

  1. Introduction (30 seconds)
    • Project name and purpose
    • Target audience
  2. Demonstration (2 minutes)
    • Show from github pages
    • or show from local using Live Server
    • Show homepage
    • Navigate through all pages
    • Highlight key features
    • Show mobile responsive design
  3. Technical Highlights (30 seconds)
    • Semantic HTML structure
    • CSS techniques used (Flexbox/Grid)
    • Responsive design approach

During Q&A (2 minutes)

Be prepared to answer:

  • "Why did you choose this project topic?"
  • "Explain how your navigation works"
  • "Show me the HTML for your contact form"
  • "How did you make your site responsive?"
  • "What challenges did you face?"

Common Mistakes to Avoid

Automatic Deductions:

  • ❌ Hotlinked images (external URLs)
  • ❌ Dead links (404 errors)
  • ❌ Placeholder content ("Lorem ipsum")
  • ❌ Non-functional features
  • ❌ Missing labels on form inputs
  • ❌ Inline CSS instead of external stylesheet
  • ❌ Invalid HTML/CSS (validation errors)

Time Management:

  • ❌ Talking too long (over 3 minutes)
  • ❌ Showing code instead of the website
  • ❌ Getting stuck on technical issues
  • ✅ Practice your presentation beforehand!

Remember

Quality Over Complexity: A simple, complete, professional 4-page website scores better than a complex, unfinished project!

Focus on:

  1. ✅ All features work properly
  2. ✅ Professional appearance
  3. ✅ Clean, valid code
  4. ✅ Clear presentation

Additional Resources

Course Materials:

Development Guides:

Reference Documentation:

Deployment Platforms:

Q&A Session

Use this time to:

  • Ask questions about concepts covered
  • Get help with specific project challenges
  • Clarify exam requirements
  • Review code examples
  • Discuss implementation strategies

Good luck with your web project presentation! 🚀