@BernardusPH
Posted
Hey THICHA
There is nothing wrong with tweaking the px some people are just that meticulous. People just use rem/em, % or even vh and vw to play with some measurements. It comes down to the person. I do see the use of % in resizing the site so parts can fit in parents better or just as a max-width/min-width
For the border-radius there is no problem if its close to the design then its alright. If you go even further than this then you bordering on OCD territory which can be a time waster since the project is already almost perfect to the design.
If you have the sketch/fig files then the measurements can just be copied from and used but working from just a photo will require you guessing a lot and not getting a perfect replica but if its close enough then thats alright.
If you struggle with width/height try using clamp, I highly recommend it.
Tips for the site:
Don't use height:100vh on the body rather use min-height:100vh and min-height:100dvh the min-height makes your body's height as big as the screen but it can then increase based on the content. The dvh is for more responsiveness but put the vh before this as some browsers cant read dvh.
body{
min-height:100vh;
min-height:100dvh;
}
I see however that you did not add a box-sizing:border-box; to your * like:
*{
box-sizing:border-box;
}
This makes working with margin and padding easier as they wont increase the width/height of your containers easily.
Please don't use a div as a landmark without reason(like a framework). What I mean is, the DIRECT children of the body. There are a few landmarks like
- nav
- main
- footer
- aside etc.
For your project I would just replace the direct children of the body into main and footer respectfully. The reason for this is for the developers so we don't get easily lost in the code and also screen readers use the landmarks.
Hope this helped.
Marked as helpful
