Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

four-card

N1Dovud 170

@N1Dovud

Desktop design screenshot for the Four card feature section coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


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

I am proud that the website is responsive and has a great design until the vw of 220px. After that, it gets messy. The next time I would like to get better at eyeballing because it is taking me a lot of time.

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

In some cases, I forgot the inputs of some properties and had to get some help from chatgpt. Also, I have a hard time knowing whether to use padding or margin when I can use both, although I fully understand their differences. Finally, when I was thinking about the layout of cards, it took me quite a while to think about wrapping two middle cards into a div to get the desired layout.

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

Can anyone explain to me why my first card is smaller than others?Also, as you shrink the viewport width, you can see that at some point my two middle sections nested inside a div will have a smaller width than other cards even though div does not contain any margin or padding. Why is that the case? What can I do? Lastly, I truly don't know how to handle the distorted view of the website when the viewport width is under 220px. Can anybody give any suggestions?

Community feedback

xarisVavl 130

@xarisVavl

Posted

good job

1

Please log in to post a comment

Log in with GitHub
Discord logo

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord