All solutions

Responsive Profile Card Component using Tailwind CSS

This is my solution for the Profile Card Component challenge.

The main idea behind this challenge is getting the positioning right in my opinion. The trick is to make the background SVGs absolute and position them according to the design. For the avatar picture, using a negative value for the margin was enough.

It was an interesting challenge.

Happy coding!

Responsive 3-column Preview Card Component using React and Tailwind CSS

To solve this challenge efficiently, I have created a Column reusable component and populated it with data using React. For the styling part, I used Tailwind CSS as usual. One thing that I did not like about it is that I couldn't interpolate custom values into the Tailwind CSS classes. But overall, it helped me a lot.

Happy coding!

Responsive Stats Preview Card Component using Tailwind CSS

The main purpose of this challenge in my opinion is getting the responsiveness right. I managed to achieve that using Tailwind CSS such that when moving from small screen to a larger one the card goes from being a "flex-col" to "flex-row" and the order or its children gets reversed.

Overall, it was a good challenge.

Happy coding!

Responsive Order Summary Card Component using Tailwind CSS

This is my solution for the Order Summary Component challenge. I had fun building this component which was straight forward, but hey, practice makes perfect.

Happy coding!

Responsive NFT Preview Card Component

Solving this challenge was interesting. The design had so many elements, so it was good to test my skills.

Try to get the image overlay/hover effect to work was a bit challenging for me, but I eventually managed to get it right. I have used Tailwind CSS to achieve my results.

Happy coding!

Responsive QR Code Component using Tailwind CSS

This is my solution for my fourth challenge on Frontend Mentor.

This challenge was pretty straight forward, focusing on on how to manage spacing.

Can't wait for the next challenge.

Happy coding!

Building a Stateful Interactive Rating Component using React and Tailwind CSS

I managed to solve this challenge using React and Tailwind CSS.

This challenge unlike the previous challenges that I have solved needed to incorporate some JavaScript. I made the task easier by using React (useState hook and some conditional rendering). Managing states was a bit tricky especially when passing the state from children to parent component and style them accordingly.

I have also added some visual effects that I found cool. Let me know what you think.

Happy coding!

Responsive Results Summary Page using Tailwind CSS

In order to finish this challenge, I have used Tailwind CSS which made things easier.

I have also used React to build a reusable component to use for each skill, takes some props by looping through the JSON file.

Completing my first challenge on Frontend Mentor

This was my first time on the Frontend Mentor platform. I had a great experience solving this challenge using Tailwind CSS for the first time. I have never been really a fan of CSS, but Tailwind changed that entirely. It speeds up development and make things a lot easier.

I have also created this project as a React app using Vite just to practice deploying to Vercel which was really smooth.