About
LearnDesk
Learn  
Topics
Teach
  Teach Online
  Schedule
  Items
  Billing
  Users
  Marketing
  Analytics
  Settings
  Change School
Account
 

CSS: The Complete Guide: Flexbox, Grid and, Sass

Getting Started
Introduction
What is CSS?
CSS History, Present and 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 Course Project Setup
Applying Additional Styles and Importing Google Fonts
Theory Time – Selectors
Understanding the "Cascading" Style and Specificity
Understanding Inheritance
Adding Combinators
Theory Time – Combinators
Summarizing Properties and Selectors
Wrap Up
Diving Deeper into CSS
Module Introduction
Introducing the CSS Box Model
Understanding the Box Mode
Understanding Margin Collapsing and Removing Default Margins
Theory Time - Working with Shorthand Properties
Applying Shorthands in Practice
Diving Into the Height and Width Properties
Understanding Box Sizing
Adding the Header to our Project
Understanding the Display Property
Applying the Display Property and Styling our Navigation Bar
Understanding an Unexpected "inline-block" Behaviour
Working with "text-decoration" and "vertical-align"
Styling Anchor Tags
Adding Pseudo Classes
Theory Time - Pseudo Classes and Pseudo Elements
Grouping Rules
Working with "font-weight" and "border"
Adding and Styling a CTA-Button
Adding a Background Image to our Project
Properties Worth to Remember
Wrap Up
More on Selectors and CSS Features
Module Introduction
Using Multiple CSS Classes and Combined Selectors
Classes or IDs?
(Not) using. Important
Selecting the Opposite with: not()
CSS and 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 and 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 and Images
Optional: Advanced Track Introduction
Module Introduction
Understanding "background-size"
Working with "background-position"
The "background" Shorthand – Theory
Applying "background" Origin, Clip and 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 and Styling SVGs - The Basics
Wrap Up
Sizes and Units
Module Introduction
What's Wrong With Our Project Units?
Where Units Matter
An Overview of Available Sizes and 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" and "max-width/height"
Working with "rem" and "em"
Adding "rem" to Additional Properties
Finishing "rem"
Understanding the Viewport Units "vw" and "vh"
Choosing the Right Unit
Using "auto" to Center Elements
Cleaning Up our Code
Wrap Up
Working with JavaScript and CSS
Module Introduction
Adding a Modal
Selecting and 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
Time for some theory about the property syntax.
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 and 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 and 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 and "font-style"
Importing our Custom Fonts
Understanding Font Formats
Diving into Font Properties
Adding "letter-spacing"
Changing the Line Height
Applying "text-decoration" and "text-shadow"
Understanding the "font" Shorthand
Loading Performance and "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" and "flex-wrap"
Understanding the Importance of Main Axis and Cross Axis
Working with "align-items" and "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" and "height"
Wrap Up
Using the CSS Grid
Module Introduction
What is the CSS Grid?
Getting Started
Turning a Container into a Grid
Defining Columns and Rows
Positioning Child Elements in a Grid
Using "element-sizing", "repeat" and "minmax"
Advanced Element Positioning
Working with Named Lines
Understanding Column and 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 and Implicit Grid
Understanding "auto-fill" and "auto-fit"
Creating a Dense Grid
Styling the Project Form with Grid
Comparing Grid and 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 and "backface-visibility"
Wrap Up
Transitions and Animations in CSS
Module Introduction
Understanding and Applying Transitions
Working with Timing Functions
Transitions and "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 and Their Working Groups
Using CSS Variables
Understanding and 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 and Scss?
Installing Sass
Things to be improved with Sass
Nesting Selectors
Adding Nested Properties
Understanding Variables
Storing Lists and 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
Course Roundup

Using the CSS Grid

CSS: The Complete Guide: Flexbox, Grid and, Sass
By: Packt Publishing
Share the link to this page
Copied
  Twitter
  Email
Add the class to your calendar
Print
  Completed

In this section, we explore CSS GRID features.

  • Module Introduction
  • What is the CSS Grid?
  • Getting Started
  • Turning a Container into a Grid
  • Defining Columns and Rows
  • Positioning Child Elements in a Grid
  • Using "element-sizing", "repeat" and "minmax"
  • Advanced Element Positioning
  • Working with Named Lines
  • Understanding Column and 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 and Implicit Grid
  • Understanding "auto-fill" and "auto-fit"
  • Creating a Dense Grid
  • Styling the Project Form with Grid
  • Comparing Grid and Flexbox
  • Next Step
We'll cover the following topics in this section:
Previous
Next
Home
Search
Saved
Trending Classes
Filter
The latest and the best classes on LearnDesk
Filter by Interest
Close
All Topics
Academics
Business
Creative
Health and Fitness
LifeStyle
Personal Development
Software
Admissions
Engineering
Hardware
Hospitality
Humanities
Chinese
Languages
Maths
Other
Pharma
Research
Science
Social Science
Teaching
Test Preparation
K-12
School
Accounting
Advertising
Analysis
Analytics
Business Communication
eCommerce
Entrepreneurship
Finance
Finance - India
Freelancing
Internet of Things
Digital Transformation
Human Resources
Industry
Management
Marketing
Media
Operations
Other
Project Management
Public Relations
Real Estate
Sales
Strategy
Arts & Crafts
Audio Editing
Audio Production
Dance
Design
Film Production
Music
Photography
Video Production
Writing
Dieting
Fitness
Food Safety
Games
Medical
Medical Professionals
Meditation
Mental Health
Pregnancy
Safety & First Aid
Self Defense
Sports
Beauty & Makeup
Food
Fashion
Gaming
Home Improvement
Parenting
Pet Care & Training
Relationships
Sustainable Living
Travel
Career Development
Learning
Religion and Spirituality
Self-Improvement
Accounting
Amazon Web Services
App Development
Continuous Integration
Backup Software
Business Automation
Computational Fluid Dynamics
Business Intelligence
Computer Aided Design (CAD)
Content Management System
Customer Relationship Management
Database
Data Mining
E-Commerce
Enterprise Asset Management
Enterprise Resource Planning
Game Development
Google Cloud
Linux
Artificial Intelligence
Machine Learning
Master Data Management
Microsoft
Music Software
Network and Security
Open Source
Operating System
Other
Process Management
Productivity Software
Programming Languages
Robotics
Supply Chain Management
Testing
Teaching
Web Development

Sign Up

Sign Up

Share

Share with friends, get 20% off
Invite your friends to LearnDesk learning marketplace. For each purchase they make, you get 20% off (upto $10) on your next purchase.