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

Eduonix

Learn to write codes in CSS programming language to develop your web development skills.

Online

₹ 199 955

particular

details

                                    Medium of instructions
                                    English

                                    Mode of learning
                                    Self study

                                    Mode of Delivery
                                    Video and Text Based

Section 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

Section 2 : 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 -
Understanding the "Cascading" Style & Specifity
Understanding Inheritance
Adding Combinators
Theory Time - Combinators
Summarizing Properties & Selectors
Wrap Up

Section 3 : Diving Deeper into CSS

Module
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
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

Section 4 : More on Selectors & CSS Features

Module
Using Multiple CSS Classes & Combined Selectors
Classes or IDs?
(Not) using !important
Selecting the Opposite with :not()
CSS & Browser Support
Wrap Up

Section 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

Section 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

Section 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

Section 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

Section 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

Section 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

Section 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

Section 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

Section 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

Section 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 Area
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

Section 15 : Transforming Elements with CSS Transforms

Module Introduction
Rotating Elements and setting transform-
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

Section 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

Section 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

Section 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

Section 19 : Course Roundup

Course Roundup

Popular Courses

Popular Platforms

Popular Searches

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

Online

₹ 199 955

Quick Facts

Course overview

The highlights

Program offerings

Course and certificate fees

Fees information

certificate availability

Who it is for

What you will learn

The syllabus

Section 1 : Getting Started

Section 2 : Diving Into the Basics of CSS

Section 3 : Diving Deeper into CSS

Section 4 : More on Selectors & CSS Features

Section 5 : Practicing the Basics

Section 6 : Positioning Elements with CSS

Section 7 : Understanding Background Images & Images

Section 8 : Sizes & Units

Section 9 : Working with JavaScript & CSS

Section 10 : Making our Website Responsive

Section 11 : Adding & Styling Forms

Section 12 : Working with Text and Fonts

Section 13 : Adding Flexbox to our Project

Section 14 : Using the CSS Grid

Section 15 : Transforming Elements with CSS Transforms

Section 16 : Transitions & Animations in CSS

Section 17 : Writing Future-Proof CSS Code

Section 18 : Introducing Sass (Syntactically Awesome Style Sheets)

Section 19 : Course Roundup

Articles

Popular Articles

Latest Articles

Trending Courses

Popular Courses

Popular Platforms

Learn more about the Courses

Thank You!

Download the Careers360 App on your Android phone