Skip to content
Submitted 7 months ago

Responsive Product Previe Card HTML CSS

Tgimba1•90
@Tgimba1
A solution to the Product preview card component challenge
Preview (opens in new tab)Code (opens in new tab)

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.

Code

Please log in to post a comment

Log in with GitHub

Community feedback

  • LiamHilton•20
    @LiamHilton

    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.

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