Skip to content
Submitted 2 months ago

HTML & CSS: Creating a Responsive Card Component

Outstandinggirl13•70
@Outstandinggirl13
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Product preview card component
  • HTML
  • CSS
1newbie

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

  • Svitlana Suslenkova•5,360
    @SvitlanaSuslenkovaPosted 2 months ago

    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•70
    @Outstandinggirl13Posted 2 months ago

    @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

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