Create a CSS triangle with clip-path, the classic border trick or a linear gradient, with examples for every direction and tooltip arrows.

How to create a triangle in CSS?

Convert an object to an array with Object.keys, Object.values or Object.entries, go back with Object.fromEntries, and handle array-like objects.

How to convert an object to an array in JavaScript?

Center an element horizontally and vertically in CSS with grid, flexbox or absolute positioning, and fix the most common reason vertical centering fails.

How to center an element in CSS?

There is no universal set of breakpoints. Learn how to pick them, a sensible mobile-first starting set, and how fluid layouts and container queries need fewer.

Which media query breakpoints should I use?

Disable text selection with user-select: none, including the prefix Safari still needs, when to use it, and how user-select: all and ::selection help.

How to disable text selection with CSS?

Yes, CSS has a parent selector: :has(). See practical examples for cards, checked labels, invalid forms and previous siblings, plus its limits.

Is there a CSS parent selector?

Remove the bullets and the indent from a ul or ol with list-style: none, keep the list accessible in Safari, and customize the markers instead.

How to remove bullets from a list in CSS?

Padding is space inside an element, margin is space outside it. Learn when to use each, how margin collapsing works, and why gap often beats both.

When to use margin vs padding in CSS?

Animate an element from height 0 to its natural height with the grid-template-rows trick, the new interpolate-size property, or the old max-height hack.

How to transition height from 0 to auto with CSS?

Make an element fill the screen height with min-height: 100dvh, understand svh, lvh and dvh on mobile, and fix height: 100% that does nothing.

How to make an element 100% of the screen height?

Keep the footer at the bottom of short pages with CSS grid or flexbox, why the wrapper must be the direct parent, and how it differs from a fixed footer.

How to keep the footer at the bottom of the page?

Sass is a CSS preprocessor with two syntaxes, SCSS and the indented .sass, while LESS is a separate tool. Compare them side by side and see what to use today.

What's the difference between Sass, SCSS and LESS?

Change the mouse cursor with the CSS cursor property: which value to use for clickable, draggable or disabled elements, and how to use a custom image.

How to change the cursor on hover in CSS?

Keep an image's proportions with max-width and height auto, prevent layout shift with width and height attributes, or force a ratio with aspect-ratio.

How to keep the aspect ratio of an image in CSS?

Make an image fit its container with max-width, fill a box of a fixed size with object-fit cover or contain, and load the right file size with srcset.

How to fit an image into its container?

Use the checked property to see if a checkbox is ticked, get all checked values in a group, and avoid the checked attribute, which shows the initial state.

How to check if a checkbox is checked in JavaScript?

Get the value of the selected radio button with querySelector and :checked, form.elements or FormData, and handle the case when nothing is selected yet.

How to get the selected radio button value in JavaScript?

Using the array index as a key makes React attach state to the wrong list items after you add, remove or reorder them. Here's why, and what to use instead.

Why you shouldn't use index as a key in React

Removing the focus outline breaks keyboard navigation. Use :focus-visible to hide it on mouse clicks and replace it with your own accessible focus style.

How to remove the focus outline from inputs and buttons?

Build a Pinterest-style masonry layout with CSS columns, or with CSS Grid and a short script, and learn which one to pick when the order of items matters.

How to create a masonry layout like Pinterest?

Fix unwanted space below a link: the gap under an image inside a link, an underline that sits too low, and vertical padding that doesn't work on inline links.

How to remove the space below a link?

Hide the spin buttons of a number input in Chrome, Safari and Firefox with CSS, and learn when a text input with inputmode numeric is the better choice.

How to hide the arrows in a number input?

Make cards or columns in a row the same height with flexbox or grid, push their buttons to the bottom, and line up titles and text across cards with subgrid.

How to make elements in a row the same height?

Style the file input button with the file-selector-button pseudo-element, or build a fully custom upload button from a label that stays keyboard accessible.

How to style a file input?

Connect a label to a checkbox so clicking the text toggles it, fix the usual reasons it fails, and style a custom checkbox without breaking keyboard access.

How to make a checkbox label clickable?

Why pointer-events: none doesn't fully disable a link, and how to disable it properly by removing the href, adding aria-disabled and styling the disabled state.

How to disable a link with CSS?

Gradients from Figma or Sketch often look off in CSS because of angle geometry, color profiles, sRGB blending and extra layers. Here's how to fix each one.

Why do gradients from Figma or Sketch look different in the browser?

Hide the scrollbar with scrollbar-width: none and a WebKit fallback while the element keeps scrolling, plus when hiding it hurts and what to do instead.

How to hide the scrollbar but keep scrolling?

Use img for images that are content and CSS background-image for decoration. What each one gives you for accessibility, SEO, LCP and responsive images.

When to use img vs CSS background-image?

Why height: 100% often does nothing, and how to make a child fill its parent's height with flexbox, grid, an explicit height or absolute positioning.

How to make a child element 100% height of its parent?

A reset removes browser default styles, while normalize.css keeps them and fixes inconsistencies. What each does, and the small modern reset to use today.

What's the difference between reset.css and normalize.css?

Style a child, a sibling, a parent or any element when another one is hovered, using CSS combinators and :has(), with keyboard, touch and JavaScript options.

