Design comparison
Solution retrospective
I'm proud of using CSS Grid instead of Flexbox. I usually rely on Flexbox, but with Grid, I was able to achieve the layout with fewer lines of code. Next time, I might experiment more with Grid to better understand its full potential.
What challenges did you encounter, and how did you overcome them?One of the main challenges was keeping my code clean. For example, I used inline styles inside the <p> elements instead of defining them in an external CSS file (or within a <style> block in the <head>). I wasn’t sure whether I should create separate classes for the bold <p> elements and the regular ones.
What specific areas of your project would you like help with?I’d like feedback on how to clean up my code, remove unnecessary elements, and organize it better. Or, if it already looks fine, I'd appreciate confirmation that I’m on the right track.
Community feedback
- @catherineisonlinePosted 26 days ago
Hello there! Your solution looks great.
As for the clean code, I think it looks pretty messy right now. As you stated, you weren't sure whether it's worth creating a separate class just for the bold text, but in reality, it's a better choice rather than adding inline styles.
First of all, it's always better to have styles separated from HTML because it gets cached, which means the page will load faster the next time the user visits the website. Since inline styles are embedded in HTML, they won't be cached. On top of that, you are polluting the HTML and affecting its performance. It's much better to add a class just for a single styling than adding inline styles!
The second reason is maintenance and organization. With all the styling scattered around, it's hard for the third person to understand what's going on, and it will be hard even for you. 😬 The code should always make sense to others. This is a great skill that will be very useful if you plan to continue with development.
Also, it's much easier to find and style elements when you can find them in one place and one class, especially if you have multiple elements with the same style.
Imagine if you had the same inline styles for several
<p>tags, and if you decide you want to change the color, you would need to scroll through the entire HTML, find the ones you need, and add the styles. Instead, you would just find them by the class and update it in one place, if that makes sense. This approach might sound weird for such a small project right now, but such small improvements and habits will be very useful in the future. There is even a principle in development called separation of concerns, which in this scenario would state that CSS should be for styling, HTML for structure, and JavaScript for functionality - not the mix of everything in one place.To summarize, by keeping styles in a separate CSS file, you follow best practices that make your code readable and optimized. Small habits like this will make a huge difference in bigger projects 🔥
Marked as helpful0@valen-webdPosted 26 days ago@catherineisonline I really appreciate your feedback! I'll make sure to work on organizing my code better, even for small projects.
0 - @AnthonyCampanaPosted 26 days ago
Looks great!!!! The sizing and the spacing of the elements is a bit off from the design. I Would suggest adding the PixelParallel extension to be more accurate with the sizing and spacing. I use it extensively when completing these challenges. Also inline styles are considered to be bad practice so I would use them very sparingly(source: https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Styling_basics/Getting_started). Hope this helped
Marked as helpful0
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