Design comparison
Solution retrospective
Hello everyone. I really enjoyed this second challenge.
To make the image responsive and change according to screen size I used the <picture> tag. Did you use a different technique?
Community feedback
- @ChamuMutezvaPosted over 1 year ago
Hi Kari5745
It's good to hear that you are enjoying the challenges . Here is a few things to consider:
- while there is nothing wrong in using a div, consideration should be put into elements that make your site accessible. A div does not convey any meaningful message to assistive technology users. In this challenge I would perhaps expect to see an element such as the
main
element . According to MDN and I quorte The <main> HTML element represents the dominant content of the <body> of a document. The main content area consists of content that is directly related to or expands upon the central topic of a document, or the central functionality of an application. - The picture element is perfect to use , but I see that the image element does not have an alt value. The alt value should be present in all img elements, if the image is decorative then the alt value should be empty, otherwise the value should be short and descriptive for assistive technology.
- For best practice , there should be only one h1 element in a site. A heading element should be able to convey a message to users (like an introduction to the content to follow), hence a heading such as a number
<h1 id="finalPrice">$149.99</h1>
, I think does not seem suitable to me. - Look into using a Modern css reset stylesheet, one popular one is by Andy Bell. It is important to reset your styles so that the site can behave the same between various browsers
- using explicit values in elements can cause some issues , here is a snippet of your code
.box { background-color: hsl(0, 0%, 100%); width: 550px; height: 420px; display: flex; margin: 80px auto; border-radius: 10px; }
The width will cause an overflow when the site is viewed on devices that are less than 550px, using
max-width
can be a better choice as that will allow the.box
to scale down if the element does not fit in the container. As for the height , in general , let the element and its children decide the suitable height without restrictions.- read the following article on Why font-size must NEVER be in pixels
Marked as helpful0 - while there is nothing wrong in using a div, consideration should be put into elements that make your site accessible. A div does not convey any meaningful message to assistive technology users. In this challenge I would perhaps expect to see an element such as the
Please log in to post a comment
Log in with GitHubJoin 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