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

QR Code Solution - Updated

@itsdeadale

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


Please let me know how I can do better with vertical and horizontal centering of an element.

Community feedback

@bella019

Posted

Good job. I see that you used inline styling I believe that using an external stylesheet is a better solution and would let you organize your code and make it readable for anyone. I also think using class to call your elements for styling is a better way to style as it would help you to get a better-personalized style for each element. Using a margin and padding of 0 to the whole page would allow you to have a better way to style your code. you can do this by adding this block of code to your css *{ margin: 0; padding: 0; box-sizing: border-box; } Good job. Happy coding

0
RabbitMaid 1,020

@Agbortoko

Posted

  • 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

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

0

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