Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Responsive Product Preview Card

@JohnsonSamuel324

Desktop design screenshot for the Product preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


This is the first project when trying to make webpage responsive to both desktop and mobile. Let me know if there's anything I could've fixed or recommendations :) Is adding the <main> tag redundant to the <body> tag?

Community feedback

@yannmarc

Posted

Hi friend 👋🏾 Great job 💯

Let me provide you with a comprehensive explanation to address your concerns regarding the use of the <main></main> tag alongside the <body></body> tag.🤓

  • In HTML5, the use of semantic elements is highly encouraged as it helps convey the structure and meaning of a webpage to both browsers and search engine crawlers. The <body> tag serves the purpose of indicating where the visible content of your website begins. It encompasses all the content that users can see and interact with, such as headings, paragraphs, images, and other elements.

  • On the other hand, the <main> tag has a specific semantic meaning. It is used to mark the primary or most important content of a webpage. By using the <main> tag, you are explicitly telling the browser and search engines that the content enclosed within it represents the core information or focal point of your webpage.

  • By employing the <main> tag, you are not duplicating the functionality of the <body> tag. Instead, you are providing additional information about the structure and significance of your webpage's content. This can be beneficial for search engine optimization (SEO) purposes, as it helps search engines understand and index your content more accurately.

Hope you find this useful. Happy hacking, you're amazing!

0

@NxumaloDev

Posted

Great job man!

To answer your question, it is not redundant (i think it's part of semantic HTML and helps with accessibility)

  • The first i noticed is the image width, you can easily fix that by setting your main container with either CSS Grid (grid-template-column: repeat(2, 1fr) or Flex-box (flex-basis: 50%)
  • Use the <picture> element to effortlessly change image based on screen size. Go to w3schools for better explanation.
  • Fix your padding/spacing here and there

Good luck fellow Dev!

0

Please log in to post a comment

Log in with GitHub
Discord logo

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