QRcode main component using HTML, CSS and Bootstrap

Community feedback

• 

  haquanq ®️•1,585

  @haquanqPosted 4 months ago

  Hello @Joewanaaa

  This is my opinion on how you can improve this solution:

  • Page must have one main landmark (read more here)) which means wrap the mot important content of the page inside it.
  • Consider using more semantic markups instead of div (avoid using div when ever possible, i will explain later) such as section, article, figure,... . For example, you can choose sectionorarticle` to wrap the card (depend on what context you want to provide - is it a section or article?).
  • You are using headings wrong, the size of the title is irrelevant to the heading order but it rather depend on your content flow (normally you should start from h1 to h6 and not skipping any level - such as h2 to h4). Page must have one h1 to give the title of the page.
  • You should keep your HTML structure clean and avoid unnecessary div wrapping. Often, div should be used for styling purposes such as changing it's child elements layout (ex: using flexbox), you can leave child elements as it is or if the content represent as child-content you should find a proper HTML markup to wrap it (a list or section, article??) and make sure to provide a proper heading level.

  Have a nice day and happy coding!!!

  Marked as helpful

  0

  ---

  

  Joewanaaa•80

  @JoewanaaaPosted 4 months ago

  @haquanq Thank you so much this is much appreciated! This is noted and will update my code applying your feedback :)

  0

  

  Joewanaaa•80

  @JoewanaaaPosted 4 months ago

  @haquanq hello, I tried updating my HTML, would you be so kind to give me a new feedback on this one? Thank youuu!

  0

  

  haquanq ®️•1,585

  @haquanqPosted 4 months ago

  @Joewanaaa you have already used article for the card and then there is a section to wrap it's content which make h1, p belong to the section not article, hence it makes article meaningless.

  You can use div instead of section which makes these texts belong to article or consider not wrapping them inside any element at all.

  0

  

  Joewanaaa•80

  @JoewanaaaPosted 4 months ago

  @haquanq I thought divs are non-semantic element?

  0

  

  haquanq ®️•1,585

  @haquanqPosted 4 months ago

  @Joewanaaa yes, it is just a way to replace section in your case, for me i would remove it.

  0
• 

  Sakib Ahmed•240

  @devvsakibPosted 4 months ago

  Perfect but you can increase the height, it will be pixel perfect IG

  Marked as helpful

  0

  ---

  

  Joewanaaa•80

  @JoewanaaaPosted 4 months ago

  @devvsakib yay! thank you!

  0