Responsive page using CSS FLEX

Community feedback

• 

  Melvin Aguilar 🧑🏻‍💻•61,160

  @MelvinAguilarPosted about 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! 😁

  Marked as helpful

  1

  ---

  

  mttmene•20

  @mttmenePosted about 2 years ago

  @MelvinAguilar As I replied to another person I just got back into HTML and CSS today, I didn't remember a lot actually and I have been searching for info and guide to learn smth new by the moment that in our school they haven't gone that deep! Didn't know abt the main tag, abt the footer thing ye I thought abt it but the code has already this thing so I thought I should manage it in another way, forgot abt the "alt" too oopsie About the <h3> thing, it's better just to write down <h1> and then style it to make it smaller? About the names of classes we usually didn't even have something decent as name xd, we just put lot of random names, and didn't know abt the margin thing too I appreciate a lot your advices, these will make me improve my skills!! Tyyy

  1

  

  Melvin Aguilar 🧑🏻‍💻•61,160

  @MelvinAguilarPosted about 2 years ago

  @mttmene Hi! 👋 I'm glad my comments can help you ! 😁

  According to the <h1>, yes, you can place the <h1> and then add styles to it to make it smaller. And about random class names, this can be a problem on large web pages because you won't know how to identify which element the classes belong to. Happy coding!

  Marked as helpful

  1
• 

  Mike Oram•230

  @SlothSanPosted about 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!

  Marked as helpful

  1

  ---

  

  mttmene•20

  @mttmenePosted about 2 years ago

  @SlothSan I actually attended an IT secondary school, but we focused more on learning html and js then CSS so I'm trying to learn something by myself, I thought about splitting the CSS on another file and actually about flexbox I learnt everything today, so yeah, kinda just started! Ty for the advice and the guide!

  1