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

Kick off the course by setting up your first project with HTML and advanced CSS, exploring modern CSS features, while Sass basics are saved for later.

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.

Master css animations using the keyframes at-rule and animation property to create moveInLeft and moveInRight effects with opacity and transform. Also apply delays, iteration counts, and hover interactions.

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.

Master the three pillars of HTML and CSS—responsive design, maintainable and scalable code, and web performance—for fast, scalable websites.

Explore how a browser loads a page by parsing HTML into the Document Object Model (DOM), loading CSS, and building the render tree.

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.

Learn the basics of Sass as an extension to CSS, and how to compile Sass to CSS using npm packages and npm scripts.

Discover what Sass is—a CSS preprocessor that extends CSS with variables, nesting, operators, partials and imports, mixins, functions, extends, and control directives, plus SCSS vs Sass syntax.

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.

Explore Sass mixins, extends, and functions in practice, including a clearfix and a style-link-text mixin that accepts color arguments, with a focus on the DRY principle.

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 sass locally using npm by initializing a package.json, installing node-sass as a dev dependency, and managing dependencies with npm install and uninstall.

Set up a local Sass workflow by creating Sass files and converting CSS to SCSS. Compile with an npm script using node-sass and enable watch mode to auto-update style.css.

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 using the existing grid, create a reusable image composition component, and apply CSS architecture with typography, utility classes, and hover effects like gradient text and transforms.

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.

Build the about section with a three-image composition using BEM and Emmet, implement hover effects that enlarge the active image while others shrink and display a green outline.

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.

Build rotating tour cards with a centered back price panel and an absolute-positioned call-to-action box. Style the price box with white uppercase text and add white and green buttons.

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.

Code a full-width background video for the stories section using an HTML5 video with mp4 and webm sources, autoplaying muted and looping.

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 a simple footer with a dark background, a centered footer logo, a two-column layout featuring a navigation list and copyright text, using BEM conventions and hover effects on links.

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.

Learn to build a responsive Natours page using media queries, screen width handling, touch capabilities, responsive images, and feature queries to ensure accessibility on every device and browser.

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.

Explore responsive images to boost web performance by serving the right image to the right screen. Practice resolution switching, density switching, and art direction using html and css.

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.

Master responsive images in CSS by using media queries, including min-resolution and combined conditions, to swap the hero background image between small and large versions.

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.

Master the fundamental concepts and properties of flexbox as you start the big Trillo project, with a brief CodePen demo and enhancements using custom CSS properties, masks, and SVGs.

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.

Learn to build a header with flexbox to align the logo, search bar, and user navigation, using space-between and center alignment, plus nested flexbox for focus expansion.

build a responsive header using flexbox to place the logo, search, and user navigation side by side, center items, apply spacing and hover effects, and refine with align-self.

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.

Style the navigation text and icons, implement a hover effect with a before pseudo-element, and align items with flexbox. Use current color and staged transitions, including an active state.

Build a hotel overview using flexbox to align a three-image gallery, achieve fluid images with width 100%, and set up icons, rating, and location visuals.

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.

Learn to build a call-to-action section with a hover-animated booking button, featuring two stacked texts and a gradient background.

Explore responsive design with flexbox and media queries in a desktop-first workflow, using Sass breakpoints (bp-large) and stepwise adjustments at 1200, 1100, and 900 px.

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.

Unlock a two-dimensional layout mindset with CSS grid, mastering grid containers, grid items, grid lines, gutters, tracks, and areas to build complex layouts, often replacing frameworks like Bootstrap.

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.

Create your first css grid by turning a container into a grid and using grid-template-rows and grid-template-columns to define two 150-pixel rows and three 150-pixel columns.

Explore the fractional unit fr in CSS grids, using repeat to define tracks and allocate available space between fixed pixels and fr fractions for columns and rows.

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.

Recreate a blog-like layout using CSS grid, with a narrower right sidebar and gutters across header, content, and footer, applying grid spanning and real-world structure.

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.

Learn how to name grid lines in CSS Grid to position items more intuitively, using header-start, header-end, box-start, box-end, and named column lines with repeat.

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 explicit grids define the initial 2x2 layout, and how implicit grids fill remaining items with auto placement. Learn to control implicit grids with grid-auto-rows, grid-auto-columns, and grid-auto-flow.

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 how auto-fill and auto-fit create responsive CSS grid layouts with minmax, enabling adaptive columns from fixed widths to flexible fractions without media queries.

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.

Explore building a centered eight-column grid with named lines and minmax for a fixed-width middle column and a sidebar, enabling responsive, full-bleed sections.

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 to style icons, headings, and paragraphs in the features section, and implement a responsive two-by-two css grid with auto-fit, minmax, and nested grids for reusable components.

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.

Create a responsive CSS grid gallery by configuring an eight by seven grid, using object-fit cover on images, and mastering grid-row and grid-column spanning for varied, aligned layouts.

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.

Build a header with CSS grid, arranging four 'as seen on' logos in columns using grid-template-columns: repeat(4, 1fr) and 3rem gaps. Use ::before and ::after with currentColor to form lines.

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.

Implement responsive layouts with CSS grid and media queries, setting breakpoints at 800px and 600px, using calc to manage viewport height and stacking header and realtors on smaller screens.

Explore css grid browser support with caniuse, and learn progressive enhancement using @supports to provide safe fallbacks and a 3x2 grid across older and modern browsers.

Wrap up the Nexter project by building the CSS and noting that grid prefixes are unnecessary. Explore grid template shorthand, gaps, and upcoming features like subgrids and nth selectors.

Practice consistently, build your own CSS projects, and share your work in the Udemy Q&A to become a real CSS master while staying updated with web development news and newsletters.