• How the Web Works (Client-Server Model, HTTP/HTTPS)

• Web Browsers and Developer Tools

• Introduction to HTML, CSS, and JavaScript

• Setting Up a Development Environment (VS Code, Browser Dev Tools)

Hands-on Activity:

• Install and configure a code editor (VS Code).

• Inspect a live webpage using browser DevTools.

• HTML Document Structure

• Common HTML Tags

• Lists

• Tables

• Forms and Input Elements

• Semantic HTML

Hands-on Activity:

• Create a structured HTML page with headings, paragraphs, links, and images.

• Build a simple contact form.

• Introduction to CSS (Inline, Internal, External)

• CSS Selectors (Element, Class, ID)

• Styling Text (Font, Color, Size, Alignment)

• The Box Model (Margin, Padding, Border)

• Display Properties

• Positioning

• Basic Flexbox Layout

Hands-on Activity:

• Style an HTML page with custom fonts, colors, and spacing.

• Create a simple responsive navigation bar.

• Introduction to Responsive Web Design

• Media Queries (Adapting to Different Screen Sizes)

• Fluid Layouts (Percentages, max-width)

• Mobile-First Design Approach

• Introduction to CSS Grid

Hands-on Activity:

• Convert a desktop layout into a mobile-friendly design.

• Build a responsive image gallery.

• JavaScript Basics (Variables, Data Types, Operators)

• Conditional Statements

• Loops

• Functions (Declaration, Parameters, Return)

• DOM Manipulation (Selecting Elements, Changing Content, Events)

Hands-on Activity:

• Write a simple script to change webpage content dynamically.

• Create an interactive button that changes color on click.

Project: Develop a Personal Portfolio Website

• Structure with HTML

• Style with CSS (Responsive Layout)

• Add interactivity with JavaScript (e.g., Dark Mode Toggle, Form Validation)

Final Assignment:

• Submit the completed portfolio website for review.

• Quizzes (20%) – Short tests after each module.

• Assignments (40%) – Hands-on coding exercises.

• Final Project (40%) – Personal portfolio website.