1
HTML/CSSBeginner#html#semantics
🎨
HTML & CSS Interview Questions
122 questions · Semantic HTML, Flexbox, Grid, responsive design and accessibility questions.
122 results
2
HTML/CSSBeginner#html#elements
What is the difference between <div> and <span>?
3
HTML/CSSBeginner#html#doctype
What does the DOCTYPE declaration do?
4
HTML/CSSIntermediate#html#doctype
What is quirks mode vs standards mode?
5
HTML/CSSBeginner#html#meta
What are the important meta tags in an HTML document?
6
HTML/CSSBeginner#html#meta
What does the viewport meta tag do and why is it needed?
7
HTML/CSSIntermediate#html#performance
What is the difference between <script>, <script async>, and <script defer>?
8
HTML/CSSBeginner#html#forms
What HTML5 form input types do you know?
9
HTML/CSSIntermediate#html#forms
How do you validate a form using native HTML attributes?
10
HTML/CSSBeginner#html#forms
What is the difference between GET and POST form methods?
11
HTML/CSSBeginner#html#forms
What is the purpose of the <label> element and how should it be associated with inputs?
12
HTML/CSSBeginner#html#tables
How do you build a table with a header, body, and footer?
13
HTML/CSSIntermediate#html#tables
How do colspan and rowspan work in tables?
14
HTML/CSSBeginner#html#media
How do you embed audio and video with fallback controls?
15
HTML/CSSIntermediate#html#media
What is the <picture> element used for?
16
HTML/CSSAdvanced#html#media
What is srcset and sizes used for on <img>?
17
HTML/CSSBeginner#html#semantics
What is the difference between <b>/<i> and <strong>/<em>?
18
HTML/CSSIntermediate#accessibility#aria
What is ARIA and when should you use it?
19
HTML/CSSAdvanced#accessibility#aria
How do you make a custom dropdown accessible?
20
HTML/CSSAdvanced#accessibility
What is the accessibility tree and how does it relate to the DOM?
21
HTML/CSSBeginner#accessibility#html
How do you ensure images are accessible?
22
HTML/CSSIntermediate#accessibility
What is keyboard accessibility and how do you test for it?
23
HTML/CSSBeginner#seo#html
What are the basic on-page SEO practices in HTML?
24
HTML/CSSAdvanced#seo#html
What is structured data / Schema.org markup used for?
25
HTML/CSSIntermediate#storage#javascript
What is the difference between localStorage, sessionStorage, and cookies?
26
HTML/CSSAdvanced#storage#javascript
What is IndexedDB used for?
27
HTML/CSSAdvanced#storage#pwa
What is the Cache API and how does it relate to Service Workers?
28
HTML/CSSIntermediate#css#specificity
What is CSS specificity and how is it calculated?
29
HTML/CSSBeginner#css#box-model
What is the CSS box model?
30
HTML/CSSBeginner#css#box-model
What is the difference between margin and padding?
31
HTML/CSSAdvanced#css#box-model
What is margin collapsing?
32
HTML/CSSBeginner#css#display
Explain the different values of the display property.
33
HTML/CSSBeginner#css#display
What is the difference between visibility: hidden and display: none?
34
HTML/CSSIntermediate#css#position
Explain the CSS position property values.
35
HTML/CSSIntermediate#css#position
How does position: sticky work?
36
HTML/CSSIntermediate#css#float
What is the CSS float property used for and what problems does it cause?
37
HTML/CSSAdvanced#css#float
How do you clear floats without adding extra markup?
38
HTML/CSSBeginner#css#flexbox
Explain Flexbox: main axis vs cross axis.
39
HTML/CSSIntermediate#css#flexbox
What do flex-grow, flex-shrink, and flex-basis do?
40
HTML/CSSBeginner#css#flexbox
How do you center a div both horizontally and vertically?
41
HTML/CSSIntermediate#css#layout-puzzle
How do you build a sticky footer that stays at the bottom even with little content?
42
HTML/CSSBeginner#css#grid
Explain CSS Grid: grid-template-columns/rows and fr unit.
43
HTML/CSSAdvanced#css#grid
How do you create a responsive grid without media queries using auto-fit/auto-fill?
44
HTML/CSSIntermediate#css#grid
What is the difference between Flexbox and Grid, and when should you use each?
45
HTML/CSSIntermediate#css#grid
What are grid-template-areas used for?
46
HTML/CSSBeginner#css#responsive
What are CSS media queries and how do you write a mobile-first stylesheet?
47
HTML/CSSIntermediate#css#responsive
What is the difference between responsive and adaptive design?
48
HTML/CSSBeginner#css#units
What are the different CSS units (px, em, rem, %, vw, vh) and when to use them?
49
HTML/CSSIntermediate#css#variables
What are CSS custom properties (variables) and how do you use them?
50
HTML/CSSBeginner#css#selectors
What is the difference between pseudo-classes and pseudo-elements?
51
HTML/CSSIntermediate#css#selectors
Explain the :nth-child() selector with examples.
52
HTML/CSSIntermediate#css#selectors
What CSS attribute selectors are available?
53
HTML/CSSIntermediate#css#selectors
What is the difference between adjacent sibling (+) and general sibling (~) combinators?
54
HTML/CSSBeginner#css#transitions
How do CSS transitions work?
55
HTML/CSSIntermediate#css#animations
How do CSS keyframe animations work?
56
HTML/CSSIntermediate#css#transforms
What CSS transform functions are commonly used?
57
HTML/CSSAdvanced#css#performance
Why should you animate transform/opacity instead of top/left/width for performance?
58
HTML/CSSAdvanced#css#z-index
What is the z-index property and how does stacking context work?
59
HTML/CSSAdvanced#css#stacking-context
What creates a new stacking context in CSS?
60
HTML/CSSIntermediate#css#bem
What is BEM methodology?
61
HTML/CSSAdvanced#css#methodology
What are other CSS methodologies besides BEM (OOCSS, SMACSS, ITCSS)?
62
HTML/CSSIntermediate#css#sass
What are CSS preprocessors and what problems do they solve?
63
HTML/CSSAdvanced#css#sass
What is the difference between a Sass mixin and a placeholder/extend?
64
HTML/CSSBeginner#css#tailwind
What is Tailwind CSS and how does it differ from writing custom CSS?
65
HTML/CSSIntermediate#css#tailwind
How do you customize and extend Tailwind's default theme?
66
HTML/CSSBeginner#css#tailwind
What are Tailwind's responsive and state variant prefixes?
67
HTML/CSSAdvanced#css#cross-browser
What are common cross-browser compatibility issues in CSS and how do you handle them?
68
HTML/CSSBeginner#css#cross-browser
What is a CSS reset or normalize.css and why use one?
69
HTML/CSSAdvanced#css#performance
What is critical CSS and how does it improve page performance?
70
HTML/CSSIntermediate#css#performance
What are CSS sprites and why were/are they used?
71
HTML/CSSAdvanced#css#performance
What other CSS performance best practices should you follow?
72
HTML/CSSIntermediate#css#layout-puzzle
How do you implement a full-height sticky sidebar next to scrolling content?
73
HTML/CSSBeginner#css#flexbox
How do you create equal-height columns?
74
HTML/CSSIntermediate#css#layout-puzzle
How do you truncate text with an ellipsis, including multi-line clamping?
75
HTML/CSSIntermediate#css#responsive
How do you create a responsive image that maintains aspect ratio without JavaScript?
76
HTML/CSSIntermediate#css#cascade
What is the CSS cascade and how is rule conflict order determined?
77
HTML/CSSIntermediate#css#cascade
What does !important do and why should it generally be avoided?
78
HTML/CSSIntermediate#css#pseudo-elements
What is the CSS 'content' property used for with pseudo-elements?
79
HTML/CSSBeginner#css#display
What is the difference between inline, inline-block, and block for form control styling?
80
HTML/CSSAdvanced#css#internationalization
How do CSS logical properties (like margin-inline, padding-block) differ from physical properties?
81
HTML/CSSIntermediate#css#functions
How does the CSS calc() function work?
82
HTML/CSSAdvanced#css#functions
What is the difference between min(), max(), and clamp() in CSS?
83
HTML/CSSBeginner#css#overflow
What is the difference between overflow: visible, hidden, scroll, and auto?
84
HTML/CSSIntermediate#css#units
What is the difference between em and rem when nesting components?
85
HTML/CSSIntermediate#css#variables
How would you implement a dark mode toggle using CSS?
86
HTML/CSSIntermediate#css#position
What is the difference between absolute and fixed positioning in terms of containing block?
87
HTML/CSSBeginner#css#flexbox
What is the CSS 'gap' property and how does it simplify spacing in flex/grid layouts?
88
HTML/CSSBeginner#css#selectors
What is the difference between class selectors and ID selectors, and why avoid IDs for styling?
89
HTML/CSSAdvanced#css#layout-puzzle
How do you build a CSS-only accordion or tab component?
90
HTML/CSSAdvanced#css#grid
What is the 'holy grail' layout and how is it built with Grid?
91
HTML/CSSAdvanced#css#units
What is the difference between relative units vw/vh and %?
92
HTML/CSSBeginner#css#box-model
What is the box-sizing property and why is border-box generally preferred?
93
HTML/CSSBeginner#css#pseudo-classes
What is the difference between :hover, :focus, and :active pseudo-classes?
94
HTML/CSSAdvanced#css#pseudo-classes
What is the difference between :focus and :focus-visible?
95
HTML/CSSIntermediate#css#accessibility
How do you make an SVG icon accessible and stylable with CSS?
96
HTML/CSSAdvanced#css#responsive
What is the difference between em/rem and viewport-relative clamp() for fluid typography?
97
HTML/CSSAdvanced#css#responsive
What are container queries and how do they differ from media queries?
98
HTML/CSSIntermediate#css#performance
How do you prevent Cumulative Layout Shift (CLS) caused by images and ads?
99
HTML/CSSBeginner#css#fundamentals
What is the difference between inline styles, internal <style>, and external stylesheets?
100
HTML/CSSBeginner#css#selectors
What is the universal selector (*) and what are its performance implications?
101
HTML/CSSIntermediate#css#forms
How do you style form validation states using CSS pseudo-classes?
102
HTML/CSSAdvanced#css#design-systems
What is the difference between rem-based spacing scale and arbitrary pixel values in design systems?
103
HTML/CSSAdvanced#css#performance
How does the 'will-change' property affect rendering performance?
104
HTML/CSSIntermediate#html#semantics
What is the difference between HTML5's <section>, <article>, and <aside>?
105
HTML/CSSBeginner#html#structure
What is the difference between the <head> and <body> sections of an HTML document?
106
HTML/CSSBeginner#html#accessibility
What is the purpose of the alt attribute versus the title attribute on images?
107
HTML/CSSBeginner#html#javascript
What is a data attribute and how is it used?
108
HTML/CSSBeginner#html#elements
What is the difference between <ul>, <ol>, and <dl>?
109
HTML/CSSAdvanced#css#media-queries
How do you make a webpage print-friendly using CSS?
110
HTML/CSSIntermediate#css#media
What is the CSS 'object-fit' property used for?
111
HTML/CSSBeginner#html#entities
What is the difference between HTML entities and Unicode characters?
112
HTML/CSSBeginner#html#attributes
What is the difference between the id and class attributes?
113
HTML/CSSAdvanced#html#javascript
What is the <template> element used for?
114
HTML/CSSAdvanced#html#security
What is the difference between the <iframe> sandbox attribute values?
115
HTML/CSSIntermediate#html#performance
How do you lazy-load images natively in HTML?
116
HTML/CSSAdvanced#css#layout
What is the difference between a block formatting context (BFC) and normal flow?
117
HTML/CSSIntermediate#css#accessibility
What is the difference between resetting focus outlines and providing accessible focus styles?
118
HTML/CSSAdvanced#css#grid
What is the difference between CSS Grid's implicit and explicit grid?
119
HTML/CSSBeginner#css#layout-puzzle
How do you vertically center text inside a single-line button using CSS?
120
HTML/CSSIntermediate#css#tailwind
What is the difference between a CSS framework like Bootstrap and a utility-first framework like Tailwind?
121
HTML/CSSAdvanced#css#units
What is the difference between static and dynamic viewport units (vh vs dvh)?
122
HTML/CSSIntermediate#css#cross-browser