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

HTML & CSS: Creating a Responsive Card Component

@Outstandinggirl13

Desktop design screenshot for the Product preview card component 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'm proud of several achievements from this project. First, I significantly improved my skills with Git and GitHub, discovering and using many new commands I hadn't encountered before. I also deepened my understanding of element positioning, learning about the differences between fixed and static positions. My knowledge of the box model, margins, and padding has become much stronger. Finally, this project increased my awareness of how user experience can vary across different devices and taught me how to create more responsive webpages.

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

Here is a list of the challenges I've encountered so far while working on this project:

  1. Positioning the element in the center of the screen.
  2. Finding a way to make the element with the class .attribution, acting as a footer, stick to the bottom of the page and remain visible.
  3. Dividing the into two parts: one for the product image and one for the product description.
  4. Switching to more responsive units.
  5. Fixing the footer on mobile devices.

Detailed descriptions of how I addressed these challenges can be found in the README.md file.

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

I welcome any suggestions for improving code readability and for finding smarter solutions to the challenges I've outlined above. 🙂

Community feedback

@SvitlanaSuslenkova

Posted

body { display: flex; flex-direction: column; justify-content: center; align-items: center; min-height: 100vh; } Try this to align(top-bottom) and justify(left-right) your project to the center. It applies to the parent component(body), don't forget about !!min-height!!. You can use grid instead of flex too.

Your <section> should be <main>, remove margins

Hope you found this comment helpful :)

Marked as helpful

1

@Outstandinggirl13

Posted

@SvitlanaSuslenkova Thanks so much for the feedback! I'll try to experiment with your suggestions and see what happens 👌

0

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