Frontend Web Development

What happens when you open a website, the three languages of every page (HTML, CSS, JavaScript), and the free tools a front-end developer uses every day.

1. Browser, server, URL and HTTPA website is a set of files kept on a computer called a server. Your browser asks the server for those files using an address called a URL, and the two talk using rules called HTTP. The browser then turns the files into the page you see.20 min
2. HTML, CSS and JavaScript: three jobsEvery web page is built with three languages. HTML gives the content and structure, CSS gives the look, and JavaScript gives the behaviour. Learning which job belongs to which language is the first step of front-end work.20 min
3. Your toolkit: editor, browser and foldersTo build websites you need only free tools: a code editor such as VS Code, a modern browser, and a tidy project folder. Good file names and folders save you from many small bugs later.20 min
4. Browser DevTools: look inside any pageEvery modern browser has developer tools (DevTools) built in. You can see the HTML and CSS of any page, try changes live, read error messages in the Console, and watch every file the page downloads in the Network tab.25 min

Write clean, well-structured HTML pages with headings, text, links, images, lists and tables that work for every visitor on every screen.

1. Page structure: the skeleton of every pageEvery HTML page has the same skeleton: a doctype, an html element with a language, a head with information about the page, and a body with the content people see. Elements sit inside each other like boxes, and attributes add extra details to a tag.25 min
2. Headings, paragraphs and textHeadings (h1 to h6) give a page its outline, and paragraphs hold the text. Tags such as strong and em add meaning, not just looks. Special characters like < and & are written as entities, and the browser turns extra spaces into one.25 min
3. Links: connecting pagesThe <a> element makes a link, and its href attribute says where the link goes. Links can point to another site, another page of your own site, a section of the same page, an email address or a phone number. Good link text tells people where they will land.25 min
4. Images, video and audioThe <img> element shows a picture, and its alt text describes the picture for people who cannot see it. Width and height stop the page from jumping while images load, and lazy loading saves mobile data. Video and audio elements play media with built-in controls.30 min
5. Lists and tablesLists group related items: ul when the order does not matter, ol when it does, and dl for terms with their meanings. Tables are only for data in rows and columns, such as a train timetable or a marks sheet. A caption and header cells make a table easy to read for everyone.30 min

Build forms that are easy to fill on a phone, let the browser check the answers, give every part of the page a meaningful tag, and make pages usable by everyone.

1. Forms and inputsA form collects information from the user, such as a name, a mobile number or a choice of course. Each box is an input with a label that says what to type. When the user presses the submit button, the browser sends the answers to the address in the form's action.30 min
2. Built-in form validationHTML can check answers before a form is sent. Attributes like required, minlength, min, max and pattern tell the browser what a good answer looks like, and it shows a message when something is wrong. The server must still check again, because browser checks can be skipped.25 min
3. Semantic HTMLSemantic tags describe what a part of the page is: header, nav, main, article, aside, footer. They look the same as plain boxes, but they help screen readers, search engines and other developers understand the page. Use <div> only when no tag with a meaning fits.20 min
4. Accessibility basicsAccessibility (often written a11y) means making pages that everyone can use: people who are blind, have low vision, cannot use a mouse, or simply have an old phone in bright sunlight. Most of it comes free with good HTML: alt text, labels, real buttons, clear headings and enough contrast.25 min

Give your pages a look: write CSS rules, pick elements with selectors, understand the box model, and choose colours, units and fonts that read well on every screen.

1. How CSS worksCSS is a list of rules that tell the browser how elements should look. Each rule has a selector that picks elements and declarations that set properties like colour and size. The best place for CSS is a separate .css file linked from every page.20 min
2. Selectors, specificity and the cascadeSelectors choose which elements a rule styles: by tag, class, id, attribute or position. When two rules disagree, the browser picks the winner using the cascade: more specific selectors win, and among equals, the later rule wins. Classes are the everyday tool.30 min
3. The box modelEvery element is a rectangle box with four layers: the content, padding around it, a border, and margin outside. Setting box-sizing: border-box makes widths easy to predict. The display property decides whether boxes sit on their own line or flow inside text.30 min
4. Colours, backgrounds and unitsCSS colours can be written as names, hex codes like #1d4ed8, rgb() or hsl(), with optional transparency. Sizes use units: px for fixed sizes, rem for text that respects the user's settings, % and vw for sizes relative to the parent or the screen.25 min
5. Typography: fonts and readable textTypography is how text looks: the font, its size, weight, spacing and line length. Good typography makes a page easy to read on a small phone. Use a font stack with fallbacks, sizes in rem, a line-height around 1.5 and lines that are not too long.25 min

