qr code practice

Community feedback

• 

  Hassia Issah•50,670

  @HassiaiPosted over 1 year ago

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

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

  To center .card on the page using flexbox, replace the height in .container with min-height: 100vh.

  Give .card-body 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 .card-header. For a responsive content, replace the width in .card and the img with max-width and give a padding value for all the sides. padding: 16px max-width:350px. r

  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

  0
• 

  RabbitMaid•1,020

  @AgbortokoPosted over 1 year ago

  • HTML5 elements such as <main>, <nav>, <header>, <footer>, <section>, <aside> act as landmarks, or special regions on the page to which screen readers and other assistive technologies can jump. By using landmark elements, you can dramatically improve the navigation experience on your site for users of assistive technology (Users with disabilities) .

  You can use the <div> for sub items within landmarks like <section>. In other words for containers or sections in your HTML you can use the <section> tag if you want to nest in sub items <div>.

  Landmarks such as the <section> may actually require that you specify a heading within. In other words if the section has no heading it may throw an error when checked by an accessibility tool.

  It is advisable that you place all your main site content in a landmark element <main> Here is an Accessibility Evaluation Tool to check your webpage for any errors or warnings related to landmarks.

  There exist an attribution <div> that comes with the frontendmentor starter kit. You will have to wrap this <div> in a <footer> tag

  Read

  • W3schools Accessibility Landmarks Notes for more information.

  • MDN Web docs notes for more information.

  I hope you find the above solution useful! 😄 Nevertheless, the solution you submitted is great! Happy coding!

  0
• 

  RabbitMaid•1,020

  @AgbortokoPosted over 1 year ago

  Greetings! Good job doing this exercise!. This is what i noticed!

  • Firstly you did not import the font properly. The link you where provided with in the guide is from google fonts, in other words, you need to use the link to get the required font.

  Try opening the link provided on the browser and you will see a proper description of the font required.

  Google font provides you with an option in that page to export your font to either CSS or HTML.

  The content provided there is what you need to copy and paste where necessary. Instead of this:

  <link rel="stylesheet" href="https://fonts.google.com/specimen/Outfit">
  

  Paste this in the header:-

  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@400;700&display=swap" rel="stylesheet">
  
  

  For more information on how to import google font use the link below YouTube Video

  0
• 

  João Vitor•460

  @jvssvjPosted over 1 year ago

  Hello friend, I'll give you some tips, to center the text (text-align:center;). Group all content into (main class=container). Use (width:#;) to limit the space consumed by the text. Wrap all your text in (div class=text). You are on the right track.

  0