Pixel perfect
I wrote my CSS through the guide on figma but still some of them didn't look exactly right. To make them pixel perfect (as mush as possible), I used this app. Check pixel perfect.
You can screen shot the figma page, put it as a layer on the page you are working and adjust your CSS code!
Validation
Validator
This was also new to me. I haven't checked if my code was written well without error or if it follows the web standard. I tried fix what's not suitable and make sure there's no error.
What I tried
- I tried not to use
<div>which I've been using way too much and also avoided using<br>. - for the images that don't have much meaning but there for design only, I made them as pseudo element.
- I also added headings which I didn't do it before either. I added them inside each sections / articles and made them to move outside of the screen so it's invisible to us but still readable through screen reader.
Things I'd like to do better & Things to rememeber.
- As I learnt about some CSS Methodologies that I posted before, I would like to write cleaner and more readable CSS next time.
- Try to avoid using uppercase when naming classes(to avoid mistyping). Instead, use kebab case(-/hyphen). e.g:content-title
- Try to make rules when naming classes. If there are rules, it will be more readable and logical. Think about the structure, common styles of each elements and what those contents are about.
- Think about margin collapsing when writing code.
Top comments (0)