CSS: The Complete Guide (Flexbox, Grid & Sass)

Visualize every element as a box. Deep dive into margin, border, padding, and content with box-sizing.

Control how elements flow in the document. Understand the default display of common HTML tags.

Introduction to static, relative, absolute, and fixed positioning contexts.

Build a tooltip and a badge overlay. Learn to use position: relative as a container for absolute children.

Create a fixed header and a sidebar that sticks. Understand the viewport and scroll contexts.

Why floats are still relevant for simple text wrapping and legacy code. How to clear them properly.

Control what happens when content is too big for its container. Build a simple scrollable box.

Debug why one element covers another. Understand how z-index actually works beyond simple number ordering.

Use browser DevTools to inspect the box model, computed styles, and layout problems in real-time.

Activate Flexbox and see its immediate effect on direct children. Set up your first flexible layout.

Visualize the two axes. Use justify-content and align-items to distribute space.

Allow items to move to the next row. Use the gap property for consistent spacing.

Control how items grow and shrink with flex-grow, flex-shrink, and flex-basis. The shorthand flex property.

Change visual order without altering HTML. Practical use cases for navigation and content prioritization.

Step-by-step project: Create a horizontal nav that stacks on mobile using Flexbox properties.

Align card content consistently and make cards equal height regardless of text length.

The definitive way to center elements horizontally and vertically. Solve the classic centering problem.

Create a grid with explicit rows and columns. Understand the difference between grid and flexbox.

Use fractional units for flexible tracks. Write cleaner code with repeat() and auto keywords.

Build grids that adapt using auto-fill/auto-fit with minmax(). Create a responsive image gallery.

Design layouts visually with named areas. Create a common header/sidebar/content/footer page.

Place items on specific grid lines. Use the grid-column and grid-row shorthand properties.

Control item and content alignment along both axes in a grid context.

Handle content that overflows your defined tracks. Use grid-auto-flow for dense packing.

Align children of grid items to the outer grid using subgrid for perfect alignment in complex cards.

Use Grid for the overall page structure and Flexbox for component-level alignment. A practical case study.

Use browser DevTools Grid inspector and overlay tools to visualize tracks, lines, and areas.

Why vanilla CSS isn't enough for large projects. Install Sass and compile your first file.

Store colors, fonts, and spacing in variables. Nest selectors to mirror HTML structure.

Organize code into multiple files. The modern way to share variables and mixins across files.

Write mixins for common patterns like flexbox centering, text truncation, and responsive breakpoints.

Write functions to calculate values, lighten colors, or generate spacing scales.

Share a set of properties without extra HTML classes. Understand the benefits and trade-offs.

Organize a large project with a scalable folder structure. Integrate the BEM methodology.

When to use each. Use CSS variables for runtime theming and Sass for build-time logic.

Automate Sass compilation, minification, and vendor prefixing with a simple build script.

Use PostCSS for additional transformations. Explore plugins for future CSS syntax today.

Apply everything learned. Create a live style guide with variables, mixins, and a component library.