Week 1–3

HTML Fundamentals

In the first three weeks, students will dive deep into the structure of the web. They will learn how to create well-structured HTML documents using essential tags, semantic elements, and attributes that give meaning and accessibility to content. Practical exercises will focus on organizing text, images, and links in a clear, logical way. The unit also introduces basic CSS styling—covering typography, colors, backgrounds, and borders—so students can start shaping the look and feel of their pages right away. By the end of this module, learners will be comfortable building a simple, well-structured webpage from scratch.

Weeks 4–6

CSS Basics & Responsive Design

In weeks four to six, the focus shifts to mastering CSS for more polished and adaptable designs. Students will explore layout techniques such as floats, flexbox, and CSS grid to create multi-column layouts and complex page structures. They will learn how to apply consistent styling across a site using reusable class rules and how to adjust layouts for different screen sizes. This unit also introduces Bootstrap, a powerful framework for rapid development, allowing students to leverage its pre-built components and responsive grid system. By the end, students will have the skills to build attractive, mobile-friendly websites that look great on any device.

Weeks 7–9

JavaScript Essentials

Weeks seven to nine introduce JavaScript, the programming language that brings web pages to life. Students will start with the basics—variables, data types, operators, and control structures—before moving on to functions and event handling. They will explore DOM manipulation to dynamically update content, create interactive elements, and respond to user actions like clicks or form submissions. Practical exercises will include building small, interactive features such as image sliders, form validations, and dynamic menus. By the end of this unit, students will have a solid foundation in front-end programming, preparing them for more advanced JavaScript topics.

Week 10

Git & Tailwind CSS Intro

In week ten, students will be introduced to Git, the industry-standard version control system that allows developers to track changes, collaborate effectively, and avoid costly mistakes. They will learn how to create repositories, commit changes, branch projects, and merge work. Alongside this, students will explore Tailwind CSS—a modern utility-first framework that makes styling faster and more consistent. They will practice creating custom designs without writing long CSS files, using Tailwind’s extensive set of utility classes. This week bridges professional development workflows with rapid, modern styling techniques.

Weeks 11–12

Final Project

The last two weeks are dedicated to the final project, where students apply everything they have learned. Working individually or in small teams, they will plan, design, and develop a fully functional, responsive website from the ground up. This capstone project will involve creating semantic HTML, applying advanced CSS styling and responsive design principles, adding JavaScript interactivity, and managing the project with Git. Students will also practice presenting their work, receiving feedback, and making refinements. By the end, they will have a professional-quality portfolio piece to showcase their skills to employers or clients.

FrontEnd Web Development