Advanced CSS: Functions, Selector ,Grid, Flex, Sass And More

Name: Advanced CSS: Functions, Selector ,Grid, Flex, Sass And More
Rating: 4.4 (36 reviews)

Learn CSS Functions, Variable, Selector ,Units, Grid, Flex, Filter, Animation, Pseudo-class, Nesting And Sass

Created byJayanta Sarkar

Last updated 12/2024

English

What you'll learn

CSS Units (em,rem,vh, vw,vmax,vmin and more) Tutorial
CSS Variables - var() Tutorial
CSS Functions()
CSS Calc() Min() Max() Clamp() Function Tutorial
CSS Advance Selectors
CSS Pseudo-Classes Selectors Tutorial
CSS Grid
CSS Flexbox
CSS filter
CSS 2D and 3D transformation
CSS perspective
CSS animation
CSS preprocessor Sass

Course content

17 sections • 100 lectures • 11h 5m total length

Introduction4:16
complete course overview and introduction

CSS Units Part 113:11
In this tutorial you are going to learn css length units .You can learn different type of measurement units in css like pixel , percentage, em, rem, vh, vw, vmax, vmin.Difference between absolute size units and relative size units.
CSS Units Part 210:40
In this tutorial, you are going to learn CSS length units . You can learn different type of measurement units in css like pixel , percentage, em, rem, vh, vw, vmax, vmin.Difference between absolute size units and relative size units.
which is not a relative unit following one

CSS Calc() function12:11
In this tutorial you are going to learn css calc function .You can learn about the css3 calc function for calculate the mathematics equations to make a web page works more responsive.This tutorial gave you some useful examples to use on web page.
CSS Min() function10:18
In this tutorial you will learn css min, max and clamp function tutorial .You can learn how to calculate minimum value, maximum value with css min and max functions .
CSS Max() function13:20
In this tutorial you will learn css min, max and clamp function tutorial .You can learn how to calculate minimum value, maximum value with css min and max functions .
CSS Clamp() function6:35
In this tutorial you will learn css min, max and clamp function tutorial .You can learn how to calculate minimum value, maximum value with css min and max functions .
CSS Attr() function3:07

Part 110:59
In this tutorial you will learn css advanced pseudo classes selector You can learn different type of css pseudo classes to build most advanced web design easily.Here is a list of pseudo class selectors which you are going to learn in this video tutorial
Part 212:35
In this tutorial you will learn css advanced pseudo classes selector.You can learn different type of css pseudo classes to build most advanced web design easily.Here is a list of pseudo class selectors which you are going to learn in this video tutorial
Part 314:16
In this tutorial you will learn css advanced pseudo classes selector.You can learn different type of css pseudo classes to build most advanced web design easily.Here is a list of pseudo class selectors which you are going to learn in this video tutorial
Part 48:46
CSS Focus-within Pseudo Class Tutorial3:18
CSS has Pseudo Class8:40

CSS Pseudo Element Part 16:33
In this tutorial, you will learn CSS pseudo-element selectors.You can learn different types of CSS pseudo-elements like first-letter first-line placeholder selection
CSS Before and After Pseudo Elements4:32
In this tutorial, you will learn css before and after the pseudo-elements selector tutorial. You can learn also learn css content property with before after pseudo elements.
CSS3 ::Marker Pseudo Element Tutorial2:31

CSS Grid Layout Introduction3:14
n this tutorial you will learn what is css grid .You can learn about the grid terminology and how css grid is useful for modern responsive web design.This css grid tutorial course have a full explanation of every new css property and functions related to css grid.
CSS Grid Building with Rows & Columns Tutorial11:58
In this tutorial you will learn how to make a layout with CSS grid . You can learn about two new css properties grid-template-columns and css grid-template-rows to make two dimension layout.
CSS Grid-Gap Tutorial3:28
In this tutorial you will learn CSS grid-gap property .You can use this property to give a gap between grid item rows and columns with three new properties css grid-row-gap, grid-column-gap, grid-gap.
CSS Grid Items Positioning Tutorial7:49
In this tutorial you will learn css grid item positioning .You can learn six new css grid properties to handle the position of grid items in this video tutorial like : grid-row-start grid-row-end grid-row grid-column-start grid-column-end grid-column grid-area
challenge 10:56
CSS Grid Items Spanning Tutorial8:27
In this tutorial you will learn css grid items spanning .You can how to increase the width or height of grid cell other than normal grid structure.
challenge 20:58
CSS Grid Lines Naming Tutorial7:17
In this tutorial you will learn css grid lines naming .You can learn how to make a complex css grid layout with naming the grid lines.
CSS Grid Area Naming Tutorial6:57
In this tutorial you will learn css grid-template-areas and grid-area property .You can learn how to naming grid areas and positioning the grid items.
CSS Grid MinMax function Tutorial8:07
In this tutorial you will learn css minmax function and min-content , max-content.You can learn to make responsible layout with css grid with this minmax function with min-content and max-content features.
CSS Grid Implicit & Explicit Grid Tutorial5:12
In this tutorial you will learn css implicit grid and explicit grid .You can learn three new css grid properties related to implicit grid : grid-auto-rows, grid-auto-columns and grid-auto-flow.
CSS Grid Items Alignment Tutorial8:52
In this tutorial you will learn css grid items alignment .You can learn new css grid properties for align grid items like : align-items, justify-items, place-items, align-self, justify-self, place-self. With these properties you can easily align grid items vertically and horizontally.
CSS Grid Tracks Alignment Tutorial7:57
In this tutorial you will learn css grid tracks alignment .You can learn new css properties to align grid tracks like align-content, justify-content, place-content. By using this you can easily align vertically or horizontally your grid tracks.
CSS Grid Auto-Fill & Auto-Fit Tutorial6:16
In this tutorial you will learn css auto-fill and auto-fit values.You can learn how to make responsive layout without media queries with using auto-fill and auto-fit.
CSS Grid Fit-Content Tutorial3:29
In this tutorial you will learn css fit-content values .You can learn how to make shrinkable and maximum expandable element width with this new CSS3 property value fit-content.
CSS Grid Order Property Tutorial3:13
In this tutorial you will learn CSS grid Order property .You can learn how to reorder the grid items while using media queries with this new CSS3 property "Order".
CSS Grid - Nested Grids Tutorial4:21
In this tutorial you will learn css nested grids .You can learn how to make a nested grid within other grid container.
CSS Grid - Overlapping Grid Items Tutorial6:03
In this tutorial, you will learn css grid items overlapping. You can learn how to overlap the grid item to one another like position absolute and change the stact order with z-index.

