Learn CSS for the first time or brush up your CSS skills and dive in even deeper
About This Video
In Detail
Every web developer has to know CSS. CSS, short for Cascading Style Sheets, is a "programming language" you use to turn your raw …
Learn CSS for the first time or brush up your CSS skills and dive in even deeper
About This Video
In Detail
Every web developer has to know CSS. CSS, short for Cascading Style Sheets, is a "programming language" you use to turn your raw HTML pages into a really beautiful website. This course covers it all. We start at the very basics and gradually dive in deeper and deeper. We do this by showing you both practical examples and the theory behind them.
Getting started with CSS might look easy, but there actually is a lot of depth to CSS, so this course provides different "Tracks" or "Entry points" to exactly meet your demands and reflect your current knowledge level:
In the course project, we'll build the front end (no back end) of a fictional web hosting company. We'll have a starting screen with different sections, a responsive design with an animated side-drawer, modals and forms, and lot of CSS animations, font styles, and more!
Who this book is for
This course is for anyone who wants to learn CSS for the first time or wants to sharpen their CSS skills. It’s also for anyone who's excited to learn about the latest CSS features like Flexbox, CSS Grid, or CSS Variables, or anyone who knows CSS but wants to dive deeper.
Chapter 1 : Getting Started
Introduction
What is CSS?
CSS History, Present Future
Course Outline
Course Prerequisites
How To Get The Most Out Of This Course
Recommended Tools
Chapter 2 : Diving Into the Basics of CSS
Module Introduction
Understanding the Course Project Setup
Adding CSS to our Project with Inline Styles
Understanding the 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
Wrap Up
Chapter 3 : Diving Deeper into CSS
Module Introduction
Introducing the CSS Box Model
Understanding the Box Model
Understanding Margin Collapsing and Removing Default Margins
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
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
Wrap Up
Chapter 4 : More on Selectors CSS Features
Module Introduction
Using Multiple CSS Classes Combined Selectors
Classes or IDs?
(Not) using! Important
Selecting the Opposite with: not()
CSS Browser Support
Wrap Up
Chapter 5 : Practicing the Basics
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
Chapter 6 : Positioning Elements with CSS
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
Working with “overflow” and Relative Positioning
Introducing “sticky” Positioning
Understanding the Stacking Context
Wrap Up
Chapter 7 : Understanding Background Images Images
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
Chapter 8 : Sizes Units
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”
Choosing the Right Unit
Using “auto” to Center Elements
Cleaning Up our Code
Wrap Up
Chapter 9 : Working with JavaScript CSS
Module Introduction
Adding a Modal
Selecting Manipulating Styles with JavaScript
Adding an Event Listener
Adding a Side Navigation Bar
Opening and Closing the Hamburger Menu
Manipulating Element Classes
Understanding Property Notations
Cleaning Up our Code
Wrap Up
Chapter 10 : Making our Website Responsive
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
Working with Logical Operators
Improving the Customers Page
Improving the Packages Page
Cleaning Up the Navigation Bar
Positioning our Footer Correctly
Wrap Up
Chapter 11 : Adding Styling Forms
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
Wrap Up
Chapter 12 : Working with Text and Fonts
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
Chapter 13 : Adding Flexbox to our Project
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”?
Improving the Navigation Bar with Flexbox
Your Challenge - Working on the Mobile Navigation Bar
Improving the Footer
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
Chapter 14 : Using the CSS Grid
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
Understanding Column Row Shorthands
Working with Gaps
Adding Named Template Areas
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
Chapter 15 : Transforming Elements with CSS Transforms
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
Chapter 16 : Transitions Animations in CSS
Module Introduction
Understanding and Applying Transitions
Working with Timing Functions
Transitions “display”
Using CSS Animations
Adding Multiple Keyframes
Adding Animations to our Customers Page
Using JavaScript Animation Event Listeners
Wrap Up
Chapter 17 : Writing Future-Proof CSS Code
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
Chapter 18 : Introducing Sass (Syntactically Awesome Style Sheets)
Module Introduction
What is Sass Scss?
Installing Sass
Things to be improved with Sass
Nesting Selectors
Adding Nested Properties
Understanding Variables
Storing Lists Maps in Variables
Built-In Functions
Adding Simple Arithmetics
Adding Better Import and Partials
Improving Media Queries
Understanding Inheritance
Adding Mixins
Using the Ampersand Operator
Wrap Up
Chapter 19 : Course Roundup
Course Roundup