Design beautiful, responsive websites with HTML5 and CSS3. This course covers semantic mark-up, modern layouts with Flexbox and Grid, styling techniques, and media queries-giving you full control over your site’s look and feel.
🗓️ Course Schedule: HTML & CSS Essentials
Duration: 2 Days
Time: 10:00 AM – 4:00 PM Daily
Format: Instructor-led • Hands-on Exercises • Live Coding
🔹 Day 1: HTML Foundations & Page Structure
10:00 AM – 11:30 AM
📄 Getting Started with HTML
- What is HTML and how it works in the browser
- Setting up your first HTML file
- Understanding the document structure (
<!DOCTYPE>,<html>,<head>,<body>) - Creating headings, paragraphs, and line breaks
- Adding comments and whitespace for clean code
11:30 AM – 1:00 PM
🔗 Links, Images & Lists
- Creating hyperlinks (
<a>) — internal and external - Adding images with
<img>and alt text for accessibility - Unordered vs ordered lists (
<ul>,<ol>,<li>) - Lab: Create a personal homepage with links and images
1:00 PM – 2:00 PM — Lunch Break
2:00 PM – 4:00 PM
📑 Building Structure with Divs, Sections & Forms
- Using
<div>,<section>,<article>, and<footer>for layout - Introduction to HTML forms:
<form>,<input>,<textarea>,<button> - Creating user input forms with labels and placeholders
- Lab: Build a simple contact form page with semantic structure
🔹 Day 2: CSS Styling & Page Layout
10:00 AM – 11:30 AM
🎨 Intro to CSS & Styling Elements
- What is CSS and how it connects to HTML
- Inline, internal, and external CSS
- Selectors, properties, and values
- Styling text: color, font-family, font-size, line-height
- Backgrounds and borders
11:30 AM – 1:00 PM
📏 Layout, Box Model & Positioning
- Understanding the box model: margin, border, padding, content
- Display types: block, inline, inline-block
- Using
width,height, andmax-width - Introduction to
position,float, andclear - Lab: Style a multi-section web page with headings, images, and text
1:00 PM – 2:00 PM — Lunch Break
2:00 PM – 4:00 PM
📐 Responsive Layouts & Final Project
- Intro to Flexbox: flexible page layouts
- Media queries and mobile-first design principles
- Combining HTML + CSS in a clean file structure
- Final Project: Personal Portfolio Page
→ Build a responsive site with navigation, content, and a contact form
→ Includes layout, color styling, and font control
🧠 What You’ll Learn
- How to write well-structured HTML for modern websites
- How to style and layout pages using CSS
- Best practices for responsive, mobile-friendly design
- Hands-on experience building and styling a functional website from scratch