<html lang="en">
<head></head>
<body>
.container {
display: grid;
gap: 1rem;
}
</body>
</html>
HTML & CSS Interview
Questions & Answers
30
Total Questions
10
Beginner
11
Intermediate
9
Advanced
Beginner QuestionsQ1βQ10
1
What is semantic HTML and why does it matter?
BeginnerVery Common
+
Semantic HTML means using HTML elements that carry meaning about their content β not just how they look. A <nav> tells the browser and screen readers "this is navigation". A <div> says nothing.
HTML
<!-- β Non-semantic β divs everywhere -->
<div class="header">...</div>
<div class="nav">...</div>
<div class="article">...</div>
<div class="footer">...</div>
<!-- β
Semantic β meaningful elements -->
<header>...</header>
<nav>...</nav>
<main>
<article>
<h1>Title</h1>
<p>Content...</p>
</article>
<aside>Related links</aside>
</main>
<footer>...</footer>
Why it matters: Better SEO (search engines understand page structure), better accessibility (screen readers navigate by landmarks), cleaner code, and easier CSS targeting.
Key semantic elements:
<header>, <nav>, <main>, <article>, <section>, <aside>, <footer>, <figure>, <figcaption>, <time>, <address>.2
What is the difference between
id and class in HTML?BeginnerVery Common
+
| Feature | id | class |
|---|---|---|
| Uniqueness | Must be unique per page | Can be reused on many elements |
| CSS selector | #myId | .myClass |
| Specificity | Higher (0-1-0-0) | Lower (0-0-1-0) |
| JS access | getElementById('myId') | getElementsByClassName() |
| Multiple per element | β Only one id | β Multiple classes allowed |
| Anchor links | β Used as page anchors (#section) | β Not used for anchors |
HTML
<div id="hero" class="section dark-bg full-width">
<!-- one unique id, multiple classes -->
</div>
/* CSS */
#hero { min-height: 100vh; } /* id selector */
.dark-bg { background: #111; } /* class selector */
3
What is the CSS Box Model?
BeginnerVery Common
+
Every HTML element is a box made up of four layers from inside to outside: content β padding β border β margin.
CSS
.box {
width: 200px; /* content area width */
padding: 16px; /* space INSIDE border */
border: 2px solid #ccc; /* visible border */
margin: 24px; /* space OUTSIDE border */
}
/* Default box-sizing: content-box
Total width = 200 + 16*2 + 2*2 = 236px β confusing! */
/* Better: border-box β width INCLUDES padding + border */
* {
box-sizing: border-box; /* β use this always */
}
/* Now total width = exactly 200px β */
Always set
box-sizing: border-box on everything. It makes width/height behave intuitively β the value you set is the actual visible size. Almost all modern CSS resets (including Tailwind) do this by default.4
What is CSS specificity and how is it calculated?
BeginnerVery Common
+
Specificity determines which CSS rule wins when multiple rules target the same element. It's calculated as a four-part value: inline : IDs : classes/attributes/pseudo-classes : elements/pseudo-elements.
CSS
p { color: black; } /* 0-0-0-1 */
.text { color: blue; } /* 0-0-1-0 β wins over p */
#title { color: green; } /* 0-1-0-0 β wins over .text */
p.text#title { color: red; } /* 0-1-1-1 β wins */
/* !important β overrides everything (avoid abusing it) */
p { color: purple !important; }
5
What is the difference between
display: block, inline, and inline-block?BeginnerVery Common
+
| Property | block | inline | inline-block |
|---|---|---|---|
| New line? | β Yes | β No | β No |
| Width/height | β Respects | β Ignored | β Respects |
| Top/bottom margin | β Works | β Ignored | β Works |
| Default width | 100% of parent | Content width | Content width |
| Examples | div, p, h1-h6 | span, a, strong | img, button |
CSS
/* Make a span behave like a styled button: */
span.btn {
display: inline-block; /* sits in line, but respects size */
width: 120px;
padding: 8px 16px;
background: #10b981;
}
6
What are CSS pseudo-classes and pseudo-elements?
BeginnerCommon
+
- Pseudo-class (
:): Selects elements in a specific state. Examples::hover,:focus,:nth-child(),:first-child,:not(),:checked. - Pseudo-element (
::): Selects a specific part of an element or inserts content. Examples:::before,::after,::first-line,::placeholder.
CSS
/* Pseudo-classes β element STATE: */
a:hover { color: green; }
input:focus { border-color: blue; }
li:nth-child(odd) { background: #f5f5f5; }
li:first-child { font-weight: bold; }
p:not(.special) { color: gray; }
/* Pseudo-elements β element PART or INSERTED CONTENT: */
p::first-line { font-weight: bold; }
input::placeholder { color: #aaa; }
.card::before { /* Insert content before element */
content: "β
";
color: gold;
}
.card::after { /* Insert content after element */
content: ""; /* common trick for clearfix / decorations */
display: block;
}
7
What is the difference between
position: relative, absolute, fixed, and sticky?BeginnerVery Common
+
| Value | Reference point | Removes from flow? | Use case |
|---|---|---|---|
static | Default β no positioning | β | Normal page flow |
relative | Its own normal position | β (space reserved) | Offset slightly; create containing block |
absolute | Nearest positioned ancestor | β | Tooltips, dropdowns, overlays |
fixed | Viewport | β | Sticky nav, chat button, cookie banner |
sticky | Scrolls until threshold, then fixed | β | Table headers, sidebar navigation |
Key rule for absolute: It positions relative to the nearest ancestor with
position set to anything other than static. If none exists, it positions relative to <html>. Always add position: relative to the intended parent.8
What is the difference between
em, rem, px, %, and vw/vh units?BeginnerVery Common
+
| Unit | Relative to | Best for |
|---|---|---|
px | Fixed pixel (device dependent) | Borders, shadows, precise sizing |
em | Parent element's font-size | Padding/margin relative to text size |
rem | Root (html) font-size | Typography, consistent spacing scale |
% | Parent element's dimension | Fluid widths, responsive layouts |
vw | 1% of viewport width | Full-width sections, fluid type |
vh | 1% of viewport height | Full-height hero sections |
ch | Width of "0" character | Ideal line length for readability (~60-75ch) |
Modern best practice: Use
rem for font sizes and spacing (respects user's browser font setting), % or vw for widths, px for borders and shadows, em for component-local spacing.9
What is the
alt attribute on images and why is it important?BeginnerCommon
+
The alt attribute provides alternative text for an image when it cannot be displayed β and is read aloud by screen readers for users with visual impairments.
HTML
<!-- β Missing alt β accessibility failure -->
<img src="logo.png">
<!-- β
Descriptive alt β screen readers read this -->
<img src="logo.png" alt="RankWeb3 logo">
<!-- β
Decorative image β empty alt, screen readers skip it -->
<img src="divider.svg" alt="" role="presentation">
<!-- β
Functional image (linked) β describe the action -->
<a href="/"><img src="logo.png" alt="Go to homepage"></a>
Benefits: Accessibility (WCAG compliance), SEO (search engines index alt text), fallback text when image fails to load.
10
What is the CSS cascade and inheritance?
BeginnerCommon
+
The cascade is the algorithm that determines which CSS rule wins when multiple rules could apply to the same element. It considers (in order): importance (!important), origin (user-agent, author, user), specificity, and source order.
Inheritance means some CSS properties are automatically passed from parent to child elements without you having to set them explicitly.
CSS
/* Inherited properties (font-*, color, line-height, etc.): */
body { font-family: sans-serif; color: #333; }
/* All child elements inherit these β */
/* Non-inherited (width, padding, border, background, etc.): */
div { border: 1px solid red; }
/* Children do NOT get the border automatically β */
/* Force inheritance with 'inherit': */
button { font-family: inherit; } /* buttons don't inherit by default */
/* Reset to initial value: */
.reset { all: unset; }
Intermediate QuestionsQ11βQ21
11
How does CSS Flexbox work? Explain the main properties.
IntermediateVery Common
+
Flexbox is a one-dimensional layout system (row OR column). Set display: flex on a container β its direct children become flex items.
CSS β Container Properties
.container {
display: flex;
flex-direction: row | column | row-reverse;
justify-content: flex-start | center | space-between | space-around;
align-items: stretch | center | flex-start | flex-end;
flex-wrap: nowrap | wrap;
gap: 16px; /* space between items */
}
/* Item properties: */
.item {
flex-grow: 1; /* how much to grow to fill space */
flex-shrink: 0; /* prevent shrinking */
flex-basis: 200px; /* initial size before grow/shrink */
flex: 1 0 200px; /* shorthand: grow shrink basis */
align-self: center; /* override align-items for this item */
}
β‘ Live Demo
justify-content: space-between; align-items: center
Item 1
Item 2
Item 3
Axis trick:
justify-content always controls the main axis (direction flex is going). align-items always controls the cross axis. Centering something? display:flex; justify-content:center; align-items:center.12
How does CSS Grid work? How is it different from Flexbox?
IntermediateVery Common
+
CSS Grid is a two-dimensional layout system β it controls both rows AND columns simultaneously. Flexbox is one-dimensional (row or column, not both).
CSS
.grid {
display: grid;
grid-template-columns: repeat(3, 1fr); /* 3 equal columns */
grid-template-rows: auto 300px auto;
gap: 20px;
/* Named areas: */
grid-template-areas:
"header header"
"sidebar main "
"footer footer";
}
/* Place item in named area: */
.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
/* Or span specific lines: */
.hero {
grid-column: 1 / -1; /* span all columns */
grid-row: 1 / 3; /* span rows 1 to 3 */
}
β‘ Live Demo β Grid Template Areas
Header
Main Content
| Feature | Flexbox | Grid |
|---|---|---|
| Dimensions | 1D (row or column) | 2D (rows + columns) |
| Best for | Component layout, nav bars | Page layout, complex 2D grids |
| Content-driven? | β Items decide sizing | β Layout decides sizing |
13
What are CSS media queries and how do you build a responsive layout?
IntermediateVery Common
+
Media queries apply CSS rules conditionally based on device/viewport characteristics β width, height, orientation, color scheme, etc. They're the foundation of responsive design.
CSS
/* Mobile-first approach (recommended):
Write base styles for mobile, add complexity for larger screens */
.grid {
display: grid;
grid-template-columns: 1fr; /* mobile: 1 column */
gap: 16px;
}
@media (min-width: 768px) {
.grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
.grid { grid-template-columns: repeat(3, 1fr); }
}
/* Other media features: */
@media (orientation: landscape) { ... }
@media (prefers-color-scheme: dark) { ... } /* dark mode! */
@media (prefers-reduced-motion: reduce){ ... } /* accessibility */
@media (hover: none) { ... } /* touch devices */
@media print { ... } /* print styles */
Mobile-first vs Desktop-first: Mobile-first uses
min-width breakpoints (scale up). Desktop-first uses max-width (scale down). Mobile-first is generally preferred β it forces you to prioritise content and produces cleaner, lighter base styles.14
What are CSS custom properties (variables)?
IntermediateCommon
+
CSS custom properties (officially "CSS variables") let you store values that can be reused throughout your stylesheet. They're defined with --name and accessed with var(--name).
CSS
/* Define variables in :root (global scope): */
:root {
--color-primary: #10b981;
--color-text: #0f172a;
--spacing-md: 1rem;
--border-radius: 12px;
--font-heading: 'Syne', sans-serif;
}
/* Use them: */
.btn {
background: var(--color-primary);
padding: var(--spacing-md);
border-radius: var(--border-radius);
color: var(--color-text, black); /* fallback value */
}
/* Dark mode with one override: */
@media (prefers-color-scheme: dark) {
:root {
--color-text: #f1f5f9; /* just update the variable! */
}
}
/* Override in component scope: */
.hero {
--color-primary: #3b82f6; /* local override */
}
15
What is the difference between
transition and animation in CSS?IntermediateCommon
+
| Feature | transition | animation |
|---|---|---|
| Trigger | State change (hover, focus, class toggle) | Plays automatically or on load |
| Keyframes | Only start β end (2 states) | Multiple keyframes (0%, 50%, 100%) |
| Loop | β No | β
Yes (infinite) |
| Direction | Always forward + reverse | Can alternate, reverse, pause |
CSS
/* Transition β triggered by state change: */
.btn {
background: green;
transition: background .3s ease, transform .2s;
}
.btn:hover {
background: darkgreen;
transform: translateY(-2px);
}
/* Animation β runs automatically: */
@keyframes pulse {
0%, 100% { transform: scale(1); opacity: 1; }
50% { transform: scale(1.05); opacity: .8; }
}
.badge {
animation: pulse 2s ease-in-out infinite;
}
16
What are HTML data attributes and how are they used?
Intermediate
+
Data attributes (data-*) let you store custom data directly on HTML elements without using non-standard attributes or hidden inputs. They're accessible via JavaScript's dataset API and CSS attribute selectors.
HTML + CSS + JS
<!-- HTML -- store any custom data: -->
<button
data-user-id="42"
data-action="delete"
data-confirm="true"
>Delete</button>
/* CSS -- style based on data attributes: */
[data-action="delete"] { background: red; }
[data-confirm="true"] { border: 2px dashed orange; }
// JS -- access via dataset (camelCase conversion):
const btn = document.querySelector('button');
btn.dataset.userId // "42" (data-user-id β userId)
btn.dataset.action // "delete"
btn.dataset.newProp = "hello" // creates data-new-prop="hello"
17
What is the difference between
visibility: hidden, display: none, and opacity: 0?IntermediateVery Common
+
| Property | Visible? | Takes space? | Clickable? | Transition? |
|---|---|---|---|---|
display: none | β | β | β | β |
visibility: hidden | β | β Yes | β | β (visible/hidden) |
opacity: 0 | β (transparent) | β Yes | β Still clickable! | β Yes (smooth fade) |
Common trap:
opacity: 0 elements are invisible but still interactive β users can accidentally click invisible buttons. For accessible hide/show with transitions, combine opacity: 0; pointer-events: none; visibility: hidden.18
What is the
z-index and how does stacking context work?IntermediateCommon
+
z-index controls the stacking order of positioned elements (elements with position other than static). Higher values appear in front.
A stacking context is created by certain CSS properties and acts as an isolated layer. Elements inside a stacking context cannot appear above elements outside it, no matter how high their z-index.
CSS
/* z-index only works on positioned elements: */
.overlay {
position: fixed;
z-index: 1000;
}
/* Stacking context created by: */
.creates-context {
opacity: < 1; /* e.g. opacity: 0.99 */
transform: anything; /* e.g. translateX(0) */
filter: anything;
will-change:transform;
isolation: isolate; /* explicit isolation */
}
/* Gotcha: a modal inside opacity:0.99 parent won't
appear above elements outside that parent!
Solution: move modal to document root with portals */
19
What are HTML forms and what are important accessibility considerations?
IntermediateCommon
+
HTML β Accessible Form
<form action="/submit" method="post" novalidate>
<!-- β
Label explicitly linked to input via htmlFor/for -->
<label for="email">Email address <span aria-hidden="true">*</span></label>
<input
type="email"
id="email"
name="email"
required
autocomplete="email"
aria-describedby="email-hint email-error"
/>
<p id="email-hint">We'll never share your email.</p>
<p id="email-error" role="alert" aria-live="polite"></p>
<fieldset>
<legend>Preferred contact</legend>
<input type="radio" name="contact" id="email-pref" value="email">
<label for="email-pref">Email</label>
</fieldset>
<button type="submit">Submit</button>
</form>
20
What is
will-change and when should you use it?Intermediate
+
will-change tells the browser in advance that a property is about to change, so it can create a compositor layer and optimise rendering beforehand β resulting in smoother animations.
CSS
/* Tell browser this element will be animated: */
.animated-card {
will-change: transform, opacity;
}
/* Best practice: add dynamically just before animation: */
element.style.willChange = 'transform';
// run animation...
element.style.willChange = 'auto'; // remove after done!
Don't overuse it:
will-change forces the browser to create a new GPU layer which consumes memory. Using it on everything defeats the purpose. Only add it to elements that will actually animate, and remove it when the animation ends.21
What is the difference between
min-width, max-width, and clamp()?Intermediate
+
CSS
/* min-width β never smaller than this: */
.btn { min-width: 120px; } /* grows, but never below 120px */
/* max-width β never larger than this: */
.content { max-width: 800px; margin: 0 auto; }
/* clamp(min, ideal, max) β fluid value between limits: */
h1 {
/* font-size between 24px and 64px, fluid in between: */
font-size: clamp(24px, 5vw, 64px);
}
.section {
padding: clamp(16px, 5%, 80px); /* fluid padding! */
}
/* Without clamp (old way β needed media queries): */
h1 { font-size: 24px; }
@media (min-width: 768px) { h1 { font-size: 48px; } }
@media (min-width: 1200px){ h1 { font-size: 64px; } }
Advanced QuestionsQ22βQ30
22
What is CSS containment and the
contain property?Advanced
+
CSS contain tells the browser that a subtree is independent from the rest of the page, allowing it to skip recalculation of layout, style, or paint for areas that haven't changed β a significant rendering performance win.
CSS
.card {
contain: layout paint style; /* browser isolates this subtree */
}
/* Values: */
contain: layout; /* element doesn't affect external layout */
contain: paint; /* nothing inside is painted outside bounds */
contain: style; /* CSS counters/quotes don't affect outside */
contain: size; /* element size doesn't depend on children */
contain: strict; /* all of the above except style */
contain: content; /* layout + paint + style */
/* content-visibility (newer, even more powerful): */
.below-fold {
content-visibility: auto; /* skip rendering off-screen elements */
contain-intrinsic-size: 0 500px; /* estimated size for scrollbar */
}
23
What are CSS logical properties?
Advanced
+
CSS logical properties use flow-relative terms (inline/block, start/end) instead of physical directions (left/right/top/bottom). They automatically adapt to the writing direction (LTR, RTL, vertical text).
CSS
/* Physical (hard-coded direction): */
.box {
margin-left: 16px;
padding-top: 8px;
border-right: 2px solid red;
width: 200px;
}
/* Logical (writing-mode aware): */
.box {
margin-inline-start: 16px; /* β in LTR, = left */
padding-block-start: 8px; /* β = top */
border-inline-end: 2px solid red; /* β = right */
inline-size: 200px; /* β = width */
block-size: 100px; /* β = height */
}
/* In RTL language, margin-inline-start = right automatically β */
24
What are CSS Layers (
@layer) and why are they useful?AdvancedCommon
+
CSS Cascade Layers (@layer), introduced in 2022, let you explicitly control the order in which groups of styles are applied β regardless of specificity. Styles in later layers win over earlier ones, no matter how specific the earlier selectors are.
CSS
/* Declare layer order (lowest to highest priority): */
@layer reset, base, components, utilities;
@layer reset {
* { margin: 0; padding: 0; box-sizing: border-box; }
}
@layer base {
a { color: blue; } /* High specificity selector... */
article #link.nav-item { color: navy; }
}
@layer utilities {
/* This wins even with lower specificity,
because utilities layer comes AFTER base: */
.text-green { color: green; } /* beats article #link.nav-item */
}
Key benefit: No more fighting specificity when combining third-party CSS (e.g., a UI library) with your own styles. Put the library in a lower layer, and your utilities always win cleanly.
25
What is the CSS
:has() selector and what makes it powerful?AdvancedCommon
+
:has() is the long-awaited "parent selector" in CSS. It selects an element if it contains a specific child β letting you style parents based on their children, purely in CSS.
CSS β :has() Examples
/* Style a form if it contains an invalid input: */
form:has(input:invalid) {
border: 2px solid red;
}
/* Style a card that has an image differently: */
.card:has(img) {
grid-template-rows: 200px 1fr;
}
/* Style a label when its input is checked: */
label:has(input:checked) {
background: #d1fae5;
font-weight: bold;
}
/* Style nav differently based on number of items: */
nav:has(> li:nth-child(5)) {
flex-direction: column; /* 5+ items β go vertical */
}
/* Previously, all of this required JavaScript! */
26
What is critical CSS and how does it improve page performance?
Advanced
+
Critical CSS refers to the minimum CSS required to render the above-the-fold content of a page. By inlining this CSS directly in the <head>, the browser can paint the visible page immediately without waiting for external stylesheets to load.
HTML
<head>
<!-- Critical CSS inlined β paints above fold immediately: -->
<style>
/* Only above-fold styles: nav, hero, first section */
body { font-family: sans-serif; margin: 0; }
.hero { background: #064e3b; color: white; }
</style>
<!-- Non-critical CSS loaded async (won't block render): -->
<link
rel="stylesheet"
href="styles.css"
media="print"
onload="this.media='all'"
/>
</head>
Impact: Improves First Contentful Paint (FCP) and Largest Contentful Paint (LCP) β Core Web Vitals that affect Google search ranking. Tools like Critters, Penthouse, or Next.js automatically extract critical CSS.
27
What is BEM and why are CSS naming conventions important?
AdvancedCommon
+
BEM (Block, Element, Modifier) is a CSS naming convention that makes stylesheets more readable, scalable, and maintainable β especially in teams.
HTML + CSS β BEM
<!-- BEM: block__element--modifier -->
<div class="card"> <!-- Block -->
<div class="card__header">....</div> <!-- Element -->
<p class="card__text">....</p> <!-- Element -->
<button class="card__btn card__btn--primary">
</button> <!-- Element + Modifier -->
</div>
<div class="card card--featured">....</div> <!-- Block Modifier -->
/* CSS: flat selectors, low specificity, predictable: */
.card { border: 1px solid #eee; }
.card__header { padding: 16px; }
.card__btn { padding: 8px 16px; }
.card__btn--primary{ background: green; }
.card--featured { border-color: gold; }
BEM benefits: No specificity wars (all selectors are single class, specificity 0-0-1-0). Any developer can understand the structure from the HTML alone. Modifiers keep component variants co-located.
28
What are Web Accessibility (a11y) best practices for HTML and CSS?
AdvancedVery Common
+
Web accessibility ensures websites work for everyone, including people with visual, motor, hearing, or cognitive impairments. WCAG 2.2 is the standard.
HTML + CSS β Accessibility Checklist
<!-- 1. Meaningful heading hierarchy -->
<h1>Page title</h1> <!-- one per page -->
<h2>Section</h2> <!-- don't skip levels -->
<!-- 2. ARIA labels for interactive elements -->
<button aria-label="Close menu">β</button>
<nav aria-label="Main navigation">...</nav>
<!-- 3. Skip link for keyboard users -->
<a href="#main" class="skip-link">Skip to content</a>
/* 4. Focus styles β never remove! */
:focus-visible {
outline: 3px solid #10b981;
outline-offset: 2px;
}
/* 5. Colour contrast β 4.5:1 minimum for text */
/* 6. Reduced motion */
@media (prefers-reduced-motion: reduce) {
* { animation-duration: 0.01ms !important; }
}
/* 7. Visually hidden but accessible to screen readers: */
.sr-only {
position: absolute; width: 1px; height: 1px;
overflow: hidden; clip: rect(0,0,0,0);
white-space: nowrap; border: 0;
}
29
What is CSS subgrid and when would you use it?
Advanced
+
CSS subgrid allows a grid item to participate in the parent grid's tracks β so its children align with the grandparent grid's columns or rows. Without subgrid, nested grids define their own independent tracks.
CSS
/* Parent grid: */
.card-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
}
/* Without subgrid β each card defines own rows.
Card heights don't match across columns. */
.card {
display: grid;
grid-template-rows: auto 1fr auto; /* independent rows */
}
/* With subgrid β cards share parent's row tracks.
Title, body, footer all align across ALL cards! */
.card {
display: grid;
grid-row: span 3;
grid-template-rows: subgrid; /* β inherits parent rows */
}
Use case: Card components where you want the title, body, and CTA button to align horizontally across a row of cards β even when they have different content lengths.
30
What is the CSS paint worklet and CSS Houdini?
Advanced
+
CSS Houdini is a set of browser APIs that expose the CSS engine's internals β letting developers extend CSS itself with JavaScript. It unlocks powerful capabilities that previously required workarounds.
- Paint Worklet (CSS Painting API): Use a
<canvas>-like API to paint backgrounds, borders, or masks β as a CSS value likebackground: paint(myEffect). - Properties & Values API: Register custom CSS properties with types, inheritance, and initial values β unlike bare CSS variables which are just strings.
- Layout Worklet: Define custom layout algorithms (like masonry) as CSS properties.
- Animation Worklet: Run animations off the main thread for butter-smooth 60fps+.
JS + CSS β Houdini Example
// Register typed custom property:
CSS.registerProperty({
name: '--gradient-angle',
syntax: '<angle>',
inherits: false,
initialValue: '0deg',
});
/* Now you can TRANSITION a custom property!
(Normal CSS vars can't be transitioned) */
.btn {
--gradient-angle: 0deg;
background: conic-gradient(from var(--gradient-angle), green, blue);
transition: --gradient-angle 1s ease;
}
.btn:hover { --gradient-angle: 360deg; }
Up Next: Node.js & SQL Interview Questions
You've now covered HTML & CSS. Next in the series β Node.js (event loop, streams, REST APIs) and SQL (joins, indexes, transactions). Coming soon.
β React Q&A