CSS

HTML

HTML (HyperText Markup Language) is the standard markup language for structuring content on the web. It uses a system of nested elements and tags to define tex…

CSS

CSS (Cascading Style Sheets) is the stylesheet language used to control the visual presentation of HTML documents, defining layout, colors, typography, spacing…

CodePen

CodePen is an online code editor and social development platform for front-end web development, letting users write and preview HTML, CSS, and JavaScript in th…

JSFiddle

JSFiddle is an online code editor for testing and sharing HTML, CSS, and JavaScript snippets, organized into separate panes with a live preview of the rendered…

jQuery

jQuery is a fast, lightweight JavaScript library that simplifies HTML DOM manipulation, event handling, animation, and AJAX requests through a concise, cross-b…

htmx

htmx is a small JavaScript library that lets developers add AJAX, WebSockets, and dynamic UI updates directly in HTML attributes, enabling interactive applicat…

Webflow

Webflow is a visual web design and hosting platform that lets designers build responsive, production-grade websites using a visual canvas that generates clean…

Chrome DevTools

Chrome DevTools is the built-in set of web developer tools in Google Chrome for inspecting, debugging, and profiling HTML, CSS, and JavaScript directly in the…

DaisyUI

DaisyUI is a component library plugin for Tailwind CSS that adds ready-made class names — like btn, card, and modal — for common UI components on top of Tailwi…

Bulma

Bulma is an open-source CSS framework based on Flexbox that provides ready-made classes for layout, typography, and common UI components, with no JavaScript in…

Foundation CSS

Foundation is a responsive front-end CSS framework, originally created by ZURB, that provides a grid system, UI components, and JavaScript plugins for building…

Semantic UI

Semantic UI is a CSS framework that uses human-readable class names resembling natural language (e.g. 'ui blue button') to describe UI components, aiming to ma…

CSS Modules

CSS Modules is a technique where CSS class names are scoped locally to the component that imports them by default, preventing global naming collisions in large…

GSAP

GSAP (GreenSock Animation Platform) is a high-performance JavaScript animation library for animating virtually any property of DOM elements, SVG, canvas object…

Framer Motion

Framer Motion (now published as 'motion' for React) is a declarative animation library for React that lets developers animate component props, layout changes,…

Locators: getByRole, getByText, and CSS

Learn how Playwright locators find elements using role-based, text-based, and CSS selector strategies, and why role-based locators are the recommended default.

Locator Strategies (ID, CSS, XPath)

How to choose and write reliable Selenium locators using ID, CSS selectors, and XPath, and how to weigh their tradeoffs.

Styling Approaches in Next.js

A practical comparison of the main ways to style Next.js apps: global CSS, CSS Modules, Tailwind CSS, and CSS-in-JS with styled-jsx.

Backgrounds and Borders in CSS

Learn how to style element backgrounds and borders using CSS properties like background-image, border-radius, and box-shadow.

Colors and Units in CSS

Explore CSS color formats and the absolute and relative units used to size and space elements.

The CSS Box Model

Understand how content, padding, border, and margin combine to determine the size and spacing of every element.

CSS Custom Properties (Variables)

Learn how to define and reuse values across a stylesheet using CSS custom properties and the var() function.

Styling Forms with CSS

Learn how to style form elements consistently and provide visual feedback for validation states using CSS.

CSS Frameworks Overview

An overview of popular CSS frameworks like Bootstrap and Tailwind CSS, comparing their approaches, trade-offs, and when to use each.

CSS Grid

A two-dimensional layout system for arranging content into rows and columns using grid-template-columns/rows, gap, and grid-area.

CSS Methodologies: BEM

Understand the BEM (Block, Element, Modifier) naming convention for writing scalable, maintainable, and conflict-free CSS.

CSS Positioning

How the position property (static, relative, absolute, fixed, sticky) controls where elements sit in the document flow.

CSS Preprocessors (Sass/LESS)

Learn how Sass and LESS extend CSS with variables, nesting, mixins, and partials to write more maintainable stylesheets.

CSS Specificity and the Cascade

Learn how the browser decides which CSS rule wins when multiple selectors target the same element.

CSS Syntax and Selectors

Learn how CSS rules are structured and how to target HTML elements using the full range of CSS selectors.

CSS Transitions and Animations

Understand how to animate CSS property changes smoothly using transitions and create complex motion with keyframe animations.

CSS Units for Layout (px, %, rem, em, vh/vw)

How absolute and relative CSS length units differ and when to use px, %, rem, em, and viewport units in layouts.

Flexbox in CSS

A one-dimensional layout model for distributing space and aligning items along a row or column using the flex container/item model.

Common HTML & CSS Interview Questions

A practical rundown of frequently asked HTML and CSS interview questions with clear, technically accurate answers.

HTML, CSS, and JavaScript Overview

A concise comparison of the three pillars of front-end web development and how they work together.

Performance Optimization in CSS