How to change another element when hovering in CSS?

Turn off autocomplete with autocomplete off, why browsers sometimes ignore it, and which autocomplete values to use instead for passwords, codes and addresses.

How to disable autocomplete on inputs?

Change the URL without a reload using history.pushState and replaceState, update query parameters, handle the back button and use your framework's router.

How to change the URL without reloading the page?

Use a real link styled as a button instead of a clickable div or button, make a whole card clickable, and navigate with JavaScript only when you really need to.

How to make a button or div work like a link?

Get an element's position with getBoundingClientRect, convert it to page or parent coordinates, see how offsetTop differs, and avoid slow layout reads.

How to get the X and Y position of an element in JavaScript?

Strip the tags from an HTML string and get plain text with DOMParser, why innerHTML on a div is unsafe, and when a regex is good enough.

How to get text from an HTML string in JavaScript?

Why button type=button is the better choice over input type=button: HTML content, pseudo-elements, and the default submit type inside forms.

button vs input type=button: which one to use?

Redirect a page with a meta refresh tag, with location.replace in JavaScript, or better, with a real 301 or 308 HTTP redirect from the server.

How to redirect to another page in HTML?

Reload a page on a timer with meta refresh or setTimeout, why full reloads hurt users, and how to poll for fresh data and update only the DOM.

How to refresh a page automatically every few seconds?

The vanilla JavaScript replacement for jQuery's document ready: DOMContentLoaded, a readyState check for late scripts, and the defer attribute.

$(document).ready() without jQuery

Upload an image with a multipart form or with fetch and FormData, show a preview, check size and type, send multiple files, and track progress.

How to upload an image with a form?

Read an uploaded image in Node.js with request.formData() or multer in Express, save it safely, and avoid the usual security holes with uploads.

How to receive an uploaded image on the server?

Clear an HTML canvas with clearRect, why old shapes come back without beginPath, and how to clear correctly after translate, scale or rotate.

How to clear a canvas in JavaScript?

Detect when an element scrolls into view with IntersectionObserver, do a one-off check with getBoundingClientRect, and detect CSS-hidden elements.

How to check if an element is visible in the viewport?

A button inside a form submits it by default. Add type=button, or handle the submit event with preventDefault, in plain JavaScript and in React.

How to prevent a button from submitting a form?

Build a back to top button with a plain link and smooth scrolling, show it only after scrolling with IntersectionObserver, and keep it accessible.

How to create a scroll to top button?

Show a base64 encoded image with a data URL in an img tag, in CSS or from JavaScript, pick the right MIME type, and know when base64 is a bad idea.

How to display a base64 image in HTML?

Add the checked attribute to preselect a checkbox or radio button. Why checked='false' is still checked, and how defaultChecked works in JS and React.

How to check a checkbox or radio button by default?

Use classList.contains to check for a class, matches for any selector and closest for ancestors, and avoid the className.includes gotcha.

How to check if an element has a class in JavaScript?

Limit a file input with the accept attribute using MIME types or extensions, then validate the file in JavaScript and on the server.

How to accept only certain file types in a file input?

Remove an item from a JavaScript array with indexOf and splice, or get a new array with filter or toSpliced. Includes objects by id and React state.

How to remove a specific element from an array in JavaScript?

Use shift to remove the first element and pop to remove the last, or slice and destructuring to get a new array without changing the original.

How to remove the first or last element of an array in JavaScript?

The real differences between arrow and regular functions in JavaScript: this, arguments, new, hoisting and object literals, and when to use each.

Arrow functions vs regular functions in JavaScript

Use map to build a new array and forEach for side effects. Common smells, how to stop a loop early, and why forEach doesn't wait for async callbacks.

forEach or map: which one should I use?

Validate emails with input type=email and the Constraint Validation API, or a simple regex that catches typos, and why only a confirmation email is proof.

How to validate an email address in JavaScript?

Generate a UUID with crypto.randomUUID in the browser and Node, a getRandomValues fallback for plain HTTP pages, and when UUID v7 is the better choice.

How to generate a UUID in JavaScript?

Sort an array of objects by a string, number or date property with a compare function, sort by several keys, and avoid the default sort and mutation traps.

How to sort an array of objects by property in JavaScript?

Get the current page URL with window.location.href, read its parts and query parameters, and get the URL safely in Next.js and other SSR frameworks.

How to get the current URL in JavaScript?

Show placeholder text in a select dropdown with a disabled, selected first option.

How to add a placeholder for HTML <select> component?

To disable resizing of textarea, we need to set only one CSS property.

How to Disable the Resize of the <textarea> HTML Element?

Short cheatsheet for adding, removing, and toggling CSS classes in vanilla javascript. You no longer have to remember it!

How to change element's class with Javascript?

One of the most common problems that almost every junior frontend developer has is extra space below the image. Let's learn how to fix it with CSS

Extra space below image

Sometimes, we have to trim text to limit the number of lines. There are a few ways to do it with pure CSS. Let's learn how to achieve that

How to limit text to n lines with CSS?

A short tutorial on creating an HTML and CSS tooltip without a single line of javascript. All you need to know is data-atributes

The answers I
keep re-googling.

Got something that needs building?

The answers Ikeep re-googling.

Got something that needs building?

The answers I
keep re-googling.