Blog Preview Card

What are you most proud of, and what would you do differently next time?

Built with. 🔨

• HTML.
• Tailwind.
• Vite.

Features. ✨

• The requirements of the project stated that the font sizes need to slightly change with the screen size, but without using media queries. So I used the clamp() function on the font size.

  .text-clamp-100 {
    font-size: clamp(0.75rem, 2vw, 0.875rem);
  }
  

• To make the whole card clickable, I used a pseudo element. I added the pseudo element to the a inside the h2. Then made the card component position: relative. Now when top-0 right-0 bottom-0 left-0 is given to the pseudo element, it will be same size as the card component.
• Added the hover effect to the card component. So when hovered over the card the box-shadow will get slightly bigger.

New Things Learned. 🎓

• It's my first time using Tailwind, so had to learn how to setup a project with it.
• Using the the Tailwind CSS IntelliSense VS Code plugin. It was super helpful since it shows the underlying CSS properties for each utility class.
• How to use the tailwind.config.js file to extend the default theme to include my own custom values.
• Using @layer to include my own classes.
• When using pseudo elements, Tailwind will automatically add content: '' by default so you don’t have to specify it unless you want a different value.

What specific areas of your project would you like help with?

Would love some overall feedback on any areas where I can improve.