Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Using only HTML and CSS

@tyihao

Desktop design screenshot for the QR code component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


Feedback is more than welcome! This is my first attempt at coding HTML and CSS and it was great fun. I have learned a ton and would love to hear how I can further improve it.

Community feedback

@tesla-ambassador

Posted

Hey Tan Yi Hao, pretty neat solution! I am glad you had fun with this! In order to resolve your accessibility issues, you might want to consider the following:

  • You might want to add a <main></main> landmark to contain your <div> tags this enables the browser to easily navigate the website. There are different types of landmarks your could use like <header> for the header section <main> for your main content < footer> for your footer All this is used to ease accessibility of your website by people who might be using screen readers and other features of the like.
  • You might also consider adding an <h1> tag it's recommended to ease accessibility! In your case, you might add the <h1> on the "Improve your front-end skills by building projects" text. Happy coding!

Marked as helpful

2

@shashreesamuel

Posted

Just to add to the feedback regarding html semantic tags, here is a link to understand html semantics ,secondly the main reason why the html semantic tag main is recommended is because it describes the intended usage of the enclosed tags which will form the main content of the page. Lastly all documents are required to have a h1 tag if headings are being used and it can only go up one-level meaning that if you have a h1 then the next tag in line should be a h2

I hope this helps strengthen the feedback given

Cheers

Marked as helpful

2

@tesla-ambassador

Posted

@TheCoderGuru Thanks for re-enforcing the feedback 💪

0

@tyihao

Posted

@tesla-ambassador @TheCoderGuru Huge thanks to the both of you for the taking the time to provide the invaluable feedback!

0
Saul 1,260

@xsaul

Posted

Hello Tan Yi Hao, you did an amazing job! Just remember that the number of the headings is in order of importance. So in this case instead of <h3> you should use <h1>. Also if you will use only one font write it in the body, like that will be applied on all your site. Congrats for your design!

Marked as helpful

1

@tyihao

Posted

@xsaul Thank you Saul for the feedback! I will work on it! :-)

1

Please log in to post a comment

Log in with GitHub
Discord logo

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord