1The syllabus below is a comprehensive national curriculum model. The live website must map it to the actual approved duration, learning hours, projects and assessments. Advanced or optional topics must be labelled accurately rather than presented as guaranteed coverage in every batch.
2Module 1: Web, Internet and Front-End Environment Foundations
3The course begins with the systems that make browser-based products work. Learners understand clients, servers, domains, DNS, URLs, HTTP, HTTPS, browser rendering and the request-response cycle before moving into code. They also establish a reliable local workflow with a code editor, browser developer tools, the terminal, Node.js-based tooling and organized project folders. This foundation helps learners diagnose problems instead of copying commands without context.
4How the web, browsers and servers work
5Domains, DNS, URLs, hosting and HTTPS awareness
6HTTP methods, status codes, headers and network requests
7Visual Studio Code and browser developer tools
8Files, folders, paths and project structure
9Terminal basics, Node.js tooling and package managers
10Reading official documentation and setup troubleshooting
11Guided practice: Set up a development workspace, inspect a live page in browser tools, trace its resources and document the request-response flow.
12Learner outcome: Explain how a browser loads a page and use a repeatable professional development environment.
13Module 2: Semantic HTML5 and Accessible Content Structure
14HTML is treated as the structural and semantic foundation of every interface. Learners create meaningful documents using headings, landmarks, navigation, links, media, lists, tables and forms. The emphasis is on source structure that remains understandable to browsers, search engines, assistive technologies and developers before visual styling is applied.
15Document structure, metadata and language declaration
16Headings, paragraphs, lists, quotations and links
17Semantic landmarks such as header, nav, main, section, article and footer
18Images, alternative text, audio and video fundamentals
19Tables for real tabular information
20Forms, labels, inputs, buttons and native validation
21HTML validation, clean indentation and common mistakes
22Guided practice: Build a multi-section service or portfolio page with a logical heading hierarchy, useful image alternatives and correctly labelled form controls.
23Learner outcome: Create semantic, maintainable HTML that supports accessibility, SEO and future styling.
24Module 3: CSS Fundamentals, Cascade and Design Tokens
25Learners build a strong CSS mental model before using frameworks. The module covers selectors, cascade, specificity, inheritance, the box model, units, typography, colour, spacing and reusable variables. Instead of styling each page independently, learners create a small visual system that can scale across components and screen sizes.
26Selectors, cascade, inheritance and specificity
27Box model, sizing, display and overflow
28Typography, readable line length and spacing
29Colours, contrast, backgrounds, borders and shadows
30Relative units including rem, em and percentages
31CSS custom properties and design tokens
32Pseudo-classes, pseudo-elements and component states
33Organizing CSS and avoiding unnecessary overrides
34Guided practice: Turn an unstyled HTML page into a consistent interface using reusable colour, spacing, type and radius tokens.
35Learner outcome: Debug why styles apply and build a maintainable visual foundation without depending on random overrides.
36Module 4: Responsive Web Design with Flexbox and CSS Grid
37Professional interfaces must adapt to different screens, content lengths, zoom levels and input methods. Learners use mobile-first planning, Flexbox and Grid to build flexible layouts. Media queries are introduced as content-driven tools rather than a list of device sizes, and responsive images, typography and navigation receive practical attention.
38Mobile-first and content-first layout planning
39Flexbox alignment, distribution, wrapping and order
40CSS Grid tracks, areas and responsive patterns
41Media queries and sensible breakpoints
42Fluid images, aspect ratios and responsive media
43Responsive typography and spacing
44Navigation, card, form and dashboard patterns
45Testing across viewport sizes and zoom levels
46Guided practice: Build a responsive landing page and dashboard that remain usable from small mobile widths to wide desktop screens.
47Learner outcome: Select Flexbox or Grid appropriately and prevent common overflow, spacing and readability problems.
48Module 5: Modern CSS, Motion and Reusable Interface Patterns
49This module moves beyond basic layouts into polished interactions and reusable patterns. Learners create transitions, keyframe animations, layered effects and interface states while respecting performance and reduced-motion preferences. Modern capabilities are introduced with progressive enhancement so the interface remains functional when a newer feature is unavailable.
50Transitions, transforms and keyframe animations
51Hover, focus, active, disabled and loading states
52CSS functions, custom properties and calculations
53Container-query and modern-layout awareness
54Dark-mode and theme-token concepts
55Reduced-motion preferences and responsible animation