Skip to content
Submitted 3 months ago

Product Review Card - HTML5, CSS3

Karen L Byrd•80
@klb-dev
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?

It looks like the design. I want to use grid for the next one, but flexbox I know how to work with.

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

Getting it deployed. I tried to deploy using GitHub pages, but it was not my first time. For some reason, it would not read the images or my stylesheet. I had both in folders (never a problem before) and nothing. So I took them out of folders and still need to show my images or stylesheet. Finally, I deployed on Netlify.

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

Right now nothings

Community feedback

  • paulDev•480
    @dev-paulLPosted 3 months ago

    Hi 👋

    I recommend you to test your page behavior by resizing the browser window, zooming in and out and changing the browser font-size. For me, it looks completely different from the original design.

    You could also read about semantic html tags to avoid using <div> everywhere. (For example your container div could be <main>, your card div could be <article>, your attribution div can be a <footer>) .

    Be careful when using em as it can be unpredictable.

    Make sure you use the right fonts (they give it in style-guide.md).

    I see you are using 2 divs (one for mobile and one for desktop, I guess). To render a different image depending on the device size, you should use <picture>, and adapt the media-queries for the other elements.

    I suggest you to start by coding the mobile design when they are not complex, then adapt your layout & media queries to the tablet and desktop version. This usually results in shorter and more readable CSS files.

    Keep it up 👋

    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