Skip to content
Submitted 9 months ago

Responsive Product Preview Card Component (HTML-CSS)

Hicham Abderrahimā€¢210
@hichamweblog
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?

Hi everyone,

I've finished this Frontend Mentor challenge using HTML and CSS.

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

I tried to make it accessible and responsive.

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

Do you have any suggestions for improvements or optimizations?

Thanks!

Community feedback

  • Hassan Moatazā€¢1,860
    @hassanmoaaPosted 9 months ago

    Hello !

    Great Job solving the challenge mate congrats šŸŽ‰

    Use <main> to wrap the main content instead of <div>. * šŸ“Œ Tags like <div> and <span> are typical examples of non-semantic HTML elements. They serve only as content holders but give no indication as to what type of content they contain or what role that content plays on the page. This tag change does not impact your project visually and makes your HTML code more semantic, improving SEO optimization as well as the accessibility of your project.

    āž–āž–āž–āž–āž–āž–āž–

    Heading is defined with <h1> to <h6> tags. It is important to use headings to show the HTML document structure.

    <h1> headings should be used for main headings, followed by <h2> headings, then <h3>, and so on up to <h6>

    Other than that you're good, keep up the good work!

    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