← All curricula

Your learning plan · 18 modules

Web Designing - HTML and CSS

Go from your first HTML file to a complete responsive website. Learn page structure, accessible forms, CSS design, Flexbox and Grid layouts, animation and mobile-friendly styling through visible browser projects.

Web developmentHTML / CSS / JavaScript
Who it's for
Grades 6+, beginners, college students and professionals
Typically ages 11+
Suggested duration
30 classes / 6-8 weeks
How you learn
Concepts → practice → projects
Explore all 18 modules Download syllabus (PDF)

Age ranges are approximate. We'll confirm your starting module and class schedule before enrolment.

The goal

What you'll learn to do

  • Create HTML pages with headings, paragraphs, links, images, lists, tables and forms.
  • Use semantic sections, labels and image descriptions to make pages easier to understand.
  • Style pages with CSS selectors, colours, typography, spacing and the box model.
  • Build responsive layouts with Flexbox, Grid and media queries.
  • Add hover feedback, transitions and basic animations.
  • Build, test and present a complete responsive website.

One module at a time

Your module-wise syllabus

Open a module to see the topics and hands-on practice. Start with the foundations and build up step by step.

01

Introduction to Web and HTML

What you'll explore

  • What is a website?
  • Role of HTML in web development
  • Creating and saving an HTML file
  • Browser preview
  • Basic web project folder structure

Try it yourself

  • Create first HTML file
  • Add page title and basic text
  • Save and open in browser
02

HTML Document Structure

What you'll explore

  • Doctype declaration
  • html, head and body tags
  • Meta tags
  • Title tag
  • HTML elements and attributes
  • HTML comments

Try it yourself

  • Create a clean HTML skeleton
  • Add title and meta information
  • Add comments for sections
03

Text Formatting and Content Tags

What you'll explore

  • Headings h1 to h6
  • Paragraphs and line breaks
  • Bold, italic and underline
  • Span and div basics
  • Use horizontal lines and special content alongside formatted text

Try it yourself

  • Create an article page
  • Add headings and formatted text
  • Use span and div elements for small sections
04

Links and Images

What you'll explore

  • Anchor tag
  • Internal and external links
  • Opening link in new tab
  • Image tag
  • Set an image source, alternative text, width and height
  • Relative and absolute paths

Try it yourself

  • Add navigation links
  • Insert images with alt text
  • Create a gallery section
05

Lists and Tables

What you'll explore

  • Unordered lists
  • Ordered lists
  • Nested lists
  • Table, tr, td and th
  • Table headers and captions
  • Simple table styling

Try it yourself

  • Create a nested list
  • Build a timetable or pricing table
  • Add CSS border to table
06

HTML Forms and Input Types

What you'll explore

  • Form tag
  • Text, email, password and number inputs
  • Textarea
  • Radio buttons and checkboxes
  • Select dropdown
  • Buttons and labels
  • Check that required fields are filled in

Try it yourself

  • Create a contact form
  • Add different input types
  • Test required validation in browser
07

Semantic HTML and Accessibility Basics

What you'll explore

  • Header, nav, main, section, article and footer
  • Accessible labels
  • Alt text
  • Organise content clearly for visitors and search engines
  • Clean page sections

Try it yourself

  • Convert div-only page into semantic layout
  • Add nav and footer
  • Improve image alt text
08

Introduction to CSS

What you'll explore

  • What CSS does
  • Inline CSS
  • Internal CSS
  • External CSS
  • Linking CSS file
  • CSS syntax

Try it yourself

  • Create style.css
  • Link CSS file to HTML
  • Style headings and paragraphs
09

CSS Selectors and Properties

What you'll explore

  • Element selectors
  • Class selectors
  • ID selectors
  • Grouping selectors
  • Color and background
  • Font family and font size

Try it yourself

  • Style multiple sections with classes
  • Create button class
  • Apply background and typography
10

Box Model and Spacing

What you'll explore

  • Content, padding, border and margin
  • Width and height
  • Border radius
  • Box sizing
  • Card layout basics

Try it yourself

  • Create profile cards
  • Add spacing and border radius
  • Use box-sizing: border-box to make dimensions easier to manage
11

Display and Positioning

What you'll explore

  • Block, inline and inline-block
  • Display none
  • Static, relative, absolute and fixed positioning
  • Z-index basics

Try it yourself

  • Create a fixed header
  • Add an absolutely positioned label to a card
  • Practice display differences
12

Flexbox Layout

What you'll explore

  • Flex container and flex items
  • Direction, wrap and gap
  • Justify-content and align-items
  • Navigation layout
  • Card row layout

Try it yourself

  • Build responsive navigation
  • Create service cards with Flexbox
  • Adjust spacing and alignment
13

CSS Grid Layout

What you'll explore

  • Grid container
  • Rows and columns
  • Use the fr unit to share available grid space
  • Gap
  • Introduce named areas in a grid layout
  • Responsive gallery

Try it yourself

  • Build image gallery
  • Create dashboard-like section
  • Make grid responsive
14

Transitions, Hover Effects and Animations

What you'll explore

  • Transition property
  • Hover states
  • Transform scale/translate basics
  • Keyframes
  • Animation duration and timing

Try it yourself

  • Add hover effects to cards
  • Animate hero heading or icon
  • Test animation speed
15

Responsive Web Design

What you'll explore

  • Mobile-first approach
  • Media queries
  • Breakpoints
  • Responsive images
  • Testing with developer tools

Try it yourself

  • Make landing page mobile-friendly
  • Adjust navbar and cards
  • Test on multiple screen widths
16

Bootstrap or Tailwind CSS Introduction

What you'll explore

  • Why frameworks are used
  • Bootstrap grid and components overview
  • Tailwind utility classes overview
  • Compare when custom CSS or a framework is useful

Try it yourself

  • Build one section using Bootstrap or Tailwind CSS
  • Customize spacing and colors
  • Explain the framework approach and its limits
17

Website Project Build

What you'll explore

  • Project idea
  • Wireframe
  • Section planning
  • Navigation, hero, services, gallery/contact
  • Responsive checks
  • Final polish

Try it yourself

  • Build a portfolio, restaurant or business website
  • Add at least 5 sections
  • Make it responsive
18

Project Presentation and Review

What you'll explore

  • Final testing
  • Code cleanup
  • Check how the website behaves in different browsers
  • Project presentation
  • Feedback and improvements

Try it yourself

  • Present website
  • Submit your organised project folder
  • Complete a final list of improvements

Make your learning visible

Projects & practice you can build on

These ideas come from the syllabus. Your teacher will help choose and adapt projects to your level.

  • An article page and image gallery
  • A timetable or pricing table
  • A contact form with browser validation
  • Profile cards, a responsive navigation bar and a gallery layout
  • A framework-styled section with customised spacing and colours
  • A responsive portfolio, restaurant or business website with at least five sections

Where could you go next?

Possible next steps to discuss once you're confident with this syllabus.

JavaScript

Adapted for students and parents from the academy's module-wise syllabus. The downloadable PDF includes the original detailed teaching plan.

WhatsApp