Responsive design with flexbox. custom variables.

Community feedback

• 

  Adriano•38,250

  @AdrianoEscarabotePosted about 4 hours ago

  Hey ed, how’s it going? I was really impressed with your project’s result, though I have some advice that could be helpful:

  You have used <br> , using <br> is not only bad practice, it is problematic for people who navigate with the aid of screen reading technology. Screen readers may announce the presence of the element. This can be a confusing and frustrating experience for the person using the screen reader.

  You can read more in MDN.

  Everything else looks great.

  Hope this helps! 👍

  0
• 

  hitmorecode•6,660

  @hitmorecodePosted about 16 hours ago

  Nice well done, your html structure looks good. Just a few pointers.

  • I see you add two <br> tags to create more space between the <h1> and <p> tag. Using br tags to achieve this is not good practice. If you want to create white space between elements, just use margin or padding with this you have a much better control in creating white spaces.
  • When setting the height of the body, make it a habit of using min-height instead of height.
  • By default the width of the body is already 100%, so you don't have to add width: 100vw on the body.
  • Inside .text h1 and .text p you have margin: 0; you don't need this, because you already set all margin to 0 in the CSS reset

  As a suggestion it's best to use rem over pixels for font size. This has to do with the fact that rem scale better than pixels. Just do a research on rem over pixels.

  The problem in converting pixels to rem is the calculation method. There is a simple way to convert pixels to rem without much of a calculation. This is how you can do it.

  // add this to the root
  :root {
     font-size: 62.5%;
  }
  
  // add this to the body
  body {
    font-size: 1.6rem;
  }
  

  With this you have created a base 10 system. Now all you have to do is divide the number of pixels by 10 and you'll have the value of rem*. So font-size: 22px will be font-size: 2.2rem.

  I hope you find this helpful. Keep it up* 👍👌

  0