Introduction to Web Design

Transform from Consumer to Creator

Learn to design and build modern, responsive websites that look stunning on any device

palette

Design Principles

Color theory, typography & visual hierarchy

code

Modern Code

HTML5, CSS3 & responsive layouts

smartphone

Mobile-First

Stunning on phones, tablets & desktops

accessibility

Accessibility

Inclusive design for all users

speed

Performance

Fast, optimized websites

rocket_launch

Deployment

Launch your sites live on the web

What You'll Learn

Design visually compelling, user-friendly websites

Build responsive sites with HTML5 & CSS3

Apply accessibility standards

Implement mobile-first strategies

Use industry-standard tools

Optimize for performance & SEO

Critique designs professionally

Create a professional portfolio

Major Projects

person 15%

Personal Brand Page

Due: March 3

Single-page website showcasing your personality and skills

Semantic HTML5
Custom CSS & animations
Fully responsive

article 20%

News/Magazine Site

Due: April 7

Multi-page publication with advanced layouts

CSS Grid & Flexbox
Navigation system
SEO optimized

work 25%

Portfolio Website

Due: Finals Week

Your complete professional portfolio

5+ pages
Case studies
Live deployment

Grading Breakdown

Your path to success - 100% total

20%

code

Weekly Code Challenges

Hands-on practice

10%

rate_review

Design Critiques

Peer feedback

15%

star

Project 1

Personal Brand

20%

stars

Project 2

News/Magazine

25%

workspace_premium

Project 3

Portfolio Website

10%

campaign

Final Presentation

Showcase your work

16-Week Journey

Click any week to explore detailed content

Welcome to the Web

Course intro • Modern web • Design thinking

Jan 14 & 16 02

HTML Foundations

Structure • Semantic HTML • Rich content

Jan 20 & 22 03

CSS Fundamentals

Styling basics • Typography • Web fonts

Jan 27 & 29 04

Layout Foundations

CSS layout • Positioning • Flexbox

Feb 3 & 5 05

Modern CSS Layout

CSS Grid • Responsive design • Media queries

Feb 10 & 12 06

Responsive Deep Dive

Responsive images • Advanced CSS • Animations

Feb 17 & 19 07

Design Principles

Visual design • Color theory • UI/UX

Feb 24 & 26 08

Project 1 Due

Presentations • Figma • Project 2 kickoff

Mar 3 & 5 09

Accessibility

WCAG guidelines • Inclusive design • A11y tools

Mar 10 & 12

beach_access

Spring Break

Recharge & relax!

Mar 14-22

Performance & Optimization

Fast websites • Image optimization • DevTools

Mar 24 & 26 11

Version Control

Git & GitHub • Deployment • GitHub Pages

Mar 31 & Apr 2 12

Project 2 Due

Presentations • SEO • Project 3 kickoff

Apr 7 & 9 13

Advanced CSS

Grid patterns • Modern features • Art direction

Apr 14 & 16 14

Forms & JavaScript

Advanced forms • JS preview • Interactivity

Apr 21 & 23 15

Portfolio Polish

Portfolio workshop • Career prep • Industry insights

Apr 28 & 30 16

Course Wrap-Up

Final Q&A • Reflections • What's next

May 5

Transform from Consumer to Creator

Design Principles

Modern Code

Mobile-First

Accessibility

Performance

Deployment

What You'll Learn

Major Projects

Personal Brand Page

News/Magazine Site

Portfolio Website

Grading Breakdown

Weekly Code Challenges

Design Critiques

Project 1

Project 2

Project 3

Final Presentation

16-Week Journey

Welcome to the Web

HTML Foundations

CSS Fundamentals

Layout Foundations

Modern CSS Layout

Responsive Deep Dive

Design Principles

Project 1 Due

Accessibility

Spring Break

Performance & Optimization

Version Control

Project 2 Due

Advanced CSS

Forms & JavaScript

Portfolio Polish

Course Wrap-Up

Resource Library

Learning Resources

AI-Powered Tools

Design Tools

Development Tools

Validation & Testing

View All Resources