Skip to content
Submitted almost 2 years ago

Product preview card

Sara Mkzβ€’30
@Saramkz
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

How do you find my code? What would you have done differently?

Community feedback

  • πŸ‘Ύ Ekaterine Mitagvaria πŸ‘Ύβ€’7,600
    @catherineisonlinePosted almost 2 years ago

    Nice! πŸ™ŒπŸ»

    I would also add some transitions for active states (when colors change on hover). It creates more interactivity and makes the project looks cooler. Active states can be done on buttons, links, titles which act like links or anything else, you choose.

    You can read more about it here, in case you haven’t done much of it:
https://www.w3schools.com/css/css3_transitions.asp

    IF THIS WAS HELPFUL PLEASE MARK IT AS HELPFUL 🀩

    0
  • バレンタむン πŸ˜ˆβ€’64,170
    @VCaramesPosted almost 2 years ago

    Hey there! πŸ‘‹ Here are some suggestions to help improve your code:

    • The image’s alt tag description needs to be improved upon to better describe what it is. You will want to assume that you are describing the image to a someone.

    More Info:πŸ“š

    https://www.w3.org/WAI/tutorials/images/

    • This component requires the use of two images πŸŽ‘ at different breakpoints. The picture element will facilitate this.

    Here is an example of how it works: EXAMPLE

    Syntax:

      <picture>
    <source media="(min-width: )" srcset="">
    <img src="" alt="">
  </picture>

    More Info:πŸ“š

    https://www.w3schools.com/html/html_images_picture.asp

    If you have any questions or need further clarification, feel free to reach out to me.

    Happy Coding!πŸŽ„πŸŽ

    0
  • Sinisa Vukmirovicβ€’1,690
    @SinisaVukmirovicPosted almost 2 years ago

    Hello!

    What I would done differently is using more semantic elements in HTML. That would fix some of your report errors.

    This "Document should have one main landmark" means you are missing <main> semantic element in your html. Landmark just means element.

    This "All page content should be contained by landmarks" means all non-semantic elements should be inside of semantic elements, and not directly inside of <body> element.

    More about semantic elements

    Hope this helps! Good luck!

    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