IIRF Online > Development > Web Development > CSS > CSS - The Complete Guide 2024 (incl. Flexbox, Grid & Sass)
CSS - The Complete Guide 2024 (incl. Flexbox, Grid & Sass) by Udemy
Learn CSS for the first time or brush up your CSS skills and dive in even deeper. EVERY web developer has to know CSS.
Course Highlights
- 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
Skills you will learn!
Curriculum
11 Topics
Introduction
What is CSS?
Join our Online Learning Community
CSS History Present & Future
Course Outline
Choose Your Track
Course Prerequisites
How To Get The Most Out Of This Course
Recommended Tools
Where to Find the Source Code
Useful Resources & Links
15 Topics
Module Introduction
Understanding the Course Project Setup
Adding CSS to our Project with Inline Styles
Understanding the <style> Tag & Creating a .css File
Applying Additional Styles & Importing Google Fonts
Theory Time - Selectors
Understanding the "Cascading" Style & Specificity
Understanding Inheritance
Adding Combinators
Theory Time - Combinators
Summarizing Properties & Selectors
Selectors & Combinators
Time to Practice - The Basics
Wrap Up
Useful Resources & Links
27 Topics
Module Introduction
Introducing the CSS Box Model
Understanding the Box Model
Understanding Margin Collapsing and Removing Default Margins
Deep Dive on "Margin Collapsing"
Theory Time - Working with Shorthand Properties
Applying Shorthands in Practice
Diving Into the Height & Width Properties
Understanding Box Sizing
Adding the Header to our Project
Understanding the Display Property
display: none vs visibility: hidden
HTML Refresher: Block-level vs Inline Elements
Applying the Display Property & Styling our Navigation Bar
Understanding an Unexpected "inline-block" Behaviour
Working with "text-decoration" & "vertical-align"
Styling Anchor Tags
Adding Pseudo Classes
Theory Time - Pseudo Classes & Pseudo Elements
Grouping Rules
Working with "font-weight" & "border"
Adding & Styling a CTA-Button
Adding a Background Image to our Project
Properties Worth to Remember
Time to Practice - Diving Deeper into CSS
Wrap Up
Useful Resources & Links
9 Topics
Module Introduction
Using Multiple CSS Classes & Combined Selectors
Classes or IDs?
(Not) using !important
Selecting the Opposite with :not()
CSS & Browser Support
Wrap Up
Rounding up the Basics
Useful Resources & Links
21 Topics
Module Introduction
Adding Style to our Plans
Working on the Recommended Plan
Styling the Badge with "border-radius"
Styling our List
Working on the Title and the Price of our Packages
Improving our Action Button
Understanding Outlines
Presenting the Core Features to the User
Styling the Headline of the Core Features Section
Preparing the Content of the Key Feature Area
Adding the Footer
What we Achieved so Far
Adding the Packages Page
Your Challenge
Styling the Links
Styling our Package Boxes
Adding "float" to our Package
Fixing the Hover Effect
Adding the Final Touches
Useful Resources & Links
17 Topics
Module Introduction
Why Positioning will Improve our Website
Understanding Positioning - The Theory
Working with the "fixed" Value
Creating a Fixed Navigation Bar
Using "position" to Add a Background Image
Understanding the Z-Index
Adding a Badge to our Package
Styling & Positioning our Badge with "absolute" and "relative"
Diving Deeper into Relative Positioning
Are you a "position" expert?
Working with "overflow" and Relative Positioning
Introducing "sticky" Positioning
Understanding the Stacking Context
Time to Practice - Positioning
Wrap Up
Useful Resources & Links
17 Topics
Optional: Advanced Track Introduction
Module Introduction
Understanding "background-size"
Working with "background-position"
The "background" Shorthand - Theory
Applying "background" Origin Clip & Attachment
Using the "background" Shorthand on our Project
Styling Images
Adding the Customers Page to our Website
Working on the Image Layout
Understanding Linear Gradients
Applying Radial Gradients
Stacking Multiple Backgrounds
Understanding Filters
Adding & Styling SVGs - The Basics
Wrap Up
Useful Resources & Links
20 Topics
Module Introduction
What's Wrong With Our Project Units?
Where Units Matter
An Overview of Available Sizes & Units
Rules to Remember: Fixed Positioning & "%"
Rules to Remember: Absolute Positioning & "%"
Rules to Remember: Relative / Static Positioning & "%"
Fixing the Height 100% Issue
Defining the Font Size in the Root Element
Using "min-width/height" & "max-width/height"
Working with "rem" & "em"
Adding "rem" to Additional Properties
Finishing "rem"
Understanding the Viewport Units "vw" &"vh"
Windows Viewport Units & Scrollbars
Choosing the Right Unit
Using "auto" to Center Elements
Cleaning Up our Code
Wrap Up
Useful Resources & Links
12 Topics
Module Introduction
Adding a Modal
Selecting & Manipulating Styles with JavaScript
Adding an Event Listener
Time to Practice - Adding Styles with JavaScript
Adding a Side Navigation Bar
Opening and Closing the Hamburger Menu
Manipulating Element Classes
Understanding Property Notations
Cleaning Up our Code
Wrap Up
Useful Resources & Links
20 Topics
Module Introduction
Why our Project Should Become Responsive
Understanding Hardware Pixels vs. Software Pixels
Comparing the Viewport Metatag (HTML) and Media Queries (CSS)
Understanding the "viewport" Metatag
Designing Websites "Mobile First"
Adding our First Media Queries
Things to Keep in Mind when Working with Media Queries
Finding the Right Breaking Points
Creating the Mobile First Design for our Plans
Making the Plans Responsive
Your Challenge
Time to Practice - Creating a Responsive Design with Media Queries
Working with Logical Operators
Improving the Customers Page
Improving the Packages Page
Cleaning Up the Navigation Bar
Positioning our Footer Correctly
Wrap Up
Useful Resources & Links
12 Topics
Module Introduction
Adding the Unstyled Form
Page Initialization
Understanding Advanced Attribute Selectors
Working on the General Layout
Restyling the Form Elements
Styling the Checkbox
Providing Validation Feedback
Styling the Signup Button
Fixing a Broken Link
Wrap Up
Useful Resources & Links
18 Topics
Module Introduction
Comparing Generic Families & Font Families
Understanding the Browser Settings
Using the Default Font Families
Understanding the "font-family" Syntax
Working with Locally Saved Fonts
Working with Google Fonts
Understanding Font Faces & "font-style"
Importing our Custom Fonts
Understanding Font Formats
Diving into Font Properties
Adding "letter-spacing"
Changing the Line Height
Applying "text-decoration" & "text-shadow"
Understanding the "font" Shorthand
Loading Performance & "font-display"
Wrap Up
Useful Resources & Links
24 Topics
Optional: Expert Track Introduction
Module Introduction
How we Could Improve our Project
Understanding Flexbox
Creating a Flex Container
Using "flex-direction" & "flex-wrap"
Understanding the Importance of Main Axis & Cross Axis
Working with "align-items" & "justify-content"
And What About "align-content"?
Time for another quiz - are you a Flexbox expert already?
Improving the Navigation Bar with Flexbox
Your Challenge - Working on the Mobile Navigation Bar
Improving the Footer
Flexbox and the Z-Index
Time to Practice - Flexbox
[OPTIONAL] Assignment Solution
Adding Flexbox to the Customers Page
Using the "order" Property for a Flex Item
Working with "align-self"
Understanding "flex-grow"
Applying "flex-shrink"
Comparing "flex-basis" vs "width" & "height"
Wrap Up
Useful Resources & Links
30 Topics
Module Introduction
What is the CSS Grid?
Getting Started
Turning a Container into a Grid
Defining Columns & Rows
Positioning Child Elements in a Grid
Using "element-sizing" "repeat" & "minmax"
Advanced Element Positioning
Working with Named Lines
Time to Practice - Grid
Understanding Column & Row Shorthands
Working with Gaps
Adding Named Template Areas
Time to Practice - Diving deeper into the CSS Grid
Creating Automatically Generated Grid Areas
Using the Grid on our Project
Working with "fit-content"
Positioning Grid Elements
Positioning the Entire Grid Content
Positioning Elements Individually
Understanding Responsive Grids
Applying Autoflow
Comparing the Explicit & Implicit Grid
Understanding "auto-fill" & "auto-fit"
Creating a Dense Grid
Styling the Project Form with Grid
Comparing Grid & Flexbox
Next Steps
Wrap Up
Useful Resources & Links
12 Topics
Module Introduction
Rotating Elements and setting transform-origin
Using Rotate and Translate
Working with "skew" and "scale"
Applying Transformation Shorthands
Rotating Elements in 3 Dimensions
Understanding the "perspective" Property
Moving Elements along the Z-Axis with "translateZ"
Rotating the Container with "transform style"
Flipping Elements & "backface-visibility"
Wrap Up
Useful Resources & Links
14 Topics
Module Introduction
Understanding and Applying Transitions
CSS "transition" Property Deep Dive
Working with Timing Functions
Transitions & "display"
Time to Practice - CSS Transitions
Using CSS Animations
CSS "animation" Property Deep Dive
Adding Multiple Keyframes
Adding Animations to our Customers Page
Time to Practice - CSS Animations
Using JavaScript Animation Event Listeners
Wrap Up
Useful Resources & Links
12 Topics
Module Introduction
CSS Modules & Their Working Groups
Using CSS Variables
Understanding & Using Vendor Prefixes
Which Prefixes Should You Use?
Detecting Browser Support with @supports
Polyfills
Eliminating Cross-Browser Inconsistencies
How to Name CSS Classes
Vanilla CSS vs Frameworks
Wrap Up
Useful Resources & Links
19 Topics
Module Introduction
What is Sass & Scss?
Important: Installing Sass
Installing Sass
Things to be Improved with Sass
Nesting Selectors
Adding Nested Properties
Understanding Variables
Storing Lists & Maps in Variables
Built-In Functions
Time to Practice - Sass
Adding Simple Arithmetics
Adding Better Import and Partials
Improving Media Queries
Understanding Inheritance
Adding Mixins
Using the Ampersand Operator
Wrap Up
Useful Resources & Links
2 Topics
Course Roundup
Bonus: More Content!
CSS - The Complete Guide 2024 (incl. Flexbox, Grid & Sass)
Related CSS Courses
Thank You!
Your review has been submitted successfully.