​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).