Irbisa · Cheatsheet

HTML & CSS

Semantic HTML, the box model, display and positioning, units, Flexbox and Grid, margin collapse, responsive design and container queries, custom properties and theming, CSS Modules, Tailwind and CSS-in-JS

Junior Developer · 18 questions

  1. 01

    What is semantic HTML, and why use <nav>, <main>, <article> or <button> instead of a <div>?

    Semantic HTML means choosing the element that says what the content is, not how it looks.

    <body>  <header>    <nav aria-label="Main">      <a href="/">Home</a>      <a href="/pricing">Pricing</a>    </nav>…
  2. 02

    What is the CSS box model, and how wide is .card on screen with and without box-sizing: border-box?

    .card {  width: 300px;  padding: 20px;  border: 2px solid #ccc;  margin: 16px;} .card.border-box {  box-sizing: border-box;}

    Every element is a box of content, padding, border and margin.

  3. 03

    What is the difference between block, inline and inline-block elements?

    A block element starts on a new line, fills the width of its parent and accepts width, height and all margins.

  4. 04

    What is the difference between display: none, visibility: hidden and opacity: 0?

    display: none removes the element from layout and from the accessibility tree.

    /* Hidden on screen, still read by screen readers */.visually-hidden {  position: absolute;  width: 1px;  height: 1px;  margin: -1px;…
  5. 05

    How do static, relative, absolute, fixed and sticky positioning differ, and what is an absolute element positioned against?

    static is normal flow; relative stays in the flow and shifts visually by top and left; absolute leaves the flow and is placed against its nearest positioned ancestor; fixed against the viewport; sticky scrolls normally until it reaches its top offset, then sticks inside its parent.

    .avatar {  position: relative; /* the badge is placed against this box */}.avatar .badge {  position: absolute;  top: -4px;…
  6. 06

    What is the difference between px, em, rem, %, vh and dvh, and which do you use for font sizes?

    px is fixed, em is relative to the element's font size (the parent's, inside font-size), rem to the root font size, % to a size of the parent, and vh and dvh to the viewport height.

  7. 07

    How do you center an element horizontally and vertically, and which way would you pick today?

    Make the parent a grid with place-items: center, or a flex container with justify-content: center and align-items: center.

    /* Both axes, any child size */.center-grid {  display: grid;  place-items: center;  min-height: 100dvh;}…
  8. 08

    What is the difference between pseudo-classes and pseudo-elements, and what does :has() make possible?

    A pseudo-class (:hover, :focus-visible, :nth-child()) selects an existing element in a state or position; a pseudo-element (::before, ::after, ::placeholder) styles a part that is not a DOM element.

    /* pseudo-element: a tooltip arrow that is not in the DOM */.tooltip::after {  content: "";  position: absolute;  top: 100%;  left: 16px;…
  9. 09

    What is margin collapsing, and what is a block formatting context?

    Vertical margins of adjacent blocks merge into one, the larger of the two, instead of adding up, and a first child's top margin can escape through its parent.

    .card {  background: white;}.card h2 {  margin-top: 24px; /* escapes: the card itself moves down 24px */}…
  10. 10

    What do flex-grow, flex-shrink and flex-basis do, and what does flex: 1 actually mean?

    flex-basis is an item's starting size along the main axis, flex-grow its share of the free space left over, and flex-shrink how much it gives up when the items do not fit.

    .row {  display: flex;  gap: 8px;} /* equal columns whatever their content */…
  11. 11

    Find the bug: the long file name in a flex row does not truncate with an ellipsis and pushes the buttons off screen.

    /* <li class="file-row">     <div class="info"><p class="name">quarterly-report-final-v2.pdf</p><p>2.4 MB</p></div>     <button>Rename</button> <button>Delete</button>   </li> */.file-row {  display: flex;  gap: 8px;}.info {  flex: 1;}.name {  white-space: nowrap;  overflow: hidden;  text-overflow: ellipsis;}

    .info is a flex item with the default min-width: auto, so it cannot shrink below its content, and with nowrap the content is the whole file name.

  12. 12

    How do fr, minmax() and repeat() size CSS Grid tracks, and what is the difference between auto-fill and auto-fit?

    fr is a share of the space left after fixed tracks, minmax(min, max) lets a track flex between two sizes, and repeat() writes a track list once.

    .page {  display: grid;  grid-template-columns: 240px minmax(0, 1fr);  grid-template-areas:    "header header"    "nav    main";…
  13. 13

    What are CSS custom properties, how do they differ from Sass variables, and how do you build light and dark themes with them?

    Custom properties (--accent: #2563eb, read with var(--accent)) are real CSS values in the browser: they inherit down the DOM, can be redefined per element or media query and changed at runtime.

    :root {  --surface: #ffffff;  --text: #111827;  --accent: #2563eb;  color-scheme: light;}…
  14. 14

    How do you build a responsive layout with mobile-first media queries, and when do container queries fit better?

    Mobile-first means the base styles are for the narrowest screen and @media (min-width: 768px) blocks add columns as space grows.

    /* base: one column for phones */.layout {  display: grid;  gap: 16px;}…
  15. 15

    How do srcset, sizes and <picture> serve the right image, and how do you stop images from shifting the layout?

    srcset lists the same image in several widths and sizes tells the browser how wide it will be shown, so it picks the smallest file that is sharp on that screen.

    <picture>  <source type="image/avif" srcset="/img/hero-800.avif 800w, /img/hero-1600.avif 1600w" sizes="100vw" />  <img    src="/img/hero-1600.jpg"    srcset="/img/hero-800.jpg 800w, /img/hero-1600.jpg 1600w"    sizes="100vw"…
  16. 16

    What is the difference between a CSS transition and a @keyframes animation, and which properties can you animate smoothly?

    A transition animates a property from its old value to the new one when it changes, for example on :hover or a class toggle.

    .menu {  opacity: 0;  transform: translateY(-8px);  visibility: hidden;  transition: opacity 150ms ease-out, transform 150ms ease-out, visibility 150ms;}…
  17. 17

    How do you scope styles in a React app: BEM, CSS Modules, Tailwind or CSS-in-JS, and what does each cost?

    Plain CSS is global, so each approach avoids clashes differently: BEM by naming, CSS Modules by renaming classes per file at build time, Tailwind with utility classes instead of names, CSS-in-JS by generating styles in the component.

    import styles from './Button.module.css'; // .button, .primary and .bar inside interface ButtonProps {  primary?: boolean;  children: React.ReactNode;}…
  18. 18

    What does runtime CSS-in-JS such as styled-components or Emotion cost, and why do Server Components push teams toward zero-runtime styling?

    Runtime CSS-in-JS turns styles written in JavaScript into CSS while components render: the library ships to the browser, injects rules during rendering and must flush them next to streamed HTML.

    // before: Title.tsx, styles built at runtime from a propconst Title = styled.h1<{ $accent: string }>`  font-size: 2rem;  color: ${(p) => p.$accent};`;…