Course Overview
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!
FAQ
FAQ area empty
Course curriculum
-
Introduction
99 Xem trước -
What is CSS?
179 Xem trước -
Join our Online Learning Community
Xem trước -
CSS History, Present & Future
110 Xem trước -
Course Outline
274 -
Choose Your Track
-
Course Prerequisites
43 Xem trước -
How To Get The Most Out Of This Course
169 Xem trước -
Recommended Tools
86 Xem trước -
Where to Find the Source Code
-
Useful Resources & Links
-
Module Introduction
55 -
Understanding the Course Project Setup
164 -
Adding CSS to our Project with Inline Styles
233 -
Understanding the <style> Tag & Creating a .css File
387 -
Applying Additional Styles & Importing Google Fonts
411 -
Theory Time - Selectors
536 -
Understanding the "Cascading" Style & Specificity
494 -
Understanding Inheritance
347 -
Adding Combinators
376 -
Theory Time - Combinators
342 -
Summarizing Properties & Selectors
229 -
Selectors & Combinators
-
Time to Practice - The Basics
-
Wrap Up
122 -
Useful Resources & Links
-
Module Introduction
79 -
Introducing the CSS Box Model
216 -
Understanding the Box Model
181 -
Understanding Margin Collapsing and Removing Default Margins
185 -
Deep Dive on "Margin Collapsing"
-
Theory Time - Working with Shorthand Properties
228 -
Applying Shorthands in Practice
125 -
Diving Into the Height & Width Properties
367 -
Understanding Box Sizing
403 -
Adding the Header to our Project
337 -
Understanding the Display Property
432 -
Display: none vs visibility: hidden
-
HTML Refresher: Block-level vs Inline Elements
-
Applying the Display Property & Styling our Navigation Bar
413 -
Understanding an Unexpected "inline-block" Behaviour
123 -
Working with "text-decoration" & "vertical-align"
294 -
Styling Anchor Tags
240 -
Adding Pseudo Classes
107 -
Theory Time - Pseudo Classes & Pseudo Elements
338 -
Grouping Rules
74 -
Working with "font-weight" & "border"
124 -
Adding & Styling a CTA-Button
249 -
Adding a Background Image to our Project
110 -
Properties Worth to Remember
89 -
Time to Practice - Diving Deeper into CSS
-
Wrap Up
151 -
Useful Resources & Links
-
Module Introduction
37 -
Adding Style to our Plans
514 -
Working on the Recommended Plan
393 -
Styling the Badge with "border-radius"
202 -
Styling our List
182 -
Working on the Title and the Price of our Packages
273 -
Improving our Action Button
400 -
Understanding Outlines
137 -
Presenting the Core Features to the User
82 -
Styling the Headline of the Core Features Section
218 -
Preparing the Content of the Key Feature Area
435 -
Adding the Footer
409 -
What we Achieved so Far
106 -
Adding the Packages Page
384 -
Your Challenge
91 -
Styling the Links
235 -
Styling our Package Boxes
435 -
Adding "float" to our Package
314 -
Fixing the Hover Effect
251 -
Adding the Final Touches
181 -
Useful Resources & Links
-
Module Introduction
164 -
Why Positioning will Improve our Website
152 -
Understanding Positioning - The Theory
354 -
Working with the "fixed" Value
590 -
Creating a Fixed Navigation Bar
234 -
Using "position" to Add a Background Image
363 -
Understanding the Z-Index
419 -
Adding a Badge to our Package
480 -
Styling & Positioning our Badge with "absolute" and "relative"
190 -
Diving Deeper into Relative Positioning
243 -
Are you a "position" expert?
-
Working with "overflow" and Relative Positioning
257 -
Introducing "sticky" Positioning
413 -
Understanding the Stacking Context
353 -
Time to Practice - Positioning
-
Wrap Up
252 -
Useful Resources & Links
-
Optional: Advanced Track Introduction
142 -
Module Introduction
65 -
Understanding "background-size"
521 -
Working with "background-position"
300 -
The "background" Shorthand - Theory
132 -
Applying "background" Origin, Clip & Attachment
351 -
Using the "background" Shorthand on our Project
139 -
Styling Images
453 -
Adding the Customers Page to our Website
199 -
Working on the Image Layout
487 -
Understanding Linear Gradients
376 -
Applying Radial Gradients
341 -
Stacking Multiple Backgrounds
290 -
Understanding Filters
240 -
Adding & Styling SVGs - The Basics
260 -
Wrap Up
134 -
Useful Resources & Links
-
Module Introduction
155 -
What's Wrong With Our Project Units?
321 -
Where Units Matter
362 -
An Overview of Available Sizes & Units
264 -
Rules to Remember: Fixed Positioning & "%"
255 -
Rules to Remember: Absolute Positioning & "%"
494 -
Rules to Remember: Relative / Static Positioning & "%"
533 -
Fixing the Height 100% Issue
722 -
Defining the Font Size in the Root Element
138 -
Using "min-width/height" & "max-width/height"
327 -
Working with "rem" & "em"
767 -
Adding "rem" to Additional Properties
497 -
Finishing "rem"
321 -
Understanding the Viewport Units "vw" &"vh"
587 -
Windows, Viewport Units & Scrollbars
-
Choosing the Right Unit
330 -
Using "auto" to Center Elements
102 -
Cleaning Up our Code
66 -
Wrap Up
263 -
Useful Resources & Links
-
Module Introduction
76 -
Adding a Modal
253 -
Selecting & Manipulating Styles with JavaScript
634 -
Adding an Event Listener
365 -
Time to Practice - Adding Styles with JavaScript
-
Adding a Side Navigation Bar
434 -
Opening and Closing the Hamburger Menu
237 -
Manipulating Element Classes
400 -
Understanding Property Notations
192 -
Cleaning Up our Code
331 -
Wrap Up
75 -
Useful Resources & Links
-
Module Introduction
105 -
Why our Project Should Become Responsive
145 -
Understanding Hardware Pixels vs. Software Pixels
629 -
Comparing the Viewport Metatag (HTML) and Media Queries (CSS)
184 -
Understanding the "viewport" Metatag
442 -
Designing Websites "Mobile First"
114 -
Adding our First Media Queries
772 -
Things to Keep in Mind when Working with Media Queries
489 -
Finding the Right Breaking Points
225 -
Creating the Mobile First Design for our Plans
397 -
Making the Plans Responsive
515 -
Your Challenge
366 -
Time to Practice - Creating a Responsive Design with Media Queries
-
Working with Logical Operators
493 -
Improving the Customers Page
898 -
Improving the Packages Page
341 -
Cleaning Up the Navigation Bar
279 -
Positioning our Footer Correctly
609 -
Wrap Up
135 -
Useful Resources & Links
-
Module Introduction
92 -
Adding the Unstyled Form
157 -
Page Initialization
395 -
Understanding Advanced Attribute Selectors
362 -
Working on the General Layout
435 -
Restyling the Form Elements
389 -
Styling the Checkbox
412 -
Providing Validation Feedback
530 -
Styling the Signup Button
222 -
Fixing a Broken Link
-
Wrap Up
89 -
Useful Resources & Links
-
Module Introduction
80 -
Comparing Generic Families & Font Families
176 -
Understanding the Browser Settings
377 -
Using the Default Font Families
413 -
Understanding the "font-family" Syntax
378 -
Working with Locally Saved Fonts
230 -
Working with Google Fonts
628 -
Understanding Font Faces & "font-style"
409 -
Importing our Custom Fonts
543 -
Understanding Font Formats
341 -
Diving into Font Properties
190 -
Adding "letter-spacing"
283 -
Changing the Line Height
367 -
Applying "text-decoration" & "text-shadow"
351 -
Understanding the "font" Shorthand
519 -
Loading Performance & "font-display"
589 -
Wrap Up
227 -
Useful Resources & Links
-
Optional: Expert Track Introduction
203 -
Module Introduction
91 -
How we Could Improve our Project
178 -
Understanding Flexbox
198 -
Creating a Flex Container
333 -
Using "flex-direction" & "flex-wrap"
335 -
Understanding the Importance of Main Axis & Cross Axis
447 -
Working with "align-items" & "justify-content"
659 -
And What About "align-content"?
160 -
Time for another quiz - are you a Flexbox expert already?
-
Improving the Navigation Bar with Flexbox
722 -
Your Challenge - Working on the Mobile Navigation Bar
256 -
Improving the Footer
335 -
Flexbox and the Z-Index
-
Time to Practice - Flexbox
-
[OPTIONAL] Assignment Solution
512 -
Adding Flexbox to the Customers Page
196 -
Using the "order" Property for a Flex Item
367 -
Working with "align-self"
164 -
Understanding "flex-grow"
455 -
Applying "flex-shrink"
192 -
Comparing "flex-basis" vs "width" & "height"
515 -
Wrap Up
232 -
Useful Resources & Links
-
Module Introduction
74 -
What is the CSS Grid?
87 -
Getting Started
142 -
Turning a Container into a Grid
201 -
Defining Columns & Rows
349 -
Positioning Child Elements in a Grid
253 -
Using "element-sizing", "repeat" & "minmax"
405 -
Advanced Element Positioning
390 -
Working with Named Lines
233 -
Time to Practice - Grid
-
Understanding Column & Row Shorthands
174 -
Working with Gaps
153 -
Adding Named Template Areas
399 -
Time to Practice - Diving deeper into the CSS Grid
-
Creating Automatically Generated Grid Areas
430 -
Using the Grid on our Project
550 -
Working with "fit-content"
211 -
Positioning Grid Elements
215 -
Positioning the Entire Grid Content
197 -
Positioning Elements Individually
94 -
Understanding Responsive Grids
330 -
Applying Autoflow
399 -
Comparing the Explicit & Implicit Grid
151 -
Understanding "auto-fill" & "auto-fit"
213 -
Creating a Dense Grid
202 -
Styling the Project Form with Grid
585 -
Comparing Grid & Flexbox
147 -
Next Steps
91 -
Wrap Up
229 -
Useful Resources & Links
-
Module Introduction
31 -
Rotating Elements and setting transform-origin
225 -
Using Rotate and Translate
297 -
Working with "skew" and "scale"
378 -
Applying Transformation Shorthands
143 -
Rotating Elements in 3 Dimensions
259 -
Understanding the "perspective" Property
217 -
Moving Elements along the Z-Axis with "translateZ"
234 -
Rotating the Container with "transform style"
224 -
Flipping Elements & "backface-visibility"
75 -
Wrap Up
74 -
Useful Resources & Links
-
Module Introduction
22 -
Understanding and Applying Transitions
443 -
CSS "transition" Property Deep Dive
-
Working with Timing Functions
170 -
Transitions & "display"
371 -
Time to Practice - CSS Transitions
-
Using CSS Animations
540 -
CSS "animation" Property Deep Dive
-
Adding Multiple Keyframes
202 -
Adding Animations to our Customers Page
239 -
Time to Practice - CSS Animations
-
Using JavaScript Animation Event Listeners
204 -
Wrap Up
95 -
Useful Resources & Links
-
Module Introduction
34 -
CSS Modules & Their Working Groups
115 -
Using CSS Variables
451 -
Understanding & Using Vendor Prefixes
287 -
Which Prefixes Should You Use?
178 -
Detecting Browser Support with @supports
309 -
Polyfills
165 -
Eliminating Cross-Browser Inconsistencies
178 -
How to Name CSS Classes
292 -
Vanilla CSS vs Frameworks
516 -
Wrap Up
256 -
Useful Resources & Links
-
Module Introduction
42 -
What is Sass & Scss?
210 -
Important: Installing Sass
-
Installing Sass
265 -
Things to be Improved with Sass
93 -
Nesting Selectors
395 -
Adding Nested Properties
87 -
Understanding Variables
185 -
Storing Lists & Maps in Variables
358 -
Built-In Functions
198 -
Time to Practice - Sass
-
Adding Simple Arithmetics
144 -
Adding Better Import and Partials
286 -
Improving Media Queries
144 -
Understanding Inheritance
213 -
Adding Mixins
405 -
Using the Ampersand Operator
177 -
Wrap Up
74 -
Useful Resources & Links
Requirment
-
You should know the very basics about HTML and web development in general
-
NO advanced HTML or web development knowledge is required though
-
NO CSS knowledge is required at all! You'll learn it all in this course!
Outcomes
-
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
0 Student
4 Courses
0 review