Sign in to save progress across devices.
Sign inBefore You Write a Single <tag> (The 0-to-1 Mindset)
Start from mindset, not syntax: celebrate your CS foundation, embrace a repeatable problem-solving loop, and assemble a free professional tool stack.
1Hello, Tard: A Humane Introduction
The placements grind is real; this roadmap pairs that reality with a calmer, creative path into frontend.
Checkpoints
- Recognise the DSA and LeetCode pressure while choosing to build visual products alongside it.
- Use this humane guide as your exit from tutorial hell by shipping after every study session.
- Create breathing room to experiment so you learn to think like a developer, not just copy solutions.
2Your B.Tech Superpower (No, Really)
Leverage the degree you already earned - your classes map directly to the frontend world.
Checkpoints
- Logic: conditional rendering and component composition grow from the if/else fundamentals you know.
- Data structures: arrays, objects, and maps feed list rendering, caching, and derived state.
- Architecture: the client-server model explains every API request your UI will ever make.
3The Real Prerequisite: The Problem-Solving Mindset
Adopt a three-step loop that keeps you out of tutorial hell and grounds every project.
Checkpoints
- Understand: restate the feature in plain English to a friend or rubber duck until it feels obvious.
- Plan: outline inputs, transformations, and outputs as comments before writing implementation code.
- Divide: break the problem into ten micro-tasks and stack wins from the smallest possible step.
4Your (Completely Free) Tool Stack
Set up a professional dev cave so every project feels production-ready from day one.
Checkpoints
- Install Visual Studio Code and enable autosave plus format-on-save.
- Create a GitHub account and treat Git commits as your personal time machine.
- Extend VS Code with ESLint, Prettier, Live Server, GitLens, and Material Icon Theme to catch issues early.
HTML is the skeleton every site stands on; it collaborates with CSS for style and JavaScript for behaviour.
Checkpoints
- Treat HTML as structure only - no logic, just meaningful tags that describe content.
- Understand how browsers parse markup into the DOM and why that matters for performance.
- Remember: clean markup today unlocks accessible, testable experiences later.
Master the building blocks that repeat in every project from landing pages to dashboards.
Checkpoints
- Anatomy of an element: opening tag, content, closing tag, and attributes like alt.
- Use the base page structure: <!DOCTYPE html>, <html>, <head>, and <body>.
- Reach for essential tags - headings, paragraphs, links, images, lists, and forms.
- Build accessible forms with <label>, semantic inputs, and helpful defaults.
7Ship Project 1: Odin-Style Recipe Page
Build multiple static pages to prove you can structure content without relying on CSS.
Checkpoints
- Understand: one index page links to three recipe pages with titles, images, ingredients, and steps.
- Plan: outline the required tags in comments before writing markup.
- Divide: create the folder, scaffold index.html, then ship each recipe page one at a time.
CSS is the adjective layer that styles your HTML skeleton and adapts it across devices.
Checkpoints
- Choose external stylesheets so presentation stays separated from structure.
- Internalise the cascade and specificity rules to avoid impossible overrides.
- Design with the box model - content, padding, border, margin - so spacing feels intentional.
Master modern layout primitives and responsive strategies that mirror professional UI work.
Checkpoints
- Use Flexbox for one-dimensional alignment and CSS Grid for two-dimensional layouts.
- Create fluid typography with clamp() and REM-based scales.
- Respect users with prefers-reduced-motion when adding transitions or animations.
- Ship responsive experiences with media queries and container queries.
10Ship Project 2: Google Homepage Clone
Recreate a familiar interface pixel-for-pixel to cement layout and alignment skills.
Checkpoints
- Understand: reproduce the layout with logo, search bar, buttons, header, and footer.
- Plan: sketch Flexbox zones for vertical centering and horizontal spacing.
- Divide: structure HTML, style the search bar, add interactions, then polish typography and spacing.
Phase 3: The Brains (JavaScript)
Bring interfaces to life with state, events, async data, and tooling that mirrors modern frontend stacks.
JavaScript turns static markup into interactive experiences that respond to user intent.
Checkpoints
- Refresh variables, data types, conditionals, loops, functions, objects, and arrays.
- Manipulate the DOM with querySelector, classList, and event listeners.
- Handle user input and browser events like click, submit, and change gracefully.
12Asynchronous JavaScript & APIs
Learn how to fetch data without freezing the UI and make API calls feel effortless.
Checkpoints
- Embrace promises and async/await to keep code readable while waiting for network responses.
- Use the Fetch API for GET and POST calls, checking response.ok for errors.
- Read and shape JSON data before rendering; display loading and error states for users.
13JavaScript Tooling (The "Modern" Part)
Adopt the tooling used in production so moving to frameworks later feels natural.
Checkpoints
- Install Node.js to unlock npm, scripts, and local servers.
- Use npm to manage dependencies and scripts for linting, building, and testing.
- Bootstrap projects with Vite for instant dev servers and hot module replacement.
14Ship Project 3: Weather App
Fetch real data, handle loading states, and render results from user input.
Checkpoints
- Understand: a form accepts a city, fetches weather, and prints description plus temperature.
- Plan: wire a submit handler that prevents default behaviour and calls an API function.
- Divide: start with hardcoded city data, connect the input, then render results in the DOM.
React lets you think in reusable components fed by state and props instead of scattered DOM calls.
Checkpoints
- Write JSX to blend markup and logic in a single file.
- Break interfaces into components and pass data with props.
- Use hooks like useState and useEffect to manage memory and side effects.
Create multi-page experiences without full-page reloads.
Checkpoints
- Use React Router to map URLs to components and keep navigation client side.
- Build a shared <Navbar> and persistent layouts that wrap your routes.
- Model project data as arrays and map them to reusable <ProjectCard> components.
17Ship Project 4: Multi-Page Blog or Portfolio
Prove you can architect routes, components, and props like a production React app.
Checkpoints
- Understand: deliver Home, About, and Projects routes with a persistent navbar.
- Plan: generate project data array and map over it to render reusable cards.
- Divide: scaffold with Vite, wire the router, build pages, then style and deploy a static build.
18The Problem: Prop Drilling
Understand why passing state through layers of components becomes brittle as apps grow.
Checkpoints
- Identify where state should live and when lifting state creates friction.
- Spot pain points: duplicated props, tight coupling, and hard-to-follow data flow.
- Decide when global state is required versus simple local state.
19The Solutions: State Management
Compare Context, Zustand, and Redux Toolkit and pick the lightest tool that works.
Checkpoints
- Use React Context for low-frequency global data like auth or theme.
- Reach for Zustand to share frequently changing state like carts or filters.
- Adopt Redux Toolkit when project size or collaboration needs strict structure.
20Styling in React: Tailwind CSS
Keep styles consistent and component-scoped with utility classes.
Checkpoints
- Configure Tailwind in your React or Next.js project and embrace utility-first styling.
- Extract reusable component variants using composition or libraries like shadcn/ui.
- Use design tokens and guidelines so the system stays cohesive as it scales.
21Ship Project 5: Full E-Commerce Store Clone
Combine state management, routing, styling, and APIs into a single cohesive product.
Checkpoints
- Understand: list products, show detail pages, maintain a shared cart, and surface totals.
- Plan: choose Zustand (or Redux Toolkit) for cart state, React Router for routes, and Tailwind for styling.
- Divide: scaffold data fetching, build product cards, implement cart actions, then polish loading and empty states.
Testing is a safety net that lets you refactor and ship faster without fear.
Checkpoints
- Know the testing pyramid: unit, integration, and end-to-end coverage.
- Write tests from the user's perspective instead of poking component internals.
- Automate checks so every commit proves critical flows still behave.
23The Workflow: TDD in Practice
Adopt the Red -> Green -> Refactor loop so tests drive the implementation.
Checkpoints
- Write a failing test that describes the behaviour you want.
- Implement the minimal code to make it pass, then refactor confidently.
- Mix component tests with integration and visual checks for critical journeys.
24Ship Tests for Project 5
Backfill your e-commerce app with automated confidence before adding new features.
Checkpoints
- Understand: cover the cart flow - adding items updates totals and the navbar count.
- Plan: write unit tests for components, integration tests for flows, and smoke tests for routing.
- Divide: configure Jest plus React Testing Library, add Playwright for top journeys, then run in CI.
Phase 7: The "Next" Level (Next.js)
Learn how Next.js blends React with server rendering, server components, and routing that scale to production.
Next.js turns React into a full-stack framework with server-side rendering, RSCs, and file-system routing.
Checkpoints
- Differentiate between client-side rendering and server-side rendering for performance and SEO.
- Adopt the App Router to compose layouts, server components, and streaming UI.
- Know when to mark components with "use client" for interactivity.
26React vs Next.js & Server Components
Blend React's UI model with Next.js features so you only ship the JavaScript you need.
Checkpoints
- Understand how React Server Components keep heavy logic on the server.
- Structure folders to define routes, layouts, and shared UI without custom routers.
- Use API routes or server actions to keep data fetching close to the UI.
27Ship Project 6: High-Performance Next.js Blog
Transform your React portfolio into a server-rendered Next.js experience.
Checkpoints
- Understand: recreate Home, About, and Projects routes using the App Router and shared layout.
- Plan: determine which components stay server-side and which need "use client" for interactivity.
- Divide: scaffold with create-next-app, migrate content, add metadata, then deploy to Vercel.
Deployment is the moment your roadmap becomes visible to recruiters and collaborators.
Checkpoints
- Understand Continuous Integration versus Continuous Deployment and how they support each other.
- Use GitHub workflows or platform defaults to lint, test, and build on every push.
- Treat preview URLs as feedback loops, not final destinations.
29Core Platforms: Netlify vs Vercel
Choose the host that fits each project - SPAs love Netlify, Next.js loves Vercel.
Checkpoints
- Deploy static and SPA projects (weather app, e-commerce frontend) to Netlify with build hooks.
- Deploy your Next.js blog or portfolio to Vercel for zero-config SSR and analytics.
- Wire environment variables, custom domains, and preview comments for polished demos.
30Ship Your Live Portfolio
Publish every flagship project so your resume becomes a set of clickable links.
Checkpoints
- Understand: host the weather app and e-commerce frontend on Netlify with custom domains.
- Plan: deploy the Next.js blog to Vercel, configure analytics, and capture build logs.
- Divide: set up CI checks, push to main, verify production URLs, and add them to your resume.
31How to Escape Tutorial Hell Forever
Adopt the 1-to-1 rule: every tutorial earns a small self-initiated project.
Checkpoints
- Swap each guided project for a self-directed remix the very next day.
- Google errors, ask questions, and document solutions - this is real learning, not failure.
- Celebrate progress logs so you see momentum even when things feel slow.
32Your Resume Is Now Your Portfolio
Let the work speak louder than bullet points by showcasing live links and repositories.
Checkpoints
- Lead with shipped projects, not generic skill lists.
- Describe outcomes: performance wins, accessibility improvements, and tests you added.
- Keep iterating - every improvement is another signal that you think like a developer.
