Design comparison
Solution retrospective
-
Is there any way I could've made my code neater or done it in a way that was more efficient?
-
Are there any other best practices that I am perhaps missing out on that would be beneficial to know?
Thank you!
Community feedback
- @correlucasPosted about 2 years ago
Hello Trevor, congratulations for your solution!
š Answering your question
You could have done this code clean and lean just by using a single div to wrap all the content (img h1 and p). This is the cleanest html.
For the css you can delete all classes and use the direct selector for each element (div main img h1 and p) since they're unique.
Write a clean code is use only the necessary lines of code. It's really hard to know it by the beginning, but if you pay attention for these details you'll see that writing less give more control over the code and the css.
Marked as helpful2@TactenatorPosted about 2 years ago@correlucas That makes a lot of sense. I'm making those changes right now. Thank you very much for taking the time to help out :) Have a good one!
0 - @elaineleungPosted about 2 years ago
Hi Trevor, welcome to Frontend Mentor, and congrats on completing your first challenge! Since Lucas gave you some excellent tips on writing cleaner CSS, I'll just give you a suggestion on how else you can make this responsive.
Right now you've used a fixed height on your component as well as a
width: 18%
. The one issue with that is that, at a browser window size of 1440px, an 18% width is OK, but when the browser window is smaller, your component will also be a lot smaller, and at 375px, it's pretty much unreadable. What you can do instead is to use responsive properties such asmax-width
. You can try adding amax-width: 400px
and see how what happens. I would also remove the fixed height, as you normally would want the browser to determine the height based on the contents inside, and if you fix the height, you could run into issues where there could be white space left or contents could be overflowing out of the container.Hope this helps a bit, and happy coding! š
Marked as helpful1@TactenatorPosted about 2 years ago@elaineleung Hello! I forgot to consider responsiveness for the browser. I very much appreciate the advice and I'm working on changing that right now. Thank you very much!
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