HTML & CSS: 3-Hour Workshop
Practical, hands-on beginner to
intermediate session
Presenter: You
Workshop Goals (3 hours)
• Understand HTML structure and semantics
• Learn CSS selectors, layout, and responsive
design
• Build a small multi-page site during hands-on
exercises
• Leave with a slide deck, sample code, and
exercises
Workshop Schedule (High-level)
• Hour 1 — HTML basics, structure, semantic
tags (45m + 15m exercise)
• Hour 2 — CSS fundamentals, box model,
selectors, layout (40m + 20m exercise)
• Hour 3 — Responsive design, flexbox/grid,
final project + Q&A (45m + 15m wrap-up)
Hour 1 — HTML: Overview
• What is HTML? Document structure (<!
DOCTYPE>, <html>, <head>, <body>)
• Common tags: headings, paragraphs, links,
lists, images
• Semantic elements: <header>, <nav>, <main>,
<section>, <article>, <footer>
• Forms and inputs overview
HTML: Hands-on Exercise (15m)
• Create index.html with basic structure
• Add header with navigation, main section with
article and aside, and footer
• Include an image and a list of links
HTML: Example Code Snippet
• <!DOCTYPE html>
• <html lang="en">
• <head><meta charset="utf-8"><title>My
Site</title></head>
• <body>
• <header><h1>Site Title</h1></header>
• <nav><a href="#">Home</a> | <a
href="#">About</a></nav>
• </body>
Hour 2 — CSS: Fundamentals
• What is CSS? Syntax and how to include
(inline, internal, external)
• Selectors: type, class, id, attribute,
descendant, pseudo-classes
• Box model: content, padding, border, margin
• Colors, fonts, and basic typography
CSS: Layout Techniques
• Display types: block, inline, inline-block, none
• Positioning: static, relative, absolute, fixed,
sticky
• Flexbox — one-dimensional layout (intro)
• Grid — two-dimensional layout (overview)
CSS Hands-on Exercise (20m)
• Create styles.css, link it to index.html
• Style header/nav, create a 2-column layout
with flexbox
• Practice responsive breakpoint with a simple
media query
Hour 3 — Responsive Design
• Mobile-first approach
• Media queries and breakpoints
• Responsive images (srcset) and accessibility
considerations
• Performance tips: minimize render-blocking
CSS
Flexbox Quick Reference
• Container: display: flex; flex-direction; justify-
content; align-items
• Items: flex-grow; flex-shrink; flex-basis; order
• Common patterns: nav bars, centered content,
responsive cards
Grid Quick Reference
• Container: display: grid; grid-template-
columns/rows; gap
• Placement: grid-column, grid-row, grid-area
• Use cases: complex layouts, magazine-like
designs
Final Project (40m)
• Build a 3-page website: Home, About, Contact
• Requirements: responsive header/nav, hero
section, cards for features, contact form
• Use GitHub Pages or local live server to
preview
• Instructor/demo code available for reference
Assessment & Wrap-up (15m)
• Show-and-tell: volunteers present their pages
(5–10 min)
• Recap key concepts and patterns
• Next steps: resources, recommended reading,
practice projects
• Q&A
Resources & Cheat Sheets
• MDN Web Docs — HTML & CSS references
• CSS-Tricks — guides and snippets
• Flexbox & Grid cheat-sheets
• Sample starter repo and slides (provided)
Accessibility & Best Practices
• Use semantic HTML and proper heading order
• Provide alt text for images and labels for form
inputs
• Ensure color contrast and keyboard navigation
• Test with browser devtools and simple screen
reader
Suggested 15-min Breakdown
(Instructor Guide)
• 00:00–00:15 — Intro + workshop goals + setup
• 00:15–00:45 — HTML fundamentals
• 00:45–01:00 — HTML exercise & review
• 01:00–01:30 — CSS fundamentals
• 01:30–01:50 — CSS exercise
• 01:50–02:10 — Flexbox & Grid
• 02:10–02:40 — Final project work
• 02:40–03:00 — Presentations + wrap-up
Sample File Structure (Starter)
• /project-folder/
• index.html
• about.html
• contact.html
• css/
• styles.css
• images/
• js/ (optional)
Contact & Follow-up
• Email:
[email protected]• GitHub: github.com/yourname
• Slides & starter code link: (attach when
sharing)
• Feedback form: (optional)
