Visual Studio Code, html and CSS

Community feedback

• 

  Abdul Khaliq 🚀•72,360

  @0xabdulkhaliq

  Posted about 2 years ago

  Hello there 👋. Congratulations on successfully completing the challenge! 🎉

  • I have other recommendations regarding your code that I believe will be of great interest to you.

  HTML 🏷️:

  • Your solution generates accessibility error reports due to non-semantic markup

  ---

  • So fix it by replacing the <div class="caja"> with semantic element <main> to improve accessibility and organization of your page.

  ---

  CSS 🎨:

  • We don't want margin to center the component both horizontally & vertically, instead remove the margin: 10rem auto; for .caja in css

  ---

  • To properly center the component in the page, you should use Flexbox or Grid layout. You can read more about centering in CSS here 📙.

  ---

  • For this demonstration we use css grid to center the component

  body {
      min-height: 100vh;
      display: grid;
      place-items: center;
  
      margin: 0;
  }
  

  ---

  I hope you find it useful! 😄 Above all, the solution you submitted is great!

  Happy coding!

  00

  Marked as helpful
• 

  Hassia Issah•50,450

  @Hassiai

  Posted about 2 years ago

  Replace <div class="caja"> with the main tag to fix the accessibility issues. click here for more on web-accessibility and semantic html

  The body has a wrong background-color. give it a background-color of hsl(212, 45%, 89%).

  To center .caja on the page using flexbox or grid instead of margin, add min-height:100vh; display: flex; align-items: center: justify-content: center; or min-height:100vh; display: grid place-items: center to the body.

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

  USING GRID:
  body{
  min-height: 100vh;
  display: grid;
  place-items: center;
  }
  

  Give .texto a margin value for all the sides, text-align: center and a font-size of 15px which is 0.9375rem, this will be the font-size of both p and h1. Give p a margin-top or h1 a margin-bottom value for the space between the text.

  There is no need to style .codigo , give the img a max-width of 100%.

  Reduce the max-width of .caja for it to be equivalent to the width of the design and give a padding value for all the sides. max-width:20rem which is 320px padding:1rem which is 16px

  Use relative units like rem or em as unit for the padding, margin, width values and preferably rem for the font-size values, instead of using px which is an absolute unit. For more on CSS units Click here

  Hope am helpful.

  Well done for completing this challenge. HAPPY CODING

  00

  Marked as helpful