Sass - from beginner to real world
8h 2m 59s
English
Paid
Course description
Sass has become an essential language to learn for front-end developers. It helps you write your code faster, pull off things that sometimes seem like magic, and it’s also a part of many modern workflows. This course is going to teach you how to use Sass, how to integrate it into your workflow and push you with challenges, helping you become a better front-end developer.
Read more about the course
This course is about more than just Sass
This course also doesn’t solely focus on Sass as a language. Understanding the language itself is important, but it presents us with an opportunity to change how we work on our projects. This course teaches you not only the language of Sass but examines how to use it in the real world as well.
It also dives into intermediate and advanced level CSS. Sass is, at the end of the day, a fancy way to write CSS after all. So how could we learn Sass really well if we don’t also get into some higher level CSS stuff along the way? We’ll look at putting together a full, multi-page website, where I’ll examine file structure and general workflow concepts, as well as get into class naming conventions for our CSS, and more, along the way. This course isn’t just about learning how to use Sass, it’s about learning how to be a better front-end developer.
Watch Online
Watch Online Sass - from beginner to real world
0:00
/ #1: What is this course about?
All Course Lessons (134)
| # | Lesson Title | Duration | Access |
|---|---|---|---|
| 1 | What is this course about? Demo | 05:26 | |
| 2 | What is Sass anyway? | 00:33 | |
| 3 | What software do you need? | 01:31 | |
| 4 | Installing ruby (Windows users only) | 02:25 | |
| 5 | Installing Sass | 03:42 | |
| 6 | Watching folders to compile Sass to CSS | 03:36 | |
| 7 | Output style options | 02:31 | |
| 8 | What are source maps? | 01:55 | |
| 9 | Command line alternatives (free and premium options) | 02:23 | |
| 10 | Sass vs SCSS - two different ways of writting Sass | 01:41 | |
| 11 | CSS vs Sass comments | 03:00 | |
| 12 | Nesting selectors | 02:47 | |
| 13 | SCSS vs Sass nesting | 07:23 | |
| 14 | Nesting and the ampersand (&) | 02:13 | |
| 15 | Nesting properties | 03:49 | |
| 16 | Time for a challenge! | 03:17 | |
| 17 | What are variables? | 02:26 | |
| 18 | Variable inseption (variables inside variables) | 02:26 | |
| 19 | Variables and the cascade | 04:04 | |
| 20 | Naming variables | 02:18 | |
| 21 | It's challenge time! | 00:58 | |
| 22 | Introduction to Operators | 06:01 | |
| 23 | Operators - a use case | 10:27 | |
| 24 | Pricing Table - Intro | 30:50 | |
| 25 | Writing the markup | 03:19 | |
| 26 | Setting up the variables | 01:27 | |
| 27 | Styling it up | 01:14 | |
| 28 | An introduction to Extends | 01:46 | |
| 29 | Placeholders | 03:38 | |
| 30 | Don't forget about the other stuff you can do | 03:07 | |
| 31 | Problems with extends - 1 | 03:54 | |
| 32 | Problems with extends - 2 | 02:35 | |
| 33 | Introduction to Mixins | 02:37 | |
| 34 | Selectors inside mixins | 03:33 | |
| 35 | Mixin arguments part one | 02:20 | |
| 36 | Mixin arguments part two: optional arguments | 05:20 | |
| 37 | Mixin arguments part three: more ways to work faster | 01:52 | |
| 38 | Mixin arguments part four: keeping things in the right order | 06:45 | |
| 39 | Mixin Challenge - Introduction | 05:05 | |
| 40 | Introduction to Functions | 02:45 | |
| 41 | Some of my favourite Sass functions | 04:04 | |
| 42 | The Markup | 08:12 | |
| 43 | Getting Sass set up and running | 06:32 | |
| 44 | Settin' up the variables | 05:52 | |
| 45 | Creating the mixins | 07:13 | |
| 46 | Styling the typography | 00:56 | |
| 47 | Styling the buttons | 01:18 | |
| 48 | Finishing touches | 00:54 | |
| 49 | Introduction to Lists | 00:58 | |
| 50 | List lengths | 02:37 | |
| 51 | The different types of lists | 02:06 | |
| 52 | Accessing specific list items | 00:36 | |
| 53 | The different ways to write lists | 03:06 | |
| 54 | What is interpolation? | 03:40 | |
| 55 | Interpolation and math | 01:37 | |
| 56 | A quick refresher on Mixins | 01:47 | |
| 57 | A look at variable arguments | 04:46 | |
| 58 | Staying organized with variables | 01:51 | |
| 59 | Variable arguments with @include | 02:37 | |
| 60 | Variable arguments with @include - part two | 04:52 | |
| 61 | Mixin challenge - part one.mp4 | 03:47 | |
| 62 | Mixin challenge - part two.mp4 | 01:52 | |
| 63 | A look at @content | 01:47 | |
| 64 | Using @content to make awesome media query mixins | 00:38 | |
| 65 | Adding a custom size media query | 01:02 | |
| 66 | Intro to Sass @for | 01:09 | |
| 67 | Using the $i variable | 01:51 | |
| 68 | Using interpolation | 01:57 | |
| 69 | Adding in some math | 01:24 | |
| 70 | A little more math and a new variable | 00:49 | |
| 71 | @for challenge | 03:27 | |
| 72 | Introduction to @each | 03:27 | |
| 73 | A more useful example of @each | 03:49 | |
| 74 | Using nested lists | 02:22 | |
| 75 | Intro to the @if directive | 00:55 | |
| 76 | A more realistic example | 02:36 | |
| 77 | @else directive intro | 03:30 | |
| 78 | A more realistic look at @else | 02:55 | |
| 79 | Using @if and @else to make a cool @mixin | 03:30 | |
| 80 | Improving the mixin | 01:47 | |
| 81 | Introduction to @if else | 02:50 | |
| 82 | The if() function | 03:13 | |
| 83 | Using the if function to write less code | 02:26 | |
| 84 | Introduction to custom functions | 06:12 | |
| 85 | Variable number of arguments | 01:29 | |
| 86 | Dynamically set text color | 01:05 | |
| 87 | Making the output look a little better | 03:14 | |
| 88 | Refactor challenge.mp4 | 00:24 | |
| 89 | Refactor challenge - solution.mp4 | 04:00 | |
| 90 | Intro to debugging in Sass | 01:54 | |
| 91 | The warning | 01:17 | |
| 92 | Creating an error | 03:49 | |
| 93 | Improving our error with interpolation | 03:52 | |
| 94 | Introduction to Sass maps | 02:09 | |
| 95 | How to access maps | 04:10 | |
| 96 | Access maps made easier | 02:18 | |
| 97 | Mapception | 01:45 | |
| 98 | Accessing maps inside of other maps | 04:26 | |
| 99 | Accessing maps inside of other maps made easier (plus a mini challenge) | 04:51 | |
| 100 | Improving our media query mixin with a map | 01:30 | |
| 101 | Maps and `@each` | 06:29 | |
| 102 | Accessing maps with `@each` challenge | 04:47 | |
| 103 | Accessing maps with `@each` solution | 02:08 | |
| 104 | map-has-key() | 02:55 | |
| 105 | A more realistic example of map-has-key() | 00:35 | |
| 106 | Improving our media query mixin - challenge | 01:51 | |
| 107 | The solution | 01:31 | |
| 108 | A look at the type-of() function | 02:09 | |
| 109 | Using type-of to improve our mq mixin even more! A challenge | 03:56 | |
| 110 | And making it even better! | 04:17 | |
| 111 | Introduction to partials | 03:23 | |
| 112 | The 7-1 system and what I actually use (file organization) | 09:05 | |
| 113 | Introduction to the project | 01:52 | |
| 114 | A look at the files | 02:56 | |
| 115 | The Markup - Navigation | 04:16 | |
| 116 | The Markup - Home and About | 05:16 | |
| 117 | The Markup - Facts and Meals | 04:12 | |
| 118 | The Markup - Testimonial and Footer | 04:02 | |
| 119 | First variables and mixins | 06:39 | |
| 120 | Setting up a custom function | 02:33 | |
| 121 | Adding an error to the function | 01:47 | |
| 122 | Setting up the typography | 08:19 | |
| 123 | Setting up the general layout | 03:32 | |
| 124 | Styling the navigation | 04:32 | |
| 125 | Styling up the home section layout | 03:09 | |
| 126 | Stlying the About section, and some trouble shooting | 04:49 | |
| 127 | Creating an underline pseudo element mixin | 05:43 | |
| 128 | Styling the facts and meals sections | 07:41 | |
| 129 | Styling the testimonial and footer, and fixing a mistake | 10:40 | |
| 130 | Adding in a media query mixin | 08:44 | |
| 131 | About section - large screen layout with grid | 08:55 | |
| 132 | Creating a grid mixin | 07:38 | |
| 133 | Fixing up the nav and about section | 02:29 | |
| 134 | Fixing up the typography + closing thoughts | 04:08 |
Unlock unlimited learning
Get instant access to all 133 lessons in this course, plus thousands of other premium courses. One subscription, unlimited knowledge.
Learn more about subscriptionComments
0 commentsSimilar courses
The CSS Bootcamp: Zero to Mastery
Sources: zerotomastery.io
Learn CSS from basics to advanced techniques with 100+ exercises. Create beautiful, responsive websites and build your portfolio with real-world projects.
40 hours 15 minutes 13 seconds
Mastering CSS Grid 2022 - With 3 cool projects
Sources: udemy
CSS Grid is a relatively new and unused concept to CSS. It's very important these days that our layouts are simple to maintain, and easy to adjust based on the dimensions of our...
17 hours 16 minutes 22 seconds
CSS - The Complete Guide 2022 (incl. Flexbox, Grid & Sass)
Sources: udemy, Academind Pro
CSS - short for Cascading Style Sheets - is a "programming language" you use to turn your raw HTML pages into real beautiful websites. This course covers it all - we start at t...
20 hours 54 minutes 47 seconds
Understanding HTML and CSS
Sources: udemy
Deeply understand Semantic HTML, CSS, Flexbox, Grid, learn to read the specifications, and more. In this course you'll gain a deep understanding of HTML and CSS
17 hours 52 minutes 36 seconds
Want to join the conversation?
Sign in to comment