Sass Tutorial For Beginners : CSS with Superpowers

Name: Sass Tutorial For Beginners : CSS with Superpowers
Rating: 4.3 (157 reviews)

Expand your CSS knowledge by learning SCSS syntax, nesting, functions, and more in this course!

Created byIslam Ahmad

Last updated 4/2020

English

What you'll learn

This course will teach you how to use nesting, variables, mixins, placeholders, and functions to write more expressive and reusable styles. At the end of the course, you will be able to transition a CSS codebase to SCSS and style multiple websites.
Tons of modern CSS techniques to create stunning designs and effects

Course content

4 sections • 42 lectures • 1h 49m total length

Introduction0:38
Getting Started With CSS1:51
How to use CSS5:55
Explore three methods to apply CSS: inline styles, internal style blocks, and external style sheets. Learn by examples like color red and font size 20px, and linking to style.css.
CSS Syntax And Element Selectors1:53
Discover css syntax, including how a selector and a declaration in curly braces define properties and values separated by a colon and semicolon, and the element selector targets h2 elements.
Class Selector2:04
ID Selector1:37
More About Selectors5:37
Chaining Selectors1:33
Introduction To CSS

Introduction1:16
Font Properties2:55
Apply font family and font size to web pages using Georgia as a fallback, manage semantic headings and paragraphs, and compare px, em, and rem sizing to ensure scalable typography.
Color Property1:24
CSS Backgrounds0:56
Understand how the background color property uses color names, hexadecimal values, or CB value, and how the background image property loads images via URL or local path.
CSS Height And Width2:13
Selecting Nested Elements1:51
Text Properties2:48
The Box Model1:24
Discover how the box model wraps each element in a box with content, the space between content and border, and the margin, and how background color affects the box.
CSS Borders1:40
Padding3:06
Border Radius0:55
Explore how the border radius property shapes an element’s corners, transforming squares into circles by setting equal height or 100 percent, with practical examples.
CSS Shadows1:26
CSS Margins3:33
Positioning7:27
Display4:31
Float3:34
Master CSS float to position elements left or right and wrap text around images; use clear to control wrapping, with values none, left, right, both, and inherit.
Styling The Web Using CSS

Setting Up development Environment1:43
Integrating Sass within Visual Studio Code5:10
Sass Overview1:24
Nesting Selectors3:29
Nesting Properties1:40
Learn how to nest selectors and apply properties in SCSS, using a banner class to set top and bottom values, save changes, and preview updates in the browser.
Variables In Sass3:27
SASS Data Types1:56
Lists & Maps4:36
Learn to use lists and maps in Sass, declare variables for font properties and color themes, and retrieve values with map-get using keys like primary and accent.
Test your knowledge
Summary1:00

The & Selector in Nesting3:01
What is a Mixin2:55
Discover how Sass mixins reduce repetition by grouping declarations into reusable blocks, using @mixin and @include to compose styles and share rules across selectors.
Mixins Arguments2:32
Default Value Arguments2:11
Mixin Facts4:08
List Arguments2:16
String Interpolation2:05
The & Selector in Mixins2:15
Explore how the & selector in Sass mixins references the parent selector at inclusion, inheriting its value and triggering a red hover effect to illustrate behavior.
Test your knowledge
Summary1:18

Requirements

You need to know HTML basics before taking this course.
Any computer and OS will work — Windows, macOS or Linux
There is no need for any paid software — The text editor you already have works just fine

Description

Are you frustrated at how rapidly the web design & coding world is changing?

Do you feel like your skills are becoming out-dated and you just can't keep up with all of the new web languages?

Are you afraid your web design skills will become redundant if you don't learn something new?

Do you worry that you might not "have what it takes" to learn something new and complicated?

Sass is an easy-to-use styling language that helps reduce a lot of the repetition and maintainability challenges of traditional CSS. Learning Sass will not only let you scale styles when working on big web development projects, it will also make it much faster and more efficient to write reusable styles from scratch for smaller projects.

Sass is what's known as a "pre-processor" language, and it basically supercharges your CSS so you can create flexible, clean and incredibly powerful stylesheets.

The entire purpose of Sass is to save you time & energy when styling websites and applications.

Why is this a good thing?

I've done some experiments and I've discovered that you can style websites 150% faster using Sass vs. CSS...

For example, let's say a custom web design project takes 50 hours to style in CSS (not unusual!)

Who this course is for:

CSS developers who want to update their CSS skills to the most modern level
Front-end developers who want to finally understand how CSS works behind the scenes
In general: anyone who wants to truly master CSS!

Sass Tutorial For Beginners : CSS with Superpowers

What you'll learn

Explore related topics

Course content

Introduction To CSS8 lectures • 21min

Styling The Web using CSS16 lectures • 41min

Your First Sass Stylesheet9 lectures • 24min

Mixins and the & Selector9 lectures • 23min

Requirements

Description

Who this course is for: