@PaulOCastle
Posted
Hi @renzo, I think you have done a good job, but need some work on the images for sure!! ;P I just finished the same challenge and found that you have a great resource in https://www.w3schools.com/ about CSS, HTML and JS. Check out the background options, there is a way to set the positioning, size and much more. Regarding the other images, I used margins and overflow hidden for the desktop version and it worked. In the other hand, I have been practicing my SCSS skills and found that breaking the code in smaller & per-component files, helps to bring more reusability. So defo I will suggest you to look into the SCSS and how to organice your code and use various files. My preference is to create folders inside the SASS folder to contain
- HELPERS (where I include my mixins, variables and functions)
- GLOBALS (where I include my resets and commons)
- LIBRARIES (where I include libraries like bootstrap or similar)
- COMPONENTS ( where I include the styles of the reusable components of the app/web)
- MODULES (where I include the special modules to alter the general styles e.g. components, libraries, etc)
- PAGES (where I include the specific styles of each page if needed) Hope this helps and just to be clear, this is not a criticism, but a hand from a learning mate!! :) Have a happy coding!!
@renzo4web
Posted
Thanks for the comment Paul , you are right I should split the different components as you advise. .scss files must go in rendering order or can they go in any order?
@PaulOCastle
Posted
Hey @w3renzo, The order I use is:
- Variables
- Functions (if any)
- Mixins (if any)
- External libs (if any)
- Resets
- Commons
- Components (I try to apply a logical order in the way of “is a component used by other components? Then it goes first”)
- Modules (if any)
- Pages (if any) By the way, something I learned as a Backend Dev is the importance of using meaningful names for everything. Don’t be afraid of tipping long names, as it will make your life easier if the name make sense than if it is a one letter/abbreviation, ask your self this question, will I remember what is this about in one month, one year?? Code needs to be read and understood by others too!! Happy coding!!
