Skip to content
Submitted about 1 month ago

Responsive Product Previe Card HTML CSS

Tgimba1•70
@Tgimba1
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 am proud to have been able to use all available resources to complete this project. I am willing to complete similar projects with limited time next time.

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

I had an issure spacing giving the same height to the two sister containers. I figures it out bu using Flex:1 for both divs.

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

To improve my knowledge in the application of CSS Flexbox.

Community feedback

  • LiamHilton•20
    @LiamHiltonPosted about 1 month ago

    Really great effort! after looking at your code i will give a few improvements to help with workflow.

    • creating a separate CSS link to ensure you have clean code and you can change between windows. This also maintains that if you are building a big website in the future and have a lot of code its easy to locate. Also good practice for once you start to build additional pages for your website as you will repeat the process of a new css file for that particular page. (hopefully that makes sense)

    I have found Split up or down to be incredibly useful to visualise all code in front of me on my HTML and CSS too. (if your monitor is in vertical mode)

    example:

    <!-- my CSS --> 
    <link rel="stylesheet" href="style.css" />
    <!-- google fonts --> 
    <link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
  href="https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,100..900;1,9..144,100..900&display=swap"
  rel="stylesheet"
/>

    I will add a link for css-tricks which is a great resource and add flexbox for you.

    https://css-tricks.com/snippets/css/a-guide-to-flexbox/

    -stack overflow is also great for asking questions> https://stackoverflow.com

    -MDN Web developer is great for information too. https://developer.mozilla.org/en-US/

    Have a great day.

    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