Speed up page rendering with critical CSS, fewer reflows, and simpler selectors so pages paint faster and stay smooth.

Typography in CSS

Control font families, sizes, weights, and spacing to create readable, well-designed text on the web.

Dark Mode Implementation Cheat Sheet

Covers CSS custom-property theming, prefers-color-scheme, flash-of-wrong-theme prevention, persisted toggle logic, and Tailwind's class-based dark mode setup.

Figma to Code Workflow Cheat Sheet

Covers key Figma concepts like Auto Layout and Variants, Dev Mode CSS output, the Figma API, and a practical developer handoff checklist.

What Is the CSS Box Model?

The CSS box model describes every rendered element as a set of nested rectangular layers — content, padding, border, and margin — and how those layers combine…

CSS Flexbox vs Grid: What Is the Difference?

Flexbox is a one-dimensional layout system for arranging items along a single row or column with flexible sizing, while CSS Grid is a two-dimensional system th…

How Does CSS Specificity Work?

CSS specificity is a weighted scoring system the browser uses to decide which of several conflicting rules wins on an element, calculated by counting IDs, clas…

What Are the CSS Position Values and How Do They Differ?

The CSS position property controls how an element is placed in the document: static is the default normal flow, relative offsets an element from its own origin…

How Do z-index and Stacking Contexts Work?

z-index controls the paint order of positioned elements along the axis perpendicular to the screen, but it only works within a stacking context, which is a sel…

What Are CSS Custom Properties (CSS Variables)?

CSS custom properties, written as --name and read with var(--name), are author-defined variables that cascade and inherit like any other CSS property, letting…

What Are CSS Media Queries and How Do They Work?

A media query is a CSS conditional block that applies a set of styles only when the browser environment matches specified conditions, most commonly viewport wi…

What Are the Core Principles of Responsive Web Design?

Responsive design means building a single layout that adapts to any viewport using fluid grids, flexible images, and CSS media queries, rather than shipping se…

What Are CSS Pseudo-Elements and How Do They Differ From Pseudo-Classes?

A pseudo-element (like ::before or ::after) lets you style or insert a specific sub-part of an element that doesn’t exist as a real DOM node, while a pseudo-cl…

What Is the Difference Between CSS Transitions and CSS Animations?

A CSS transition interpolates a single property smoothly between two states — a start and an end value — triggered by a state change like hover or a class togg…

How Does CSS Transform Enable GPU-Accelerated Animation?

The CSS transform property (and opacity) can be animated on the GPU’s compositor thread without triggering layout or paint, because translate/scale/rotate oper…

What Is BEM Methodology and Why Use It in CSS?

BEM (Block, Element, Modifier) is a CSS naming convention that structures class names as block__element--modifier to make every class flat, self-documenting, a…

What Is the CSS-in-JS Approach and When Should You Use It?

CSS-in-JS is a styling pattern where component styles are written and scoped in JavaScript files alongside the markup, with a runtime or build-time tool genera…

What Is Critical CSS Extraction and Why Does It Matter?

Critical CSS extraction is the practice of identifying the small subset of CSS rules needed to render the content visible in the initial viewport, inlining jus…

What Is the Difference Between Reflow and Repaint?

Reflow (also called layout) is the browser recalculating the position and size of elements on the page, while repaint is the browser redrawing pixels for eleme…

DOM vs Shadow DOM: What Is the Difference?

The regular DOM is the single, global tree of elements making up a page where any script or stylesheet can reach any node, while the shadow DOM attaches a sepa…

Repaint vs Reflow: How Do They Affect Rendering Performance?

Reflow (layout) recalculates the position and geometry of elements across the page and is expensive, while repaint only redraws pixels for visual changes like…

What Is the Resize Observer API and Why Is It Useful?

The Resize Observer API lets you asynchronously detect when an element’s content box (or border box) size actually changes, which is essential for responsive,…

How Does CSS Grid grid-template-areas Work?

`grid-template-areas` lets you name regions of a CSS Grid layout as a visual ASCII-art string on the container, then assign each child to one of those named re…

What Do justify-content, align-items, and align-self Do in Flexbox?

`justify-content` aligns flex items along the main axis (the flex-direction), `align-items` aligns items along the cross axis for the whole container, and `ali…

What Are CSS Container Queries and How Do They Differ from Media Queries?

Container queries let an element style itself based on the size of its nearest containing ancestor rather than the size of the entire viewport, using `containe…

What Are CSS Cascade Layers (@layer) and Why Do They Matter?

CSS cascade layers, declared with @layer, let a developer group style rules into explicitly ordered buckets so that layer order — not selector specificity — de…

How Does Native CSS Nesting Syntax Work?

Native CSS nesting lets you write a selector inside another selector’s rule block, using the & symbol to reference the parent selector explicitly, so related s…

What Are CSS Viewport Units (vh, vw, dvh, svh, lvh)?

CSS viewport units size elements relative to the browser viewport — vw and vh are percentages of the initial viewport width/height, while the newer dvh, svh, a…