Design comparison
Solution retrospective
I'm excited to have moved out the basics. While this project wasn't overly challenging, I'm proud of my growth as a developer, learning to rely on documentation and problem-solving skills though I know I can do it better, use better naming of classes or when structuring the html.
What challenges did you encounter, and how did you overcome them?I know most of the HTML tags but stills quite difficult when it comes to structure...What's the better way? this should go here or there? How should I name this class?
What specific areas of your project would you like help with?Structure of HTML tags and the use of BEM.
Community feedback
- @MiloosN5Posted 2 months ago
I like the way you structure your website using HTML code. My suggestion for your future work is to think of your code as a collection of smaller parts. In other words, try to understand the connections between elements. This approach can be really helpful in the future when you use frameworks like React, Vue, or Angular. Simplifying your code can improve reusability and optimization, as well as make it easier to manipulate.
Marked as helpful1@armson45Posted about 2 months ago@MiloosN5 I don't get the "code as a collection of smaller parts" and what comes after...Mind if you give an example? thank you
0@MiloosN5Posted about 2 months ago@armson45 Try to think of your code as a puzzle. Initially, I thought solving challenges was enough, but I overlooked how to later enhance my projects. Visualize your projects as a collection of smaller, interconnected parts. For example, your website might consist of:
- a header(s),
- an article,
- some images,
- text, etc.
Consider where each part belongs and how they connect with one another. Additionally, it's very useful to identify any repeatable behaviors that can be simplified. There's no need to duplicate functionality for elements that are similar or nearly identical.
This challenge is relatively simple, but the idea applies to more complex projects as well.
P.S. I noticed that your use of BEM is not following best practices, particularly with regard to "grandchildren" in the BEM naming convention. For example, "qr__code__paragraph" suggests that "qr" is a block, "code" is an element, but then "paragraph" becomes another element (a grandchild). It's better to use "qr-code__paragraph" or perhaps "qrCode__paragraph."
If you're interested, you can read more about this issue here: BEM naming.
Marked as helpful0@armson45Posted about 2 months ago@MiloosN5 Thanks for the advice! It really helps me.
1
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