Responsive page using CSS FLEX

Community feedback

• 

  Melvin Aguilar 🧑🏻‍💻•61,020

  @MelvinAguilar

  Posted over 2 years ago

  Hi @mttmene 👋, good job completing this challenge, and welcome to the Frontend Mentor Community! 🎉

  I have some suggestions you might consider to improve your code:

  • Use the <main> tag to wrap all the main content in your solution instead of using <div class="container"> to improve the accessibility of the website.

  • Use <footer> instead of <div class="attribution">. The <footer> element contains authorship information.

  • Since the entire component refers to scanning the QR code, the QR code image is considered important content. It is therefore necessary to add an alt attribute to the image to provide additional context. The alt attribute of the QR image should include descriptive text to explain the purpose of the QR image. Upon scanning the QR code, you will be redirected to the frontendmentor.io website, so an example of alternative text would be "QR code to frontendmentor.io". You can read more about alternative text here.

  • Please avoid using inline styling. In addition to causing specificity issues, it makes it extremely difficult to modify a single style. It is better to have the styles in a separate file. This will increase the order of your code and make it more readable.

  • Always avoid skipping heading levels; Always start from <h1>, followed by <h2>, and so on up to <h6> (<h1>,<h2>,...,<h6>). Swap the <h3> tag with <h1>.

  • Try to use more descriptive names for your classes. I suggest you learn the BEM naming convention standard for CSS class names because increases the readability of front-end code and provides a modular structure. For example, the classes "item1" and "item2" do not say what they are.

  • Instead of using the width you can use the margin property to place the text in the center

  .item2 {
      /* align-self: center; */
      text-align: center;
      /* width: 80%; */
      margin: 0 0.8rem;
  }
  

  Please don't worry if your suggestions are long, they are just details. In the end, the project is well done 👏. Hope you find those tips helpful! 👍

  Good job, and happy coding! 😁

  12

  Marked as helpful
• 

  Mike Oram•230

  @SlothSan

  Posted over 2 years ago

  Hey,

  CSS is best to be split onto another file, you can then link it in the head of your HTML as so.

  <link ref="stylesheet" type="text/css" href="style.css" />

  When it comes to flexbox and centering / moving things please see the guide here : https://css-tricks.com/snippets/css/a-guide-to-flexbox/

  Loosk great tho, well done!

  11

  Marked as helpful