Vanilla HTML and CSS QR page

Community feedback

• 

  Red•170

  @red-jpoPosted over 1 year ago

  Hello Hassan, congratulations on finishing your first challenge!

  How do I get the proper box-shadow? Try something like this

  box-shadow: 0 2px 15px rgba(0,0,0,.1);
  
  

  Check the syntax for the box-shadow so you can test alterations.

  The picture example shows the larger text to be more bold, but I couldn't get it to be as bold as the picture shows it, it might have to do with the font family.

  Yes, it does, you were supposed to use Outfit. It also has to do with the font-weight. The style guide stated that you need 400 and 700, so the title should have 'font-weight: 700'.

  What are the font sizes supposed to be?

  On this matter, I noticed that you used pixels (px) to set the font size. I recommend taking a look at the 'rem' unit of measurement. To determine the actual sizing, you can start with 1rem and increase it bit by bit until you reach your desired result. For this project, the heading should be around 1.5rem

  What units do I use for border-radius?

  I usually use rem as my default unit of measurement, as a personal preference. However, for this project, you can use either rem or px depending on your preference. Since this project has a fixed size and does not require responsiveness, using pixels is fine too.

  Marked as helpful

  1
• 

  Abdul Khaliq 🚀•72,560

  @0xabdulkhaliqPosted over 1 year ago

  Hello there 👋. Congratulations on successfully completing the challenge! 🎉

  • I have other recommendations regarding your code that I believe will be of great interest to you.

  ---

  HTML 🏷️:

  • This solution may cause accessibility errors due to lack of semantic markup, which causes lacking of landmark for a webpage and allows accessibility issues to screen readers, due to accessibility errors our website may not reach its intended audience, face legal consequences, and have poor search engine rankings, highlighting the importance of ensuring accessibility and avoiding errors.

  ---

  • What is meant by landmark ?, They used to define major sections of your page instead of relying on generic elements like <div> or <span>. They are use to provide a more precise detail of the structure of our webpage to the browser or screen readers

  ---

  • For example:
    • The <main> element should include all content directly related to the page's main idea, so there should only be one per page
    • The <footer> typically contains information about the author of the section, copyright data or links to related documents.

  ---

  • So resolve the issue by replacing the <div id="card"> element with the proper semantic element <main> along with <div class="attribution"> into a <footer> element in your index.html file to improve accessibility and organization of your page

  ---

  .

  I hope you find this helpful 😄 Above all, the solution you submitted is great !

  Happy coding!

  Marked as helpful

  0