HTML & CSS
/Intermediate
Responsive Design Questions
Definition
Questions focusing on Mobile-First architecture, Media Queries, and fluid units.
Explain Like I'm New
Interviewers want to know if you can build a website that looks good on an iPhone, an iPad, and a 4K TV, without writing messy code.
Real World Example
Explaining why you used `em` or `rem` instead of `px` for font sizes.
Common Use Cases
- •Front-End Architecture interviews
Terminal Output
bash / terminal
/*
Q: What is the difference between EM and REM units?
A: Both are relative units used primarily for Typography.
REM (Root EM) is relative to the font-size of the root <html> element
(which is usually 16px). If you write `2rem`, it is ALWAYS 32px everywhere
on the page.
EM is relative to the font-size of its DIRECT PARENT. If a parent is 20px,
and you set a child to `2em`, the child is 40px. If you nest multiple `em`
elements inside each other, the math compounds and spirals out of control
very quickly.
Best Practice: Use `rem` for typography so it scales with the user's browser
accessibility settings, and avoid `em` unless you are building a highly
specific modular component.
*/
Interview Questions
basic
- What is the purpose of the `<meta name="viewport">` tag?
intermediate
- Explain 'Mobile-First' design.