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

Focused View

Jayanta Sarkar

10:32:32

53 View

1. Introduction

1. Introduction.mp4

04:16

2. CSS Units (em,rem,vh, vw,vmax,vmin and more) Tutorial

1.1 index.html

1. CSS Units Part 1.mp4

13:11

2.1 index2.html

2. CSS Units Part 2.mp4

10:40

3. which is not a relative unit following one.html

3. CSS Variables - var() Tutorial

1.1 index.html

1. CSS Variables - var() Tutorial.mp4

10:54

4. CSS Functions()

1.1 index.html

1. CSS Calc() function.mp4

12:11

2.1 index.html

2. CSS Min() function.mp4

10:18

3.1 index2.html

3. CSS Max() function.mp4

13:20

4.1 index3.html

4. CSS Clamp() function.mp4

06:35

5. CSS Advance Selectors

1.1 index.html

1.2 index2.html

1.3 index3.html

1.4 index4.html

1. Combinator Selectors.mp4

13:46

2.1 index.html

2. Attribute Selectors.mp4

16:06

6. CSS Pseudo-Classes Selectors Tutorial

1.1 index.html

1. Part 1.mp4

10:59

2.1 index2.html

2.2 lang.html

2.3 link.html

2. Part 2.mp4

12:35

3.1 from.html

3.2 index.html

3. Part 3.mp4

14:16

4.1 from.html

4. Part 4.mp4

08:46

7. CSS Pseudo Element Selectors Tutorial

1.1 from.html

1.2 index.html

1. CSS Pseudo Element Part 1.mp4

06:33

2.1 index2.html

2. CSS Before and After Pseudo Elements.mp4

04:32

8. CSS Grid

1. CSS Grid Layout Introduction.mp4

03:14

2.1 index.html

2. CSS Grid Building with Rows & Columns Tutorial.mp4

11:58

3.1 index.html

3. CSS Grid-Gap Tutorial.mp4

03:28

4.1 index.html

4. CSS Grid Items Positioning Tutorial.mp4

07:49

5.1 index ans.html

5.2 index.html

5. challenge 1.mp4

00:56

6.1 index.html

6. CSS Grid Items Spanning Tutorial.mp4

08:27

7.1 Challenge 2.html

7.2 index.html

7. challenge 2.mp4

00:58

8.1 index.html

8. CSS Grid Lines Naming Tutorial.mp4

07:17

9.1 Grid Area.html

9.2 index.html

9. CSS Grid Area Naming Tutorial.mp4

06:57

10.1 index.html

10. CSS Grid MinMax function Tutorial.mp4

08:07

11.1 index.html

11. CSS Grid Implicit & Explicit Grid Tutorial.mp4

05:12

12.1 index.html

12. CSS Grid Items Alignment Tutorial.mp4

08:52

13.1 index.html

13. CSS Grid Tracks Alignment Tutorial.mp4

07:57

14.1 index.html

14. CSS Grid Auto-Fill & Auto-Fit Tutorial.mp4

06:16

15.1 index.html

15. CSS Grid Fit-Content Tutorial.mp4

03:29

16. CSS Grid Order Property Tutorial.mp4

03:13

17.1 index.html

17. CSS Grid - Nested Grids Tutorial.mp4

04:21

18.1 index.html

18. CSS Grid - Overlapping Grid Items Tutorial.mp4

06:03

9. CSS Flexbox

1.1 index.html

1. CSS Flexbox Introduction Tutorial.mp4

03:31

2.1 index.html

2. CSS Flexbox Flex-Direction Tutorial.mp4

02:45

3.1 index.html

3. CSS Flex-Wrap & Flex-Flow Tutorial.mp4

05:27

4.1 index.html

4. CSS Flexbox Justify-Content Tutorial.mp4

02:56

5.1 index.html

5. CSS Flexbox Align-Items Tutorial.mp4

04:38

6.1 index.html

6. CSS Flexbox Align-Content Tutorial.mp4

03:34

7.1 index.html

7. CSS Flexbox Align-Self Tutorial.mp4

03:17

8.1 index.html

8. CSS Flexbox Order Tutorial.mp4

03:12

9.1 index.html

9. CSS Flexbox Flex-Grow Tutorial.mp4

02:51

10.1 index.html

10. CSS Flexbox Flex-Basis Tutorial.mp4

05:38

11.1 index.html

11. CSS Flexbox Flex-Shrink Tutorial.mp4

06:19

12.1 index.html

12. CSS Flexbox with Margin Auto Tutorial.mp4

03:07

13.1 index.html

13. CSS Flexbox - Nested Flex Tutorial.mp4

03:48

14.1 index.html

14.2 main.zip

14. Flex Project 1.mp4

19:45

10. CSS Filter Tutorial

1.1 image.zip

1.2 index.html

1. CSS Filter Part 1.mp4

06:40

2.1 image.zip

2.2 index.html

2. CSS Filter Tutorial Part 2.mp4

05:16

11. CSS Transition Tutorial

1.1 demo.html

1. CSS Transition Tutorial.mp4

07:21

2.1 demo.html

2.2 index.html

2. CSS Transition Timing Function Tutorial.mp4

07:48

3.1 index.html

3. CSS Transition Delay Tutorial.mp4

03:25

12. CSS Transform 2D and 3D Tutorial

