Design comparison
Solution retrospective
👋 Hi, in this challenge at first I thought it would be easy but then when it came time to adapt the images responsive, was where I found it difficult, if anyone has any tips for positioning images in responsive designs that tell me please!!! Greetings and any criticism is appreciated
⚠ Please check the site, the screenshot is wrong.
Community feedback
- @PaulOCastlePosted over 3 years ago
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!!
2@renzo4webPosted over 3 years agoThanks 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?
0@PaulOCastlePosted over 3 years agoHey @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!!
1
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