SASS - The Complete SASS Course (CSS Preprocessor)

Set up your Sass development environment by installing a modern web browser and a code editor, using Chrome and Firefox, and Brackets to start a new folder named sus.

Set up a working environment to install and use node-sass with NodeJS and npm, create a project structure, and compile SCSS to CSS with a watch mode.

Explore how Sass variables store color and font values and apply them. Grasp global and local scopes and how the exclamation mark and the keyword global affect the scope.

Learn how nesting in Sass simplifies CSS by placing selectors inside braces, using the ampersand for parent selectors, and safely applying hover and pseudo classes.

Learn how Sass mixins reduce repetition by grouping reusable styles, adding parameters, default values, and variadic arguments, and apply them with include to style multiple elements.

Extend in Sass lets a selector inherit styles from another, reducing code bloat and enabling cleaner, reusable styling for headings, footers, and hover effects via ampersand, contrasting with mixins.

Learn how placeholder selectors replace extra classes by using the percentage sign to extend shared styles to multiple elements, delivering cleaner, more readable CSS for headings like h1 and h3.

Learn to organize sass projects by splitting code into multiple files with imports and partials, improving structure and enabling the main.css to compile code from partial files.

Preview the Georgia restaurant site and set up a Sass-based project structure, including banner, about, gallery, and responsive layout, with a fixed hamburger menu and live preview.

Build the header structure using an HTML5 header element with a brand (logo and restaurant name) and a banner (headings and a button) in pure markup.

Style the header with a full-screen background image and gradient overlay, using base Sass styles, variables, and mixins to apply reset, color schemes, and responsive branding with flexbox.

Center the header banner and its two headings plus a button using a reusable centering mixin in scss, then style typography, colors, borders, and hover transition.

Create a two-column about us section with a left image and a right content panel featuring main and subheadings, Font Awesome icons, a descriptive paragraph, and a read more button.

Style the about us section with flexbox to center left and right parts vertically. Apply left 40% and right 60% with a responsive image; set opacity to 0.7.

Create a six-image gallery with two rows and hover overlays, building the HTML structure: a gallery section, cards wrapper, and card overlays with headings, price, and an order button.

Create a responsive style gallery by arranging six cards in two rows with flexbox, using 33.43% width and 30vw height, with cover images and a hover overlay.

Build the footer structure in HTML, including a footer header with logo and names, a footer social media area with four icons, and a copyright paragraph.

Style the footer with a flex layout and padding. Align the header and arrange social icons in a row with hover color effects, and style the copyright typography.

Build a hidden navbar with a hamburger menu using a checkbox and label to toggle visibility, then create navigation with six items: home, about us, calorie, reservation, services, content.

Learn to style a responsive navbar with sass using flexbox for left and right panels, fixed positioning, and hover effects, plus image scaling, shadows, and rounded corners.

Build a responsive hamburger menu with pure CSS and HTML, using a checkbox toggle to slide left and right navbar parts into view and rotate the icon into an X.

Make the restaurant project responsive across breakpoints by adjusting main heading, subheading, description, and layout using nested Sass media queries at 1600, 1300, 1000, and 900 pixels.

Fine-tune a responsive layout across breakpoints from 900 to 500 pixels, adjusting the menu icon, banner button, about section layout, and typography for a cohesive, centered design.

Finish making the project responsive by adjusting the gallery overlay, navbar, footer spacing, social icon widths, and typography across breakpoints from 1300 to 600 pixels.

Explore the seven Sass data types—numbers, strings, colors, lists, maps, booleans, and null—and learn how to use decimals, units, font families, hex, rgb(a), and hsl values in practical styles.

Discover maps in sass, storing data as key value pairs and retrieving values with map get. Explore booleans and null, plus using numeric and quoted keys in maps.

Explore SAS interpolation, creating variables and using them in selectors, property names, and values to produce concise, flexible styles, with examples showing border and color replacements.

Master the for loop in Sass by building a color map and using interpolation to assign each paragraph a different background color, showcasing efficient, flexible CSS generation.

Learn how the Sass each loop iterates over a color list to apply dynamic background colors to paragraphs using interpolation, building on the for loop concept.

Learn how the Sass if directive evaluates conditions to execute blocks of code, using true/false booleans, if, else if, and else statements, and mixins to adjust styles like heading sizes.

Preview a second project building a clothes store website using sass, detailing a scalable file structure, imports, variables and mixins, and responsive layout with css grid.

Build the header structure for the cloth store project in the sass course, including logo, two navigations, a main heading, and a dropdown menu with price links.

Learn to layout a header container with CSS grid, defining ten columns and four rows using minmax and repeat, and use a Sass color map for background.

Learn to build a header layout using CSS grid in sass, create header.css, import it in main.css, and style logo and heading with grid placement, padding, and Sass font-size maps.

Style the header with two navigations positioned at the top right and under the heading using a shared mixin, grid and flexbox, and add hover effects and a dropdown.

Create a header dropdown menu in Sass by styling a positioned ul/li, adding a Font Awesome arrow, and revealing on hover with visibility and opacity transitions and a top triangle.

Create the HTML markup for a five-slide slideshow, with header and section wrappers, where each slide presents a heading, paragraph, and image.

Style a five-slide slideshow by building the slide, importing slideshow.css, applying a grid layout with absolute slides, 100% width, 80vh height, and a bottom content overlay with rgba.

Create a five-slide css slideshow with a four-second display and a 20-second fade using keyframes, then optimize with Sass via an anim list and nth-child delays; fix header z-index.

Build a featured products section with three items, hover to reveal content, and a bottom button, using structured markup and product cards with image, heading, price, and action link.

Build a bottom products button with hover effects through index.html markup and button.css styling, featuring a circular background, an arrow made of lines, and text styling.

Create a footer with multiple parts featuring navigation links, a signup form with first name, last name, and email fields, social icons, and a contact list with store details.

Create a dedicated footer css file and use grid and flexbox to align three parts, applying reusable footer list mixin for headings, lists, and links with hover effects and transitions.

Style the footer by refining heading and paragraph typography, align and space inputs in two horizontal groups, and build circular social icons with flexbox and a color loop.

Learn to make the store project responsive across screen sizes using a minmax grid, mixins and multiple breakpoints (xl, lg, md, sm) to adjust header, navigation, slideshow, products and footer.