English | MP4 | AVC 1920×1080 | AAC 44KHz 2ch | 20h 45m | 8.65 GB
By unravelling CSS, you can stop wasting your time, start making progress, and take that next step forward as a developer.
CSS seems easy at first, but the deeper into it you get, the more complicated it becomes
We all reach a point where CSS starts to frustrate us.
Whether it’s
- Struggling to get a layout to behave.
- Running into issues with positioning.
- Making small changes that end up having unintended consequences.
Often we end up trying to fix problems by adding more and more code on top and hoping for the best.
That leads to fragile code and hours of wasted time while you try to get things to work properly
As frustrating as CSS can seem though, it doesn’t have to be that way.
CSS is based on rules and logic (even if it doesn’t always feel that way). Instead of fighting with CSS, if you learn about how CSS is built at its very core, and you start to work with how it’s meant to work, it can actually be a lot of fun.
Learn to embrace CSS
CSS is an essential language for putting a website together, but it’s often ignored in favor of the latest JS framework.
People pay $10,000+ to go to bootcamps to become front-end developers, but are left mystified by CSS.
CSS is often seen as simple language because it has a simple syntax and then it’s pooped on because it doesn’t behave like other languages.
CSS is it’s own language though, and in this course, we’re going to learn to embrace it for what it is, take advantage of its differences, and really start to understand what the heck is going on with CSS.
Get unstuck and start making progress
Stop throwing code into your editor and hoping that it will stick.
When you finish this course, you will:
Be confident when you write CSS
No more guessing & hoping that what you’re trying will work.
Approach CSS in a maintainable way
CSS can spin out of control and be hard to maintain in the long run. Let’s stop that from happening no matter the project’s size.
Easily add new things to your arsenal
It’s not just about following along and repeating, it’s about being able to keep going once the course is done.
How we’re going to demystify CSS
This course is about diving in and really understanding how CSS is meant to work.
We’ll be exploring why it’s different from other languages and how to change our mindset to work with it properly.
The course will be broken down into three weeks, and is a combination of:
- Theory and slides, all through video lessons
- Exercises to put the theory into practice
- Challenges to reinforce what you’ve learned
- A full-page build to reinforce what we learned through the first two modules
- A 3-page site to put everything we’ve learned into practice
What’s inside CSS Demystified
What we’ll be building together
Throughout the modules, we’ll be working on several exercises and projects to help you reinforce your learning.
There will be several smaller exercises and quick examples which you’ll have access to.
For the larger projects, you’ll have access to design specifications, the Figma files, and all the finished code.
Table of Contents
CSS Demystified Start Writing CSS with Confidence (Module 1-3)
1 Welcome to CSS Demystified!
2 My software and extensions
3 The Discord Community
4 The rules!
5 CSS Anatomy/Terminology – So we can all be speaking the same language
6 Why is CSS so weird? An introduction
7 Why is CSS so weird? A follow-up
8 CSS is all about relationships
9 Introduction to the Overlooked Fundamentals
10 The box model and box-sizing
11 What happens when we don’t set a width?
12 What happens when we set a width
13 Adding box-sizing
14 Fixing a layout
15 A quick word on setting heights
16 Inheritance
17 A quick look at inheritance in action
18 A little project
19 A little project | my solution
20 A little project | Follow-up
21 Introduction to the Cascade
22 How well do you really know it?
23 Importance and Origin
24 Origin and font-size implications
25 When animations and transitions get involved
26 Closing thoughts on Importance
27 Specificity
28 Fixing specificity issues
29 Calculating specificity
30 Pricing Cards | Introduction
31 A safe approach to CSS
32 Challenge | Pricing Cards
33 My Solution | Pricing Cards
34 Updated Design
35 Updated Design | My solution
36 Adding in custom properties
37 Setting up the typography
38 Mirroring the layout
39 Starting to think about class naming
40 Overlooked Fundamentals | Final Project
41 My solution
42 A word on class naming
43 Overlooked Fundamentals | Wrap up
44 The Unknown Fundamentals | Introduction
45 Unknown Fundamentals | Project 1 introduction
46 Teaching you how to fish
47 Introduction to Formatting Contexts
48 Inline formatting context and anonymous boxes
49 Block formatting context
50 Formatting context and floats
51 Collapsing margins in action
52 Creating a new formatting context
53 Flex and grid formatting contexts
54 Consistency
55 Creating a CSS rule for Flow Content consistency
56 Adding consistency to our magic page
57 Magic page finishing touches
58 A look at the updated design
59 Easy wins
60 Adding columns
61 The square corner decorations
62 Stepping up our spacing utility
63 Stacking Context and Containing Blocks Introduction
64 Introduction to Stacking Context
65 Exploring z-index
66 Stacking context deep dive
67 Stacking context in action
68 When stacking context breaks things
69 Stacking context coming into play
70 Fixing the stacking issue
71 Introduction to containing blocks
72 When the containing block is not the parent
73 Containing blocks on the magic site
74 Containing blocks in action
75 Containing blocks, a more complex example
76 Containing block edge cases
77 A look at the updated design
78 More easy wins
79 Setting up the typography
80 Fun with custom properties
81 The testimonial
82 Even more custom properties
83 The corner squares – updated
84 Call to actions
85 Module wrap-up
86 Introduction to Module 3
87 Content vs Layout
88 Remember this?
89 Fixing the problem
90 A deeper look at Flexbox
91 Content vs Layout in action | Introduction
92 Making things more consistent | In Action
93 Styling things up with utility classes | In Action
94 Plug and play | In Action
95 More Dynamic Layouts | In Action
96 Introduction to the final project
97 A look at what we’re building
98 Writing the HTML
99 Bringing in, and building out, our reset
100 Styling the typography
101 Making the typography responsive
102 Adding in our spacing
103 More spacing!
104 Adding columns
105 Backgrounds
106 Styling the article previews
107 Making the images responsive
108 The call to action
109 Styling the form elements
110 Form fun from the future!
111 Styling the footer
112 Making the form responsive
113 Styling the header and the navigation
114 Introducing the blog page
115 Starting work on the blog page
116 A solution and the secondary navigation
117 Flexbox vs Grid – and setting up the grid
118 Making the grid responsive
119 Styling the featured article
120 Introduction to the final page
121 A look at the header
122 The main article
123 Challenge #1 | Solution
124 A new challenge!
125 Challenge #2 | Solution
126 The read next area
127 About adding in the links
128 Adding the links and a challenge
129 A solution and styling it up
130 A quick look at performance
131 Getting the links to cover the entire article
132 And that’s a wrap!
Module 4 Breaking out of tutorial hell CSS Demystified
133 Introduction to Module 4
134 What is tutorial hell?
135 Don’t get frustrated if you’re stuck
136 It’s okay to move backwards
137 Don’t compare yourself to others
138 The levels of cognition
139 Different methods of learning
140 Intentional learning
141 Getting to, and through, the applying stage
142 Knowing what you don’t know
143 A simple example
144 When we take shortcuts
145 Let’s learn together!
146 Taking a first look at it
147 Putting it into action
148 You can’t remember everything
149 Less is more
150 You need to start doing
151 Wrap up
Module 5 Supercharge your learning CSS Demystified
152 Introduction to Module 5
153 The next three levels
154 Being your own student
155 Why this works
156 How to teach
157 My first steps
158 Experimentation
159 The next step after you experiment
160 Some examples and ideas
161 Staying on top of things
162 Putting my approach into action
163 Asking questions when you are stuck
164 Moving into the applying stage
165 Vocalizing and analyzing
166 In Action – Wrap up
167 Go public!
168 A look at Dev.to
169 A quick look at getting started with video
170 Finding things and teaching what you’ve just learned
171 A low stress way to go public
172 Don’t try to make things perfect
173 Teach everything you know
Downloads, Challenges, Replays CSS Demystified
174 Live session #1 (November 6, 2020)
Getting Started & Bonus material CSS Demystified
175 The Discord Community
176 My software and extensions
177 Using Figma
Resolve the captcha to access the links!