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

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

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

Watch it now on the O’Reilly learning platform with a 10-day free trial.

O’Reilly members get unlimited access to books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.

Start your free trial

Video description

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!

What You Will Learn

  • Know the basics of selectors and combinators, and how you set up styling rules in general
  • Properties, values, and declarations
  • How specify and inheritance work and why it s called "Cascading Style Sheets"
  • Important theoretical concepts such as the "Box Model"
  • How the default position of elements can be changed
  • Styling backgrounds (such as 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
  • Work with text, fonts, and text styles
  • Flexbox! How it works and how to use it
  • Use the CSS Grid and see how it differs from Flexbox
  • Transform and animate HTML elements with the help of CSS
  • Write future-proof CSS with features such as CSS variables or best-practice class names
  • Use Sass and know what it’s all about

Audience

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.

About The Author

Academind by Maximilian Schwarzmüller:

Academind GmbH

Bundling the courses and the knowledge of successful instructors, Academind strives to deliver high-quality online education. The platform covers topics such as web development, data analysis, and more in a fun and engaging way.

Maximilian Schwarzmüller

Since the age of 13, he has never stopped learning new programming skills and languages. In his early days, he started creating websites simply for fun. This passion has remained and shaped his decision to work as a freelance web developer and consultant. Although he started web development on the backend (PHP with Laravel and NodeJS), he has progressed to becoming a front-end developer using modern frameworks such as React, Angular, and VueJS 2 in many projects.

The most rewarding experience for him is to see how people find new and better jobs, build exciting web applications, acquire amazing projects, or simply enjoy their hobby with the help of his content.

Table of contents

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

Product information

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