Frontend fundamentals: semantic HTML, CSS layouts, responsive design, accessibility, and modern CSS features.
5 Questions Detailed Answers
1What is the difference between display: none and visibility: hidden?
Easy
View Answer
`display: none` removes the element from the layout entirely — takes no space. `visibility: hidden` hides the element but it still occupies space in the layout. `opacity: 0` is similar to visibility:hidden but the element is still interactive (clickable).
2Explain CSS Flexbox vs Grid.
Medium
View Answer
Flexbox: 1-dimensional layout (row OR column). Best for: navbars, card rows, centering. `display: flex; justify-content: center; align-items: center;`. Grid: 2-dimensional layout (rows AND columns). Best for: page layouts, complex grids. `display: grid; grid-template-columns: repeat(3, 1fr);`. Use both together for best results.
3What is the CSS box model?
Easy
View Answer
Every element is a box: Content (actual content) → Padding (space inside border) → Border → Margin (space outside border). `box-sizing: content-box` (default): width = content only. `box-sizing: border-box`: width includes padding + border. Always use border-box for predictable layouts.
4What are semantic HTML elements? Why do they matter?
Easy
View Answer
Semantic elements describe their meaning: `<header>`, `<nav>`, `<main>`, `<article>`, `<section>`, `<footer>`, `<aside>`. Benefits: (1) Accessibility — screen readers understand page structure, (2) SEO — search engines understand content hierarchy, (3) Maintainability — code is self-documenting. Avoid using `<div>` for everything.
5How do you make a website responsive?
Medium
View Answer
Key techniques: (1) Media queries: `@media (max-width: 768px) { ... }`, (2) Flexible layouts: Flexbox/Grid with fr units and percentages, (3) Responsive images: `max-width: 100%`, srcset, picture element, (4) Mobile-first approach: design for mobile, enhance for desktop, (5) Viewport meta tag, (6) CSS clamp() for fluid typography.
