@Stroudy
Posted
Hey, Great solution and it is so close to the original design! Few things I noticed,
- It is best practice to have a
<main>tag inside your body highlighting the main section. - Using a naming convention like BEM, Using proper naming will prepare you for the changes in design of the website.
- 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. - Line height is usually unitless instead of
line-height: 150%;should useline-height: 1.5;this means it is 1.5 x the font-size, unitless value ensures that the line height will scale proportionately. - You should avoid using
pxas it is an absolute unit and not a responsive unit likeremorem, You should look at this article from a Frontend mentor dev, Why font-size must NEVER be in pixels. - You should apply a full modern reset to make things easier as you build, check out this site for a Full modern reset
- Having an aspect ratio on your images will increase performance to reduce layout shifts and improve CLS,
- Check out this article from a Frontend mentor dev about responsive-meaning.
Nice to see you using responsive units like rem and em, you should apply them to fonts as well for accessibility. Hope to see more from you soon, Happy Coding!
Marked as helpful
@SantiagoGelvez
Posted
@Stroudy Wow amazing feedback! Thanks so far. I tried to put as much responsive tag as I remember but with your help, I will improve my proyect to get better results. Again thank you so much.
@Stroudy
Posted
@SantiagoGelvez, I'm still new to this myself but a lot of this knowledge was passed on to me and it is too good not to share, I hope it helps, really give those articles a good read to fully grasp it. It will take time to keep referring back to it, I booked marked those pages. Good luck my dude!
