Responsive QR-code card design using flex-box

Community feedback

• 

  Kanishka Priyashantha•690

  @kanishkasubashPosted over 1 year ago

  Hello Sarmad 👋. Congratulations on completing the challenge!

  Your solution looks great, and you've done a fantastic job overall! However, here are some small suggestions after taking a look at your code to make it even better:

  HTML:

  • The <main> element should wrap around the entire component. Use semantic elements such as <main> and <footer> to improve accessibility and organization of your page.
  • Always avoid skipping heading levels; Starting with <h1> and working your way down the heading levels <h2>, <h3> etc. helps ensure that your document has a clear and consistent hierarchy. Source

  CSS:

  • In answer to your question, Flexbox is generally the best modern layout method to use for flexible responsive structures. Grid would be used for content where you want better control of their layout using columns and rows. This article explains it quite well Source as well as this video by Kevin Powell which demonstrates in practice when you would use which Source (NB. You can also combine them in an application, it all depends on the use-case)
  • Avoid applying fixed height to the component. Let the content determine the height so that it can adapt to different screen sizes and content lengths.
  • font-family: 'Outfit', sans-serif; no need to use again and again. set it in the body body{font-family: 'Outfit', sans-serif;}
  • You should use a CSS reset. A CSS reset is a set of CSS rules that are applied to a webpage in order to remove the default styling of different browsers.

  CSS resets that are widely used:

  • Reset CSS
  • "My Custom CSS Reset" by JoshWComeau

  I change some property values in your code better for the mobile view. media queries are not necessary.

  .container {
    max-width: 320px;
    border-radius: 15px;
    box-shadow: 10px;
    background-color: hsl(0, 0%, 100%);
    margin: 20px;
  }
  
  .qr-code {
    width: 90%;
    border-radius: 15px;
    margin: 15px;
  }
  
  .title {
    font-weight: 700;
    font-family: 'Outfit', sans-serif;
    font-size: 22px;
    color: hsl(218, 44%, 22%);
    text-align: center;
    margin-inline: 15px;
  }
  
  .description {
    color: hsl(220, 15%, 55%);
    font-weight: 400;
    font-family: 'Outfit', sans-serif;
    text-align: center;
    padding-inline: 24px;
    font-size: 15px;
    margin-bottom: 32px;
  }
  

  I hope you find this helpful! 😄 Keep up the great work! 👍

  🖥️Happy coding!

  0

  ---

  

  Sarmad Khan•310

  @Sarmad-Khan-creatorPosted over 1 year ago

  Thanks for your suggestion, your suggestions would help me alot in improving my skills. @kanishkasubash

  0