Responsive landing page usign flexbox.

Community feedback

• 

  Manjesh R V•320

  @manjeshrv592Posted almost 2 years ago

  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

  ---

  

  Eduardo Sampaio•20

  @eduu17Posted almost 2 years ago

  @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