HTML, CSS, JavaScript, a frontend framework, APIs, accessibility, debugging, testing and deployment.
What you will cover
HTML
CSS
JavaScript
a frontend framework
APIs
accessibility
debugging
testing
deployment
Topic list from the institute's programme record.
Certification
Certificate terms for this programme are confirmed by the institute at admission. Any ADIVAS course-completion certificate is an institute certificate; it is not a university degree, an externally accredited qualification or a vendor certification (such as AWS or Microsoft) unless the institute states so in writing.
Curriculum 0.1 · Draft: written for ADIVAS and awaiting academic review and approval. Topics and weeks may change before your batch starts.
Your skill trail
You move through 5 stations. Each week builds one skill you can show, not just a topic you have heard.
1
HTML and CSS foundations
Build semantic, accessible and responsive pages.
Week 1 Semantic HTML and accessibility basics
Week 2 CSS fundamentals and layout with flexbox
Week 3 Responsive design, grid and AI-assisted CSS
2
JavaScript and the browser
Add behaviour with JavaScript, the DOM and asynchronous API calls.
Week 4 JavaScript fundamentals
Week 5 The DOM, events and forms
Week 6 Asynchronous JavaScript and APIs
3
React applications
Structure interfaces as components with state, effects and routing.
Week 7 React components and props
Week 8 State, events and effects
Week 9 Routing, forms and data fetching in React
4
Quality and AI-assisted practice
Test, debug, audit and use AI assistants responsibly.
Week 10 Testing and debugging
Week 11 AI-assisted workflow, accessibility and performance
5
Deployment and capstone
Ship and present a finished frontend application.
Week 12 Deployment and capstone presentation
★
Local Shop Catalogue
Your project, reviewed by a trainer.
The ADIVAS mastery ladder: how each skill is recognised
Explored You have seen the idea and tried a first example.
Practising You can do it with hints and keep improving.
Proficient You complete the weekly practical task correctly on your own.
Proven You apply it in a project reviewed by your trainer.
Skill-level tracking is being added to the learner workspace. Your trainer already reviews weekly practical work.
What you will be able to do
Write semantic, accessible HTML and responsive CSS using flexbox, grid and custom properties.
Write modern JavaScript and manipulate the DOM and events correctly.
Fetch and display data from a REST API with loading, error and empty states.
Build React applications with components, props, state, effects and routing.
Debug with browser DevTools and test components and logic with automated tests.
Use AI assistants to draft, explain and refactor code while reviewing, running and testing every suggestion.
Audit accessibility and performance, then deploy a frontend application with a documented process.
Who it suits
School Class 9-12 students who want to build and publish their first interactive web pages.
College Students who want a portfolio-ready frontend skill set with modern tooling and AI-assisted workflows.
Professional Working adults, designers and career changers who want to build real web interfaces for products and small businesses.
Prerequisites: Basic computer skills and the ability to type and manage files. No programming experience is required. Tools: Visual Studio Code, A current Chromium-based or Firefox browser with DevTools, Node.js (LTS) with npm, Vite and React, Vitest and Testing Library, Git and GitHub, A free static hosting service such as GitHub Pages, Netlify or Vercel, A reputable AI coding assistant used under trainer guidance.
Weekly plan
HTML and CSS foundations Weeks 1–3
Week 1: Semantic HTML and accessibility basics
Theory
Document structure, headings, landmarks, lists, links and images
Forms, labels and input types
Alt text, keyboard focus and why semantics matter
Lab
Build a one-page profile site for a small Madurai business with header, main, footer, a contact form and meaningful alt text; navigate it with the keyboard only.
Homework
Validate the HTML and fix every warning; write down three accessibility choices you made.
Deliverable
A semantic HTML page committed to Git.
Weekly checkpoint
Pick the right element for six content needs; spot a missing label in a form.
You will be able to
Write semantic, accessible HTML and responsive CSS using flexbox, grid and custom properties.
Week 2: CSS fundamentals and layout with flexbox
Theory
Selectors, specificity and the cascade
Box model, spacing, typography and colour contrast
Flexbox for rows, columns and alignment
Lab
Style the profile site with a readable type scale, consistent spacing and a flexbox navigation bar; check colour contrast.
Homework
Reproduce a given card layout using only flexbox.
Deliverable
A styled page with a style guide of colours and font sizes.
Weekly checkpoint
Predict which rule wins in three specificity cases; fix an overflow bug.
You will be able to
Write semantic, accessible HTML and responsive CSS using flexbox, grid and custom properties.
Week 3: Responsive design, grid and AI-assisted CSS
Theory
Mobile-first design and media queries
CSS grid and custom properties
Asking an AI for CSS and checking it against your requirements
Lab
Make the site responsive from 360px to desktop width with grid; ask an AI assistant for a card-grid snippet, then test it at three widths and with keyboard focus before accepting.
Homework
Record what the AI got right and what you had to change.
Deliverable
A responsive site and an AI review note.
Weekly checkpoint
Read a grid declaration and sketch the layout; critique an AI-generated snippet.
You will be able to
Write semantic, accessible HTML and responsive CSS using flexbox, grid and custom properties. Use AI assistants to draft, explain and refactor code while reviewing, running and testing every suggestion.
JavaScript and the browser Weeks 4–6
Week 4: JavaScript fundamentals
Theory
let, const, types and equality
Functions, arrow functions and scope
Arrays, objects and array methods: map, filter and reduce
Lab
Write small programs in the console and a script file: a GST calculator, a marks grader and a shopping-cart total using reduce.
Homework
Rewrite two loops as map and filter and explain the difference.
Deliverable
A JavaScript exercise set with comments.
Weekly checkpoint
Predict outputs involving == versus ===, scope and array methods.
You will be able to
Write modern JavaScript and manipulate the DOM and events correctly.
Week 5: The DOM, events and forms
Theory
Selecting and updating DOM elements
Event handling and event delegation
Form validation with the Constraint Validation API and accessible error messages
Lab
Build a to-do list with add, complete and delete, persisted in localStorage, with an accessible validated form.
Homework
Add keyboard support so every action works without a mouse.
Deliverable
A working to-do application.
Weekly checkpoint
Debug an event handler that fires twice; explain delegation.
You will be able to
Write modern JavaScript and manipulate the DOM and events correctly. Write semantic, accessible HTML and responsive CSS using flexbox, grid and custom properties.
Week 6: Asynchronous JavaScript and APIs
Theory
HTTP requests, JSON and status codes
Promises, async and await and error handling
Loading, error and empty states in the interface
Lab
Fetch posts from a public sample API and render them; show a loading message, handle a failed request and an empty list; inspect requests in the Network tab.
Homework
Add search and a retry button for failures.
Deliverable
A data-driven page with all three states.
Weekly checkpoint
Read a network trace; find the missing await.
You will be able to
Fetch and display data from a REST API with loading, error and empty states. Debug with browser DevTools and test components and logic with automated tests.
React applications Weeks 7–9
Week 7: React components and props
Theory
Why components; JSX rules
Props, composition and lists with keys
Project setup with Vite and file structure
Lab
Rebuild the profile site as React components: Header, ProductCard, ProductList and Footer with data passed through props.
Homework
Explain why keys must be stable and demonstrate a bug caused by index keys.
Deliverable
A component-based React app.
Weekly checkpoint
Convert a markup block into components; spot a missing key.
You will be able to
Build React applications with components, props, state, effects and routing.
Week 8: State, events and effects
Theory
useState and updating state immutably
Lifting state and controlled inputs
useEffect, dependencies and cleanup
Lab
Add a filterable, sortable product list with a cart counter; fetch products inside useEffect with cleanup.
Homework
Reproduce and fix an infinite effect loop.
Deliverable
An interactive catalogue with a cart.
Weekly checkpoint
Explain why a state update does not change the variable immediately; fix a stale dependency.
You will be able to
Build React applications with components, props, state, effects and routing.
Week 9: Routing, forms and data fetching in React
Theory
Client-side routing and URL parameters
Controlled forms and validation
Custom hooks and sharing logic; reviewing AI-generated hooks
Lab
Add pages for catalogue, product details and checkout form using a router; extract useFetch as a custom hook and have an AI propose an improvement that you test.
Homework
Write a short note on what you accepted or rejected from the AI and why.
Deliverable
A multi-page React application.
Weekly checkpoint
Trace what happens when the URL changes; critique a generated custom hook.
You will be able to
Fetch and display data from a REST API with loading, error and empty states. Build React applications with components, props, state, effects and routing. Use AI assistants to draft, explain and refactor code while reviewing, running and testing every suggestion.
Quality and AI-assisted practice Weeks 10–11
Week 10: Testing and debugging
Theory
Unit tests for pure functions and component tests with Testing Library
Querying by role to support accessibility
DevTools: Elements, Console, Network, Performance and breakpoints
Lab
Write eight tests for the cart logic and the product card; debug three seeded bugs using DevTools breakpoints.
Homework
Create a bug log with symptom, cause, fix and test that prevents it returning.
Deliverable
A passing test suite and a bug log.
Weekly checkpoint
Write a test for given behaviour; read a failing test report.
You will be able to
Debug with browser DevTools and test components and logic with automated tests.
Week 11: AI-assisted workflow, accessibility and performance
Theory
A safe AI workflow: describe, generate, read, run, test, refine
Accessibility audit with Lighthouse and a screen reader or keyboard test
Performance basics: image size, bundle size and avoiding needless renders
Lab
Use an AI assistant to refactor one component and to generate tests; verify each output, fix an accessibility issue it introduced and improve a Lighthouse score with a documented change.
Homework
Write a one-page AI usage policy for your team covering privacy, verification and attribution.
Deliverable
An audit report with before and after scores and an AI usage policy.
Weekly checkpoint
Given AI-generated code, list five checks you would perform before merging.
You will be able to
Use AI assistants to draft, explain and refactor code while reviewing, running and testing every suggestion. Audit accessibility and performance, then deploy a frontend application with a documented process.
Deployment and capstone Weeks 12
Week 12: Deployment and capstone presentation
Theory
Build output and environment variables for public configuration
Hosting, custom domains and caching basics
Presenting a project: problem, choices, tests and limitations
Lab
Deploy the capstone, verify it on a phone and run a final accessibility check; present a five-minute demo with a walkthrough of one test.
Homework
Write a README with live link, setup steps, test commands and known limitations.
Deliverable
A deployed capstone, repository and README.
Weekly checkpoint
Panel evaluation using the capstone rubric.
You will be able to
Debug with browser DevTools and test components and logic with automated tests. Audit accessibility and performance, then deploy a frontend application with a documented process.
Sample lessons
Week 8
React state and the render cycle
In React, the screen is a function of state. When state changes, React calls your component again and draws the new result. You do not change the DOM by hand. You call the state setter, for example setCount(count + 1), and React re-renders. State must be updated immutably: create a new array or object instead of changing the old one, otherwise React may not notice the change. A state update is scheduled, so the variable keeps its old value until the next render.
1State changes
2Component runs again
3New screen is calculated
4User acts
↻
State drives what you see.
Step by step
Import useState and declare const [count, setCount] = useState(0).
Render count inside JSX and add a button.
Call setCount(c => c + 1) in the click handler.
For a list, update with setItems([...items, newItem]) instead of items.push.
Open React DevTools or the console to observe each re-render.
In real life
A shop's price board is redrawn whenever the owner updates the price list. Customers see the latest board, and nobody edits letters on the old board by hand.
Worked example
Problem. A button handler runs setCount(count + 1); setCount(count + 1); with count = 0. What is count after the click, and what is a better way?
Solution. count becomes 1, because both calls use the same old value 0. Use the functional form setCount(c => c + 1) twice to reach 2.
Common mistakes
Mutating state directly, such as items.push(x), and expecting the screen to update.
Reading the state variable right after setState and expecting the new value.
Try it yourself
Build a counter with increment, decrement and reset.
Add an item to a list of products and remove one using immutable updates.
Week 6
Fetching data: loading, success and error
Most pages get data from a server using an API. The browser sends an HTTP request and the server returns a response, often as JSON. Network calls take time and can fail, so a good interface always handles three states: loading while waiting, an error if the request fails, and the data (or an empty message) on success. With fetch you must also check response.ok because a 404 or 500 does not throw by itself.
1Browser sends request
2Show loading
3Server responds
4Check response.ok
5Show data or error
Always plan for waiting and failure.
Step by step
Create state for data, loading and error.
Write an async function that calls fetch(url).
Check if (!response.ok) throw new Error('Request failed').
Parse with await response.json() and store the result.
Use try/catch/finally to set error and turn loading off.
Render a different message for loading, error, empty and success.
In real life
When you open a train booking app, you see a spinner, then the list of trains, or a message that the network failed. You are never left looking at a blank page.
Worked example
Problem. Why does fetch('/api/missing') not go to the catch block when the server returns 404?
Solution. fetch only rejects for network failures. A 404 is a valid response, so you must test response.ok or response.status and throw an error yourself.
Common mistakes
Forgetting to handle the error state, leaving users with a blank screen.
Forgetting await before response.json().
Try it yourself
Add a retry button that calls the same function again.
Show a friendly message when the list is empty.
Try the questions
The same skills are asked at three levels: School (Classes 6–12), College and Professional. Switch the level and the language (English or Tamil), and say how sure you are before you check: knowing what you are unsure about is part of learning.
Classes 6–12: everyday examples, no prior knowledge. Practice only. Nothing here is graded or saved.
Question 1 / 4 · Relate page parts to a notice board
Match each HTML idea with a school notice-board example.
Projects
Local Shop Catalogue
Build and deploy a responsive React catalogue for a small shop in Madurai. Customers must be able to browse products fetched from a JSON API, filter and sort them, view details, add items to a cart and complete an order enquiry form. The site must be keyboard accessible, tested and delivered with a record of how AI help was verified.
Tasks
Design a mobile-first layout with semantic HTML and accessible forms.
Fetch products from an API or JSON file with loading, error and empty states.
Implement filter, sort and cart with React state and tested logic.
Run a Lighthouse and keyboard accessibility audit and fix the findings.
Deploy the site and document each AI-assisted change and its verification.
Sample input
Search 'rice', sort by price low to high, add two items to the cart
Expected output
The list shows only matching products in ascending price order and the cart shows quantity 2 and the correct total in rupees.
How it is assessed
Criterion
Weight
Semantic HTML, accessibility and responsiveness
25%
Correct React state, data fetching and states
25%
Tests and debugging evidence
20%
Verified, documented AI use
15%
Deployment and README
15%
Stretch challenge: Add a wishlist saved in localStorage and a dark-mode toggle.
Accessible Form Builder
Create a plain JavaScript or React sign-up form for a short course that validates name, phone and email, shows clear error messages tied to each field, and works with keyboard and screen reader. Write tests for the validation rules.
Tasks
Build labelled fields with the right input types.
Write validation functions for each field.
Show error messages with aria-describedby and move focus to the first error.
Test valid, empty and malformed inputs.
Sample input
Phone: 98765
Expected output
An error message 'Enter a 10-digit mobile number' is announced and linked to the phone field; the form is not submitted.
How it is assessed
Criterion
Weight
Validation correctness
35%
Accessibility of errors
30%
Tests
20%
Code clarity
15%
Stretch challenge: Add inline validation after the user leaves each field.
How you are assessed
Each week: a short quiz with code reading, output prediction and a debugging or accessibility item; a lab committed to Git and viewed in the browser; and a trainer or peer review. AI-assisted tasks require a note of what was generated, how it was checked and what was changed.
Practical work. Learners are assessed on running pages and applications in the browser, passing their tests, an accessibility audit and a deployed capstone demonstrated live with questions on code they wrote or reviewed.
What trainers look for
Weight
Working, correct interface
30%
Accessibility and responsive design
20%
Code quality, tests and debugging
20%
Verified, honest use of AI assistance
15%
Deployment and communication
15%
Where this can lead
Prepares you for junior frontend developer and web interface roles.
Prepares you for building portfolio sites and small business web projects.
Builds a base for further study in full-stack development and design systems.
These describe skills you will build. ADIVAS does not guarantee jobs, placement or salary.
Other programmes in Programming & Software Development
