Challenge N1 QR Code only HTML & CSS

Community feedback

• 

  Shivraj K•400

  @Shivraj-K09Posted over 1 year ago

  Here are some suggestions to further improve the code:

  • Accessibility: Add a descriptive alt attribute to the img element. This will help screen readers give more context about the image to users with accessibility needs.
  • Use semantic HTML: Consider using more semantic HTML tags. Instead of the card tag used on the wrapper, use a standard HTML tag like div. This will make your code more accessible and easier to understand for people using assistive technologies like screen readers.
  • Organize your CSS file: Consider grouping your CSS rules together based on their purpose, for example, group all the styles for the .top and .bottom class into two separate blocks. This makes it easier for someone reading the CSS file to understand which styles are being applied to which part of the HTML. Happy Coding 😉

  Marked as helpful

  1

  ---

  

  MaksTinyWorkshop•30

  @MaksTinyWorkshopPosted over 1 year ago

  @Shivraj-K09 Thanks a lot for your advices ! trying to apply ASAP as a beginner !! :)

  0
• 

  Kieran Price•80

  @kieranpdevPosted over 1 year ago

  Great job on your solution!

  One suggestion for you. Instead of setting the font properties on all of these elements:

  a,
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  p,
  span {
      font-family: 'Outfit', sans-serif;
      font-size: 15px;
      text-align: center;
      line-height: 1.4em;
      letter-spacing: .02em;
  }
  

  You can set them on a parent element such as body and all of the other elements will inherit that styling:

  body {
      font-family: 'Outfit', sans-serif;
      font-size: 15px;
      text-align: center;
      line-height: 1.4em;
      letter-spacing: .02em;
  }
  

  This would also work for any other parent element such as <card> or <main> where all nested elements will inherit those properties as well.

  Marked as helpful

  0