All solutions

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

In this challenge I understood that I need to find more efficient ways to manipulate images in CSS.

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

I spent a lot of time trying to get the image of this component right, I worked with background-image, but I had difficulty adjusting the image proportions in the desktop layout. The final project was a little different, but I believe it is decent. If anyone has feedback regarding my CSS code, I'd be happy to read it.

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

It was a simple project, but I spent a lot of time trying to adjust the layout of the plan div and icon with display grid, but the simplest solution was with display flex. If you have any feedback, I'd be happy to read it.

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

As simple as the project is, I learned a new CSS pattern, the active hover state of the project required an icon overlay on top of the main image and it was the first time I did this.

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

It took me a while to get the code for the overlay right, but in the end, everything came down to one div on top of another using the CSS position property on the realtive and absolute values. Once the div is positioned, just center the icon and add the color to the background within the :hover selector.

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

Any feedback will be appreciated.

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

I had difficulty adjusting the spacing of the buttons, use the justify-content property in the space-between value, but the card still ended up being out of the original proportion.

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

Any feedback regarding my JS script would be valuable as I'm not sure if I used the most appropriate method for this type of functionality.

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

It was a simple challenge, I had a little difficulty getting the image right, I chose to use background-image in a div instead of adding it directly to the HTML file, image manipulation in CSS is still a little complicated for me, but I believe that the final version was decent.

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

In this challenge, I was happy to complete the extra task of using JS to add data dynamically, I don't know if the way I wrote the script is the most efficient, I appreciate any feedback related to this.

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

It was the first time I worked with the Fetch API on a project alone, I still don't understand much about how to manipulate data in JSON format, but it was a good start. After a brief research on how to use data from a JSON file, I managed to complete the challenge.

The CSS of the final project is not 100% accurate, but I liked the proportion of the elements in my solution. Considering that I still don't have access to the layout in Figma, I believe it was a good attempt using just a photo of the design :)

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

Despite being a simple project, I learned a new frontend pattern that I will certainly use many times in the future.

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

This was the first time I made an accordion, so I had to spend a little time studying the best solution for this type of project.

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

I'm wondering if there is a better way to code an accordion script or this is the most optimized solution.

In this challenge I had some difficulties in manipulating the width of the image and the card itself, I directly changed the width of the image using the vw unit, but I believe that my card and image were a little wider and smaller than what was proposed by the design, getting the proportioning elements without the project in Figma is a little more difficult than I thought. If you have comments related to this or any other point in my code, I'll be happy to read them :)

If you have any feedback, I would be happy to read it.

In this challenge, I decided not to strictly follow the layout presented and implemented some changes to the design according to my personal taste :)