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

Submitted

Responsive landing page usign flexbox.

@eduu17

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 the good practices that I can use and how can I improve my html and css?

Community feedback

@manjeshrv592

Posted

Congrats on completing the challenge.

Some possible improvements you can make

HTML

1.For qrcode-content you have used section tag. Section is a semantic tag used to seperate different section of a webpage. A general tag like <div> would make sense.

2.For best practice make sure you have class name for every tag in your html. In your case <h2> inside qrcode-content can have a classname of qrcode-title and <p> tag can have something like qrcode-text. This isn't issue for small project. When you work on bigger project you have to make sure you have lowest possible specificity for all the elements. This can be achieved by using unique classname for all tags.

CSS

1.If you struggle with unique classname for tags like me 😅, I advice you to learn about BEM for naming css classes. This is only for large projects though.

2.You used flex on qrcode-content which is not necessary. A simple margin bottom on <h2> tag can get the job done.

3.Your targeting .qrcode-content h1 in your css. But you have used <h2> tag html.

4.Your setting font to roboto in css but your importing Montserrat font from google in your html. Make sure font you are importing and font being used in css are similar.

Marked as helpful

0

@eduu17

Posted

@manjeshrv53 Hi, thank you to support my code!

1 - I change it do div. I have that problem to use section or div. Which case i will use section, div and article?

2 - Ty to share. This is a little project and i guess that are unecessary to use especific classes to elements on html, in this case. But i will be better on this, changing my mindset.

CSS

1 - I will search about BEM.

2/3 and 4 - I fixed it, i forgot this part.

I greatly appreciate your help, thank you very much. I hope that one day, i can be a better developer.

Can you support my Product Preview with CSS Grid layout project?

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