Web Development (HTML, CSS, JavaScript)
Module 1 – Introduction to the Web (1 Week)
Objectives
-
Understand how the Web works
-
Install and master essential development tools
Content
-
How the Internet works (servers, browsers, HTTP)
-
HTML, CSS, JavaScript: roles and differences
-
Installing VS Code, extensions, Chrome DevTools
-
Introduction to Git & GitHub
Project
Set up a full development environment.
Module 2 – HTML5: Structuring the Web (2 Weeks)
Objectives
Build well-structured, accessible web pages.
Content
-
Basic structure: <html>, <head>, <body>
-
Text, images, links, tables, lists
-
Forms: inputs, labels, validation
-
Semantic HTML
-
Basic SEO (titles, metadata, hierarchy)
Project
Build a full web page (online CV or simple landing page).
Module 3 – CSS3: Design & Layout (3 Weeks)
Objectives
Create modern and responsive website designs.
Content
-
Selectors, classes, IDs
-
Colors, typography, backgrounds
-
Box Model
-
Flexbox layout
-
CSS Grid
-
Responsive design (media queries)
-
Transitions & animations
-
Intro to Sass (optional)
Project
Build a fully responsive landing page (corporate page, agency page, or portfolio home page).
Module 4 – JavaScript: Core Concepts (3 Weeks)
Objectives
Learn the fundamentals of programming and dynamic web behavior.
Content
-
Variables, data types, operators
-
Conditions, loops
-
Functions (classic & arrow functions)
-
Arrays, objects
-
DOM manipulation
-
Event handling (click, hover, submit, etc.)
-
Intro to Fetch API & AJAX
Project
Add dynamic interactions to a website (navigation menu, slider, modal, form validation).
Module 5 – Advanced JavaScript (2 Weeks)
Objectives
Reach a junior developer level.
Content
-
ES6+ features
-
Modules
-
Async programming (Promises, async/await)
-
Working with APIs (JSON)
-
LocalStorage
Project
Build a small web application, such as:
-
To-Do App
-
Weather App (API)
-
Quiz App
-
Mini Blog using Fetch API
Module 6 – Final Project (1 Week)
Objectives
Apply all skills to complete a professional-level website.
Final Project
Create a full, responsive website with interactive JavaScript features. Examples:
-
Complete portfolio website
-
Business website
-
Dashboard UI
-
Basic e-commerce front-end
Evaluation based on:
✔ Code structure
✔ Design quality
✔ User experience (UX)
✔ Responsive design
✔ GitHub project documentation
Skills Students Will Gain
By the end of the program, learners will be able to:
-
Build structured HTML pages
-
Create modern layouts using CSS (Flexbox & Grid)
-
Develop interactive features with JavaScript
-
Use Git and GitHub
-
Deploy websites
-
Build a professional portfolio
Tools Used
-
Visual Studio Code
-
Git & GitHub
-
Chrome DevTools
-
Figma (optional)
-
Netlify / Vercel (deployment)