Start programming: store values in variables, make decisions with conditions, repeat work with loops, package steps into functions, and handle lists with arrays.

1. Values, types and variablesA program works with values: numbers, text (strings), true/false (booleans) and a few others. A variable is a name that holds a value so you can use it later. In modern JavaScript, use const for values that do not change and let for values that do.25 min
2. Operators and conditionsOperators do work on values: maths (+, -, *, /), comparisons (===, <, >) and logic (&&, ||, !). Conditions use the result to choose what to do: if this is true, do that, else do something else. This is how a program makes decisions.30 min
3. Loops: repeating workA loop repeats a block of code many times, so you do not have to write the same line again and again. The for loop counts, the while loop runs while a condition is true, and for...of walks through every item of a list or every letter of a string.25 min
4. FunctionsA function is a named, reusable set of steps. You give it inputs (parameters), it does its work, and it can give back a result with return. Functions keep code short, tidy and easy to test.30 min
5. Arrays and array methodsAn array is an ordered list of values, like a list of prices or names. Each item has a position number called an index, starting at 0. Array methods such as map, filter, find and reduce let you transform and search lists in one clear line.35 min

Place things exactly where you want with flexbox, grid and positioning, make every page work from a small phone to a wide monitor, and add modern CSS and smooth motion.

1. FlexboxFlexbox lays out items in one direction, a row or a column. You turn it on with display: flex on the parent, then control spacing with gap and alignment with justify-content and align-items. It is perfect for navbars, button rows and centring things.30 min
2. CSS GridCSS Grid lays out items in rows and columns at the same time. You define the columns on the parent, and items fill the cells. One line, repeat(auto-fit, minmax(200px, 1fr)), gives a product grid that adjusts itself to any screen.30 min
3. Positioning and stackingThe position property lets you move an element out of the normal flow: relative nudges it, absolute places it inside a positioned parent, fixed pins it to the screen, and sticky keeps it in view while scrolling. z-index decides which element is on top when they overlap.25 min
4. Responsive design and media queriesA responsive page adapts to any screen, from a small phone to a big monitor. Start with the viewport meta tag and a mobile layout, use flexible widths, and add media queries with min-width to improve the layout as the screen grows.30 min
5. Modern CSS: variables, clamp, container queries and moreModern CSS has powerful features that work in all current browsers. Custom properties (CSS variables) store colours and sizes in one place, clamp() makes text grow smoothly, container queries adapt a component to its own space, and :has() and nesting make selectors simpler.35 min
6. Transitions and animationsTransitions animate a change smoothly, for example a button colour on hover. Animations with @keyframes can run on their own, like a loading spinner. Animate transform and opacity for smooth results, keep motion short, and respect users who ask for reduced motion.25 min

Go beyond the basics: work confidently with objects and strings, use the modern array toolbox, understand scope and closures, and turn real JSON data into what your page needs.

1. Objects in depthAn object groups related values under names called keys, like a student with a name, a class and marks. You read and change values with dot or bracket notation, loop over them with Object.keys, Object.values and Object.entries, and pull values out with destructuring. Spread makes a copy of an object, but only a shallow one.35 min
2. Strings in depthA string is text. Template literals with backticks let you build text with ${} and write it over many lines. Methods such as slice, trim, split, replaceAll, padStart and includes clean and reshape text, and Intl.NumberFormat shows money the Indian way, like ₹1,00,000.00. Strings never change in place: every method gives you a new string.30 min
3. More array powerBeyond map, filter and reduce, arrays have tools to ask yes or no questions (some, every), find positions (findIndex, findLast), sort lists of objects, flatten nested lists and group items. You will also learn which methods change the original array and which give you a new one, and how destructuring, rest and spread make array code shorter.35 min
4. Scope, hoisting and closuresScope decides where a variable can be seen. let and const live only inside their { } block, and an inner function can see the variables of the code around it. A closure is a function that remembers those outer variables even after the outer function has finished. Closures power counters, once-only functions and private data.35 min
5. JSON and working with real dataJSON is the text format servers and apps use to send data. It looks like JavaScript objects but has strict rules: double quotes, no functions, no comments and no trailing commas. JSON.stringify turns data into JSON text and JSON.parse turns it back. Real API data is deeply nested, so you read it safely with ?. and ?? and reshape it into exactly what your page needs.35 min

Use JavaScript to find and change parts of a page, react to clicks and typing, check forms, run code later with timers, and remember small things in the browser with localStorage.

