QR Code Component

Hi Steven

Congratulations for taking your first challenge , here is some areas that you should look at:

1. a site should have landmark elements or at least one landmark element . These elements includes main, header, footer, nav etc and are special regions on a page which are used by assistive technology. They convey the structure of your page. Check on MDN on how, where and when to use such elements
2. closely related to the first point , is the use of semantic elements - that is elements which have a special role or elements that are created for a special purpose. For example the Top Level Heading on your page should be reserved for the h1 element. A site should have at least a heading elements.
3. Every image should have an alt attribute, when the image is a decorative image - it should have an alt attribute with an empty value but other than that the alt value should be the message that is carried in the image. Another importance of the alt value is found when the image fails to load due to maybe network issues - the alt value allows the users to understand what was the message in the image.
4. the following article will provide you with reasons of Why font values should not be in px
5. look for a Modern CSS reset stylesheet that yous should use, it is important to reset your css so that your sites can behave as expected on different browsers.
6. Other Centering methods that you should look at are Flex and Grid , just to expand your choices.
7. using explicit sizes, like height on your elements should be avoided as that will cause some issues , especially on bigger projects where content maybe cut off because the explicit size has become small or you may have some large white spaces in some instances. Let the individual elements decide the height by adding padding and margins when necessary.