Design comparison
Solution retrospective
Hello , this is my solution for this challenge , If you have any suggestions or modifications to make the code better, I am more than welcome for your advice , thanks .
Community feedback
- @NikolaD93Posted almost 2 years ago
Hello there! π
Congrats for completing the challenge! Everything looks great and the code is clean. π
Hope this was helpful for you!
Happy holidays! πβ
Marked as helpful1 - @HassiaiPosted almost 2 years ago
Replace <div class="container"> with the main tag, <h2> with <h1> and <div class="attribution"> with the footer tag to fix the accessibility issues. for more on semantic html visit https://web.dev/learn/html/semantic-html/
To center .container on the page, add min-height:100vh; display: flex; align-items: center: justify-content: center; or min-height:100vh; display: grid place-items: center to the body.
There is no need to give .container a height value, the heigh will make content overflow when it is resize.
Use rem or em as unit for the padding, margin, width and preferably rem for the font-size for more on CSS units watch this https://youtu.be/N5wpD9Ov_To
in the media query give the width of .container a value. e.g:
width: 320px;
and flex-direction: column, no need for display: flex again and justify-content: space-between.Give .image2 display: block ;instead of inline-block by default the img is an in-line element. in the media query you want to it to occupy and entire space.
Hope am helpful.
Well done for completing this challenge. HAPPY CODING
Marked as helpful0@Abdo-al-RPosted almost 2 years ago@Hassiai thanks alot .. alot of new informitions for me .. thank you
0 - @VCaramesPosted almost 2 years ago
Hey there! π Here are some suggestions to help improve your code:
Congrats on completing your first challenge!ππ
- Do not forgot to check your FEM report, to see what is incorrect and update your code with it right after you submit your challenge.
- To properly center β
your content to your page, you will want to add the following to your
body
(this method uses CSS Grid):
body { min-height: 100vh; display: grid; place-content: center; }
More Info: π
- The imageβs
alt tag
description needs to be improved upon. Assume that you are describing the image to a someone over the phone.
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! ππ
Marked as helpful0@VCaramesPosted almost 2 years ago- Currently, the old price (169.99) π· is not being properly announced to screen readers. To fix this, you are going to wrap the the price in a
del
element and inside it you will add aspan
element with ansr-only class
that will state something like βThe previous price wasβ¦β and use CSS to make it only visible to screen readers.
More Info:π
- Your
CSS Reset
is being underutilized. To fully maximize it, you will want to add more to it.
Here are some examples that you can freely use:
- For improved accessibility π for your content, it is best practice to use
rem
for yourfont-size
and other property value. Whileem
is best formedia-queries
. Using these units gives users the ability to scale elements up and down, relative to a set value.
- Implement a Mobile First approach π± > π₯ Mobile devices are now the dominant πway in which people browse the web, it is critical that your website/content looks presentable on all mobile devices.
More Info: π
Marked as helpful0@Abdo-al-RPosted almost 2 years ago@vcarames thank you very much that was helpful my friend
1@VCaramesPosted almost 2 years ago@Abdo-al-R
Glad I could help!βοΈ
Keep it up!
Marked as helpful1
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