Responsive Page using FlexBox and Media Query

Community feedback

• 

  P

  Remus D. Buhaianu•3,125

  @MiculinoPosted almost 3 years ago

  Hey Priyanshu!

  First of all, congrats on successfully completing your first Frontend Mentor challenge - you did a great job all things considered and learned quite a lot ;)

  Since you've asked for feedback, I'd like to offer a few suggestions. (in no particular order):

  1. In the Readme, you state that the project was built using HTML5 semantic markup. Unfortunately, there isn't any semantic HTML element present in your index.html file. Your code consists solely of <p>, <div>, and <img/> tags - no semantics whatsoever. Consider this resource https://developer.mozilla.org/en-US/docs/Glossary/Semantics for more info on semantic markup.

  2. Some of your classes don't have the best names. You've used emojis such as 💪 and 🎵 as values for the class attribute. Even though you can, in fact, target these elements using emojis classes, they're definitely not a great clean code practice. You might reconsider the names of certain classes and replace them with more meaningful options.

  3. There are some issues with the wavey background image on the iPad and iPhone screen sizes.

  4. You can set a background image for the entire body element, instead of using the <img /> element. It's a more simple and efficient solution.

  5. Your media queries code is rather repetitive and unnecessary. You don't need to set the same properties over and over again for the body element.

  6. Since you use rem units (which is a good practice), you'd want to target the html element and set the font-size to 62.5%. This way, the default font size will become 10px and 1rem will amount to 10px - it's easier to use rem units.

  7. Avoid using px units. Absolute units such as px don't allow the user to make the desired adjustments if needed, thus making the overall project less accessible and responsive. Setting the html's font-size to an absolute value is a bad practice.

  Hope my suggestions will be useful to you!

  Once again, well done on completing this challenge. Celebrate every victory you achieve and keep up the good work.

  Looking forward to seeing more of your work here!

  Marked as helpful

  3

  ---

  

  Priyanshu Saxena•20

  @PriyanshuSaxena2612Posted almost 3 years ago

  @Remus432 Thank you, sir, for your feedback and suggestions. I would surely work on my mistakes and rectify them.

  0
• 

  P

  David Turner•4,150

  @brodiewebdtPosted almost 3 years ago

  Download AXE DevTools and you can clear accessibility warnings while you code. https://www.deque.com/axe/devtools/

  Hope this helps.

  Marked as helpful

  1

  ---

  

  Priyanshu Saxena•20

  @PriyanshuSaxena2612Posted almost 3 years ago

  @brodiewebdt Thank you, sir, I would surely use this tool for my upcoming challenges.

  0
• 

  P

  David Turner•4,150

  @brodiewebdtPosted almost 3 years ago

  Your welcome. Glad I could help.

  0