Bookmark: Tailwind CSS Refresher

25 May 2023

I was facing the frontend challenge from Fontend Mentor, white it was building a website using TailwindCSS and Javascript. I thought I was good with my CSS skills, but I’ve bern using Boostrap probably too much. So it was great moment for a CSS refresher.

So, at firt point I wanted to have FlexBox clear, and for that I found this website: Flexbox Froggy. It was a great way to remember how to use Flexbox, and I really enjoyed it.

For CSS Grid there is a similar website: Grid Garden. I haven’t done it yet, but I will.

By dedicating some time to refresh your CSS knowledge, you can enhance your ability to create visually appealing and responsive designs. Next step it was learn Tailwind CSS in order to build the project.

Tailwind CSS has a huge amount of classes, so it’s a good idea to have a cheatsheet. I found this one: Tailwind CSS Cheat Sheet. It’s a great way to have a quick reference of the classes. Although, the official Tailwind CSS website is great too for searching the class that you need. Official Tailwind CSS Page

Here is the project that I built: Frontend Mentor: Bookmark Project, and here is the live demo. Thanks so much Maxim for the suggestion and the amazing feedback!

Thank you for reading!