qr-challenge-html-css

Community feedback

• 

  Hassia Issah•50,390

  @Hassiai

  Posted over 2 years ago

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

  To center %container on the page, add min-height:100vh; display: flex; align-items: center: justify-content: center; or min-height:100vh; display: grid place-items: center to the body.

  To center #container on the page using flexbox:
  body{
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  }
  

  To center #container on the page using grid:
  body{
  min-height: 100vh;
  display: grid;
  place-items: center;
  }
  

  Increase the padding value for #card . padding: 15px

  Give h1 and p the same font-size of 15px and the same margin-left, margin-right and margin-top values. Give p a margin bottom value.

  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

  10

  Marked as helpful
• 

  Sandro•1,150

  @sandro21-glitch

  Posted over 2 years ago

  Hi Lê Đức Long

  Here are a few suggestions for improvement your code

  HTML

  Use semantic HTML elements:

  Instead of using a div for everything, use semantic HTML elements such as header, nav, main, section, etc., to better describe the structure and purpose of your content.

  CSS Consistent naming convention:

  Consider using a consistent naming convention, such as BEM (Block, Element, Modifier), to keep your CSS organized and avoid naming conflicts.

  Reusable classes:

  Create reusable classes for styles that are used multiple times in your code. This will make it easier to maintain and update your styles.

  Use CSS variables:

  Consider using CSS variables to store values that are used multiple times in your code, as this makes it easier to maintain and update your styles.

  Minimize the use of hard-coded values:

  Instead of hard-coding values, consider using relative units such as em, rem, vw, vh, etc., to make your styles more flexible and adaptable to different devices and screen sizes.

  Happy Coding

  10

  Marked as helpful