Hello, future victim of a technical interview! 👋
Are you preparing for a frontend position interview? You can already imagine how you'll talk about cool React hooks and TypeScript generics, but the interviewer suddenly asks: "What is the difference between inline and inline-block?" And you're like: surprised_pikachu.jpg
Yes, yes, even in 2026, they like to go over the basics at job interviews. And you know what? That's right. Because a person who does not understand the box model, but tries to explain the virtual DOM is like a driver who does not know where the brake pedal is, but talks about quantum engines.
Let's go through the very questions that make even seniors nervously google before the interview.
1. Box Model — a classic of the genre
Question: What does a block model consist of?
Answer for the interviewer:
Each element is a layered pie of:
Content - the content itself
Padding - indentation inside the element
Border — frame
Margin - external indentation
What to say next (to look smart):
"By default, width and height apply only to content. But if you use box-sizing: border-box, the dimensions will include padding and border. This saves you from unexpected overflows and has long been the standard in CSS-reset."
Why they ask:
99% of layout bugs are when you forget about margin or padding. Or when box-sizing is not the right one.
2. Positioning: Static, Relative, Absolute, Fixed, Sticky
Question: What is the difference between the types of positioning?
Short answer:
Static — normal behavior (as if
positionis not specified at all)Relative - displacement relative to its normal position
Absolute — positioning relative to the nearest positioned parent
Fixed — relative to the viewport (sticks when scrolling)
Sticky — a hybrid of relative and fixed (sticks when the point is reached)
Pitfall:
The absolute element is looking for a parent with position: relative/absolute/fixed. If it does not find it, it is positioned relative to <body>. This is the very reason why the modal sometimes flies off into space.
3. Flexbox — a favorite of all layout designers
Question: How to center a div vertically and horizontally?
Response in 2026:
.container {
display: flex;
justify-content: center; /* по горизонтали */
align-items: center; /* по вертикали */
}Additional points:
"There is also Grid with place-items: center, but flex is easier for single-axis layouts."
If someone at the interview talks about margin: 0 auto and tables, they are either stuck in 2010 or checking if you are stuck. 😄
4. Grid vs Flexbox — the eternal debate
Question: When to use Grid and when to use Flexbox?
Correct answer:
Flexbox — for one-dimensional layouts (row OR column)
Grid — for two-dimensional layouts (rows and columns simultaneously)
Example:
Navigation, cards in a row → Flexbox
Whole page layout, complex grid → Grid
5. Specificity of selectors
Question: What style will be applied?
#header .nav li { color: red; }
.nav li { color: blue; }
li { color: green; }Answer:
Red, because the specificity is counted as (ID, Class, Tag):
First: (1, 1, 1) = 111
Second: (0, 1, 1) = 11
Third: (0, 0, 1) = 1
Life hack:!important interrupts everything, but using it is like writing code on CAPS LOCK. It works technically, but everyone will look askance.
6. Semantic HTML is not just a buzzword
Question: Why do we need semantic tags?
<header>, <nav>, <article>, <section>, <footer> are not just stylish <div>.
Advantages:
SEO — search engines understand the structure
Accessibility - screen readers know what is where
Code readability — understand what is happening faster
Anti-pattern:
<div class="header">
<div class="nav">...</div>
</div>It's like naming a variable var1, var2 — it works, but why?
7. Pseudoclasses vs Pseudoelements
Question: What is the difference?
Pseudo-classes (single colon):
a:hover { }
li:first-child { }
input:focus { }Selects elements in a certain state.
Pseudo-elements (two colons):
p::before { content: "👉 "; }
p::after { content: " 👈"; }They create virtual elements.
8. Z-index and overlay context
Question: Why is my element with z-index: 9999 still under another element?
Answer:z-index works only within its stacking context.
Create a new context:
position: absolute/relative/fixed+z-indexopacity < 1transformfilterAnd about 10 more properties
If you seez-index: 99999in the code, know that someone desperately fought with the bug and lost.
9. Units of measurement: px, em, rem, vh, vw
Question: What difference does it make?
Cheat Sheet:
px - absolute pixels
em — relative to the font size of the parent (cascaded!)
rem — regarding the font size
<html>(not cascaded)vh/vw - percentage of viewport height/width
% - relative to the parent
remis the best choice for modern adaptive layout. Change font-size to html - everything is scaled.
10. Display: none vs Visibility: hidden vs Opacity: 0
Question: What is the difference?
Answer:
Property | Occupies space | Available for events | Animated |
|---|---|---|---|
| ❌ | ❌ | ❌ |
| ✅ | ❌ | ❌ |
| ✅ | ✅ | ✅ |
When to use:
Completely remove —
display: noneHide and save space —
visibility: hiddenSmooth appearance/disappearance —
opacity
11. Adaptability: Media Queries
Question: How to make a website adaptive?
Basic syntax:
/* Mobile first подход */
.container { width: 100%; }
@media (min-width: 768px) {
.container { width: 750px; }
}
@media (min-width: 1200px) {
.container { width: 1170px; }
}Modern trend:
Use clamp() for smooth scaling:
font-size: clamp(1rem, 2vw, 2rem);12. CSS variables (Custom Properties)
Question: How do CSS variables work?
Example:
:root {
--primary-color: #3498db;
--spacing: 16px;
}
.button {
background: var(--primary-color);
padding: var(--spacing);
}Advantages over Sass variables:
Can be changed via JavaScript
Support inheritance
Work natively in the browser
13. Vertical margin collapse
Question: Why is the margin not added between the two blocks?
Answer:
Vertical margins collapse (the larger one is taken). This is called margin collapse.
Example:
.block1 { margin-bottom: 20px; }
.block2 { margin-top: 30px; }
/* Расстояние между ними = 30px, а не 50px */How to disable:
Flexbox/Grid container
overflow: hiddenon the parentpaddingorborderon the parent
14. Inline vs Inline-block vs Block
Question: What is the difference?
Truth table:
Type | Width/Height | On a new line | Margin/padding is allowed |
|---|---|---|---|
| ❌ | ❌ | Horizontal only |
| ✅ | ❌ | ✅ All |
| ✅ | ✅ | ✅ All |
Life example:<span> — inline, <div> — block, and <button> by default — inline-block.
15. Pseudo-class :nth-child() and its friends
Question: How to select every third element?
Answer:
li:nth-child(3n) { /* Каждый третий */ }
li:nth-child(odd) { /* Нечетные */ }
li:nth-child(even) { /* Четные */ }
li:nth-child(3n+1) { /* 1, 4, 7, 10... */ }Pitfall::nth-child() counts all neighbors, even different types. If you only need certain ones, use :nth-of-type().
🚀 And now about training (without being boring)
Okay, you've read all these questions, maybe even jotted something down. But let's be honest — in a week, half of them will fly out of your head. That's how our brain works.
Problem: Theory without practice is like watching a video on how to learn to swim. It's clear, but try not to drown.
Solution: Practice, practice, practice. And not just "open the editor and write three lines", but systematically.
Here's where you can really level up:
Code — a mobile application for learning programming, where:
The theory is dosed a little (without overload)
Immediate practice in interactive tasks
You can study right on your phone (on the subway, in line, anywhere)
Courses in Python, JavaScript, HTML/CSS and other technologies
The trick is that you don't just read "how flexbox works", but immediately create real elements. Muscle memory is formed, and at the job interview, your hands will remember the syntax themselves.
Bonus - Kodik Telegram channel — a community where we share useful posts and life hacks, discuss fresh features of languages and frameworks, and help you figure things out if something is not clear.
Conclusion: How not to screw up at the interview?
Three golden rules:
Don't panic if you don't know the answer. It is better to honestly say "I'm not sure, but I suppose..." and reason logically than to talk nonsense.
Practice is more important than cramming. Make pet projects, copy your favorite sites, break and fix. Doing things with your hands is the best way to remember.
Understanding > Memorizing. Knowing that
display: flexmakes elements flex is not enough. Understanding why and when to use it is what you need.
Good luck at the interview! May the flex be with you. 🚀