Course Info
| Course Name: | Foundations of Web Design | Duration: | 8 Weeks (16 Total Sessions) |
|---|---|---|---|
| Meeting Time: | Tuesday & Thursday 12:30 PM - 2:30 PM |
Location: | IT Technovator @ Wheatley, Third Floor, Room 136 |
Course Outcomes
By the end of this course, students will:- Understand fundamental web design principles, including layout, color theory, typography, and UX design
- Be proficient in HTML and CSS to create visually appealing web pages
- Design and implement responsive web pages using media queries, Flexbox, and CSS Grid
- Integrate multimedia elements such as images, videos, and audio into web pages
- Utilize Git and GitHub for version control and collaboration
- Develop, debug, and test web projects for functionality and user experience
- Apply JavaScript fundamentals for interactive web experiences
- Implement modern CSS techniques including CSS variables and advanced selectors
- Understand web performance optimization and accessibility best practices
- Build and host a professional web portfolio on GitHub Pages
Core Project Concept
Students choose one website type to build throughout the entire course, progressively enhancing it each week. This creates a cohesive learning experience where each lesson builds directly on previous work.
Students choose from the following website types:- Local Business Website (restaurant, bakery, fitness studio, etc.)
- Creative Portfolio (photographer, artist, designer, musician)
- Non-Profit Organization (animal shelter, community garden, youth program)
- Personal Blog/Lifestyle Site (travel blog, food blog, wellness coach)
- Small E-commerce Concept (handmade crafts, vintage clothing, specialty products)
- Service Provider (tutoring, consulting, home services)
| Week | Overview | Class Exercises | Project Assignments |
|---|---|---|---|
| Week 1: Project Planning & HTML Foundation |
Web design overview VS Code & GitHub setup HTML structure & semantic tags Forms & inputs Accessibility basics |
FreeCodeCamp: Basic HTML and HTML5 Hands-on: Build a simple webpage |
Create HTML foundation (header, nav, main content, form, footer) |
| Week 2: Multimedia & CSS Fundamentals |
Multimedia embedding Content strategy Image optimization GitHub Pages deployment CSS syntax & selectors |
FreeCodeCamp: HTML Forms & Basic CSS Hands-on: Add multimedia and style |
Add multimedia, basic CSS, and deploy to GitHub Pages |
| Week 3: Visual Design & Brand Identity |
Color theory & palettes Typography fundamentals CSS variables Backgrounds & borders Box model |
FreeCodeCamp: Applied Visual Design Hands-on: Create a cohesive design |
Apply visual styling with brand elements |
| Week 4: Mobile-First Responsive Design |
Responsive design principles Media queries & breakpoints Flexbox properties Responsive images Mobile UX |
FreeCodeCamp: CSS Flexbox Hands-on: Responsive design |
Make site fully responsive using Flexbox |
| Week 5: Advanced Layouts & Page Structure |
CSS Grid fundamentals Grid template areas Combining Grid & Flexbox Advanced techniques Layout patterns |
FreeCodeCamp: CSS Grid Hands-on: Grid layouts |
Implement advanced layouts (galleries, product grids, etc.) |
| Week 6: User Experience & Interactive Elements |
CSS transitions Animations & keyframes Transform properties Hover effects UX-focused interactions |
FreeCodeCamp: CSS Animation Hands-on: Create animations |
Add transitions, hover effects, and animations |
| Week 7: Dynamic Functionality & Interactivity |
JavaScript fundamentals DOM manipulation Event handling Form validation Dynamic content updates |
FreeCodeCamp: Basic JavaScript & DOM Manipulation Hands-on: Interactive elements |
Add JavaScript functionality (validation, carousels, etc.) |
| Week 8: Launch Preparation & Portfolio Showcase |
Performance optimization Accessibility testing SEO basics Analytics setup Project documentation |
FreeCodeCamp: Accessibility & Best Practices Hands-on: Final optimizations |
Fully optimized and documented project ready for real-world use |