Advanced CSS and Sass: Flexbox, Grid, Animations and More!

Explore the Natours project—a css-driven website with animations, hover cards, a css-only pop-up, and a background video, plus starter html/css files.

Reset styles with the universal selector, define project-wide fonts, and overlay a gradient on a header background image; build a 95vh header using a hero image and clip-path.

Continue building the header with a logo box and a heading split into two spans, center the text box using absolute positioning and transform, and apply typography and spacing.

Learn to build a complex animated button using pseudo-elements and pseudo-classes, and master hover and active transitions with transform, shadows, and rounded corners for tactile user interface effects.

Explore building a complex animated button with after pseudo-elements, hover-driven scale and fade effects, and a bottom-entry animation, using absolute and relative positioning, z-index, and animation fill mode.

Explore how css works with the browser to display web pages, uncover advanced concepts behind the scenes, and quickly apply them to the Natours project.

Explore how the cascade and specificity parse CSS, resolving conflicts among author, user, and browser declarations, and determine the cascaded value using importance, specificity, and source order.

Explore how cascade and specificity govern CSS rules, experiment with selectors and hover effects in CodePen, and learn when to use or avoid the important declaration to debug styles.

Discover how CSS values flow from cascade through computed, used, and actual values, and how relative units like percentages, em, rem, vh, and vw convert to pixels.

Explains how CSS inheritance propagates cascaded and computed values from parent to child, using line-height as an example. If not inherited, padding uses the initial value; text-related properties are inherited.

Convert pixel measurements to rem units by setting the root font size and using 62.5% to map 1 rem to 10 px, enabling responsive, scalable design and easier maintenance.

Explore how the CSS visual formatting model computes boxes and renders a page. Learn the box model, box types, sizing, positioning, floats, stacking contexts, and z-index.

Adopt a think, build, architect mindset to design modular, reusable CSS with component-driven design and BEM. Organize styles using 7-1 pattern across base, components, layout, pages, themes, abstracts, and vendors.

Convert the existing HTML to the BEM system, identifying blocks, elements, and modifiers, and apply BEM notation to header, logo, text box, and headings, then adapt CSS accordingly.

Discover sass variables and nesting in scss on CodePen; define color variables, use ampersand nesting, style navigation and buttons with hover and darken or lighten, and apply clearfix.

Master the command line basics by navigating the file system, creating and managing files and folders, and using essential commands on Mac and Windows to install and compile Sass.

Install and use the live server npm package to auto-reload on file changes. Run an http server on localhost:8080, detect changes, and reload the page.

Master advanced css techniques and animation effects with Sass workflow, automatic compilation, and live browser reloads to style your pages and build your project.

Convert existing CSS to Sass by adding color variables (including black) and using hex colors with rgba, then nest selectors with the ampersand under the BM methodology.

Implement the 7-1 CSS architecture with Sass by organizing styles into base, abstract, components, layout, and pages, using partials and imports to manage variables, mixins, animations, and typography.

Review the four principles of responsive design—fluid layouts, responsive units, flexible images, and media queries—and compare the three layout methods: floats, Flexbox, and CSS Grid.

Build a custom float grid from scratch, covering grid architecture, the attribute selector and the not pseudo-class, calc in css, and sass variables with gutters and clearfix.

Build the about section by applying H3 headings and paragraphs with reusable typography, margins, and utility classes, then style a btn-text link with hover and active states.

Learn to include the Linea Free Iconset icon font and build a skewed, non-rectangular features section with four hoverable feature boxes using a direct child selector.

Build a three-card tours section with a hover rotating card effect using perspective and backface-visibility for front and back sides, plus gradient backgrounds in a reusable Sass card component.

Advance the tours section by refining a front side card (image, heading, details list) with Sass and BEM, using background blend modes, clip-path, and box decoration break for gradient headings.

Learn to design a stories section with floating circular shapes that text wraps around using shape-outside and clip-path, apply image filters, and add a full-width background video with proper object-fit.

Implement a hover effect for the story section by overlaying a centered fig caption, animating text in while the image scales, blurs, and darkens using CSS transforms and filters.

