Transitions & Animations in CSS | CSS - The Complete Guide (incl. Flexbox, Grid and Sass)

Book Overview & Buying
Table Of Contents

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

By : Academind by Maximilian Schwarzmüller GmbH

5 (2)

Buy this Video

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

5 (2)

By: Academind by Maximilian Schwarzmüller GmbH

Buy this Video

Overview of this book

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

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

Diving Into the Basics of CSS

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

Wrap Up

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Course Roundup

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

By : Academind by Maximilian Schwarzmüller GmbH

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

By: Academind by Maximilian Schwarzmüller GmbH

Overview of this book

Confirmation

Buy this book with your credits?

Submit Your Feedback

Create a Free Account To Continue Reading

Sign in to activate your 7-day free access