Made a page with a QR redirecting to Frontend Mentor.

Community feedback

• 

  Jenna•230

  @NandiniCooppenPosted over 1 year ago

  Hello tanmayuniyal,

  Congrats on completing the QR- code challenge 👏

  If I may suggest some improvements :

  Improve accessibility

  1. Alternative text

  Adding a meaningful description to the 'alt'.

  For example alt="QR code for Frontend Mentor website"

  2. Semantic structure

  Using the semantic HTML5 in your structure.To improve the document structure and in return improve its accessibility, consider using <header>, <main>, <article>, and <footer> elements where applicable.

  You must not have an h3 heading directly in your structure. It should always start with an h1 heading.

  For example :

  <main>
  <article class="card-section">
  <div class = "container">
  <div class = "box">
  <img src="images/image-qr-code.png" alt="QR code for Frontend Mentor website">
  <h1>
  Improve your front-end skills by building projects.
  </h1>
  <p>
  Scan the QR code to visit Frontend Mentor and take your coding skills to the next level.
  </p>
  </div>
  </div>
  </article> 
  </main>
  

  Read more about accessibility here

  Read more about semantics here

  Read more about headings here

  Using CSS variables

  For example, using the style guide provided, you may create your CSS colors variables as follow :

  root {
  --white: hsl(0, 0%, 100%);
  --light-gray: hsl(212, 45%, 89%);
  }
  
  

  Read more about CSS custom properties here

  Centering elements using Flexbox

  To center the container both horizontally and vertically, you can use CSS flexbox as follow on the body.

  body {
  background-color: hsl(0, 0%, 93%);
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  }
  

  You may then remove all the margin properties from the .container, leaving only the following code :

  .container {
  background-color: hsl(209, 47%, 90%);
  padding: 80px;
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.23);
  }
  

  Read more about min-height here

  Read more about CSS Flexbox :

  Link1

  Link2

  For info, you can use the shorthand form for padding and margin values.

  Read more about padding here

  Read more about margin here

  I hope these will be helpful to you 😉

  Good luck going forward and happy coding 🙂

  Marked as helpful

  0