Three real slices of Module 1: the revision notes, the explained Q&A, and the rapid-fire mock. Tap an option on any question — every lesson works like this.
Every question is asked the way an interviewer asks it — never as multiple choice. Say your answer aloud first, then open the model answer. It opens with a plain-English line so nothing is over your head, then gives you the words to say in the room, the follow-up that comes next, and what NOT to say. Try the two below; this is exactly how every lesson in the pack behaves.
Q1 Your modal has z-index: 9999 but it still renders behind the sidebar. Why? 📣 Reported in: LTIMindtree, Nagarro, Flipkart frontend rounds
z-index is not a global ranking. It only compares elements inside the same "stacking context". If a parent of your modal created its own context — because it has an opacity, a transform, or a z-index of its own — then everything inside that parent is painted together as one layer, and your 9999 is only competing with its siblings inside that box.
Say this: Almost certainly a stacking context problem. z-index only orders elements within the same stacking context, and several innocent-looking properties create a new one: a positioned element with a numeric z-index, any element with opacity less than 1, a transform, a filter, will-change, or position: fixed. Once an ancestor is a stacking context, all of its descendants paint as a single unit at that ancestor's level, so my 9999 is only being compared against its siblings inside the ancestor, never against the sidebar outside it. I would debug it by walking up the DOM in dev tools looking for the first ancestor with a transform or an opacity below one. The fix is structural rather than numeric: move the modal to be a direct child of body — which is exactly what Angular CDK's overlay does.
Follow-up: "So raising it to 999999 would not help?" → No. The comparison is not happening at that level at all, so no number fixes it.
Don't say: "Increase the z-index" or "add !important" — both signal you have only ever guessed at this bug.
Q2 What does flex: 1 actually mean? 🏢 Nagarro, Persistent, Amazon
It is shorthand for three properties: grow 1, shrink 1, basis 0. The basis of zero is the important bit — it tells the browser to ignore how much content each item has, so all the items come out exactly equal in width.
Say this: It expands to flex-grow: 1; flex-shrink: 1; flex-basis: 0%. The zero basis is what matters: it tells the browser to treat the item as having no intrinsic width and then share the whole container out by the grow ratios, so three items all set to flex: 1 are exactly equal regardless of how much text each contains. That contrasts with flex: 1 1 auto, where each item starts at its content width and only the leftover space is divided, so an item with more text stays wider. I use flex: 1 for a genuinely equal split, and flex: 1 1 280px in a responsive card row so each card is at least 280 pixels, grows to fill the line and wraps when it cannot fit.
Follow-up: "How do you stop an icon being squashed?" → flex-shrink: 0 on it. Every flex item is willing to shrink by default, which is why avatars get squeezed in a tight row.
Don't say: "It makes the item take all the space" — that is flex-grow alone, and it misses why equal-width columns happen.
Every module gives you two study lessons: a 📖 full-notes lesson that teaches the topic in depth, and a ⚡ cheat sheet for quick revision before the Q&A. Every section of the full notes opens with a plain-English on-ramp before the definition, so you never meet a term that has not been explained. Here is one complete section from the HTML, CSS & responsive UI full notes (Module 1).
box-sizingEvery element on a page is a rectangle. That rectangle has four layers, from the inside out.
Content is the text or image. Padding is space inside, between the content and the edge. Border is the edge itself. Margin is space outside, pushing other elements away.
Now the part that catches everyone. By default, width sets the content width only. So width: 300px with 20px padding and a 2px border produces a box that actually occupies 344 pixels.
One line of CSS changes that: box-sizing: border-box makes width mean the whole visible box, padding and border included.
A gift box. The chocolate inside is content. The foam packing is padding. The cardboard is the border. The gap you leave from the next box on the shelf is margin. The question is only ever whether "the size of the box" means the chocolate or the cardboard.
The CSS box model is the rule that every element is a rectangular box made of four layers — content, padding, border and margin. Under the default box-sizing: content-box, the width and height properties size only the content layer, so padding and border are added on top of your declared width. Under box-sizing: border-box, width sizes content plus padding plus border together, which is what almost everyone actually wants.
Say while you draw it: "Four layers, content in the middle. The whole question is which layers width counts. By default it counts only the innermost one, so padding and border push the box wider than I asked for. border-box makes width mean the outer edge, which is why almost every real project sets it globally."
*, *::before, *::after {
box-sizing: border-box;
}Be ready for the follow-up "why the pseudo-elements too?" — because box-sizing is not an inherited property, so it has to be applied to every box explicitly, and ::before and ::after generate real boxes that the universal selector alone does not reach.
Explain the box model, and the difference between content-box and border-box.
Every element is a rectangle with four layers: content in the middle, then padding inside the edge, then the border, then margin outside pushing other elements away. Margin is transparent and outside the element's background; padding is inside it, so a background colour covers the padding but not the margin. The box-sizing property decides what width and height measure. The default, content-box, sizes only the content layer, so an element with width: 300px, 20px padding on each side and a 2px border actually takes up 344 pixels — which is why a supposedly 50 percent wide column with padding overflows its row. With border-box, width includes padding and border, so 300px means 300px on screen and only the content shrinks to fit. Practically every project applies border-box to everything in a reset, including ::before and ::after, because box-sizing is not inherited.
🔒 11 more sections in this one full-notes lesson:
z-index ignores you+ 12 hand-drawn diagrams and 12 plain-English on-ramps in this lesson alone, reading mode with per-section progress, and a 📖 full-notes lesson exactly like this in every module of the pack.
After the full notes and the cheat sheet comes the Q&A lesson — 25 questions asked the way an interviewer asks them, each with the plain-English version, the model answer, the follow-up probe and what not to say. Answer aloud first, then open it. Here are 3 of the 25 from Module 1.
Q4 What is margin collapsing? 🏢 Nagarro, LTIMindtree, Persistent
When two vertical margins touch, they do not add up — they merge, and the bigger one wins. A 30px bottom margin meeting a 20px top margin gives a 30px gap, not 50px. It never happens sideways.
Say this: When two vertical margins meet they combine into one margin equal to the larger of the two rather than the sum, so 30 and 20 give 30. It happens in three situations: between adjacent siblings, between a parent and its first or last child — where the child's top margin escapes and pushes the parent down instead of moving the child — and within an empty element whose own top and bottom margins collapse together. It never happens horizontally. To prevent it I put something between the two margins: padding or a border on the parent, or overflow: hidden to create a new block formatting context. The cleaner modern answer is that margins never collapse inside a flex or grid container.
Follow-up: "Why does my parent div have a gap at the top that I never set?" → That is the parent-and-first-child case. The child's margin-top has collapsed out through the parent. Padding, a border, or making the parent a flex container all fix it.
Don't say: "The margins add up" — that is the intuition everyone has and it is exactly what the question is testing.
Q9 What is the difference between justify-content and align-items? 🏢 Wipro, Accenture, Capgemini
Flexbox has two directions. The main axis is the one you chose with flex-direction; the cross axis is the other one. justify-content always works along the main axis and align-items always works across the cross axis — so when you switch from row to column, the two swap physical direction.
Say this: justify-content distributes items along the main axis and align-items aligns them along the cross axis. Which physical direction each is depends entirely on flex-direction: with the default row the main axis is horizontal, so justify-content controls left-to-right placement and align-items controls vertical alignment — but switch to column and they swap over completely. The way I remember it is that justify always follows the direction I chose. There is a second real difference too: justify-content divides free space, which is why space-between and space-evenly only exist there, while align-items defaults to stretch — that default is why flex children end up equal height without anyone asking.
Follow-up: "What is align-content then?" → It spaces the lines apart from each other, and it only has any effect once flex-wrap: wrap has produced more than one line.
Don't say: "justify is horizontal and align is vertical" — true only for the default row direction, and the interviewer will immediately ask about column.
Q25 How does Angular stop one component's CSS from affecting another? 🏢 LTIMindtree, Nagarro, Persistent, Tech Mahindra
Angular scopes your styles automatically. At build time it stamps a unique attribute onto every element of the component and adds that attribute to every one of your selectors, so a rule written as .card can only ever match elements from that component.
Say this: By default Angular uses emulated view encapsulation. At build time it generates a unique attribute for the component — something like _ngcontent-abc-1 — stamps it onto every element in the template, and rewrites each selector in the component's stylesheet to include it, so .card is emitted as .card[_ngcontent-abc-1]. That gives me scoping without relying on browser Shadow DOM support. The other two modes are None, which puts the styles in the document head unchanged and is the usual cause of "my styles leaked", and ShadowDom, which uses the browser's native shadow root for real isolation — with the trade-off that global styles cannot reach inside either. One detail that confuses people at first is :host: a component's own element is not matched by any ordinary selector in its own stylesheet, so :host is how you style it.
Follow-up: "How do you style the internals of a child component then?" → In order of preference: expose a CSS custom property or an input from the child; use :host-context() when the change depends on an ancestor; and only as a last resort ::ng-deep, which is deprecated and leaks globally unless scoped with :host.
Don't say: "Angular uses Shadow DOM" — that is the opt-in mode, not the default, and the difference is the point of the question.
🔒 22 more explained questions in this lesson — and 25 more in every other module: TypeScript, Angular core, RxJS & services, routing & forms, and the CLI/performance/security round.
Every module ends with a rapid-fire mock — answer each aloud in 30–60 seconds, then check the key points you should have hit. Here are 3 of the 12 from Module 1.
Q1 An element has width: 300px, padding: 20px and border: 5px solid. How many pixels wide is it on screen?
Good answer hits: 350px under the default content-box · the maths is 300 + 20 + 20 + 5 + 5 · box-sizing: border-box would make it exactly 300 · margin is not included either way.
One-liner: 350 pixels, because width sizes only the content by default — border-box would make it 300.
Q5 In flex-direction: column, which property centres the items vertically?
Good answer hits: justify-content, not align-items · in column the main axis is vertical · justify-content always follows the main axis and the axes swap with flex-direction · align-items would centre them horizontally here.
One-liner: justify-content — in a column the main axis is vertical, and justify always follows the main axis.
Q11 Your whole responsive stylesheet does nothing on a real phone, though it works in dev tools. What is the first thing you check?
Good answer hits: The viewport meta tag is missing · without it the phone lays out at a virtual ~980px and scales down · so media queries never fire · <meta name="viewport" content="width=device-width, initial-scale=1">.
One-liner: The viewport meta tag — without it the phone pretends to be ~980px wide and no media query ever matches.
🔒 9 more mock questions in this lesson, and a mock at the end of every module — including a predict-the-output round on lifecycle hook order, change detection and RxJS operators.
Full course
8 modules · 35 lessons · lifetime access
Every module: notes → 25 explained Q&A → mock. Plus the practical round and the company-wise module (TCS, Infosys, Wipro, Accenture…). Lifetime access, and every update to the course is included.