Core CSS Mastery

Learn to style anchor tags using CSS pseudo-classes: link, visited, hover, focus, and active, override browser defaults with colors and outlines, and master their ordering for accessible navigation.

Discover how CSS fonts work, from font family fallbacks and web safe fonts to hosting custom fonts with @font-face or Google Fonts. Master font weight control and consistent typography.

Explore how to size elements in css using px, em, rem, percent, vh, and vw, and learn how parent, child, and root font sizes affect layout for responsive design.

Master CSS borders by learning border-color, border-style, and border-width, plus the border shorthand. Use single-side borders to create horizontal or vertical lines with examples like solid cyan and dashed red.

Explore margins and padding in CSS, using shorthand and specific properties to control spacing inside and outside borders, and learn how auto margins and flex enable centering and vertical alignment.

discover the CSS box model, including content, padding, border, and margin, and compare block, inline, and inline-block behavior, then explore outer and inner display with flex and grid.

Explore how the CSS overflow property manages content within a fixed container, using min-height, max-height, and values like visible, hidden, scroll, and auto for vertical scrolling and overflow-x/y.

Learn to design backgrounds with color, images, and linear gradients using CSS properties like background-size, background-repeat, background-position, and background-attachment fixed.

Build a complete production-ready css theme by applying the updated palette, styling form elements and buttons, and styling a blank table to prepare for real projects.

Explore how to use CSS floats to wrap text around images, experimenting with left and right floats, clear, and the transition between block and inline behavior.

Master the css position property, including relative, absolute, fixed, and sticky, and use top, right, bottom, and left offsets to control element placement.

Explore flexbox, a powerful css tool for building advanced layouts by turning elements into flex items, controlling direction, alignment, wrapping, spacing, and flexible sizing with grow, shrink, and basis.

Create responsive layouts using css grid by turning containers into grids with grid-template-columns, fractions, and repeat, and place content with grid-column and grid-area. Explore gaps, alignment, and areas.

Master responsive design by using media queries to adapt grid layouts and navigation for narrow viewports, including implementing a mobile hamburger menu.

Explore creating an 8x8 chessboard with CSS grid by styling 64 squares, using nth-child to alternate colors on odd and even rows, starting with a white top-left.

Master cascade, inheritance, and specificity in css to understand how properties inherit, how selectors differ in specificity, and how later rules dominate earlier ones.

Explore CSS variables, aka custom properties, and use the root pseudo class and var() and calc() to theme a page and adapt container sizes responsively.

Compare CSS frameworks and preprocessors, focusing on Tailwind's utility-driven approach versus Bootstrap's component-driven design. Learn when to use each for large projects and understand the tradeoffs of frameworks and preprocessors.

Maintain consistent, maintainable CSS with a clear naming and organization system, leverage custom properties for theming, and design responsively using media queries; consult MDN web docs and W3C CSS docs.