Expert · Build, deploy and get hired · topic 64 of 64 · 40 min
Interview preparation
Explanation
How front-end hiring works in India
| Stage | What happens | How to prepare |
|---|---|---|
| Resume screening | HR or software (an ATS, applicant tracking system) scans resumes for skills and links | One clear page, honest keywords, working links |
| Online coding test | A timed test: MCQs on HTML, CSS and JavaScript plus a few coding problems | Practise arrays, strings and objects in JavaScript under time |
| Technical interview(s) | Concepts, live coding, questions about your projects | The questions below, and know your own code well |
| Machine-coding round | Build a small working UI in about 60 to 90 minutes | Practise common widgets with a timer |
| HR or manager round | Communication, location, joining date, expectations | Honest, polite, short answers |
Jobs come through campus placements, off-campus applications on job sites and company career pages, referrals from people you know (often the most effective), and internships that turn into jobs. The steps change from company to company, so read each job post carefully.
A one-page resume
- Top: name, city, phone, email, and links to your portfolio, GitHub and LinkedIn.
- Skills, grouped: HTML, CSS, JavaScript, TypeScript, React, Git, testing. Only what you can explain.
- Projects (2 or 3): one line on what it does, the tech, one result ("Lighthouse accessibility fixed to a high score"), and the live link.
- Education, then internships or experience if you have them.
- A plain layout that an ATS can read: real text, no skill bars, no text inside images. Send it as a PDF.
Common questions, short answers
| Question | A short model answer |
|---|---|
| Box model? | Every element is a box: content, padding, border, margin. box-sizing: border-box makes width include padding and border. |
| Flexbox or grid? | Flexbox lays out in one direction (a row or a column); grid lays out in rows and columns together. Flex for navbars, grid for page layouts and card galleries. |
| Specificity? | When rules clash, the more specific selector wins: inline style, then id, then class, then element. If equal, the later rule wins. |
| Event delegation? | One listener on a parent handles events from many children using bubbling and event.target. It also works for items added later. |
| Closure? | A function remembers the variables from where it was created, even after the outer function has finished. Used in counters, debounce and private data. |
| == or ===? | == converts types before comparing, so 0 == "" is true. === compares value and type with no conversion. Use ===. |
| Promises or async/await? | Both handle results that come later. async/await is easier-to-read syntax on top of promises, with try/catch for errors. |
| Debounce or throttle? | Debounce runs after the calls stop for some time (a search box). Throttle runs at most once per time window (scroll, resize). |
| How does the browser render a page? | HTML becomes the DOM, CSS becomes the CSSOM, together they make the render tree, then layout (sizes and positions), paint and composite. Scripts can block parsing, so use defer. |
| How do you make a page accessible? | Semantic HTML, labels for inputs, alt text, keyboard access with visible focus, enough contrast. Test with the keyboard and Lighthouse. |
| React state or props? | Props are inputs from the parent and are read-only for the child. State is data a component owns; changing it with its setter re-renders. |
| Why keys in React lists? | A stable unique key, like an id, tells React which item is which, so it updates the right row. Index keys break when items are reordered or removed. |
The machine-coding round
- Clarify: ask what must work and what is optional (2 to 5 minutes).
- Plan: sketch the parts and the data, for example the list of items and which one is open (about 5 minutes).
- Make it work: the core feature first, in plain and simple code.
- Handle edges: empty input, loading, errors, very long text.
- Make it nice: clean CSS, labels, keyboard support, then explain what you would improve with more time.
Common widgets: a to-do list with filters, a star rating, an accordion, tabs, a search box with debounce, pagination, an OTP input, a countdown timer and an image carousel. Build each one at home with a 75-minute timer.
DSA basics for front-end
DSA means data structures and algorithms. Front-end interviews usually expect the basics: arrays, strings, objects and Maps, Sets, sorting, recursion for nested data, and Big-O in simple words (how the work grows when the input grows). They also ask JavaScript utilities: debounce, throttle, flatten, chunk, deep equal, an event emitter and your own Promise.all. The tasks here and in the exam are of exactly this kind.
Talk about your projects with STAR
- Situation: the background. "Hostel friends kept losing track of shared mess expenses."
- Task: your goal. "I wanted a simple tracker that works offline on cheap phones."
- Action: what you did. "I stored data in localStorage, used reduce for totals and tested with the keyboard."
- Result: what happened, with a number if you have one. "Six friends used it for a semester; Lighthouse accessibility went from low to high after my fixes."
Questions to ask, and money
- "What would my first month look like?"
- "How are code reviews and testing done in the team?"
- "Which tech stack does the team use, and how do juniors learn it?"
- "How is performance reviewed for freshers?"
Pay changes a lot by city, company, role and skill, so do not trust random numbers on social media. Ask seniors from your college, read several recent real reports, and decide your own minimum before the HR round. If asked about your current pay, tell the truth; offers are often checked. Read the offer letter fully: fixed and variable pay, any bond or training cost clause, and the notice period.
Watch the lesson
Interview preparation · 1/7
Front-end hiring usually has five steps: resume, online test, technical interview, machine coding and HR.
Prefer a video by a teacher? Find free videos on “frontend developer interview questions javascript machine coding round freshers” on YouTube ↗
In real life: Priya cracks a machine-coding round
Priya, a BCA graduate from Lucknow, cleared an online test and got a 90-minute machine-coding round: build an accordion for an FAQ page. She spent 5 minutes asking questions (can several items be open at once? keyboard support needed?), sketched the data, made a plain working version in 35 minutes, then added aria-expanded, focus styles and a smooth open animation. With time left, she explained what she would test. In the next round she used STAR to explain her expense tracker, and when asked about closures she gave a one-line definition and her debounce code as the example.
Practice (0/3 done)
Write a function isPalindrome(text) that returns true when text reads the same forwards and backwards, ignoring spaces and upper/lower case. isPalindrome("Nitin") is true, isPalindrome("Never odd or even") is true, and isPalindrome("Mumbai") is false.
Write a function createEmitter() that returns an object with three methods: on(event, fn) adds a listener, off(event, fn) removes that one listener, and emit(event, ...args) calls every listener of that event with the args, in the order they were added. Emitting an event with no listeners does nothing (no error). Example: bus.on("score", (runs) => console.log(runs)); bus.emit("score", 4) logs 4.
Prepare for a real front-end interview. Write a one-page resume, prepare STAR stories for your projects, practise answering questions aloud, and do one timed machine-coding round at home.
Quick quiz
Read more (free)
Pass the quiz (60% or more) or mark this topic as done when you are ready.
Your progress is saved on this device only.