Responsive page using CSS Flexbox

Community feedback

• 

  バレンタイン 😈•64,170

  @VCaramesPosted about 2 years ago

  Hey @maxnatalia, some suggestions to improve you code:

  • This is an extremely small challenge, so multiple CSS files are not need, use only one. Once you get to larger project, then you can use more.

  • The Alt Tag description for the QR image needs to be improved upon. Its needs to tell screenreader users what it is and where it will take them to when they scan it.

  • Delete from your Body Element: max-width: 1440px; and add min-height: 100vh;

  • Delete:

  .container__img {
      max-width: 280px;
      border-radius: 20px;
  }
  

  • Add to make your image fully responsive.

  img {
      max-inline-size: 100%;
      block-size: auto;
      border-radius: 20px;
  }
  

  • Your CSS Reset is extremely bare. You want to add more to it.

  Here are few CSS Resets that you can look at and use to create your own CSS Reset or just copy and paste one that already prebuilt.

  https://www.joshwcomeau.com/css/custom-css-reset/

  https://meyerweb.com/eric/tools/css/reset/

  http://html5doctor.com/html-5-reset-stylesheet/

  Happy Coding!

  Marked as helpful

  0

  ---

  

  Natalia Mazur-Żurek•200

  @maxnataliaPosted about 2 years ago

  @vcarames Thank you for your tips! I have already implemented them in the project :)

  0
• 

  Lucas 👾•104,400

  @correlucasPosted about 2 years ago

  👾Hi Natalia, congratulations on your 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:

  1.You can reduce the amount of files for css using a single file since this page is really small and the css sheet will be not long, use separate files for bigger projects as landing pages.

  2.Clean your code by removing some unnecessary divs, most of the content can stand alone without a div. Use div only for blocks that need a special alignment or the content needs a special positioning

  3.Add the box shadow to stylize the card: box-shadow: 5px 5px 15px 5px rgb(0 0 0 / 3%);

  4.Use relative units like rem or em instead of px to have a better performance when your page content resizes on different screens and devices. REM and EM does not just apply to font size, but all sizes as well. To save your time you can code your whole page using px and then in the end use a VsCode plugin called px to rem to do the automatic conversion or use this website https://pixelsconverter.com/px-to-rem

  Here's my solution for this challenge if you wants to see how I build it: https://www.frontendmentor.io/solutions/qr-code-component-vanilla-cs-js-darklight-mode-nS2aOYYsJR

  ✌️ I hope this helps you and happy coding!

  Marked as helpful

  0

  ---

  

  Natalia Mazur-Żurek•200

  @maxnataliaPosted about 2 years ago

  @correlucas Thanks for your tips! I have already changed 3 points and I am starting the next one :) Great conversion website! thanks :)

  0
• 

  Raja Junaid Farooq•390

  @Raja-JunaidPosted about 2 years ago

  Hi Natalia! Congratulation on completing this challenge. I have some tips for you to improve your coding skill:

  1- Don't make so many files for CSS. It takes time. Because you use almost 4 or 5 CSS Files and it takes so much time, so code on the same file.

  2- Use comments in your code so this help what's going on.

  3- Make your work as decent as possible.

  5- Use nice-looking fonts.

  5- Use attractive colors.

  6- Make your websites neat and clean.

  I hope this helps you

  HAPPY CODING!

  Marked as helpful

  0