Design comparison
Solution retrospective
This is the first site i made with sass, any tips or suggestions on how i can make cleaner and more efficient code would be appreciated
Community feedback
- @HashimAlSadahPosted over 2 years ago
Hi @joshuaAj003. Congrats on completing this challenge, your Sass code looks great and I like the organization of the code where every section is placed into a separated file.
I have noticed that you are using mixin for the gradients sometimes and sometimes you have them as variables, and some times you hard code the gradients directly, which makes you inconsistent. I suggest that you have the gradients as variables and not as mixin.
I also notice that your code is deeply nested and that can confuse you and the reader and can lead to specificity issues (your Sass will be complied into CSS with too specific selectors). I suggest that you nest one level down or two at most.
I also suggest that you make the screen break-points as variables, so they can be easily modified later if it is needed.
I noticed that you are having @media (max-width: ...px), which means you are doing desktop first (correct me if I am wrong), which is not the best practice. It is usually mobile first.
Anyway, I like your code and the work you have done and my suggestions do not make it any less impressive.
Marked as helpful0@JAjorgborPosted about 2 years ago@HashimAlSadah thanks so much for the feed back and tips and even taking time to look through my codeπ , I'll do well to take note of what you said and you where right about the nesting issues i actually did get confused at some point when trying to add additional features to the site and yes I did the desktop layout first π , I'm actually more or less used to it at this point but from now on I'll work on designing mobile first
0
Please log in to post a comment
Log in with GitHubJoin our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord