All solutions

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

I have to say that even though this project uses React mainly for componentization rather than functionality, there is nothing restricted to React here. I use a single useState, so you could implement all this functionality with just a few lines of pure JavaScript.

What challenges did you encounter, and how did you overcome them?

I spent most of the time understanding the design. I don't have the Figma file, but in any case, I found that opening the JPG image in Figma and drawing a lot of frames around images and text is very handy.

So, I broke the design into small pieces, created React components for each one of them, and then created a Sass file for each component. I also created some utility classes for those patterns that don’t belong to any specific component, and then made a lot of adjustments to make the fonts and paddings dynamic.

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

Feel free to give your opinion about the code, the solution design, the process I chose, the technology stack, the class names I wrote, or even my profile on this platform or GitHub. Any feedback will be valuable to me, as long as it has a reasoning behind it.

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

Well, in this challenge, I learned two valuable things:

• It is not possible to create a pseudo-element from an image element. I tried several times, and then I searched and found this article on Stack Overflow

    


.image::after ❌ 
.image-wrapper::after ✅

• I learned how to apply a hover selector to an ::after pseudo-element.

/* for example */
.card__image__wrapper:hover:after{
    opacity: 1;
}

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

I am proud of having completed the challenge.

What challenges did you encounter, and how did you overcome them?

My first instinct was to create the card decoration using a before element. However, I quickly realized that this was a mistake because that technique doesn't work well inside a grid. Then, I realized that the card elements are simply boxes inside other boxes. It's something very simple, but I think this is a very useful technique.

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

I am proud of keeping things simple. It works, and I believe I will be able to understand the code even if I return to it far in the future. React and Tailwind CSS make the code easy to plug in and port to other projects.

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

This challenge was interesting. I started by creating separate components for the article and the tooltip, adding multiple states and also a useEffect. At some point, I realized I was over-engineering the solution, so I took a few steps back and used an approach focused on CSS rather than React. That is what made me feel better about this challenge: being able to deliver a solution that I found simple.

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

Any suggestion to improve this solution is welcome.

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

I feel happy with the learning process; in a way, following the learning path has helped me a lot.

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

I'm proud of the grid layout. Making layouts with grids has always seemed like a challenge to me, so I am happy with the final result.

What challenges did you encounter, and how did you overcome them?

I noticed that the font sizes are different for the two designs, so I tried to make the font grow progressively until reaching the size for large screens (I am using a mobile-first approach), that was a bit difficult, and I would be happy to hear opinions about other ways to do it.

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

I am most proud of creating a product gallery that demonstrates how the component works with different image sizes and varying lengths of text descriptions.

What challenges did you encounter, and how did you overcome them?

Without a doubt, the biggest challenge I faced was managing the images. It was difficult to give them the correct size and position, but in the end, I found the aspect-ratio property and the use of a container element for the image to be very useful.

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

Once again, the biggest challenge I had to face was resolving the measurements of the elements without having access to the Figma file.

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

What makes me feel better is having been able to recreate the design without having access to the design file in Figma

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

I am proud of having been able to deal with issues related to the use of self-hosted fonts. I believe I worked differently than expected in this challenge regarding fonts. Interestingly, I would like to learn how to use variable fonts.

What challenges did you encounter, and how did you overcome them?

Without a doubt, I spent the most time on the use of fonts. I tried unsuccessfully to load the fonts using:

@font-face {
    font-family: 'Figtree-ExtraBold';
    src: url('/assets/fonts/static/Figtree-ExtraBold.ttf') format('truetype');
}

Following a post on MDN I tried using the Fontsquirrel Webfont Generator to convert the TrueType format to woff and woff2 formats, but I only got a message saying that the font was corrupted. After searching a bit, I found an article mentioning the Transfonter conversion tool which worked without any issues. I ended up using the fonts in woff2 and woff formats.

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

I have a strong feeling that there was a much simpler way to solve this. I would like to know if others faced the same issue when importing fonts and how they resolved it.

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

I'm most proud of how I managed to keep the html structure simple.

What challenges did you encounter, and how did you overcome them?

maybe the box-shadow part.

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

I would appreciate feedback on how others choose names for their CSS classes. I'm interested in improving the readability and maintainability of my code. In general, any kind of suggestions are welcome.