Sass - from beginner to real world

Name: Sass - from beginner to real world
Price: 9 USD
Availability: InStock

8h 2m 59s

English

Paid

May 15, 2024

Sass has become an essential language for front-end developers. It enables you to write code more efficiently, achieve complex styles effortlessly, and seamlessly integrates into modern workflows. This course is designed to teach you how to use Sass effectively, integrate it into your projects, and tackle real-world challenges, ultimately enhancing your skills as a front-end developer.

Beyond Just the Basics of Sass

This course extends beyond mere Sass syntax. While understanding the language itself is crucial, it also presents an opportunity to revolutionize your project workflow. In addition to covering the fundamentals of Sass, this course explores its practical application in real-world scenarios. We delve into intermediate and advanced CSS topics, as Sass ultimately boils down to an advanced way of writing CSS.

Building a Multi-Page Website

To solidify your understanding, we'll guide you through creating a comprehensive multi-page website. This hands-on approach will cover best practices in file structure, class naming conventions, and general workflow concepts. Our goal is not only to teach you Sass but also to equip you with the skills to become a more proficient front-end developer.

Key Learning Outcomes

Master the use of Sass in modern development environments.
Understand and implement efficient file structures.
Learn advanced CSS techniques alongside Sass.
Apply class naming conventions to enhance code clarity and maintenance.

This course is tailored for those who aspire not just to learn Sass but to elevate their complete front-end development skill set.

About the Author: kevin powell

Hi, I'm Kevin. I teach people how to make the web and how to make it look good while they're at it. I learned to make websites on my own. I know how fun and rewarding it is, but I also know that it can be incredibly frustrating. I'm here to help make your journey into web development as easy and as fun as possible. Whether you're trying to learn what you need to tweak your small business' website or you're looking to jump start a new career, I'm here to help.

Watch Online 134 lessons

0:00

#1: What is this course about?

All Course Lessons (134)

#	Lesson Title	Duration
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 subscription