Advanced CSS and Sass
Post last updated: February 22, 2024
Why did it take this course?
I decided to take this course because I wanted to take my CSS game to the next level. I didn’t know that sass can be so simple to learn and yet so powerful and useful.
Before learning SASS, I had some trouble keeping my CSS file organize, first of all, because I did not have much experience and second of all because my projects were getting bigger and bigger. So my CSS file was growing more and more.
I thought SASS could be a nice solution for this problem plus I wanted to know what more I can do with it. And finally, I believed that learning SASS was a nice skill to add to my resume.
About the course
There are not really many courses about SASS in Udemy, to be honest, so I did know have to search all that much. But still, I am glad I took this nice course. The creator of course Jonas Schmedtmann, has 5 courses in Udemy and most of them focus on front-end design.
He presents this course as "The most advanced and modern CSS course on the internet: master flexbox, CSS Grid, responsive design, and so much more".
The course is very popular in Udemy and with are very high and well-deserved ranking of 4.8 stars out of 5. In total, more than 142,000 students had enrolled this course, which is very impressive.
What you will learn
This is what Jonas tells us we are going to learn during the course.
- Tons of modern CSS techniques to create stunning designs and effects.
- Advanced CSS animations with @keyframes, animation, and transition.
- How CSS works behind the scenes: the cascade, specificity, inheritance, etc.
- CSS architecture: component-based design, BEM, writing reusable code, etc.
- Flexbox layouts: build a huge real-world project with flexbox.
- CSS Grid layouts: build a huge real-world project with CSS Grid.
- Using Sass in real-world projects: global variables, architecting CSS, managing media queries, etc.
- Advanced responsive design: media queries, mobile-first vs desktop-first, em vs rem units, etc.
- Responsive images in HTML and CSS for faster page loads
- SVG images and videos in HTML and CSS: build a background video effect.
- The NPM ecosystem: development workflows and building processes.
Prerequisite
A very basic understanding of HTML, CSS.
Course content and Course Projects
This course is divided into 10 sections with a total of 126 lessons and a duration of 28 hours.
During the first sections of the course, we take a look at how CSS work, what are the best practices and how to be organized. After that, we learn the fundamentals of SASS and start implementing them in the course projects.
This course has three very nice projects, using different design techniques and layouts.
The first project is calls Natours and it is a website from a travel agency, the second one is called Trillo which is a website for hotel reservations using flexbox and the last project about a real states company and this website is mostly using CSS Grid.
Even though the first project did know use flexbox or CSS Grid it was by far my favorites because I could see how SASS and folder structure work and also because this project has some very nice CSS styles tips.
My thoughts about this course
I really liked it, I am so glad I took this course, the teacher is so friendly and explains everything in great detail. Also, he gives some very nice tips and advice that mean a lot for someone who is just starting.
Overall SASS is something very easy to learn, you can basically learn the basics in one day and then practice building something and learn from that as well.
I have found some nice SASS courses on youtube as well that I will be recommending.
What I had built after this course
These are some of the websites I build after I learn SASS