Requirements

basic knowledge about CSS and HTML

Description

The "Advanced CSS" course is designed to take your CSS skills to the next level, providing you with a comprehensive understanding of the most powerful and cutting-edge features in modern web design. This course delves into the depths of CSS, exploring advanced techniques and concepts that will empower you to create visually stunning, dynamic, and responsive web layouts. Through a combination of theoretical knowledge and practical exercises, you will gain the expertise needed to tackle complex web design challenges with confidence.

Course Objectives: By the end of this course, students will:

Gain a deep understanding of CSS variables, units, and functions, enabling them to write cleaner and more maintainable CSS code.
Master the art of selecting and targeting HTML elements efficiently with CSS selectors and pseudo-classes, enhancing control over page elements.
Create sophisticated and flexible page layouts using CSS Grid and Flexbox, ensuring seamless responsiveness across various devices and screen sizes.
Explore the creative potential of CSS filters, transforms, and perspectives to add captivating visual effects to web elements.
Learn to bring web pages to life with CSS animations, captivating users and enhancing user experience.
Understand the concept of CSS nesting, simplifying code structure, and making it more organized.
Harness the power of SASS, a popular CSS preprocessor, to streamline and optimize CSS workflow.

Course Outline:

CSS Variables
- Introduction to CSS variables and their advantages
- Defining variables and using them across stylesheets
- Dynamic theming with CSS variables
- Best practices for using CSS variables effectively
CSS Units
- Understanding different CSS units (e.g., pixels, percentages, em, rem)
- Using relative units for responsive design
- Utilizing viewport units for fluid layouts
- Combining units for optimal design results
CSS Functions
- Exploring CSS functions like calc(), clamp(), and min()/max()
- Creating custom functions with CSS variables
- Applying functions for dynamic styles and layout adjustments
CSS Selectors and Pseudo-classes
- In-depth understanding of CSS selectors (e.g., element, class, ID, attribute selectors)
- Targeting elements with pseudo-classes (e.g., :hover, :active, :nth-child)
- Advanced selector combinations and specificity rules
- Practical examples and use cases
CSS Grid
- Building complex layouts with CSS Grid
- Creating responsive grids for various screen sizes
- Grid alignment and positioning techniques
- Nested grids and grid-based design patterns
CSS Flexbox
- Mastering Flexbox concepts and terminology
- Creating flexible and adaptive page structures
- Aligning and justifying content within flex containers
- Combining Flexbox with other layout techniques
CSS Filters, Transforms, and Perspective
- Applying visual effects with CSS filters (e.g., blur, grayscale, contrast)
- Transforming elements in 2D and 3D space
- Understanding the perspective and transforming 3D objects
- Creating engaging user interactions with transitions
CSS Animation
- CSS animation properties and keyframes
- Designing smooth and visually appealing animations
- Combining animations with other CSS features
- Performance considerations and best practices
CSS Nesting
- Organizing CSS rules with nesting techniques
- Avoiding specificity issues with nested styles
- Using the & operator for concise and readable code
CSS Preprocessor SASS

Introduction to SASS and its benefits
Variables, mixins, and functions in SASS
Nesting and inheritance in SASS
Compiling SASS into standard CSS

Course Methodology: This course will employ a combination of instructional lectures, practical hands-on exercises, and real-world projects to reinforce the concepts taught. Students will have access to a development environment and code editor to experiment with the techniques covered in the course. The instructor will provide guidance, feedback, and support throughout the learning journey.

Who Should Enroll: The "Advanced CSS" course is ideal for web developers, designers, and anyone seeking to enhance their front-end web development skills. Students should have a solid understanding of HTML and CSS fundamentals before enrolling in this course.

Who this course is for:

Front end web developer and designer

Advanced CSS: Functions, Selector ,Grid, Flex, Sass And More

What you'll learn

Explore related topics

Course content

Introduction1 lecture • 4min

CSS Units (em,rem,vh, vw,vmax,vmin and more) Tutorial2 lectures • 24min

CSS Variables - var() Tutorial1 lecture • 11min

CSS Functions()5 lectures • 46min

CSS Advance Selectors2 lectures • 30min

CSS Pseudo-Classes Selectors Tutorial6 lectures • 59min

CSS Pseudo Element Selectors Tutorial3 lectures • 14min

CSS3 :is() Pseudo Class Tutorial1 lecture • 9min

CSS Fullscreen Pseudo class Tutorial1 lecture • 7min

CSS Grid18 lectures • 1hr 45min

Requirements

Description

Who this course is for: