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 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 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.

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.

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.

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.

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.

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.

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.

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

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.

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.