Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Desktop design screenshot for the QR code component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


What are you most proud of, and what would you do differently next time?

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

MiloosN5 190

@MiloosN5

Posted

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 helpful

1

@armson45

Posted

@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
MiloosN5 190

@MiloosN5

Posted

@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 helpful

0

@armson45

Posted

@MiloosN5 Thanks for the advice! It really helps me.

1
MiloosN5 190

@MiloosN5

Posted

@armson45 I'm glad to hear it!

0

Please log in to post a comment

Log in with GitHub
Discord logo

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