Interview preparation roadmap · Technology
JavaScript in depth, HTML and CSS, a framework like React, how the web works, plus the coding and behavioral rounds most front-end interviews include.
0 / 19 complete · 13 core · 6 other · 103 subtopics
0%Start here
- 01Interview foundations
- 02Coding
- 03Web fundamentals
- 04Role-specific
- 05Practice
- 06Company & final prep
01Interview foundations
What every interviewer sees first.
01.1Resume
A one-page resume you can defend line by line.
What this covers
- One-page format — Reverse-chronological, clean fonts, no photos or tables that confuse parsers.
- Project bullets — Action + what you built + a number (users, speed, accuracy).
- Skills section — Only skills you can answer questions on for two minutes.
- ATS readability — Export a text-based PDF and check it with a parser.
- Working links — GitHub, LinkedIn and a live project link that open.
- Tailoring — Reorder bullets to match the job description.
What to practise
- Run your PDF through a parser test
- Rewrite each bullet as action + result
- Remove any skill you can't explain for 2 minutes
Common questions
- Walk me through your resume.
- Which project here are you most proud of, and why?
- Why is this skill on your resume?
Free resources
- OpenResume — Free ATS-friendly resume builder and parser test (Free)
- Jake's Resume (Overleaf) — The LaTeX resume template most SDE freshers use (Free)
- Resume Worded — Resume and LinkedIn scoring (Free plan)
- Jobscan — Match your resume against a job description (Free plan)
Free courses
- Professional Resume Writing — Alison (Free course)
- Resume, Networking, and Interview Skills — Fullbridge (Free to audit)
01.2Tell me about yourself
A 60–90 second answer: present, past, why this role.
What this covers
- Present — Who you are now: degree, year, focus.
- Past — One or two proof points: a project, internship or result.
- Future — Why this role and this company next.
- Length — 60–90 seconds; stop before you list everything.
- Delivery — Calm pace and eye contact, not a memorised script.
What to practise
- Write it, then say it out loud 5 times
- Record yourself and cut anything over 90 seconds
Common questions
- Tell me about yourself.
- Why should we hire you?
- Where do you see yourself in a few years?
Free resources
- Google Interview Warmup — Free spoken mock interview that prints your transcript (Free)
- BBC Learning English — Structured free English lessons and podcasts (Free)
Free courses
- English@Work: Basic Job Interview Skills — The Hong Kong Polytechnic University (Free to audit)
- Job Interview Preparation For Tech Professionals — University of Cape Town (Free to audit)
01.3Behavioral & STAR
Stories about teamwork, conflict and failure, told with STAR.
What this covers
- STAR structure — Situation, task, action, result. Spend most of the time on action.
- Story bank — 6–8 real stories you can reuse across questions.
- Teamwork & conflict — Disagreeing respectfully and what you changed.
- Failure & weakness — A real one, what you learned, what you do now.
- Ownership — Times you took initiative without being asked.
- Common HR questions — Why us, why you, strengths, relocation.
What to practise
- Write 6 stories in STAR form
- Map each story to 2–3 common questions
- Practise one story with a friend
Common questions
- Tell me about a time you failed.
- Describe a conflict in a team and what you did.
- What is your biggest weakness?
Free resources
- Tech Interview Handbook — Free guide to coding and behavioral interviews (Free)
- Google Interview Warmup — Free spoken mock interview that prints your transcript (Free)
- Pramp / Exponent peer mocks — Free peer-to-peer mock interviews (Free plan)
Free courses
- Master Behavioral Interviews (for Software Engineers) — freeCodeCamp (Free video)
- Behavioral Interview Practice for Computer Science Students — CodeSignal (Free to audit)
- Soft Skills For Tech Professionals — University of Cape Town (Free to audit)
02Coding
Many front-end loops still include DSA.
02.1Programming fundamentals
One language you know well: syntax, memory, complexity.
What this covers
- One language deeply — C++, Java or Python: syntax, standard library, quirks.
- Time & space complexity — Big-O of loops, recursion and common operations.
- Recursion — Base cases, the call stack, when it overflows.
- Memory basics — Stack vs heap, references vs values, garbage collection.
- Strings & arrays — Immutability, copying and slicing costs in your language.
- Debugging — Reading errors, dry runs, using a debugger.
What to practise
- Solve 10 easy problems without an IDE's help
- Explain the complexity of each solution aloud
Common questions
- What is the time complexity of your solution?
- What happens in memory when you call a function?
- Difference between an array and a linked list?
Free resources
- Harvard CS50x — The best first CS course there is (Free)
- HackerRank — Where many campus tests actually run (Free)
- GeeksforGeeks — Company-wise questions and theory (Free plan)
Free courses
- CS50's Introduction to Programming with Python (CS50P) 2022 — Harvard University (Free video)
- MIT 6.100L Introduction to CS and Programming using Python, Fall 2022 — Massachusetts Institute of Technology (Free video)
- Programming in Modern C++ — IIT Kharagpur (Free course)
02.2Data structures & algorithms
The core problem-solving topics commonly assessed in software interviews.
What this covers
- Arrays & hashing — Frequency maps, prefix sums, duplicates.
- Two pointers & sliding window — Pairs, subarrays and substrings in O(n).
- Stacks & queues — Brackets, monotonic stacks, BFS queues.
- Linked lists — Reversal, cycle detection, merging.
- Trees & BST — Traversals, height, LCA, validation.
- Graphs — BFS, DFS, topological sort, shortest paths.
- Binary search — On sorted arrays and on the answer.
- Dynamic programming — 1D and 2D DP, from climbing stairs to knapsack.
What to practise
- Follow one list end to end, not five
- Say the brute force first, then improve it
- One timed problem a day
Common questions
- What is the difference between BFS and DFS?
- How does a hash map handle collisions?
- Find the first non-repeating character in a string.
Free resources
- NeetCode 150 — A curated ordered list instead of 3000 random problems (Free)
- Striver's A2Z DSA sheet — India's most-followed DSA sheet (Free)
- LeetCode — The default interview practice set (Free plan)
- GeeksforGeeks — Company-wise questions and theory (Free plan)
Free courses
- Data Structures and Algorithms Design — IIT Kanpur (Free course)
- MIT 6.006 Introduction to Algorithms, Spring 2020 — Massachusetts Institute of Technology (Free video)
- Neetcode 150 Course - All Coding Interview Questions Solved — freeCodeCamp (Free video)
02.3Timed coding practice
Solving under a clock, the way online tests run.
What this covers
- Reading the problem — Inputs, outputs and constraints before any code.
- Edge cases — Empty, one item, duplicates, negatives, overflow.
- Test platforms — Online editors, hidden test cases and their quirks.
- Time management — Skip and return; passing some cases still counts.
- Testing your code — Three quick tests before you submit.
What to practise
- Two 90-minute mock tests a week
- Do one contest to feel the pressure
Common questions
- How would you test this function?
- What edge cases did you consider?
Free resources
- HackerRank — Where many campus tests actually run (Free)
- LeetCode — The default interview practice set (Free plan)
- Codeforces — Competitive programming contests (Free)
Free courses
- 10 Common Coding Interview Problems - Solved! — freeCodeCamp (Free video)
- Getting Started with Competitive Programming — IIT Gandhinagar (Free course)
- Fundamental Coding Interview Prep with Python — CodeSignal (Free to audit)
03Web fundamentals
The base every front-end round builds on.
03.1HTML, CSS & accessibility
Semantic markup, layout and making pages usable for everyone.
What this covers
- Semantic HTML — Landmarks, headings, forms and labels.
- Box model & positioning — Margins, padding, stacking and position values.
- Flexbox & Grid — When to use each; common layouts.
- Responsive design — Media queries, fluid units, mobile first.
- Accessibility basics — Alt text, keyboard focus, contrast, ARIA only when needed.
- Browser rendering — How CSS affects layout and paint.
What to practise
- Rebuild a landing page from a screenshot without a framework
- Run an accessibility checker on your project and fix issues
Common questions
- What is the difference between flex and grid?
- How do you make a modal accessible?
- What happens when you add position: absolute?
Free resources
- MDN Web Docs — The reference for HTML, CSS and JavaScript (Free)
- W3Schools — Quick syntax lookups (Free)
- GreatFrontEnd — Front-end interview questions: JavaScript, UI and system design (Free plan)
- The Odin Project — Full-stack path, project-heavy (Free)
Free courses
- HTML and CSS Tutorials — freeCodeCamp (Free video)
- HTML & CSS — Traversy Media (Free video)
- HTML,CSS,JavaScript, Project, Git & GitHub — Apna College (Free video)
03.2JavaScript fundamentals
The language questions front-end interviews commonly ask.
What this covers
- Scope & closures — Lexical scope, closures and common closure bugs.
- this & prototypes — How this is bound; prototype chain and classes.
- Event loop — Call stack, task and microtask queues, timers.
- Promises & async/await — Chaining, error handling, Promise.all and race.
- Types & equality — Coercion, == vs ===, truthy and falsy.
- Array & object methods — map, filter, reduce, spread, destructuring.
What to practise
- Implement debounce, throttle and a Promise.all polyfill
- Predict the output of 20 event-loop snippets
Common questions
- What is a closure?
- Explain the event loop.
- What is the difference between let, const and var?
Free resources
- JavaScript.info — Deep, ordered JavaScript tutorial (Free)
- MDN Web Docs — The reference for HTML, CSS and JavaScript (Free)
- GreatFrontEnd — Front-end interview questions: JavaScript, UI and system design (Free plan)
- freeCodeCamp — Full curricula with projects, certificates at the end (Free)
Free courses
- JavaScript Tutorials — freeCodeCamp (Free video)
- CS50's Web Programming with Python and JavaScript (CS50W) 2020 — Harvard University (Free video)
- CS50's Web Programming with Python and JavaScript — Harvard University (Free video)
03.3How the web works
HTTP, browsers and the request lifecycle that web interviews build on.
What this covers
- HTTP basics — Methods, status codes, headers.
- Cookies, sessions & tokens — How login state is kept.
- Caching — Browser cache, CDN and cache headers.
- CORS — Why browsers block cross-origin calls and how servers allow them.
- REST vs GraphQL — Trade-offs at a basic level.
- From URL to page — DNS, TCP/TLS, request, render.
What to practise
- Inspect one site's network tab and explain each request
- Explain "type a URL and press Enter" in 3 minutes
Common questions
- What happens when you type a URL?
- What is CORS?
- Difference between cookies and local storage?
Free resources
- MDN Web Docs — The reference for HTML, CSS and JavaScript (Free)
- Full Stack Open — University of Helsinki's React/Node course (Free)
- GeeksforGeeks — Company-wise questions and theory (Free plan)
Free courses
- Programming & Web Development Crash Courses — Traversy Media (Free video)
- Sigma Web Development Course - Web Development Tutorials in Hindi 🗿 — CodeWithHarry (Free video)
- Web Development Course — Apna College (Free video)
04Role-specific
Framework, projects and UI design.
04.1React & front-end frameworks
Components, state and rendering in the framework you list on your resume.
What this covers
- Components & props — Composition and one-way data flow.
- State & hooks — useState, useEffect, custom hooks and their rules.
- Rendering & performance — Re-renders, memoisation, keys, lists.
- Data fetching — Loading and error states, caching.
- Forms — Controlled inputs and validation.
- Routing & app structure — Pages, layouts and code splitting.
What to practise
- Build a small app with search, a list and a detail view
- Explain one performance fix you made and why it worked
Common questions
- Why does a component re-render?
- What does useEffect's dependency array do?
- What are keys used for in lists?
Free resources
- React documentation — The official React docs with interactive lessons (Free)
- Full Stack Open — University of Helsinki's React/Node course (Free)
- GreatFrontEnd — Front-end interview questions: JavaScript, UI and system design (Free plan)
- freeCodeCamp — Full curricula with projects, certificates at the end (Free)
Free courses
- React Tutorials — freeCodeCamp (Free video)
- React Course - Beginner's Tutorial for React JavaScript Library [2022] — freeCodeCamp (Free video)
- CS50's Mobile App Development with React Native 2018 — Harvard University (Free video)
04.2Projects & resume defense
Explaining what you built, why, and what you would change.
What this covers
- The problem — What it solves and for whom.
- Your role — Exactly what you built yourself.
- Architecture — A simple diagram: frontend, backend, database.
- Hardest bug — What broke and how you found it.
- Trade-offs — Why this stack; what you would change now.
- Scale questions — What happens with 10x the users.
What to practise
- Prepare a 2-minute walkthrough per project
- Be ready to draw its architecture
Common questions
- What was the hardest part of this project?
- Why did you choose this tech stack?
- How would it handle 10x more users?
Free resources
- Tech Interview Handbook — Free guide to coding and behavioral interviews (Free)
- Pramp / Exponent peer mocks — Free peer-to-peer mock interviews (Free plan)
Free courses
- Software Engineering Concepts — MIT OpenCourseWare (Free course)
- Build community-driven software projects on GitHub — Microsoft (Free course)
04.3Git & version control
Branches, merges and collaborating on code.
What this covers
- Commits & history — Small commits with clear messages.
- Branching — Feature branches and pull requests.
- Merge vs rebase — When to use which.
- Resolving conflicts — Reading and fixing conflict markers.
- Undoing safely — revert, reset and restore.
What to practise
- Contribute a small fix to an open-source repo
- Practise resolving a merge conflict
Common questions
- Difference between merge and rebase?
- How do you undo a pushed commit?
Free resources
- Pro Git book — The free official Git book (Free)
- GitHub — Where your projects live (Free)
- freeCodeCamp — Full curricula with projects, certificates at the end (Free)
Free courses
- Getting Started with Git and GitHub — IBM (Free course)
- HTML,CSS,JavaScript, Project, Git & GitHub — Apna College (Free video)
- Git & GitHub Tutorial for Beginners — The Net Ninja (Free video)
04.4Front-end system design
Designing a UI feature end to end; more common for experienced roles.
What this covers
- Requirements — Users, devices, scale and offline needs.
- Component architecture — Splitting UI and state cleanly.
- Data & API design — Pagination, caching, optimistic updates.
- Performance — Lazy loading, virtualised lists, bundle size.
- Accessibility & i18n — Keyboard, screen readers, languages.
What to practise
- Design an autocomplete widget on paper
- Design an infinite news feed and discuss trade-offs
Common questions
- Design a photo gallery for slow networks.
- How would you build an autocomplete?
Free resources
- GreatFrontEnd — Front-end interview questions: JavaScript, UI and system design (Free plan)
- System Design Primer — Open-source guide to designing large systems (Free)
05Practice
Saying it out loud is a different skill.
05.1Technical mock interviews
At least two full coding mocks before the real one.
What this covers
- Thinking aloud — Narrate your approach before and while coding.
- Clarifying questions — Confirm inputs, scale and edge cases first.
- Handling hints — Take them gracefully and adapt.
- "I don't know" — Say what you do know and how you would find out.
- Review the recording — Fillers, pace, unclear explanations.
What to practise
- Do two peer mock interviews
- Record one spoken mock and listen back
Common questions
- Walk me through your approach before you code.
- How would you test this?
Free resources
- Pramp / Exponent peer mocks — Free peer-to-peer mock interviews (Free plan)
- Google Interview Warmup — Free spoken mock interview that prints your transcript (Free)
- Tech Interview Handbook — Free guide to coding and behavioral interviews (Free)
Free courses
- Software Engineering Job Interview – Full Mock Interview — freeCodeCamp (Free video)
05.2Technical communication
Explaining your thinking clearly in English.
What this covers
- Structure — Big picture first, then details.
- Plain words — Explain without jargon.
- Checking in — "Does that make sense so far?"
- Written English — Clear emails and follow-ups.
What to practise
- Explain one project to a non-CS friend
- Record a 2-minute explanation of your best project and listen back
Common questions
- Explain recursion to a 10-year-old.
Free resources
- BBC Learning English — Structured free English lessons and podcasts (Free)
- LanguageTool — Grammar checking that isn't Grammarly (Free plan)
Free courses
- Technical Communications for Engineers — IIT Roorkee (Free course)
06Company & final prep
The last 48 hours.
06.1Company research
The product, the role, the job description and recent news.
What this covers
- The business — What it sells and to whom.
- The role — What the job description really asks for.
- Recent news — Launches, results, announcements.
- Interview format — The rounds, if the company shares them.
- Your fit — Three reasons, matched to the job description.
What to practise
- Write 3 reasons you want this role
- Match 3 JD lines to your experience
Common questions
- Why do you want to work here?
- What do you know about our product?
Free resources
- GeeksforGeeks — Company-wise questions and theory (Free plan)
- Tech Interview Handbook — Free guide to coding and behavioral interviews (Free)
06.2Questions to ask
Two or three good questions for the end of the interview.
What this covers
- About the team — How work is planned and reviewed.
- About growth — Mentoring, learning, the first 90 days.
- About the product — What is hard right now.
- What to avoid — Questions a quick search answers.
What to practise
- Write 5 questions, keep the best 3
- Prepare one question about the team's own product
Common questions
- Do you have any questions for us?
Free resources
- Tech Interview Handbook — Free guide to coding and behavioral interviews (Free)
06.3Final checklist
Logistics, documents, setup and a calm night before.
What this covers
- Logistics — Time, timezone, link or address.
- Documents — Resume copies, ID, certificates if asked.
- Tech check — Camera, mic, internet, charger.
- Night before — Sleep, light revision, no new topics.
What to practise
- Do a 5-minute tech check the day before
- Lay out documents and clothes the night before
Free resources
- Google Interview Warmup — Free spoken mock interview that prints your transcript (Free)
06.4Job & interview safety
Spot fake offers, payment requests and fake interview links.
What this covers
- Payment requests — Real employers don't charge for jobs or training.
- Email domains — Check it matches the company's own site.
- OTPs & logins — Never share them with anyone.
- Fake interview links — Care with unknown chat apps and downloads.
- Reporting — The 1930 helpline and cybercrime.gov.in.
What to practise
- Check one recent offer against these rules
- Confirm the opening is listed on the company's own careers page
Free resources
- National Cyber Crime Portal — Report online fraud and job scams (Free)
- Have I Been Pwned — Check if your email appears in a data breach (Free)