1.1 demo.html

1.2 index.html

1. CSS Transform 2D Tutorial.mp4

05:23

2.1 index2.html

2. CSS Transform 2D Scale.mp4

03:49

3.1 index3.html

3. CSS Transform 2D Skew.mp4

07:06

4.1 index4.html

4. CSS Transform 2D Matrix.mp4

04:30

5.1 demo.html

5.2 index.html

5. CSS Transform Rotate 3D Tutorial.mp4

10:26

6.1 index.html

6. CSS Transform 3D Tutorial Translate.mp4

04:11

7.1 index.html

7. CSS Transform 3D Tutorial Scale.mp4

03:47

13. CSS Perspective, Transform-Style ,Backface-Visibility Tutorial

1.1 index.html

1. CSS Perspective Tutorial.mp4

07:47

2.1 index.html

2. CSS Transform-Style Tutorial.mp4

04:54

3.1 index.html

3. CSS Backface-Visibility Tutorial.mp4

03:42

14. CSS Animation Tutorial

1.1 demo.html

1.2 index.html

1. CSS Animation Tutorial Part1.mp4

08:37

2.1 index.html

2. CSS Animation Tutorial Part2.mp4

08:05

3.1 index.html

3. CSS Animation-Fill-Mode Tutorial.mp4

06:51

4. CSS Animation-Play-State-Mode Tutorial.mp4

02:59

15. Sass

1. Sass Introduction Tutorial.mp4

07:12

2. Download and Install sass compiler.mp4

06:10

3.1 style.zip

3.2 style.css.zip

3.3 style.zip

3. Sass Variables Tutorial.mp4

06:48

4.1 style.zip

4.2 style.css.zip

4.3 style.zip

4. Sass Nesting Tutorial.mp4

06:35

5.1 content.zip

5.2 footer.zip

5.3 header.zip

5.4 media.zip

5.5 sidebar.zip

5.6 variables.zip

5.7 index.html

5.8 style.zip

5.9 style.css.zip

5.10 style.zip

5. Sass Partials & Imports Tutorial.mp4

09:48

6.1 index.html

6.2 style.zip

6.3 style.css.zip

6.4 style.zip

6. Sass Mixins Tutorial.mp4

06:28

7.1 index.html

7.2 style.zip

7.3 style.css.zip

7.4 style.zip

7. Sass Extend Tutorial.mp4

07:14

8.1 style.zip

8.2 style.css.zip

8.3 style.zip

8. Sass Operators Tutorial.mp4

12:18

9.1 style.zip

9.2 style.css.zip

9.3 style.zip

9. Sass Operators Tutorial - II.mp4

05:43

10.1 style.zip

10.2 style.css.zip

10.3 style.zip

10. Sass Interpolation Tutorial.mp4

06:37

11.1 style.zip

11.2 style.css.zip

11.3 style.zip

11. Sass Functions Tutorial.mp4

05:59

12.1 style.zip

12.2 style.css.zip

12.3 style.zip

12. Sass Number Functions Tutorial.mp4

08:31

13.1 style.zip

13.2 style.css.zip

13.3 style.zip

13. Sass String Functions Part 1.mp4

04:42

14. Sass String Functions Part 2.mp4

03:23

15.1 index.html

15.2 style.zip

15.3 style.zip

15. Sass Color Functions Tutorial.mp4

09:27

16. Sass List Functions Tutorial Part 1.mp4

09:16

17. Sass List Functions Tutorial Part 2.mp4

06:14

18. Sass Selector Functions Tutorial.mp4

06:52

19.1 style.zip

19.2 style.zip

19. Sass Selector Functions Tutorial Part 2.mp4

04:14

20. Sass Selector Functions Tutorial Part 3.mp4

03:40

21.1 style.zip

21.2 style.zip

21. Sass Map Functions Tutorial Part1.mp4

05:11

22. Sass Map Functions Tutorial Part2.mp4

04:13

23.1 style.zip

23.2 style.zip

23. Sass Introspection Functions Tutorial.mp4

05:35

24.1 style.zip

24.2 style.zip

24. Sass @content Directive Tutorial.mp4

06:58

25.1 style.zip

25. Sass @content Directive Tutorial 2.mp4

05:16

26.1 style.zip

26. Sass @media Directives Tutorial.mp4

04:51

27.1 style.zip

27. Sass @at-root Directives Tutorial.mp4

06:20

Description

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

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

Who is this for?

Front end web developer and designer

What You Need to Know?

basic knowledge about CSS and HTML

More details

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

User Reviews

Rating

average 0

Total votes0

Focused display

Hi, I am Jayanta! I am a Python programmer and web developer. I have worked with companies both as an employee and self-employed. I have used Python language to develop both website and web applications.I will teach you how you can use Python, just like I do. The easiest way to learn something is to work on it. The more you exercise on this subject, the more you will learn. I take care to explain the programming concepts assuming my students do not have a computer science background. Indeed, you do not need a computer science degree to become a programmer.I graduated with a computer science technology from the University of North Bengal in India. Try out my courses, and you will be in for an exciting ride.

Udemy

View courses Udemy

Students take courses primarily to improve job-related skills.Some courses generate credit toward technical certification. Udemy has made a special effort to attract corporate trainers seeking to create coursework for employees of their company.