Explore building a beautifully styled booking form using advanced CSS techniques, including a solid-color gradient, pseudo-classes, input placeholders, and custom radio buttons for a polished UI.

Build and style the booking form using Sass-driven CSS, adding inputs, labels, focus states, placeholders, and validation cues with adjacent sibling selectors and accessibility considerations.

Build custom animated radio buttons for forms using pure css and html, including hidden native inputs, :after pseudo-element dots, and checked state with sibling selectors for a polished booking section.

Build an interactive navigation using the checkbox hack, custom cubic-bezier timing functions, and gradient hover effects to reveal a left-side, fixed full-page overlay with precise transform-origin control.

Explore building a navigation with a checkbox toggle, reveal and hide the background, apply shadows, and implement opacity and width transitions with cubic-bezier easing for smooth animations.

Build the navigation button using a single span with before/after pseudo elements to morph three lines into a cross via a checkbox hack and hover transitions.

Create a pure CSS popup using the target pseudo-class, build equal-height side-by-side panels with display: table-cell, and implement two-column layouts with automatic hyphenation for responsive text.

Build a pure CSS popup that uses anchors and the target pseudo-class to toggle a hidden popup with opacity, visibility, and smooth transitions.

Explore mobile-first and desktop-first approaches for responsive design, focusing on breakpoints and media queries. Understand max-width versus min-width, pros and cons, and how to choose practical breakpoints for real projects.

Create a single Sass media query manager mixin to generate responsive breakpoints (phone, tab-port, tab-land, big-desktop) using content and if directives, convert to ems, and verify with Chrome DevTools.

Learn how to order media queries for responsive design, moving from base typography and layout to grid and header, footer, and navigation. Emphasizes mobile-first and 900px and 600px breakpoints.

Continue writing media queries to refine layout across breakpoints, reduce section and footer spacing, and craft a side-by-side composition with floats, shadows, and z-index.

Learn to craft responsive tours, stories, and booking sections with media queries, adjusting layouts from tablet to phone, replacing hover interactions with click, and applying clip-paths, borders, and shadows.

Learn responsive images in HTML using the sourceset attribute with 1x/2x density descriptors and the picture element for art direction, with media queries at breakpoints like 600px.

Learn to implement resolution switching in HTML using the source set with width descriptors and the sizes attribute to let the browser pick the best image for viewport and density.

Learn how to ensure modern CSS works across browsers using @supports feature queries, graceful degradation, and caniuse.com checks, with practical examples like backdrop-filter and prefixed properties.

Set up a simple npm script build to compile sass, concatenate css, autoprefix with postcss, and compress to style.css.

Wrap up the natours project with tweaks, including custom text selection and screen media queries, and reinforce responsive design with the viewport meta tag. Look ahead to a flexbox-focused project.

Explore the philosophy of flexbox and learn how the flex container and its items use main and cross axes, with core properties like flex-direction, justify-content, and align-items for responsive layouts.

Build a flex container in codepen to learn flexbox basics, including display:flex and the main and cross axes. Explore justify-content and align-items with row and column, using center and space-between.

Learn how flex items align and reorder using align-self and order, then control growth, shrinking, and basis with flex-grow, flex-shrink, and flex-basis to build responsive layouts.

Learn how flexbox manages many items, uses flex-wrap to form new lines, and uses align-content with flex-start, center, and space-between to control row alignment in responsive layouts.

Explore building a modern booking UI with flexbox, hover effects, and animations in a single-page trillo app, using Sass, starter files, and SPG icons.

Define project settings using CSS custom properties instead of Sass variables, set up a minimal file structure, apply global resets, and implement a gradient with root variables for consistent styling.

Build a centered 1200px max-width layout with a header, a left sidebar, and a right hotel view, then use flexbox to give the sidebar 18% and the area 82%.

Build a header with a logo, search bar, and user navigation by using SVG sprite icons, replacing icon fonts, and master flexbox alignment and CSS coloring.

Build the side bar navigation with a hover effect, scaleY transform, and transitions, using a svg sprite, current color variable, and flexbox column with space-between to align the legal text.

Develop the hotel overview interface using flexbox to vertically center elements, implement a bottom border, style the header and stars, and create an inline button with a pulsating focus animation.

build the hotel description section with a two-column flex layout, left description at 60% width and right reviews, with padding and a subtle shadow, using flex-wrap and mask-image and mask-size.

In this lecture, you build and style a description section using CSS and Sass, applying flexbox for layout, margins, borders, and svg icons with masks; refine the recommend component.

build a responsive user reviews section using flexbox, an HTML5 figure and blockquote, with a white review box, user image, name, date, rating, and a hoverable show all button.

Explore writing media queries for breakpoints like 600 and 500 pixels, and leverage flexbox to control direction, wrapping, and item order for a responsive, well-spaced interface.

Wrap up the Trillo project by assessing flexbox browser support with CanIUse.com, exploring feature queries, and reflecting on build processes, while hinting at grid layout and future challenges.

Explore the CSS grid layout module, the long-awaited addition that enables easier layout design with CSS grids. Compare grids with flexbox and use them together in a cool final project.

Set up your CSS grid workflow using Firefox Quantum dev tools and CodePen, then code your first CSS grid examples to visualize layouts and prepare for beginner-friendly lessons.

Learn to place grid items precisely by using grid-row and grid-column properties, with grid-row-start/end and grid-column-start/end, or their shorthand, and explore automatic placement and cell coordinates.

Explore spanning grid items across multiple cells using grid column and grid row, end lines, and minus one, while managing overlap with z-index in an implicit grid.

Demonstrates building a four-column grid layout with header, boxes, main content, sidebar, and footer in CodePen, using CSS grid to define tracks and span items across columns and rows.

Name grid areas with grid-template-areas to map header, side, main, and foot across a 4x4 grid, using dots for empty cells.

Explore how to align grid items to grid areas inside the grid container using align-items and justify-items, and customize individual items with align-self and justify-self in CSS grid.

Align grid tracks inside the container using justify-content and align-content to center, start, end, space-between, space-around, and space-evenly, and use dense packing with grid-auto-flow: dense.

Explore advanced CSS grid topics by using min-content, max-content, and the minmax() function to control column and row sizes within an explicit grid.

Explore a Nexter landing page built with CSS grid, featuring responsive grid layouts and grid-based components. Set up with SASS, npm install, and a Firefox-focused dev server.

Build a modern website layout with advanced css grid techniques and responsive rows. Organize grid areas such as sidebar, header, realtors, features, story pictures, story content, homes, gallery, and footer.

Build the features section with CSS grid, using grids inside grids for six features in a three-column by two-row layout, and implement a responsive, media-query-free design.

Learn how to handle overlapping grid items, why images behave differently from other grid items, and when to use flexbox versus CSS grid for responsive layouts.

Use CSS grids to build the story section with a background image and overlapping foreground images. Learn precise six-by-six grid placement, alignment, shadows, and a gradient overlay.

Build a responsive 3x2 grid of six home cards using CSS grid with minmax and auto-fit, featuring images, a like button, location, rooms, area, price, and a contact realtor button.

Build a two-column home section with CSS grid, spanning items and overlapping a heart icon, then refine with flexbox for small alignments and key grid properties.

Finish building a 14-image gallery using CSS grid and Emmet to auto-generate items, place each image with grid-row and grid-column, and apply object-fit for clean layouts.

Build a simple footer using a nav with ul and li items, implemented with CSS grid and auto-fit for a responsive, gap-based layout with hover effects.

Finish the sidebar by adding a nav button styled with no border, using before and after pseudo elements to create lines, and center the button with flexbox.

learn to build a responsive header with advanced grid, 80% viewport height, overlay backgrounds, and positioned logo, h1 heading, button, and social proof logos.

Create the realtors section as a two-by-three CSS grid with round images and realtor details, using min-content/max-content sizing, 20px gaps, 5vh row spacing, and centered alignment for a responsive layout.

Master responsive design with media queries and grid and flexbox by adjusting header and sidebar layouts across breakpoints, using minmax, named grid lines, and em-based sizing.