HTML & CSS
Introduction to HTML & CS
Class 1 – What is the Web, HTML & CSS
Description: Overview of how websites work, role of HTML for structure and CSS for style.
Objectives:
Understand the client-server model.
Learn what HTML & CSS are used for.
Set up a simple project folder.
Practice: Create a blank .html file and open it in the browser.
Class 2 – Basic HTML Structure
Description: Learn the skeleton of an HTML document.
Objectives:
Use <!DOCTYPE html>, <html>, <head>, <body>.
Add metadata (<title>, <meta>).
Practice: Build a simple “Hello World” webpage.
Class 3 – Text & Headings
Description: Formatting text content in HTML.
Objectives:
Use <h1>–<h6>, <p>, <br>.
Emphasize text with <strong> and <em>.
Practice: Create a mini article page with headings and paragraphs.
Class 4 – Links & Images
Description: Adding interactivity and media.
Objectives:
Insert links with <a>.
Add images with <img>.
Understand absolute vs relative paths.
Practice: Build a profile page with links and an avatar image.
Class 5 – Lists & Semantic Elements
Description: Organizing content.
Objectives:
Create ordered <ol> and unordered <ul> lists.
Add semantic tags like <header>, <footer>, <main>, <section>, <article>.
Practice: Make a blog layout with semantic elements and lists.
Class 6 – Introduction to CSS
Description: First steps with CSS.
Objectives:
Apply inline, internal, and external CSS.
Understand selectors and properties.
Practice: Change colors, fonts, and background of a simple page.
Class 7 – Text Styling with CSS
Description: Formatting text with CSS.
Objectives:
Use color, font-family, font-size, text-align.
Understand units (px, %, em, rem).
Practice: Style an article with headings, paragraphs, and different fonts.
Class 8 – The Box Model
Description: Learn how elements take up space.
Objectives:
Use margin, padding, border, width, height.
Visualize how the box model works.
Practice: Create a card-style component with spacing and borders.
Class 9 – Layout with CSS (Flexbox Basics)
Description: Positioning and aligning elements.
Objectives:
Use display: flex;.
Align items horizontally and vertically.
Understand justify-content and align-items.
Practice: Make a navigation bar with flexbox.
Class 10 – Final Project: Personal Website
Description: Apply everything learned to build a small site.
Objectives:
Combine HTML structure with CSS styling.
Use semantic elements, text formatting, images, and flexbox.
Practice: Build a personal portfolio page with multiple sections (About Me, Projects, Contact).