@Mazz100
Posted
@ParaPaca Hello. Well done on completing the project!
While the final solution is looking great, I have some tips that might help you.
CSS SCSS:
-
Consider using rems for sizing UI like
font-sizeand width, other properties can be preference. Note: 1rem = 16px. -
Nesting elements in SCSS can very quickly get confusing and unreadable, you can separate unrelated classes like
.cardand.name-wrapperoutside ofmain. -
I am not an expert but I feel that using the nth child thing a lot is complicating and other selectors that I don't know or even using.
-
the last 2 points I mentioned I want to highlight the readability of CSS too, I also fell for nesting too much with SCSS forgetting that CSS exists.
HTML
- The
mainelement should be inside the container or wrapper because it indicates the the main content of a website, its like accessibility tip, I also get confused by it sometimes.
I hope any of this could help in any way for future projects :).
Resources that could help:
Marked as helpful
@ParaPaca
Posted
@Mazz100, hello! Thank you for your feedback! Your comment was very useful to me 😊
- You're totally right! I redefined all my px into rem. I didn't think about this possibility before as much as should, I think 😅
- Oh geez, I didn't think about it at all before! 😱 I can imagine how difficult all my previous projects were to read (thanks to everyone who figured them out). I edited my CSS where it was necessary.
- I rethought about nth-child and agreed with you, so I deleted all nth-child and added additional classes, such as card1, card2 and etc.
- I didn't know it! I will use this knowledge in my subsequent projects.
