HTML & CSS Foundations: From Zero to Web Design Hero
By the end, youβll build a complete responsive webpage with HTML + CSS, understand how structure and style work together, and be ready for PHP & JavaScript.
𧩠Course Structure Overview
| Module | Title | Duration | Key Deliverable |
|---|---|---|---|
| 1 | Introduction to the Web & HTML | 45 min | First βHello StreetGeekβ webpage |
| 2 | HTML Structure & Elements | 60 min | Multi-section webpage layout |
| 3 | Working with Text, Links, and Images | 45 min | Personal profile page |
| 4 | Lists, Tables & Semantic HTML | 60 min | Resume / product listing page |
| 5 | Introduction to CSS | 60 min | Styled profile page |
| 6 | The CSS Box Model | 45 min | Spaced, padded, bordered layout |
| 7 | Layout with Flexbox & Grid | 75 min | Two-column webpage layout |
| 8 | Colors, Fonts & Visual Design | 60 min | Modern landing page design |
| 9 | Responsive Web Design | 90 min | Fully responsive website |
| 10 | Final Project β Personal Portfolio Website | 2β3 hrs | Personal portfolio website |
Each module title links to its full lesson on SitesByYogi.
π Detailed Module Breakdown
MODULE 1: Introduction to the Web & HTML 45 min
Objective: Understand how websites work and how HTML structures pages.
Topics
- What is HTML? How browsers render code
- HTML vs CSS vs JavaScript
- Basic structure: <!DOCTYPE html>, <html>, <head>, <body>
- Editors (VS Code), folders & files, opening pages in a browser
Deliverable: β βHello StreetGeek!β webpage
Assignment: Create html-basics and index.html.
MODULE 2: HTML Structure & Elements 60 min
Objective: Build structured, multi-section pages using semantic tags.
Topics
- Headings, paragraphs, divs
- Semantic tags: <header>, <main>, <section>, <footer>
- Nesting, indentation, comments, whitespace
- Linking multiple pages
Deliverable: β βAbout Meβ site with two linked pages
Assignment: Add a <nav> with links between pages.
MODULE 3: Working with Text, Links, and Images 45 min
Objective: Enhance pages with semantic formatting, links, and images.
Topics
- Inline vs block elements
- Text tags: <b>, <i>, <em>, <strong>
- Links & anchors; image attributes (alt, width, height)
- Relative vs absolute URLs
Mini-Project: β Profile page with photo, short bio, favorite links
Assignment: Include 3 images + one internal and one external link.
MODULE 4: Lists, Tables & Semantic HTML 60 min
Objective: Use lists, tables, and semantic elements for organized data.
Topics
- Ordered, unordered, description lists
- Tables: <table>, <tr>, <td>, <th>
- Semantic markup: <article>, <aside>, <figure>, <figcaption>
Mini-Project: β Resume or product listing page
Assignment: Add headings hierarchy + semantic structure.
MODULE 5: Introduction to CSS 60 min
Objective: Add styles with CSS (inline, internal, external).
Topics
- Selectors, properties, values
- External stylesheets
- Common properties: color, background, fonts, margin, padding
Deliverable: β Styled profile page
Assignment: Create styles.css and link on all pages.
MODULE 6: The CSS Box Model 45 min
Objective: Control spacing and layout with the Box Model.
Topics
- Content, padding, border, margin
- display values; width/height; overflow
- Borders & rounded corners; DevTools inspection
Mini-Project: β Product Card layout
Assignment: Tune padding/margins for balance.
MODULE 7: Layout with Flexbox & Grid 75 min
Objective: Master modern layout systems.
Topics
- Flexbox properties: justify-content, align-items, gap
- CSS Grid basics, grid-template areas
- Centering, responsive layouts with media queries
Mini-Project: β Two-column blog layout
Assignment: Make it adapt to mobile.
MODULE 8: Colors, Fonts & Visual Design 60 min
Objective: Level-up visuals with typography and color.
Topics
- Color models (HEX/RGB/HSL)
- Web-safe fonts & Google Fonts
- Line-height, letter-spacing, alignment
- Gradients, background images, shadows
- CSS variables
Mini-Project: β Hero section for a landing page
Assignment: Use one gradient, a custom font, and a button hover effect.
MODULE 9: Responsive Web Design 90 min
Objective: Make designs adapt to different screens.
Topics
- Media queries; mobile-first
- Relative units: %, em, rem, vh, vw
- Responsive images
- Flexbox/Grid for responsiveness
Mini-Project: β Make your landing page fully responsive
Assignment: Test on at least 3 breakpoints.
MODULE 10: Final Project β Portfolio Website 2β3 hrs
Objective: Combine all skills in a cohesive portfolio.
Requirements
- Homepage, About, Contact
- Responsive design
- Navigation + footer
- Grid/Flexbox layout
- Consistent color & type scales
Deliverable: β Publish locally or on StreetGeek VPS
Bonus: Add GitHub links, project pages, resume PDF.
π§Ύ Course Materials
- PDF Lesson Notes
- Example Code Files (.zip)
- Practice Labs & Quizzes
- Mini-Project Starter Files
- Final Project Template
- Certificate of Completion
𧱠Suggested Next Courses
- PHP Foundations: From Zero to Dynamic Web Developer
- JavaScript for Beginners
- WordPress Development Foundations
Link these once your pages are ready.
π§βπ« Instructor Notes Internal
- Emphasize structure before style
- Include live coding walkthroughs
- Provide color palette & typography guides
- Reinforce naming conventions & organization
- Encourage validation & GitHub Pages for publishing
π― Course Goal Recap
Build a complete, responsive webpage with HTML & CSS and be prepared for deeper studies in PHP and JavaScript.
