CSS for Everybody: From beginner to boss

Explore the three core display types—block, inline, and inline-block—through live demos with divs, borders, paddings, and margins to grasp layout and prep for flexbox and grid.

Explore how outlines differ from borders and use outline offset to create space around elements, improving accessibility for hover, screen readers, and keyboard navigation.

Learn how to apply text shadow in CSS by adjusting x and y offsets, blur, and color, and explore effects using rgba colors and background tweaks.

Discover how CSS positions move elements around, exploring absolute, relative, fixed, sticky, and the default static positioning to create pixel-perfect layouts and layered, app-like interfaces.

Explore relative positioning to move an element from its normal place using top, left, bottom, and right. See how small offsets adjust layout and prep for absolute-positioned children.

Learn how to use absolute positioning by anchoring a child to a positioned parent, then place it in the top-right quadrant and size it to 50% width and height.

Learn how sticky positioning keeps an element within its parent during scroll. Use top values and section-based examples to create responsive headers for mobile and desktop.

Center a block element horizontally by setting width and height and using margin left auto and margin right auto, then see how top margins balance the page.

Explore advanced CSS selectors, including descendants, child, adjacent, and general sibling selectors, by building and styling stacked boxes and examining specificity in real-world examples.

Explore how pseudo selectors power CSS by linking states and styling hover interactions, and learn to use the child and not selectors to target elements precisely.

Apply pseudo selectors like not and nth-child to selectively style boxes, and use hover to change background, borders, and font size or font family, even without editing HTML.

Learn how CSS pseudo elements use double colons to target a box and insert before and after content, creating elements on the page without hover actions.

Explore how before and after pseudo elements enhance CSS layouts without extra HTML, using content, borders, positioning, and hover effects to create layered visuals and interactive borders.

Explore the first letter and first line pseudo elements for styling text, enlarging the initial letter, bolding the first line, and using float left for wrapping in magazine-style layouts.

Learn how to style text selection with CSS, changing the background to green and the text to white when the user selects it, across any element.

Explore how to use CSS transitions to create smooth hover effects, turning links into buttons and animating background color with targeted timing for a polished UI.

Explore loading custom web fonts with font-family fallbacks, importing fonts via HTML or CSS, and using Google Fonts like Pacifica or Roboto to ensure typography when fonts aren't available.

Master CSS animations with keyframes, animation-name, duration, and iteration to move elements across the page with infinite looping. Use absolute positioning, top-left coordinates, and color changes to create dynamic effects.

Learn to build responsive page layouts with flexbox, using display:flex, flex-basis, wrap, and flex-grow/shrink to create left and right columns, a navigation area, and content header, with border-box sizing.

Master CSS grid to design page layouts with grid template columns, rows, and gaps, and learn to span items across columns and rows for headers, navigation, and footers.

Build a stylish CSS project by replicating a site using navigation, header, hero, and card sections, employing flexbox and grid layouts, background images, padding, margins, and typography.

Explore responsive web design fundamentals, adapting layouts to device sizes so sidebars, menus, and content adjust gracefully for desktops, laptops, tablets, and phones.

Add a viewport meta element to enable responsive web design by setting width to device width and initial scale to one point zero in the head of every HTML file.

Explore media query syntax by using max-width and responsive techniques to change the page background from blue to red at 640 pixels, illustrating device width based design.

Learn how mobile-first design prioritizes styles for phones, using min-width queries to switch from a red base to blue at 640 pixels, and compare mobile-first with desktop-first approaches.

Learn to make images responsive with CSS by using 50 percent widths and height auto, and apply a 640-pixel media query to switch to full width.

Learn to make a YouTube iframe embed responsive by wrapping it in a relative container, using overflow hidden, and applying a 16:9 aspect ratio with a positioned iframe.

Explore multiple media queries to adapt a 400x400 box; apply a 50% border radius between 700px and 1000px widths to morph it into a circle, otherwise keep it square.

Learn to build a responsive two-column layout with flexbox, including navigation, sidebar, and content that stacks and hides the sidebar at breakpoints using media queries and border-box.

Create a responsive page layout with flexbox or grid, including navigation, a sidebar, and content; use media queries and a responsive toggle to adapt layout on different widths.

Implement responsive web design by adding a meta element, applying declarations like display none and border right zero, and using media queries for 640 and 470 breakpoints.