HTML & CSS for Beginners

← Course

Level 1: HTML – The Skeleton (Web Structure)

Session 1: Intro & Document Structure

Web mechanics: how the browser reads a .html file.
Boilerplate: understanding <!DOCTYPE html>, <html>, <head>, and <body>.
Meta tags: setting charset and viewport so the page works well on mobile.

Session 2: Content Elements

Text: headings (h1–h6), paragraphs (p), span, and bold / italic.
Lists: ordered (ol), unordered (ul), and list items (li).
Media: images (img) with proper alt attributes, and links (a).

Session 3: Semantic HTML & Forms

Semantic HTML: using <header>, <nav>, <main>, <section>, <article>, and <footer> (important for SEO).
Forms: building inputs with <form>, <input>, <label>, <select>, and <button>.
HTML5 validation: required, placeholder, min / max length, and input types (email, password, number).

Level 2: CSS – The Skin (Presentation)

Session 4: CSS Fundamentals

Linking: using external CSS (separate .css file).
Selectors: targeting elements by tag, class (.), and ID (#).
Colors & fonts: HEX/RGB and importing Google Fonts.

Session 5: The Box Model (The Heart of CSS)

The concept: content, padding, border, and margin.
Sizing: width / height vs min-width / max-width.
box-sizing: why box-sizing: border-box should be used in every project.

Session 6: Modern Variables & Assets

CSS variables: theming with :root { --primary-color: #333; }.
Assets: modern image formats (WebP & SVG) and favicon.

Level 3: Layout (Arranging the Page)

Session 7: Positioning & Display

Display: the difference between block, inline, and inline-block.
Position: static, relative, absolute, and fixed.
z-index: controlling which elements stack on top.

Session 8: Flexbox (The Daily Driver)

Container: display: flex, flex-direction, and flex-wrap.
Alignment: justify-content and align-items.
Flex items: flex-grow and gap.

Session 9: CSS Grid (The Blueprint)

Grid system: columns and rows with grid-template-columns.
Gap & areas: building magazine- or gallery-style layouts easily.

Level 4: Responsive & Deployment

Session 10: Responsive Design (Mobile First)

Media queries: different layouts for phone, tablet, and laptop.
Flexible units: moving from px to rem, em, vw, and vh.

Session 11: Final Project & Go Live

Project: build a one-page personal portfolio from scratch.
Optimization: checking load speed and code quality.
Deployment: publishing to GitHub Pages or Netlify so you can share it.

Interested in this course? I offer mentoring and structured learning—get in touch to discuss your goals.

Get in touch Mentorship View all courses