CSS - The Complete Guide (incl. Flexbox, Grid and Sass)

CSS - The Complete Guide (incl. Flexbox, Grid and Sass)

by Manuel Lorenz, Maximilian Schwarzmüller
Released November 2018
Publisher(s): Packt Publishing
ISBN: 9781789954692

Explore a preview version of CSS - The Complete Guide (incl. Flexbox, Grid and Sass) right now.

O’Reilly members get unlimited access to live online training experiences, plus books, videos, and digital content from 200+ publishers.

Start your free trial

Video description

Learn CSS for the first time or brush up your CSS skills and dive in even deeper

About This Video

  • Build beautiful websites that don't just contain great content but also look good
  • Use basic and advanced CSS features
  • Understand the concepts and theory behind CSS and certain CSS features

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:

  • The Basics Track: Start from scratch and 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.

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!

All the code and supporting files for this course are available at:https://github.com/PacktPublishing/CSS---The-Complete-Guide-incl.-Flexbox-Grid-and-Sass-/tree/master

Table of contents

  1. Chapter 1 : Getting Started
    1. Introduction 00:01:31
    2. What is CSS? 00:03:00
    3. CSS History, Present & Future 00:01:51
    4. Course Outline 00:04:35
    5. Course Prerequisites 00:00:43
    6. How To Get The Most Out Of This Course 00:01:48
    7. Recommended Tools 00:01:27
  2. Chapter 2 : Diving Into the Basics of CSS
    1. Module Introduction 00:00:56
    2. Understanding the Course Project Setup 00:02:45
    3. Adding CSS to our Project with Inline Styles 00:03:53
    4. Understanding the <style> Tag & Creating a .css File 00:06:27
    5. Applying Additional Styles & Importing Google Fonts 00:06:52
    6. Theory Time – Selectors 00:08:57
    7. Understanding the "Cascading" Style & Specificity 00:08:15
    8. Understanding Inheritance 00:05:48
    9. Adding Combinators 00:06:16
    10. Theory Time – Combinators 00:05:42
    11. Summarizing Properties & Selectors 00:03:50
    12. Wrap Up 00:02:02
  3. Chapter 3 : Diving Deeper into CSS
    1. Module Introduction 00:01:20
    2. Introducing the CSS Box Model 00:03:36
    3. Understanding the Box Model 00:03:02
    4. Understanding Margin Collapsing and Removing Default Margins 00:03:06
    5. Theory Time - Working with Shorthand Properties 00:03:49
    6. Applying Shorthands in Practice 00:02:05
    7. Diving Into the Height & Width Properties 00:06:08
    8. Understanding Box Sizing 00:06:43
    9. Adding the Header to our Project 00:05:38
    10. Understanding the Display Property 00:07:13
    11. Applying the Display Property & Styling our Navigation Bar 00:06:54
    12. Understanding an Unexpected "inline-block" Behaviour 00:02:04
    13. Working with "text-decoration" & "vertical-align" 00:04:55
    14. Styling Anchor Tags 00:04:00
    15. Adding Pseudo Classes 00:01:48
    16. Theory Time - Pseudo Classes & Pseudo Elements 00:05:38
    17. Grouping Rules 00:01:15
    18. Working with "font-weight" & "border" 00:02:04
    19. Adding & Styling a CTA-Button 00:04:10
    20. Adding a Background Image to our Project 00:01:50
    21. Properties Worth to Remember 00:01:29
    22. Wrap Up 00:02:32
  4. Chapter 4 : More on Selectors & CSS Features
    1. Module Introduction 00:00:42
    2. Using Multiple CSS Classes & Combined Selectors 00:07:10
    3. Classes or IDs? 00:04:06
    4. (Not) using! Important 00:03:15
    5. Selecting the Opposite with: not() 00:03:30
    6. CSS & Browser Support 00:03:51
    7. Wrap Up 00:01:06
  5. Chapter 5 : Practicing the Basics
    1. Module Introduction 00:00:38
    2. Adding Style to our Plans 00:08:35
    3. Working on the Recommended Plan 00:06:34
    4. Styling the Badge with "border-radius" 00:03:22
    5. Styling our List 00:03:03
    6. Working on the Title and the Price of our Packages 00:04:34
    7. Improving our Action Button 00:06:40
    8. Understanding Outlines 00:02:17
    9. Presenting the Core Features to the User 00:01:22
    10. Styling the Headline of the Core Features Section 00:03:39
    11. Preparing the Content of the Key Feature Area 00:07:16
    12. Adding the Footer 00:06:50
    13. What we achieved so Far 00:01:46
    14. Adding the Packages Page 00:06:25
    15. Your Challenge 00:01:32
    16. Styling the Links 00:03:55
    17. Styling our Package Boxes 00:07:15
    18. Adding "float" to our Package 00:05:15
    19. Fixing the Hover Effect 00:04:11
    20. Adding the Final Touches 00:03:02
  6. Chapter 6 : Positioning Elements with CSS
    1. Module Introduction 00:02:45
    2. Why Positioning will improve our Website 00:02:33
    3. Understanding Positioning - The Theory 00:05:55
    4. Working with the "fixed" Value 00:09:51
    5. Creating a Fixed Navigation Bar 00:03:54
    6. Using "position" to Add a Background Image 00:06:03
    7. Understanding the Z-Index 00:07:00
    8. Adding a Badge to our Package 00:08:01
    9. Styling & Positioning our Badge with "absolute" and "relative" 00:03:10
    10. Diving Deeper into Relative Positioning 00:04:03
    11. Working with "overflow" and Relative Positioning 00:04:18
    12. Introducing "sticky" Positioning 00:06:53
    13. Understanding the Stacking Context 00:05:53
    14. Wrap Up 00:04:12
  7. Chapter 7 : Understanding Background Images & Images
    1. Optional: Advanced Track Introduction 00:02:22
    2. Module Introduction 00:01:06
    3. Understanding "background-size" 00:08:41
    4. Working with "background-position" 00:05:00
    5. The "background" Shorthand – Theory 00:02:12
    6. Applying "background" Origin, Clip & Attachment 00:05:52
    7. Using the "background" Shorthand on our Project 00:02:19
    8. Styling Images 00:07:33
    9. Adding the Customers Page to our Website 00:03:19
    10. Working on the Image Layout 00:08:08
    11. Understanding Linear Gradients 00:06:17
    12. Applying Radial Gradients 00:05:41
    13. Stacking Multiple Backgrounds 00:04:51
    14. Understanding Filters 00:04:01
    15. Adding & Styling SVGs - The Basics 00:04:20
    16. Wrap Up 00:02:15
  8. Chapter 8 : Sizes & Units
    1. Module Introduction 00:02:36
    2. What's Wrong With Our Project Units? 00:05:22
    3. Where Units Matter 00:06:03
    4. An Overview of Available Sizes & Units 00:04:25
    5. Rules to Remember: Fixed Positioning & "%" 00:04:15
    6. Rules to Remember: Absolute Positioning & "%" 00:08:14
    7. Rules to Remember: Relative / Static Positioning & "%" 00:08:53
    8. Fixing the Height 100% Issue 00:12:02
    9. Defining the Font Size in the Root Element 00:02:19
    10. Using "min-width/height" & "max-width/height" 00:05:28
    11. Working with "rem" & "em" 00:12:47
    12. Adding "rem" to Additional Properties 00:08:17
    13. Finishing "rem" 00:05:21
    14. Understanding the Viewport Units "vw" &"vh" 00:09:48
    15. Choosing the Right Unit 00:05:30
    16. Using "auto" to Center Elements 00:01:43
    17. Cleaning Up our Code 00:01:06
    18. Wrap Up 00:04:24
  9. Chapter 9 : Working with JavaScript & CSS
    1. Module Introduction 00:01:16
    2. Adding a Modal 00:04:14
    3. Selecting & Manipulating Styles with JavaScript 00:10:34
    4. Adding an Event Listener 00:06:05
    5. Adding a Side Navigation Bar 00:07:14
    6. Opening and Closing the Hamburger Menu 00:03:57
    7. Manipulating Element Classes 00:06:40
    8. Understanding Property Notations 00:03:13
    9. Cleaning Up our Code 00:05:31
    10. Wrap Up 00:01:15
  10. Chapter 10 : Making our Website Responsive
    1. Module Introduction 00:01:45
    2. Why our Project Should Become Responsive 00:02:26
    3. Understanding Hardware Pixels vs. Software Pixels 00:10:29
    4. Comparing the Viewport Metatag (HTML) and Media Queries (CSS) 00:03:05
    5. Understanding the "viewport" Metatag 00:07:23
    6. Designing Websites "Mobile First" 00:01:55
    7. Adding our First Media Queries 00:12:52
    8. Things to Keep in Mind when Working with Media Queries 00:08:10
    9. Finding the Right Breaking Points 00:03:45
    10. Creating the Mobile First Design for our Plans 00:06:38
    11. Making the Plans Responsive 00:08:36
    12. Your Challenge 00:06:06
    13. Working with Logical Operators 00:08:14
    14. Improving the Customers Page 00:14:58
    15. Improving the Packages Page 00:05:41
    16. Cleaning Up the Navigation Bar 00:04:39
    17. Positioning our Footer Correctly 00:10:10
    18. Wrap Up 00:02:15
  11. Chapter 11 : Adding & Styling Forms
    1. Module Introduction 00:01:32
    2. Adding the Unstyled Form 00:02:37
    3. Page Initialization 00:06:35
    4. Understanding Advanced Attribute Selectors 00:06:03
    5. Working on the General Layout 00:07:16
    6. Restyling the Form Elements 00:06:30
    7. Styling the Checkbox 00:06:53
    8. Providing Validation Feedback 00:08:50
    9. Styling the Signup Button 00:03:42
    10. Wrap Up 00:01:30
  12. Chapter 12 : Working with Text and Fonts
    1. Module Introduction 00:01:20
    2. Comparing Generic Families & Font Families 00:02:57
    3. Understanding the Browser Settings 00:06:18
    4. Using the Default Font Families 00:06:54
    5. Understanding the "font-family" Syntax 00:06:19
    6. Working with Locally Saved Fonts 00:03:51
    7. Working with Google Fonts 00:10:29
    8. Understanding Font Faces & "font-style" 00:06:50
    9. Importing our Custom Fonts 00:09:04
    10. Understanding Font Formats 00:05:41
    11. Diving into Font Properties 00:03:10
    12. Adding "letter-spacing" 00:04:43
    13. Changing the Line Height 00:06:08
    14. Applying "text-decoration" & "text-shadow" 00:05:52
    15. Understanding the "font" Shorthand 00:08:40
    16. Loading Performance & "font-display" 00:09:49
    17. Wrap Up 00:03:48
  13. Chapter 13 : Adding Flexbox to our Project
    1. Optional: Expert Track Introduction 00:03:24
    2. Module Introduction 00:01:32
    3. How we Could Improve our Project 00:02:58
    4. Understanding Flexbox 00:03:18
    5. Creating a Flex Container 00:05:34
    6. Using "flex-direction" & "flex-wrap" 00:05:36
    7. Understanding the Importance of Main Axis & Cross Axis 00:07:28
    8. Working with "align-items" & "justify-content" 00:10:59
    9. And What About "align-content"? 00:02:41
    10. Improving the Navigation Bar with Flexbox 00:12:03
    11. Your Challenge - Working on the Mobile Navigation Bar 00:04:17
    12. Improving the Footer 00:05:36
    13. Adding Flexbox to the Customers Page 00:03:16
    14. Using the "order" Property for a Flex Item 00:06:08
    15. Working with "align-self" 00:02:45
    16. Understanding "flex-grow" 00:07:35
    17. Applying "flex-shrink" 00:03:12
    18. Comparing "flex-basis" vs "width" & "height" 00:08:36
    19. Wrap Up 00:03:53
  14. Chapter 14 : Using the CSS Grid
    1. Module Introduction 00:01:14
    2. What is the CSS Grid? 00:01:28
    3. Getting Started 00:02:23
    4. Turning a Container into a Grid 00:03:22
    5. Defining Columns & Rows 00:05:50
    6. Positioning Child Elements in a Grid 00:04:13
    7. Using "element-sizing", "repeat" & "minmax" 00:06:45
    8. Advanced Element Positioning 00:06:30
    9. Working with Named Lines 00:03:54
    10. Understanding Column & Row Shorthands 00:02:55
    11. Working with Gaps 00:02:33
    12. Adding Named Template Areas 00:06:40
    13. Creating Automatically Generated Grid Areas 00:07:11
    14. Using the Grid on our Project 00:09:11
    15. Working with "fit-content" 00:03:31
    16. Positioning Grid Elements 00:03:36
    17. Positioning the Entire Grid Content 00:03:17
    18. Positioning Elements Individually 00:01:35
    19. Understanding Responsive Grids 00:05:30
    20. Applying Autoflow 00:06:40
    21. Comparing the Explicit & Implicit Grid 00:02:31
    22. Understanding "auto-fill" & "auto-fit" 00:03:33
    23. Creating a Dense Grid 00:03:23
    24. Styling the Project Form with Grid 00:09:46
    25. Comparing Grid & Flexbox 00:02:28
    26. Next Steps 00:01:31
    27. Wrap Up 00:03:49
  15. Chapter 15 : Transforming Elements with CSS Transforms
    1. Module Introduction 00:00:31
    2. Rotating Elements and setting transform-origin 00:03:46
    3. Using Rotate and Translate 00:04:58
    4. Working with "skew" and "scale" 00:06:18
    5. Applying Transformation Shorthands 00:02:24
    6. Rotating Elements in 3 Dimensions 00:04:19
    7. Understanding the "perspective" Property 00:03:38
    8. Moving Elements along the Z-Axis with "translateZ" 00:03:54
    9. Rotating the Container with "transform style" 00:03:44
    10. Flipping Elements & "backface-visibility" 00:01:16
    11. Wrap Up 00:01:15
  16. Chapter 16 : Transitions & Animations in CSS
    1. Module Introduction 00:00:22
    2. Understanding and Applying Transitions 00:07:23
    3. Working with Timing Functions 00:02:50
    4. Transitions & "display" 00:06:12
    5. Using CSS Animations 00:09:01
    6. Adding Multiple Keyframes 00:03:22
    7. Adding Animations to our Customers Page 00:03:59
    8. Using JavaScript Animation Event Listeners 00:03:25
    9. Wrap Up 00:01:35
  17. Chapter 17 : Writing Future-Proof CSS Code
    1. Module Introduction 00:00:35
    2. CSS Modules & Their Working Groups 00:01:55
    3. Using CSS Variables 00:07:32
    4. Understanding & Using Vendor Prefixes 00:04:48
    5. Which Prefixes Should You Use? 00:02:58
    6. Detecting Browser Support with @supports 00:05:10
    7. Polyfills 00:02:46
    8. Eliminating Cross-Browser Inconsistencies 00:02:59
    9. How to Name CSS Classes 00:04:53
    10. Vanilla CSS vs Frameworks 00:08:37
    11. Wrap Up 00:04:16
  18. Chapter 18 : Introducing Sass (Syntactically Awesome Style Sheets)
    1. Module Introduction 00:00:43
    2. What is Sass & Scss? 00:03:31
    3. Installing Sass 00:04:25
    4. Things to be improved with Sass 00:01:33
    5. Nesting Selectors 00:06:35
    6. Adding Nested Properties 00:01:28
    7. Understanding Variables 00:03:06
    8. Storing Lists & Maps in Variables 00:05:59
    9. Built-In Functions 00:03:19
    10. Adding Simple Arithmetics 00:02:25
    11. Adding Better Import and Partials 00:04:46
    12. Improving Media Queries 00:02:24
    13. Understanding Inheritance 00:03:33
    14. Adding Mixins 00:06:45
    15. Using the Ampersand Operator 00:02:57
    16. Wrap Up 00:01:14
  19. Chapter 19 : Course Roundup
    1. Course Roundup 00:01:57

Product information

  • Title: CSS - The Complete Guide (incl. Flexbox, Grid and Sass)
  • Author(s): Manuel Lorenz, Maximilian Schwarzmüller
  • Release date: November 2018
  • Publisher(s): Packt Publishing
  • ISBN: 9781789954692