Design comparison
SolutionDesign
Solution retrospective
What are you most proud of, and what would you do differently next time?
I will improve next time the mobile design more than I do now
What challenges did you encounter, and how did you overcome them?the most the most challenge part is box-sizing it took me a lot of time
What specific areas of your project would you like help with?I Think the mobile design need some work
Community feedback
- @StroudyPosted 3 months ago
You should be proud of this, Great job, few things I noticed,
- Setting a height and width attribute to your
<img>
will increase performance to reduce layout shifts and improve CLS, It reserves the space on the page for the image, - Heading elements are not in a sequentially-descending order, They should go in order like
<h1>
<h2>
<h3>
<h4>
top to bottom, currently yours is<h1>
<h4>
<h3>
<h3>
, - Lists do not contain only
<li>
elements, Screen readers have a specific way of announcing lists. Ensuring proper list structure aids screen reader output, removing all<br>
will solve this issue. - Missing a
<meta>
description tag for SEO purposes, - It is best practice to have a
<main>
tag inside your body highlighting the main section. - You should avoid using
px
as it is an absolute unit and not a responsive unit likerem
orem
, You should look at this article from a Frontend mentor dev, Why font-size must NEVER be in pixels. - Another great resource for px to rem converter.
- Using
max-width: 100%
ormin-width: 100%
is way more responsive then justwidth:100%
, check out this article also from the same Frontend mentor dev responsive-meaning, she goes into more detail. - 📃 You should apply a full modern reset to make things easier as you build, check out this site for a Full modern reset,
- Setting a height and width attribute to your
<img>
will increase performance to reduce layout shifts and improve CLS, It reserves the space on the page for the image, - Using a naming convention like BEM, Using proper naming will prepare you for the changes in design of the website.
I hope you found some of this information helpful ✔, You should give the articles a good read and I look forward to seeing some more from you, Happy coding! 💻
Marked as helpful1@JuweeriyoPosted 3 months ago@Stroudy Thank you very much for all these notes, of course, they are useful, and I will read the articles you mentioned to learn more.
1 - Setting a height and width attribute to your
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