1. The DOM and changing the pageWhen the browser reads your HTML, it builds a tree of objects called the DOM. JavaScript can find any element in that tree with querySelector, then change its text, classes and attributes, or create new elements. For anything a user typed, use textContent, not innerHTML.30 min
2. Events: reacting to the userAn event is a signal that something happened, such as a click, a key press or a form being sent. You attach a function with addEventListener, and the browser calls it with an event object that describes what happened. One listener on a parent can handle clicks on all its children (event delegation).30 min
3. Forms with JavaScriptJavaScript can take over a form: listen for the submit event, stop the page reload, and read every field at once with FormData. Then you check your own rules (a 10-digit mobile number, a 6-digit PIN code, matching passwords), show clear errors next to each field, and disable the button while the data is being sent.35 min
4. Timers: running code latersetTimeout runs a function once after a delay, and setInterval runs it again and again. You stop them with clearTimeout and clearInterval. With these you can build an OTP resend countdown or a debounced search box, but remember that timers are never exactly on time.25 min
5. Saving data in the browserlocalStorage keeps small pieces of text in the browser, even after it is closed. sessionStorage is the same but is cleared when the tab closes. Both store only strings, so you save objects with JSON.stringify and read them with JSON.parse. Use them for things like a theme or a cart, never for passwords or login tokens.25 min

Load data from APIs with promises, fetch and async/await, handle errors and timeouts, split code into modules with npm and Vite, save your work with Git and GitHub, and find bugs fast with DevTools and VS Code.

1. Promises and the event loopJavaScript in a page does one thing at a time, so slow jobs like downloads and timers are asynchronous: you start them now and get the result later. A promise is an object that stands for that future result. It is pending, then fulfilled or rejected, and you react with then, catch and finally, or wait for many at once with Promise.all.35 min
2. fetch and APIsAn API is a URL that gives data, usually as JSON, instead of a web page. fetch(url) asks for it and returns a promise of a response. Always check response.ok before reading response.json(), build query strings with URLSearchParams, and show loading, empty and error states. Never put a secret API key in front-end code.35 min
3. async/await and error handlingasync and await let you write promise code that reads like normal top-to-bottom code. An async function always returns a promise, and await pauses only that function until a promise settles. Use try/catch/finally for errors, Promise.all to run independent jobs together, AbortSignal.timeout to give up on slow requests, and a small retry for flaky networks.35 min
4. Modules, npm and ViteES modules let you split code into small files that export what others may use and import what they need. npm installs other people's packages and runs your project's scripts, all described in package.json. Vite starts a new project in one command, gives you a fast dev server, and builds small optimised files for hosting.35 min
5. Git and GitHubGit saves snapshots (commits) of your project, so you can see what changed, go back, and work on new ideas in branches without breaking the main code. GitHub keeps a copy online, so you can share it, work with a team through pull requests, and show your work to employers.40 min
6. Debugging like a pro: DevTools and VS CodeDebugging is finding out why code does not do what you expect. Read the error message and its stack trace first, use the right console method, then pause the code with breakpoints and step through it while watching values. The Network and Application panels show what the page sent, received and saved, and a well set up VS Code catches many bugs before you run anything.35 min

Make real sites fast on budget phones, usable by everyone, easy to find in search, safe from common attacks, and reliable with automated tests.

1. Performance and Core Web VitalsA fast page keeps visitors; a slow one loses them, especially on budget phones and busy mobile data. Google measures real user experience with three Core Web Vitals: LCP (how fast the main content shows, good at 2.5 s or less), INP (how fast the page reacts to taps, good at 200 ms or less) and CLS (how much the layout jumps, good at 0.1 or less). You measure with Lighthouse and PageSpeed Insights, then fix images, scripts and fonts.35 min
2. Accessibility in depth: keyboard, ARIA and WCAGAccessibility means people with disabilities can use your site: blind users with screen readers, people who use only a keyboard, people with low vision or shaky hands. WCAG 2.2 is the global checklist, and level AA is the usual target. In practice: everything works with the keyboard and shows visible focus, the page has landmarks and good headings, native HTML comes first, and ARIA only fills the gaps.35 min
3. SEO basics: help people find your pagesSEO (search engine optimisation) means helping search engines understand your pages so the right people find them. Search engines crawl (visit) pages, index (store and understand) them, and rank them for each search. Good SEO is mostly good work: a clear title and description, one h1 and logical headings, real HTML content, fast mobile pages, and useful text written for people.30 min
4. Front-end security: HTTPS, XSS, CSP and secretsFront-end security means not letting attackers run their code in your users' browsers or steal their data. Serve everything over HTTPS, never put untrusted text into the page as HTML (that is how XSS happens), add a Content Security Policy as a safety net, use secure cookies, and never ship secrets in front-end code: anything sent to the browser can be read by anyone.40 min
5. Testing basics: unit, integration and end-to-endA test is a small program that checks your code does what you expect, every time you change something. Most tests should be fast unit tests of small functions, fewer should check parts working together, and a few end-to-end tests drive a real browser like a user. Vitest runs unit tests, Playwright runs browser tests, and GitHub Actions can run them all on every push.35 min

