@Stroudy
Posted
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 helpful
@Juweeriyo
Posted
@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.