Sass Tutorial for Beginners - CSS With Superpowers
Offered By: freeCodeCamp
Course Description
Overview
Dive into a comprehensive tutorial on Sass, the powerful CSS preprocessor. Learn the fundamentals of Sass, including variables, maps, nesting, functions, mixins, extending, and operations. Set up a Sass compiler in Visual Studio Code and explore the syntax and folder structure. Apply your knowledge to a real-world project by building a portfolio website from scratch, covering HTML structure, styling with Sass, and implementing responsive design. Master advanced techniques like creating custom mixins and functions for efficient styling. Conclude the learning experience by deploying the finished portfolio site to GitHub Pages, gaining practical skills in modern web development along the way.
Syllabus
Intro.
What Is Sass?.
Requirements.
Install/Setup Live Sass Compiler VS Code Extension.
Folder Structure / Sass Syntax.
Variables.
Maps.
Nesting.
Partials.
Functions.
Mixin Example 1.
Mixin Example 2.
Mixin Example 3.
Extend.
Math Operations.
How to Learn More (Documentation).
Real-World Example From Scratch (Portfolio Site).
index.html.
Font Awesome Setup.
main.scss / _config.scss.
_home.scss.
Transition Ease Mixin.
Text Color Function.
_menu.scss.
main.js.
Menu cont..
about.html.
_about.scss.
projects.html.
_projects.scss.
contact.html.
_contact.scss.
_responsive.scss.
Deploy on Github Pages.
Taught by
freeCodeCamp.org
Related Courses
Front-End Web UI Frameworks and ToolsThe Hong Kong University of Science and Technology via Coursera Regression Modeling in Practice
Wesleyan University via Coursera Diseñando páginas web con Bootstrap 4
Universidad Austral via Coursera Structured Query Language (SQL) using SAS
SAS via Coursera CSS - The Complete Guide 2024 (incl. Flexbox, Grid & Sass)
Udemy