Add types to your JavaScript so the editor catches mistakes while you type: basic types, typed functions and objects, unions and narrowing, generics and utility types, and TypeScript in a real project.

1. Why TypeScriptTypeScript is JavaScript plus types. A type says what kind of value a variable or parameter may hold, and the editor warns you while you type when the code breaks that rule. Before the code runs, the types are removed and plain JavaScript is left, so the browser never sees them.30 min
2. Typing functions and objectsGive every function parameter a type, and say what the function returns. Describe the shape of your objects once, with a type alias or an interface, and reuse that name everywhere: Product, CartItem, Customer. Then TypeScript catches a missing field or a typo in a property name at once.35 min
3. Unions and narrowingA union type means "one of these": string | number, or a fixed list of words like "pending" | "paid" | "failed". Before you use such a value, you check which one it is (with typeof, ===, in or a switch), and TypeScript narrows the type inside that branch. This is how you handle real data safely.35 min
4. Generics and utility typesA generic is a type with a blank to fill in, written <T>. It lets one function or type work with many types and still remember which one it got: first(["Pune", "Goa"]) gives a string, first([45, 78]) gives a number. Utility types like Partial, Pick and Omit build new types from the ones you already have.35 min
5. TypeScript in real projectsIn a real project, tsconfig.json holds the settings: turn strict on. Type your DOM code and check for null, and never trust JSON from an API: treat it as unknown and check it. Use as and ! rarely, install @types packages for old libraries, and move a JavaScript project over one file at a time.40 min

Build user interfaces with React: components and JSX, props, state and events, lists and forms, and effects for loading data, the way React 19 apps are written today.

1. Why React: components and JSXReact is a JavaScript library for building user interfaces from small, reusable pieces called components. A component is a function that takes data and returns what that part of the screen should look like, written in JSX. When the data changes, React updates the page for you. Start a new project with Vite, or with a framework such as Next.js.35 min
2. Props and compositionProps are the inputs of a component, passed like attributes: <DishCard name="Masala dosa" price={90} />. Data flows one way, from parent to child, and a component must never change its own props. The special children prop lets you wrap any content, and plain JavaScript (&&, the ternary) decides what to show.35 min
3. State and eventsState is data a component remembers and can change, such as the items in a cart or whether a menu is open. useState gives you the current value and a setter; calling the setter makes React render again. State is a snapshot, so use an updater function when the next value depends on the last one, and never change arrays or objects in place: make new copies.40 min
4. Lists, keys and formsTurn an array into a list of elements with map, and give each item a stable key, such as its id, so React can track it. Work out filtered and sorted lists from state while rendering instead of storing them twice. For forms, keep each input's value in state (a controlled input), check the values on submit, and link every label to its input with htmlFor.40 min
5. Effects, data fetching and hooksuseEffect runs code after React updates the screen, to keep a component in sync with something outside React: a timer, a browser API or data from a server. The dependency array says when it runs again, and the cleanup function stops old work. Many things do not need an effect at all. useRef keeps a value without re-rendering, and custom hooks let components share logic.40 min

Turn your code into a fast production build, put it live on the internet with a real link, build a portfolio that recruiters trust, and prepare for front-end interviews in India.

1. Building for productionThe build step turns your source code into small, fast files for real users: it bundles, minifies, removes unused code and adds a hash to file names for caching. In a Vite project, npm run build writes these files to the dist folder and npm run preview lets you test them. Only VITE_ variables reach the browser, so never put secrets in them.30 min
2. Deploying your siteDeploying means putting your built files on a host so anyone can open them with a link. A front-end site is just files, so a static host like GitHub Pages, Netlify or Vercel is enough: connect your GitHub repo and every push deploys. You can add your own domain with DNS records, HTTPS comes free, and you can roll back to an older deploy in seconds.35 min
3. Your portfolio projectA portfolio is a small website that shows who you are and links to 2 or 3 real projects that are live and on GitHub. Recruiters spend only a minute or two, so each project needs a working link, a clear README with screenshots, clean commits, and good accessibility and Lighthouse scores on a phone. Your own ideas beat copied tutorial projects.40 min
4. Interview preparationFront-end hiring in India usually goes: resume screening, an online coding test, one or two technical interviews, often a machine-coding round where you build a small widget, and an HR round. Prepare a one-page resume, short clear answers to common questions, practice building widgets against the clock, and stories about your projects told with the STAR method.40 min