ADD 103 — Fundamentals of Web Development

Sample Files & Demos — McHenry County College

📂 Browse by week below — click any week to expand and open its sample files

These are the in-class demo files for ADD 103. Each sample shows the concepts covered that week. Use them as a reference — not a shortcut. Reading code is a skill too.

📄 Week 01 — Setup & Orientation 1 sample
✏️ Web Manifesto Pure HTML
🏗️ Week 02 — HTML Structure 2 samples
🔖 Semantics HTML 📝 Content HTML
🎨 Week 03 — CSS Basics 2 samples
🖌️ CSS Intro CSS 📦 Box Model CSS
✨ Week 04 — Advanced Styling 2 samples
📐 Layout Basics CSS 🎨 Color Variables CSS Variables
↔️ Week 05 — Layout: Flexbox 2 samples
📦 Flex Container Flexbox 🔳 Flex Items Flexbox
🔲 Week 06 — Layout: Grid 3 samples
🗂️ Grid Container CSS Grid 🗺️ Grid Areas CSS Grid 📋 Midterm Brief Project
📱 Week 07 — Responsive Layout 2 samples
📡 Media Queries Responsive 🖥️ Responsive Projects Responsive
🖼️ Week 10 — Advanced Media 2 samples
🖼️ Responsive Images Media 🎬 Media Media
⚡ Week 11 — Interactivity 2 samples
🌳 DOM Basics JavaScript 💫 CSS Animations CSS
🚀 Week 12 — Deployment 2 samples
🚀 Deployment GitHub Pages 🔍 Site Audit Accessibility
🗺️ Week 13 — Project Planning 2 samples
💡 Concept Planning 🗃️ Assets Planning
🏗️ Week 14 — Project Build: Structure 2 samples
🦴 Skeleton HTML 🧩 Layout Intel CSS
💅 Week 15 — Project Build: Polish 1 sample
✨ Styling CSS
body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background-color: #f4f4f4; color: #333; max-width: 800px; margin: 0 auto; padding: 40px 20px; } header { text-align: center; border-bottom: 5px solid #FFC629; /* MCC Gold */ padding-bottom: 20px; margin-bottom: 40px; } h1 { color: #582C83; /* MCC Purple */ margin: 0; } .subtitle { color: #666; font-size: 1.1rem; margin-top: 10px; } .gallery-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; } .sample-card { background: white; padding: 20px; border-radius: 8px; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); border-left: 5px solid #582C83; transition: transform 0.2s; } .sample-card:hover { transform: translateY(-5px); } h2 { margin-top: 0; font-size: 1.2rem; color: #333; } p { font-size: 0.9rem; color: #666; } .btn { display: inline-block; background-color: #582C83; color: white; text-decoration: none; padding: 8px 15px; border-radius: 4px; font-size: 0.9rem; margin-top: 10px; } .btn:hover { background-color: #4b3190; }

Live Sample Gallery

Examples for ADD 103: Introduction to Web Design

Week 1: The Basics

Pure HTML5. No styling. Lists and Headings.

View "Letter Home"

Week 2: Semantics

Structuring content with <header>, <nav>, <article>.

View "Birdwatcher"

Week 3: Styling Intro

Colors, Fonts, and the Box Model.

View "Bistro Menu"

Week 4: Positioning

Relative and Absolute positioning layers.

View "Concert Poster"

Week 5: Flexbox

One-dimensional layouts (Rows & Columns).

View "Team Page"

Week 6: CSS Grid

Two-dimensional layouts and specific placement.

View "The Daily News"

Week 7: Responsiveness

Media Queries adapting to mobile screens.

View "Responsive News"