All solutions

It was nice practice of fetching from API.

This solution shows how you can use group in tailwind to add hover effect. Also, you can see how you can give components variables so each components have different values.

Fun challenge. Used cleave to format the input on the bill. Has a few validation that checks user input

This was by far the most difficult one I had to work with. Finding regex to validate card number was difficult. Also, accepting letter and number both as an input in the card field is not ideal because it is hard to validate them since both number and letters are rendered as a string. In terms of design, it's hard to make text move with the image when the width changes. CVC text on the card still not moving with the card image when shrunk to mobile width. Help me if you know how to solve that problem. Using onblur property was awesome. Using Cleave was pretty nice too. It made input formatting easy.

This one was a fun one to build. Sizing of boxes was difficult but JS was easy.

This was fun challenge. Struggled a bit with input validation and error showing. Added a cute little animation.

This was fun challenge. Struggled a bit with input validation and error showing. Added a cute little animation.

Learning to validate email was difficult and selecting elements with jQuery was a challenge.

Learning to validate email was difficult and selecting elements with jQuery was a challenge.

Many bootstraps and adjustments. Second illustration's background was difficult to stick it with the entire container.

I had so much fun with this one. Using filter on image was definitely good experience. Also, footer took a lot of time to make.

I tried to use bootstrap for this project but for mobile version, I'm unsure how to adjust the margin between ul elements.

This one was easier than the previous challenges. Learned to figure out how to work with grids which was truly helpful.

This was by far the most difficult one I have done. Learning to position element was crucial part of making this look as close as I can to the image. The biggest lesson I learned was if you put parent element's positions as relative, you can put child element's position absolute to make those 2 elements move together. Also, you can create shapes and others with just empty div. Using percentage instead of pixels or rem was a good way to make it a little bit responsive. Any feedback will be appreciated.

Image and text sizing was bit of a challenge.

Margins and trying to write neat code in the css file were challenging. I tried using grids and flexbox together and it ended up working very well I think.

the spacing took me a minute to solve

Background positioning took some time.

I think it is better to use grid instead of flex box because those 3 boxes scale differently when the size changes. For example, Sedans box shrinks sooner than luxury box, creating uneven boxes.

Stats texts don't look as it is on the picture and I don't know why. Also, scaling of the picture took a lot of effort. It was not scaling with the container when scaled down or up. It was increasing its size or decreasing and leaving a lot of spaces in the container. But it was fixed and I really don't know why lol. Maybe because I put the width of the picture 50% and texts 50% too, so I thought they will each take the half of the container. Also, making it responsive was challenging. I learned to use flex-direction: column-reverse property to switch sides of the content. Anyway, this one was by far took the most time to kinda solve.

It was a good challenge, specially, for people like me who want to try to practice accurate spacing between elements.

How do I decrease the size between the bottom of the card and creator's avatar and info? The very bottom part has too much space between elements but I don't know how to decrease that size. Tried margin-bottom and did not work. Anyway, this is the best I can do for this one.