Skip to content
Submitted almost 2 years ago

Product-Preview-Component

Aynur Demir•150
@Maanlicht91
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?

Finally I used SCSS to design this website and compile it to real css. I didn't add sass files to github.

I achieved to make this responsive to mobile. But didn't use mobile-first technique because I don't like it. I always go with desktop screen first then few changes to fix screen bugs

Community feedback

  • Jeroen Leijnse•1,420
    @jrleijnsePosted almost 2 years ago

    Hey there! Great job completing your first challenge! 🎊

    I have some suggestions for your code that might interest you.

    HTML 📄:

    • Instead of using the <div> tag for your containers, try using some semantic HTML to provide more meaning to it, for better SEO. For example, instead of using <div> you could use the <main> or <section> tag. For the element with the classname attribution you could use the <footer> tag.
    • Try to always provide an <img> with a descriptive ALT text. This makes your project more accessible to people using screen readers and SEO.

    I hope you find my suggestions useful, and above all: the solution you provided is very good!

    Keep it up and happy coding! 😃

    Marked as helpful
    0
    Aynur Demir•150
    @Maanlicht91Posted almost 2 years ago

    @jrleijnse Omg thank you so much this was my first challenge I am so excited . Your comment is very useful now I completed my second challenge with your tips. Thanks again (:

    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