English | MP4 | AVC 1280×720 | AAC 44KHz 2ch | 297 lectures (22h 45m) | 10.30 GB
Learn CSS for the first time or brush up your CSS skills and dive in even deeper. EVERY web developer has to know CSS.
Join this bestselling CSS course to learn all about CSS from the ground up, in great depth!
CSS ( Cascading Style Sheets) is a “programming language” you use to turn your HTML pages into real beautiful websites.
This course covers it all – we start at the very basics (What is CSS? How does it work? How do you use it)? and gradually dive in deeper and deeper. And we do this by showing both practical examples as well as the theory behind it.
Getting started with CSS might look easy but there actually is a lot of depth to CSS – hence this course provides different “Tracks” or “Entry points” to exactly meet your demands and reflect you current knowledge level:
- The Basics Track: Start from scratch, learn CSS from the ground up. You start with lecture 1 and simply follow through to the end.
- The Advanced Track: You already know the CSS basics, you know what selectors are and how it works but you want to dive in deeper and learn some advanced features and usages.
- The Expert Track: You got the advanced knowledge, too, but you want to dive into things like Flexbox, CSS Grid, CSS Variables or Sass. This track is for you.
Of course this course offers the theory and practical examples – we’ll build an entire real course project throughout the course – but there also are multiple assignments, quizzes and challenges for you to practice individual concepts taught throughout the course.
Talking about the course project – we’ll build the frontend (no backend) of a fictional web hosting company. We’ll have a starting screen which has different sections, we got a responsive design with an animated side-drawer, we got modals and forms and in general we got a lot of CSS animations, font styles and more!
Here’s what’s inside the course in detail – this is all also applied to the mentioned course project:
- The basics about selectors, combinators and how you set up styling rules in general
- Properties, values and decalarations
- How specifity and inheritance work and why it’s called “Cascading” Style Sheets
- Important theoretical concepts like the “Box Model”
- How the default position of elements can be changed
- Styling backgrounds (e.g. gradients) and images
- Which units and dimensions you typically use in CSS (px, rem, % and more)
- How JavaScript and CSS interact
- Responsive design and what “Mobile First” means
- Styling forms and form inputs
- Working with text, fonts and text styles
- Flexbox! How it works and how to use it
- Using the CSS Grid and how it differs from Flexbox
Transforming and animating HTML elements with the help of CSS
Writing future-proof CSS with features like CSS variables or best-practice class names
Using Sass and what it actually is all about
Is this course for you?
It’s for you if
- you started with learning web development and you want to build more beautiful websites
- you already know CSS but want to dive deeper
- you’re using CSS in a trial-and-error manner and want to change this (you should!)
You might come back later if
- you’re an absolute CSS pro and you know the CSS working group drafts by heart
- you’re a backend-only developer (Node, PHP, NO HTML or frontend JavaScript)
- you’re a total newcomer to web development and you don’t know the basics about HTML
If that sounds good to you, we’d be more than happy to welcome you in this course!
What you’ll learn
- Learn why CSS is amazing, not something to be afraid of!
- Use basic as well as advanced CSS features
- Flexbox, grid, animations, transitions, fonts, media queries and much more – it’s all included!
- Understand the concepts and theory behind CSS and certain CSS features
- Build beautiful websites which don’t just contain great content but also look good
Table of Contents
Getting Started
1 Introduction
2 What is CSS
3 Join our Online Learning Community
4 CSS History, Present & Future
5 Course Outline
6 Choose Your Track
7 Course Prerequisites
8 How To Get The Most Out Of This Course
9 Recommended Tools
10 Where to Find the Source Code
11 Useful Resources & Links
Diving Into the Basics of CSS
12 Module Introduction
13 Understanding the Course Project Setup
14 Adding CSS to our Project with Inline Styles
15 Understanding the style Tag & Creating a .css File
16 Applying Additional Styles & Importing Google Fonts
17 Theory Time – Selectors
18 Understanding the Cascading Style & Specificity
19 Understanding Inheritance
20 Adding Combinators
21 Theory Time – Combinators
22 Summarizing Properties & Selectors
23 Selectors & Combinators
24 Time to Practice – The Basics
25 Wrap Up
26 Useful Resources & Links
Diving Deeper into CSS
27 Module Introduction
28 Introducing the CSS Box Model
29 Understanding the Box Model
30 Understanding Margin Collapsing and Removing Default Margins
31 Deep Dive on Margin Collapsing
32 Theory Time – Working with Shorthand Properties
33 Applying Shorthands in Practice
34 Diving Into the Height & Width Properties
35 Understanding Box Sizing
36 Adding the Header to our Project
37 Understanding the Display Property
38 display none vs visibility hidden
39 HTML Refresher Block-level vs Inline Elements
40 Applying the Display Property & Styling our Navigation Bar
41 Understanding an Unexpected inline-block Behaviour
42 Working with text-decoration & vertical-align
43 Styling Anchor Tags
44 Adding Pseudo Classes
45 Theory Time – Pseudo Classes & Pseudo Elements
46 Grouping Rules
47 Working with font-weight & border
48 Adding & Styling a CTA-Button
49 Adding a Background Image to our Project
50 Properties Worth to Remember
51 Time to Practice – Diving Deeper into CSS
52 Wrap Up
53 Useful Resources & Links
More on Selectors & CSS Features
54 Module Introduction
55 Using Multiple CSS Classes & Combined Selectors
56 Classes or IDs
57 (Not) using !important
58 Selecting the Opposite with not()
59 CSS & Browser Support
60 Wrap Up
61 Rounding up the Basics
62 Useful Resources & Links
Practicing the Basics
63 Module Introduction
64 Adding Style to our Plans
65 Working on the Recommended Plan
66 Styling the Badge with border-radius
67 Styling our List
68 Working on the Title and the Price of our Packages
69 Improving our Action Button
70 Understanding Outlines
71 Presenting the Core Features to the User
72 Styling the Headline of the Core Features Section
73 Preparing the Content of the Key Feature Area
74 Adding the Footer
75 What we Achieved so Far
76 Adding the Packages Page
77 Your Challenge
78 Styling the Links
79 Styling our Package Boxes
80 Adding float to our Package
81 Fixing the Hover Effect
82 Adding the Final Touches
83 Useful Resources & Links
Positioning Elements with CSS
84 Module Introduction
85 Why Positioning will Improve our Website
86 Understanding Positioning – The Theory
87 Working with the fixed Value
88 Creating a Fixed Navigation Bar
89 Using position to Add a Background Image
90 Understanding the Z-Index
91 Adding a Badge to our Package
92 Styling & Positioning our Badge with absolute and relative
93 Diving Deeper into Relative Positioning
94 Are you a position expert
95 Working with overflow and Relative Positioning
96 Introducing sticky Positioning
97 Understanding the Stacking Context
98 Time to Practice – Positioning
99 Wrap Up
100 Useful Resources & Links
Understanding Background Images & Images
101 Optional Advanced Track Introduction
102 Module Introduction
103 Understanding background-size
104 Working with background-position
105 The background Shorthand – Theory
106 Applying background Origin, Clip & Attachment
107 Using the background Shorthand on our Project
108 Styling Images
109 Adding the Customers Page to our Website
110 Working on the Image Layout
111 Understanding Linear Gradients
112 Applying Radial Gradients
113 Stacking Multiple Backgrounds
114 Understanding Filters
115 Adding & Styling SVGs – The Basics
116 Wrap Up
117 Useful Resources & Links
Sizes & Units
118 Module Introduction
119 What’s Wrong With Our Project Units
120 Where Units Matter
121 An Overview of Available Sizes & Units
122 Rules to Remember Fixed Positioning & %
123 Rules to Remember Absolute Positioning & %
124 Rules to Remember Relative Static Positioning & %
125 Fixing the Height 100% Issue
126 Defining the Font Size in the Root Element
127 Using min-widthheight & max-widthheight
128 Working with rem & em
129 Adding rem to Additional Properties
130 Finishing rem
131 Understanding the Viewport Units vw &vh
132 Windows, Viewport Units & Scrollbars
133 Choosing the Right Unit
134 Using auto to Center Elements
135 Cleaning Up our Code
136 Wrap Up
137 Useful Resources & Links
Working with JavaScript & CSS
138 Module Introduction
139 Adding a Modal
140 Selecting & Manipulating Styles with JavaScript
141 Adding an Event Listener
142 Time to Practice – Adding Styles with JavaScript
143 Adding a Side Navigation Bar
144 Opening and Closing the Hamburger Menu
145 Manipulating Element Classes
146 Understanding Property Notations
147 Cleaning Up our Code
148 Wrap Up
149 Useful Resources & Links
Making our Website Responsive
150 Module Introduction
151 Why our Project Should Become Responsive
152 Understanding Hardware Pixels vs. Software Pixels
153 Comparing the Viewport Metatag (HTML) and Media Queries (CSS)
154 Understanding the viewport Metatag
155 Designing Websites Mobile First
156 Adding our First Media Queries
157 Things to Keep in Mind when Working with Media Queries
158 Finding the Right Breaking Points
159 Creating the Mobile First Design for our Plans
160 Making the Plans Responsive
161 Your Challenge
162 Time to Practice – Creating a Responsive Design with Media Queries
163 Working with Logical Operators
164 Improving the Customers Page
165 Improving the Packages Page
166 Cleaning Up the Navigation Bar
167 Positioning our Footer Correctly
168 Wrap Up
169 Useful Resources & Links
Adding & Styling Forms
170 Module Introduction
171 Adding the Unstyled Form
172 Page Initialization
173 Understanding Advanced Attribute Selectors
174 Working on the General Layout
175 Restyling the Form Elements
176 Styling the Checkbox
177 Providing Validation Feedback
178 Styling the Signup Button
179 Fixing a Broken Link
180 Wrap Up
181 Useful Resources & Links
Working with Text and Fonts
182 Module Introduction
183 Comparing Generic Families & Font Families
184 Understanding the Browser Settings
185 Using the Default Font Families
186 Understanding the font-family Syntax
187 Working with Locally Saved Fonts
188 Working with Google Fonts
189 Understanding Font Faces & font-style
190 Importing our Custom Fonts
191 Understanding Font Formats
192 Diving into Font Properties
193 Adding letter-spacing
194 Changing the Line Height
195 Applying text-decoration & text-shadow
196 Understanding the font Shorthand
197 Loading Performance & font-display
198 Wrap Up
199 Useful Resources & Links
Adding Flexbox to our Project
200 Optional Expert Track Introduction
201 Module Introduction
202 How we Could Improve our Project
203 Understanding Flexbox
204 Creating a Flex Container
205 Using flex-direction & flex-wrap
206 Understanding the Importance of Main Axis & Cross Axis
207 Working with align-items & justify-content
208 And What About align-content
209 Improving the Navigation Bar with Flexbox
210 Your Challenge – Working on the Mobile Navigation Bar
211 Improving the Footer
212 Flexbox and the Z-Index
213 Time to Practice – Flexbox
214 [OPTIONAL] Assignment Solution
215 Adding Flexbox to the Customers Page
216 Using the order Property for a Flex Item
217 Working with align-self
218 Understanding flex-grow
219 Applying flex-shrink
220 Comparing flex-basis vs width & height
221 Wrap Up
222 Useful Resources & Links
Using the CSS Grid
223 Module Introduction
224 What is the CSS Grid
225 Getting Started
226 Turning a Container into a Grid
227 Defining Columns & Rows
228 Positioning Child Elements in a Grid
229 Using element-sizing, repeat & minmax
230 Advanced Element Positioning
231 Working with Named Lines
232 Time to Practice – Grid
233 Understanding Column & Row Shorthands
234 Working with Gaps
235 Adding Named Template Areas
236 Time to Practice – Diving deeper into the CSS Grid
237 Creating Automatically Generated Grid Areas
238 Using the Grid on our Project
239 Working with fit-content
240 Positioning Grid Elements
241 Positioning the Entire Grid Content
242 Positioning Elements Individually
243 Understanding Responsive Grids
244 Applying Autoflow
245 Comparing the Explicit & Implicit Grid
246 Understanding auto-fill & auto-fit
247 Creating a Dense Grid
248 Styling the Project Form with Grid
249 Comparing Grid & Flexbox
250 Next Steps
251 Wrap Up
252 Useful Resources & Links
Transforming Elements with CSS Transforms
253 Module Introduction
254 Rotating Elements and setting transform-origin
255 Using Rotate and Translate
256 Working with skew and scale
257 Applying Transformation Shorthands
258 Rotating Elements in 3 Dimensions
259 Understanding the perspective Property
260 Moving Elements along the Z-Axis with translateZ
261 Rotating the Container with transform style
262 Flipping Elements & backface-visibility
263 Wrap Up
264 Useful Resources & Links
Transitions & Animations in CSS
265 Module Introduction
266 Understanding and Applying Transitions
267 CSS transition Property Deep Dive
268 Working with Timing Functions
269 Transitions & display
270 Time to Practice – CSS Transitions
271 Using CSS Animations
272 CSS animation Property Deep Dive
273 Adding Multiple Keyframes
274 Adding Animations to our Customers Page
275 Time to Practice – CSS Animations
276 Using JavaScript Animation Event Listeners
277 Wrap Up
278 Useful Resources & Links
Writing Future-Proof CSS Code
279 Module Introduction
280 CSS Modules & Their Working Groups
281 Using CSS Variables
282 Understanding & Using Vendor Prefixes
283 Which Prefixes Should You Use
284 Detecting Browser Support with @supports
285 Polyfills
286 Eliminating Cross-Browser Inconsistencies
287 How to Name CSS Classes
288 Vanilla CSS vs Frameworks
289 Wrap Up
290 Useful Resources & Links
Introducing Sass (Syntactically Awesome Style Sheets)
291 Module Introduction
292 What is Sass & Scss
293 Important Installing Sass
294 Installing Sass
295 Things to be Improved with Sass
296 Nesting Selectors
297 Adding Nested Properties
298 Understanding Variables
299 Storing Lists & Maps in Variables
300 Built-In Functions
301 Time to Practice – Sass
302 Adding Simple Arithmetics
303 Adding Better Import and Partials
304 Improving Media Queries
305 Understanding Inheritance
306 Adding Mixins
307 Using the Ampersand Operator
308 Wrap Up
309 Useful Resources & Links
Course Roundup
310 Course Roundup
311 Bonus More Content!
Resolve the captcha to access the links!