Design comparison
SolutionDesign
Solution retrospective
What are you most proud of, and what would you do differently next time?
I am most proud with the fact i was able to complete the example in one sitting and i was able to measure my level of comprehension on some of the concepts i learnt prior to taking on this project.
What challenges did you encounter, and how did you overcome them?I had a problem making the borders of the image round to look like the one in the design so I went on Google to find the answers and Stack Overflow was handy.
What specific areas of your project would you like help with?For now i dont need help
Community feedback
- @kalpesh172000Posted 2 months ago
Good things
- You followed standard practice of creating the css variables, resetting the margins and paddings and so on.
- Your solutions looks very close to the design. And additions like shadow really enhance the look of the card. Your solution is THE best one that I have seen.
- The UI is responsive and works with all screen sizes.
Improvements
- Excesive use of nested <div> is making the HTML code less readable. You can achieve the result with less number of <div>s. For example <main> & <footer> themselves are similar to <div> you can apply same properties to them. This excesive use of div also resulted in large css file.
- you assigned height and width for img in html attribute which is not a good practice. IT is a good practice to write 'ALL' of your css in external css.
- Not everything needs to be in <div>, what i mean by the is, yes div are really good block elements can be adjusted with width and height properties. But you can do same things with many other elements too. for example you dont need to put img inside its own seperate div. as you can play with img's dimentions and position without need of putting it another div.
0
Please log in to post a comment
Log in with GitHub
Join 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