CSS: Zero to Hero in CSS by Styling a Website from Scratch

Explore CSS, the cascading style sheets that style websites and complement HTML. Learn how CSS controls layout, fonts, and visual flair, and how selectors apply styles.

Create a new css stylesheet file, organize it in a dedicated folder, write boilerplate markup, and link the stylesheet in the page head using a rel='stylesheet' tag to begin styling.

Test your CSS stylesheet by adding a visible property and refreshing the page to easily confirm the stylesheet is linked correctly.

Learn the basics of CSS selectors, including element, class, and id selectors, and how to target HTML elements with curly braces and properties to apply styles.

learn to use classes and IDs to target specific elements with css, applying dot-prefixed class selectors and hash-prefixed id selectors to style titles, subtitles, and targeted content.

Explore CSS specificity and how element, class, and ID selectors compete, with inline styles taking precedence, and learn when to use class versus ID.

Learn how pseudo selectors power interactivity, covering hover, first-child, last-child, and end-child, plus anchor selectors like link and visited for dynamic in-page styling.

Explore advanced selectors in CSS, including adjacent sibling, general sibling, child, and descendant selectors, and learn how attributes selectors work with practical demos.

Explore CSS attribute selectors to target elements by attributes such as class and src, using operators like starts with, ends with, contains, and whitespace-separated values to craft precise rules.

Master how properties and selectors work together in CSS, focusing on colon, semicolon, and values that define color, background, positioning, height, and width.

discover how a selector targets an element, and how a CSS block inside curly braces holds properties with colon and semicolon; combine multiple properties in one block for concise styling.

Explore the three types of colors in CSS—named colors, hex codes, and rgb values—and learn how to use color pickers and color properties to style modern, appealing websites.

Color text on a website by applying CSS color properties and hex codes, using a color picker, and styling titles, subtitles, paragraphs, and links with new classes.

Select the body element to apply a page background, use the background property with hex or rgba colors, and adjust brightness for a balanced look.

Learn how to set background images in CSS using url() links, including online and local image URLs, and apply them with background or background-image properties.

Explore two core background properties—background repeat and background size—to control how images fill a container, using no-repeat, cover, and contain to achieve clean, responsive backgrounds.

Explore adding a fourth component to rgb colors, creating rgba values with an alpha between 0 and 1. This enables background transparency, fades, and easier color management in css.

Master CSS gradients by using linear and radial types to blend colors, set direction with top, bottom, left, right or angles, and control proportions with percentages.

Explore absolute and relative CSS units, including pixels, centimeters, millimeters, inches, points, em, percent, vw, and vh, and learn to apply responsive design based on the viewport.

Explore text manipulation and text decoration, text transform, and text align to style text independent of font, including underlines, capitalization, and justification.

Learn to manipulate text with CSS by adjusting font size, weight, and style using responsive units like em and rem, plus italic and oblique variants.

Explore font families—serif, sans serif, and mono space—and learn to apply the font-family property, use fallback fonts, and set readable web typography.

Learn to use external fonts from the internet, especially Google fonts, by selecting font families and weights for headings and body text, while balancing load time.

Learn to include external fonts from Google fonts, place the link tag above your stylesheet, apply Leto for body and Sara for titles, and add robust fallbacks.

Explore the CSS box model, which surrounds content with padding, border, and margin to control internal and external spacing.

Learn to shape content with the CSS box model's content area, using height and width with px, vw, and percent. Explore responsive design through browser dev tools and resizing experiments.

Explore how to style borders using the css border shorthand, adjusting size, style, and color to reveal how the box model works around images and gradients.

Master the box model by manipulating margin and padding on an image, and learn shorthand and side-specific properties (top, right, bottom, left) to control layout.

Understand how float and display control layout by examining inline versus block elements, using inline-block, none, and inherit to shape flow and prepare for flex and grid layouts in CSS.

Learn how flexbox creates responsive layouts by organizing a flex container and its items, offering a robust alternative to floats and the box model.

Create a flex container by applying display: flex to a parent element. Observe default flex properties and learn how to adjust order, size, and alignment in upcoming lessons.

Explore how to control layout with flex direction and wrap on a flex container, using row, column, reverse, wrap, and wrap reverse to organize items.

Learn to justify content and align items in a flex container using flex-start, flex-end, center, space-between, space-around, and align-items options like center, stretch, and baseline.

Apply the order property to flex items and assign numeric values to reorder them, observing layout changes with a default zero value.

Explore how flex grow, flex shrink, and flex basis drive responsive layouts in CSS, enabling proportional space distribution and minimum widths across devices.

Master the flex property shorthand to combine grow, shrink, and basis, apply it to items, and set defaults like grow 0, shrink 1, and a 100px basis.

Learn to fine tune vertical alignment in flexbox by applying align-items to the container and align-self to individual items, using values like center, flex-start, and flex-end to create responsive layouts.

Compare grid and flex box to learn how grid uses both width and height to create a grid with columns and rows for flexible page layouts.

Activate a grid container by applying display: grid, compare grid to flexbox, and manually shape the layout with varied item sizes while laying groundwork for future css grid concepts.

Explore CSS grid basics by using grid template columns and rows to define a set of columns and rows, adjust sizes with pixel values and auto, and understand space distribution.

Master how to justify content and align content in CSS grid, using start, center, end, space between, space around, and space evenly to control horizontal alignment.

Explore how to control spacing in CSS grid by using column gap, row gap, and the shorthand grid gap, creating visual hierarchy and balanced layouts.

Learn to leverage CSS grid lines to resize and reposition items by setting start and end points or using span, mastering column and row layouts from scratch.

Apply the grid area shorthand to set both row and column spans in one step, mastering grid layouts for headers and sidebars.

Explore the transition property to animate hover effects with duration, delay, and easing (ease in out), using pseudo selectors and browser prefixes for compatibility.

Explore transform properties in CSS, including translate, scale, rotate, skewX, skewY, and matrix shorthand, to create 2d page transformations.

Learn to define CSS keyframes and animations, compare them to transitions, animate properties like background from red to black, and translate elements with from and to or 0% and 100%.

Apply the created keyframe animation to the about me title by setting the animation name, while keeping keyframes at the bottom for easy reference and future timing tweaks.

Explore essential CSS animation properties, including duration, timing function, delay, iteration count, and direction, and learn the shorthand to create looping, forward, and reverse animations with browser prefixes.

Style an unstable site from a downloadable zip, applying color, layout grid, flex box, and animations to create a responsive, revamped site with a sidebar, image grid, and custom fonts.

Learn to transform a website from scratch with css grid and flexbox, import fonts, apply a blue and orange theme, build a two-column layout, and add hover and fade-in effects.

Plan your next steps after HTML and CSS mastery, with JavaScript as the next essential skill. Explore frameworks like React and ES6, plus backend options such as Django and Node.js.