Semantic HTML5, markup CSS custom properties and Mobile-first workflow

Community feedback

• 

  Lucas 👾•104,340

  @correlucasPosted about 2 years ago

  👾Hi @Abiodun1Omoogun, congratulations on your first solution!👋 Welcome to the Frontend Mentor Coding Community!

  Great solution and a great start! From what I saw you’re on the right track. I’ve few suggestions for you that you can consider adding to your code:

  • Add the correct size to avoid the container growing more than it should. In this case the QR CODE component size is max-width: 320px.
  • You’ve used px as the unit for sizes but the problem with pixels is that it is not optimized for multiple devices and screens. So a good fit is to use rem or em that have better performance and make your site more accessible between different screen sizes and devices. REM and EM does not just apply to font size, but to all sizes as well.
  • Use a CSS reset to avoid all the problems you can have with the default CSS setup, removing all margins, and making the images easier to work, see the article below where you can copy and paste this CSS code cheatsheet: https://piccalil.li/blog/a-modern-css-reset/
  • Reduce your code putting all content inside only one div.

  ✌️ I hope this helps you and happy coding!

  Marked as helpful

  1
• 

  Kawsar Ahmed Fahad•2,660

  @faha1999Posted about 2 years ago

  Hello, Emmanuel Omoogun Congratulations on finishing this project. It's lovely and great on the whole! Just a little tip:

  • add the below code to the body. It will center everything

  body {
       justify-content: center;
      align-items: center;
      display: flex;
      min-height: 100vh;
      flex-direction: column;
  }
  

  • add the below code to the main. It will center everything

  main{
      max-width: 340px;
   padding: 1.2rem;
  }
  
   h1 {
        font-size: 1.4rem;
        font-weight: bold;
        margin-bottom: 1rem;
      }
  
  p{
   font-size: 1rem;
  }
  

  • **Remove all transform, width, height from main.

  • No media query is required for this project.

  • This is my solution for this project live, repo

  I hope it will work. Happy coding.

  Marked as helpful

  1

  ---

  

  Emmanuel Omoogun•40

  @Abiodun1OmoogunPosted about 2 years ago

  @faha1999 so I need to delete all the media queries

  0

  

  Kawsar Ahmed Fahad•2,660

  @faha1999Posted about 2 years ago

  @Abiodun1Omoogun yeah

  0
• 

  Joseph Fola•590

  @Fola-JoePosted about 2 years ago

  Well done on your first project on Frontend Mentor 🎉🎊 Just make a little adjustment to your css code. First, set your main width to a definite value rather than using percentage

  main {
     max-width: 370px;
  }
  

  You could as well not give the 'main' selector a 'height' property, but edit your body height to min-height and not max-height. I hope this helps! Happy coding!

  Marked as helpful

  1
• 

  Nelson Nzewi•270

  @nzewiPosted about 2 years ago

  Congrats on completing your first challenge Emmanuel

  You have a great solution there

  Here are my suggestions for you:

  1.You don't need media queries to make this challenge responsive. If you follow responsive design principles, it would be enough. I would recommend this [course] (https://courses.kevinpowell.co/view/courses/conquering-responsive-layouts/)

  2.Using relative units like rem and em instead of px would make your site more responsive. Learn about them and use them in your next project.

  3.You can center your card by doing this

  main {
     display: flex;
     justify-content: center;
     align-items: center;
  }
  

  4.I noticed you made your h1 and p flex containers, wrapped your image in a <section> tag and used a <br> tag in your <h1>. Doing these are not necessary as you can achieve your solution without them.

  I hope this helps

  Marked as helpful

  1