Advanced CSS and Sass: Flexbox, Grid, Animations and More is one of the bestselling CSS courses on Udemy. This course is pursued by students who already have a basic knowledge of CSS, animations and design effects. Udemy is currently offering this course for up to 87% off i.e. INR 455 (INR 3,499).
This course will help the learners to know about advanced and modern CSS including CSS Grids, Responsive Design, Introduction to Sass, etc.
Learning Outcomes
- Modern CSS techniques to create better designs & effects
- Advanced CSS animations with @keyframes, animation and transition
- CSS Architecture: Component-based design, BEM, writing reusable code, etc.
- Flexbox layouts, CSS Grid layouts
- Using Sass in real-world projects
- Advanced responsive design
- Responsive images in HTML and CSS
- SVG images and videos in HTML and CSS
- NPM ecosystem, development workflows and building processes
Course Highlights
| Key Highlights | Details |
|---|---|
| Course Name | Advanced CSS and Sass: Flexbox, Grid, Animations and More |
| Duration | 28 Hours |
| Rating | 4.8/5 |
| Student Enrollment | 1.85 lakhs |
| Instructor | Jonas Schmedtmann (Web Developer, Designer, and Teacher) |
| Course Level (Resources Required) | Advanced (Students should know how to code in HTML & CSS) |
| Coding Exercises | Yes |
| Projects | Yes |
| Total Student Reviews | 0.39 lakhs |
| Merits |
|
| Shortcomings |
|
Course Content
| S.No. | Module (Duration) | Topics |
|---|---|---|
| 1. | Natours Project – Setup and First Step (1 hour 36 minutes) | Building the Header – Part 1 |
| Building the Header – Part 2 | ||
| Building a Complex Animated Button – Part 1 | ||
| Building a Complex Animated Button – Part 2 | ||
| 2. | How CSS Works: A Look Behind the Scenes (1 hour 30 minutes) | Three Pillars of Writing Good HTML and CSS (Never Forget Them!) |
| How CSS is Parsed, Part 1: The Cascade and Specificity | ||
| How CSS is Parsed, Part 2: Value Processing | ||
| How CSS is Parsed, Part 3: Inheritance | ||
| Converting px to rem: An Effective Workflow | ||
| 3. | Introduction to Sass and NPM (1 hour 33 minutes) | What is Sass? |
| First Steps with Sass: Mixins, Extends, and Functions | ||
| A Brief Introduction to the Command Line | ||
| 4. | Natours Project – Using Advanced CSS and Sass (Part 2) (7 hours 45 minutes) | Converting Our CSS Code to Sass: Variables and Nesting |
| 5. | Natours Project – Advanced Responsive Design (Part 3) (3 hours 28 minutes) | Writing Media Queries – Layout, About and Features Sections |
| Writing Media Queries – Tours, Stories and Booking Sections | ||
| 6. | Trillo Project (5 hours) | Why Flexbox: An Overview of the Philosophy Behind Flexbox |
| A Basic Intro to Flexbox: Adding More Flex Items | ||
| Building the User Reviews Section | ||
| 7. | A Quick Introduction to CSS Grid Layout (2 hours 23 minutes) | Why CSS Grid: A Whole New Mindset |
| Getting Familiar with the fr Unit | ||
| Using min-content, max-content and the minmax () function |
Resources Required
- Students should know how to code in HTML & CSS
- Windows/macOS/Linux
- Stable internet connection
Comparison Table
| Parameters | Advanced CSS and Sass: Flexbox, Grid, Animations and More | CSS – The Complete Guide 2023 (incl. Flexbox, Grid & Sass) | Build Responsive Real World Websites with HTML and CSS |
|---|---|---|---|
| Offers | INR 455 ( | INR 455 ( | INR 455 ( |
| Duration | 28 Hours | 22.5 Hours | 37.5 Hours |
| Rating | 4.8/5 | 4.7/5 | 4.8/5 |
| Student Enrollments | 1.85 lakhs | 0.71 lakhs | 3.02 lakhs |
| Instructors | Jonas Schmedtmann | Maximilian Schwarzmüller | Jonas Schmedtmann |
| Level | Advanced | Beginner | Beginner |
| Topics Covered | Advanced CSS, CSS Grid, Responsive Design, Introduction to Sass, etc. | Selectors, Combinators, Styling Rules Basics, Styling Backgrounds, Responsive Design, etc. | Fundamentals of Modern and Semantic HTML, CSS, Web Design & Layout, etc. |
| Coding Exercises | Yes | No | No |
| Projects | Yes | Yes | Yes |
| Register Here | Apply Now! | Apply Now! | Apply Now! |
| Compare Similar Courses | 2023 Complete Python Bootcamp from Zero to Hero in Python | The Complete JavaScript Course 2023 from Zero to Expert | Learn Ethical Hacking From Scratch |
| Mastering Data Structures & Algorithms using C and C++ | Build Responsive Real-World Websites with HTML and CSS | The Ultimate MySQL Bootcamp: Go from SQL Beginner to Expert |
Student Reviews
Check out the student reviews for the Advanced CSS and Sass: Flexbox, Grid, Animations and More Course on Udemy.
- Ajith S. (5.0/5) “Best course that I ever purchased, explanation of the concept is the highlight and Mr. Jonas is so keen to every detail that we want to know actually. thanks a lot, Jonas sir.”
- Basubhuti D. (5.0/5) “This is truly one of the best courses on the internet available as claimed by the instructor himself. I just want to say thank you for making such amazing content for us who want to learn.”
- Rudra P. (5.0/5) “This guy, Jonas is the best teacher I ever had, his teaching skills are par excellent and I really loved every moment of the course and gonna take the JS course with him next, really loved it, people say they fear CSS but Jonas made me a confident front end web dev, ty to him and at last, I wanna say, this was the best CSS, SASS course I ever had.”
- Nirnay M. (5.0/5) “Another wonderful course by Jonas completed. The key feature of his courses is the practical implementation of the concepts, rather than just talking about the theory behind them. Waiting for a course on React from Jonas.”
- Mreetunjay (5.0/5) “It was a wonderful session with Jonas sir now I can make any web template with CSS and SCSS really thankful to Jonas sir, Here is a small request with you I have searched on Udemy for Angular but didn’t find a yet better course for me, requesting you please give us a session for Angular as well. Overall experience was excellent sir. Thanks a lot.”
- ANNAM S. (4.0/5) “I really learned a lot from Jonas sir. The way he teaches the course is really awesome and I recommended to a lot of friends and juniors to this course. Thank you sir for your wonderful course. I really appreciate the efforts that you put into the course. Finally, It’s better if you could update this course because the course has designed for 2017.”
- Naresh K. (4.0/5) “This course is very useful, and I appreciate all the hard work the instructor has put into this course. I have a suggestion. The delivery of the verbal information by the instructor needs to improve. Instructor Jonas Schmedtmann has actually done a great job keeping the ‘wording’ or speech short and simple, I really appreciate that. But the delivery of the speech comes across disconnected segments of speech. It becomes difficult to connect those. I want to say thanks to Jonas Schmedtmann for this course.”
- Bala K. (4.0/5) “Jonas and his all course are worth buying to learn web development. Though youtube has more free content this course has a structured learning experience.”
- Chirag P. (3.0/5) “This course focuses a lot on layouts using floats. Although there are parts that teach Grids/Flexbox. The actual cream of learning tricks and tips forces me to spend time doing things with floats first. This feels a tad bit irrelevant to me in 2020.”
- Siddharth G. (3.0/5) “I think the course is extensive so far. There are many topics which seem new to me and the best practices are also covered.”
Similar Udemy Courses
Advanced CSS and Sass: Flexbox, Grid, Animations and More: FAQs
Ques. What is the fee for the course?
Ans. The course is originally priced at INR 3,499 but is currently available for INR 525.
Ques. What will I learn in the course?
Ans. In this course, you will learn about CSS works behind the scenes, CSS architecture: component-based design, and BEM.
Ques. What is the duration of the course?
Ans. 28 hours is the total duration of the course
Ques. Is there a certification from Udemy?
Ans. Yes
Ques. What is the rating?
Ans. 4.8 out of 5
Ques. Do I have lifetime access to this course?
Ans. Yes
Ques. Can I access the course on mobile devices, laptops, and TV?
Ans. Yes
Leave feedback about this