Web Development

Build real websites and full stack apps with HTML, CSS, JavaScript, React and Node.

Course Information

Level	Beginner to Intermediate
Duration	13 weeks
Credits	4
Pre-requisite	None. Anyone from any branch can join.
Material	Open source — every module links to its original tutorial

About This Track

This track takes you from a blank .html file to a deployed full stack application. Every topic is taught in the order a real project needs it: first structure, then styling, then behaviour, then the server and the database.

All study material is open. The written notes follow the W3Schools tutorials, the deeper explanations come from MDN Web Docs and GeeksforGeeks, and whenever a bug appears in the lab, the fix is searched on Stack Overflow the same way a working developer would do it.

What You Will Learn

Write valid, semantic HTML5 documents with forms, tables and media
Style responsive layouts using the CSS box model, Flexbox and Grid
Use JavaScript to read and change the DOM, handle events and call APIs
Work with Git and GitHub, and open your first pull request
Build a single page app in React using components, props, state and hooks
Create a REST API with Node.js, Express and MongoDB, and deploy it free

Syllabus

Module wise plan. Every row links to the open tutorial we follow for that module.
#	Module	Topics Covered	Weeks	Study Material
1	HTML5 Foundations	Tags, attributes, semantic layout, forms, tables, media, accessibility	2	W3Schools HTML
2	CSS3 & Responsive Design	Selectors, box model, Flexbox, Grid, media queries, transitions	2	W3Schools CSS
3	JavaScript Core	Variables, functions, arrays, objects, DOM, events, ES6, promises, fetch	3	W3Schools JS
4	Git & GitHub	init, commit, branch, merge, remote, pull requests, GitHub Pages	1	W3Schools Git
5	React	JSX, components, props, state, hooks, router, lifting state up	3	react.dev Learn
6	Node, Express & MongoDB	npm, REST routes, middleware, CRUD, Mongoose, JWT auth, deployment	2	freeCodeCamp APIs

Code From The Lab

Sample from Module 3 — calling an API with fetch

// Get a list of users and show their names on the page
async function loadUsers() {
  const res  = await fetch("https://jsonplaceholder.typicode.com/users");
  const data = await res.json();

  const list = document.getElementById("userList");
  data.forEach(function (user) {
    const li = document.createElement("li");
    li.textContent = user.name + " - " + user.email;
    list.appendChild(li);
  });
}

loadUsers();

Video Lectures

Click the thumbnail to open the video playlist for this track:

Recorded College Session

Video Playlists

freeCodeCamp.org — Full length HTML, CSS, JavaScript and React courses
CodeWithHarry — Web development series in Hindi
Apna College — Full stack Delta course for college students

Open Source Study Material

These are the exact open sources the notes for this track are prepared from.

Source	Best Used For	Link
W3Schools	Short tutorials with a Try-it editor for every tag and property	Open
GeeksforGeeks	Web development tutorial series and interview questions	Open
MDN Web Docs	The official reference for HTML, CSS and JavaScript	Open
Stack Overflow	Search your exact error message in the javascript tag	Open
The Odin Project	Open full stack curriculum with projects	Open
roadmap.sh	Visual frontend and backend roadmaps to track what is left	Open

Lab Projects

Personal portfolio page hosted on GitHub Pages
College notice board with search and filter in plain JavaScript
Weather app that calls a public REST API
Full stack notes app with login, built on React + Express + MongoDB

Your Progress

Modules finished in this track:

0 of 6

Self rated confidence: 0 of 6