What's the Next Step After CSS? Exploring Sass, Bootstrap, and Tailwind CSS

#html

As a newbie in Web Development, you might be confused about what to learn next after mastering HTML and CSS. Should you dive into Bootstrap, Tailwind CSS, or maybe SASS? In this article, I'll share my experiences and insights to help you make an informed decision.

SASS: CSS with Superpowers
Sass means Syntactically Awesome Style Sheets. When I was in the DCTP (DevCareer Technical Program) Cohort 1, we learned Sass using the 7-1 pattern architecture. This means organizing your styles into 7 folders and 1 main file (main.scss) that imports everything. This main.scss file is later compiled into main.css, which you use in your entire project.
Note: Sass uses the BEM naming convention.

Why use Sass?
• Variables: You can declare style variables and use them throughout your project.
• Mixins: Create reusable blocks of styles that follow DRY principles.
• Parent Selector: The ampersand selector (&) makes naming your classes easier.

Example: In the image above, in line 4, color is a variable. In line 2, container was a mixin included in .hero_section. In line 10, the & represents .hero_section, meaning we're declaring the .hero_section--right class.

Interested in using Sass for your next project? Check out the Sass Guidelines.

Bootstrap: Quick and Easy Components
I first learned Bootstrap during the Visiola Foundation Cohort 1 bootcamp in 2022. It was amazing because I could use a lot of ready-made components I didn't know how to build from scratch then.

Will I recommend Bootstrap for beginners?
Absolutely! After learning CSS, building a few projects with Bootstrap can be very helpful. It's great for quickly building projects and sometimes you'll need to revamp existing websites/templates built with Bootstrap.
As strange as it might sound, my responsiveness skills improved a lot by using Bootstrap for almost a year during my SIWES program. I even have a recorded video (soon to be posted) on how I built a webpage using Bootstrap 5. Follow my social handles below to know when I share the video!

Why use Bootstrap?
• Responsiveness: It can improve your responsiveness skills.
• Speed: Build projects in less than a week.
• Components: Access to a lot of components for your projects.
• Flexibility: More flexible if you know Sass since Bootstrap is built on Sass.

Tailwind CSS: Flexible and Time-Saving
Tailwind CSS is a CSS library I started using in March 2024. It's been a game-changer for my ReactJS projects.
For me, Tailwind CSS was easy to learn. I picked it up in less than a week because I needed to build my B.Sc. project quickly. I didn't want a common-looking website, which is often a downside of using Bootstrap.

How did I learn Tailwind CSS so quickly?
My existing knowledge of CSS, Sass, and Bootstrap definitely helped. After learning the basics, I followed a YouTube tutorial where the instructor used ReactJS and CSS to build an ecommerce webpage with filter and search options. I adapted this to use ReactJS and Tailwind CSS.

Why Tailwind CSS?
• Flexibility: Extremely flexible to use.
• Time-Saving: Saves a lot of time.

What's Next for You? Bootstrap, Tailwind CSS, or SASS?
If you're leaning towards becoming a Backend Developer or a Full-stack Developer with a backend focus, I recommend starting with Bootstrap.

If you're aiming to become a Frontend Web Developer, I suggest learning all three because you might encounter any of them in your projects.

For aspiring Full-stack Developers who want to excel in both frontend and backend, I recommend starting with Tailwind CSS.

I hope this guide helps you decide your next step after CSS. Each of these tools has its strengths, and learning them will undoubtedly make you a more versatile and skilled developer.

If you're looking to join a program that offers hands-on experience and guidance, check out the HNG Internship. For additional benefits and advanced learning opportunities, consider HNG Premium.

Feel free to connect with me on Twitter and LinkedIn to stay updated with my latest projects and tutorials. Happy coding!