Frontend Developer
HTML and CSS questions
186 questions on HTML and CSS for frontend developers, easiest first.
Easy 63
- Semantic element for site navigationeasy
- Width with border-boxeasy
- Centering with Flexboxeasy
- Alt text for a decorative imageeasy
- Linking a label to an inputeasy
- Default type of a form buttoneasy
- What 1rem is relative toeasy
- Where absolute elements are placedeasy
- Hiding an element but keeping its spaceeasy
- Grid columns with fr unitseasy
- Media query for mobile-first CSSeasy
- Page looks zoomed out on phoneseasy
- Numbers saved in localStorageeasy
- What fetch does on a 404easy
- Tailwind md: prefixeasy
- Choosing a heading leveleasy
- Native lazy loading for imageseasy
- What defer does on a scripteasy
- Order of click handlerseasy
- What the main element is foreasy
- article versus sectioneasy
- Link or buttoneasy
- What type="email" gives youeasy
- Why <!DOCTYPE html> matterseasy
- The lang attributeeasy
- Width on a spaneasy
- Caption for a chart imageeasy
- Header cells in a data tableeasy
- Two elements with the same ideasy
- Reading a data attributeeasy
- Links that open a new tabeasy
- Value of a number inputeasy
- A FAQ that opens and closeseasy
- Marking up a dateeasy
- Gap between two stacked paragraphseasy
- Total width with content-boxeasy
- Sizing chips that sit in a lineeasy
- Axes in a column flexboxeasy
- Spacing between flex itemseasy
- Flex items squeezed on one lineeasy
- Properties that inheriteasy
- Nested em font sizeseasy
- A ::before that does not showeasy
- A floating WhatsApp buttoneasy
- Square thumbnails from mixed photoseasy
- Images that overflow on phoneseasy
- Striping table rowseasy
- Choosing a line-height valueeasy
- first-child versus first-of-typeeasy
- Following the system dark modeeasy
- Users who get dizzy from motioneasy
- A hover transitioneasy
- A loading spinner that never stopseasy
- Invisible text while fonts loadeasy
- Keeping a video box 16:9easy
- Hover effects on touch screenseasy
- Smaller image fileseasy
- Nesting rules without Sasseasy
- Printing an invoice pageeasy
- A heading with one word on the last lineeasy
- Handler that runs on every rendereasy
- A form that reloads the pageeasy
- What a service worker doeseasy
Medium 72
- Which CSS rule winsmedium
- Event delegationmedium
- Responsive card grid without media queriesmedium
- position: sticky does not stickmedium
- Clickable div and keyboard usersmedium
- What showModal gives youmedium
- Which value a CSS variable takesmedium
- Native element or ARIAmedium
- Announcing "Added to cart"medium
- Grouping radio buttonsmedium
- Autofill for an OTP fieldmedium
- A PIN field on mobilemedium
- Serving AVIF with a fallbackmedium
- Images that push content downmedium
- Order of async scriptsmedium
- Showing a user commentmedium
- Live versus static listsmedium
- target versus currentTargetmedium
- preventDefault versus stopPropagationmedium
- form.submit versus requestSubmitmedium
- tabindex="3" on a fieldmedium
- Skip link at the topmedium
- hidden versus aria-hiddenmedium
- State of a menu buttonmedium
- Loading the hero image soonermedium
- A preloaded font downloaded twicemedium
- Pressing Enter in a search fieldmedium
- Specificity of a nav link selectormedium
- Inline style versus !importantmedium
- :is() versus :where()medium
- Styling a card that has an imagemedium
- What flex: 1 meansmedium
- Widths from flex-growmedium
- Pushing one nav item to the rightmedium
- One flex item aligned differentlymedium
- Naming grid areasmedium
- A featured card that spans two columnsmedium
- Column width with gapsmedium
- Centering with one grid rulemedium
- Moving an element with position: relativemedium
- An overlay that covers its cardmedium
- Icons that follow text colourmedium
- Width that leaves room for a sidebarmedium
- Font size from clamp()medium
- Spacing that flips for Arabicmedium
- Focus rings only for the keyboardmedium
- Resetting a propertymedium
- Why a big CSS file delays first paintmedium
- A print stylesheet and render blockingmedium
- will-change on everythingmedium
- A slow loop that resizes cardsmedium
- CSS variables versus Sass variablesmedium
- Reading a BEM class namemedium
- What CSS Modules domedium
- A Tailwind colour that never appearsmedium
- Using transition: allmedium
- Using a feature only where it existsmedium
- Which image srcset downloadsmedium
- White scrollbars in dark modemedium
- A manual dark mode togglemedium
- Anchor target hidden under a headermedium
- A swipe carousel without JavaScriptmedium
- A small gap below an imagemedium
- Timing a JavaScript animationmedium
- Listener that will not go awaymedium
- Passive touch listenersmedium
- Handler that should run oncemedium
- A button inside a clickable cardmedium
- When React onChange firesmedium
- Cleaning up a window listener in an effectmedium
- Users stuck on old versionmedium
- New service worker waitsmedium
Hard 51
- z-index that does not workhard
- Ellipsis that never truncates in Flexboxhard
- Janky slide-in animationhard
- Unsafe postMessage listenerhard
- Old version after deploy with a service workerhard
- Cascade layers versus specificityhard
- Card layout based on its own widthhard
- aria-hidden on a parent of a buttonhard
- Which label winshard
- Focus after client-side navigationhard
- Locking the page behind a drawerhard
- Global CSS and a shadow roothard
- Naming a custom elementhard
- What is inside a template taghard
- onclick stops working after adding CSPhard
- Detecting the end of a listhard
- A field that stays invalidhard
- Minimum contrast for body texthard
- Minimum size of a tap targethard
- Reordering with CSS orderhard
- Relying on accept for uploadshard
- When a MutationObserver fireshard
- Child margin pushes the parent downhard
- A parent that ignores floated childrenhard
- What padding-top: 50% is based onhard
- A grid column that will not shrinkhard
- auto-fill versus auto-fit with few itemshard
- A fixed modal that scrolls awayhard
- height: 100% that does nothinghard
- Specificity of :not() with a listhard
- Aligning titles across cardshard
- What dense packing doeshard
- Widths after flex-shrinkhard
- Animating a gradient anglehard
- z-index on a non-positioned blockhard
- Centring an absolute box with auto marginshard
- Order of values in gaphard
- Full-height hero cut off on phoneshard
- A view transition that is skippedhard
- A very long page that renders slowlyhard
- Arabic and English user commentshard
- A hover shadow that drops frameshard
- Percentages in left versus translatehard
- Buttons vanish in high contrast modehard
- Page jumps when a modal openshard
- Scrolling leaks out of a modalhard
- A bottom bar under the iPhone home indicatorhard
- Loading five font weightshard
- Clicks inside a portalhard
- Service worker slows navigationshard
- Cache storage filling uphard