using css for content styling

Community feedback

• 

  Hassia Issah•50,650

  @HassiaiPosted almost 2 years ago

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

  Add the alt attribute alt=" " to the img tag to fix the error issue, the value for the alt is the description of the image.

  Wrap "Improve your front-end skills by building projects" and <h1> and " Scan the QR code to visit Frontend Mentor and take your coding skills to the next level" in <p> to fix the accessibility issue.

  To center .content 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 .content on the page using flexbox:
  body{
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  }
  

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

  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

  There is no need to give .content a height value, increase the width and padding values of .content for it to be equivalent to the width of the design. e.g `width: 320px; padding: 15px;

  Give the img a max-width of 100%. Give .text a margin value for all the sides and a font-size of 15px this will be the font-size of both p and h1.

  Use the colors that were given in the styleguide.md found in the zip folder you downloaded

  Hope am helpful.

  Well done for completing this challenge. HAPPY CODING

  Marked as helpful

  1
• 

  Rostyslav Nazarenko•560

  @rostyslav-nazarenkoPosted almost 2 years ago

  Hi!

  • use semantic HTML elements
    • wrap div class="content" in main tag or change div to main
    • use footer element instead of div class="reference"
    • wrapping text elements in div is totally okay but use h1 and p elements for text inside and use CSS to style them accordingly to the design

  • there're problems with CSS, like repeating declarations

  As I can understand you've only started learning, I would recommend freeCodeCamp to learn the basics of HTML and CSS.

  Marked as helpful

  0