@MelvinAguilar
Posted
Hi there π. Good job on completing the challenge ! I have some feedback for you if you want to improve your code.
HTML Structure:
I noticed that your html file does not have the basic structure of a web page (html, head, body) and it is missing the <!DOCTYPE html>
declaration. You can read more about this here.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Title</title>
</head>
<body>
<! -- Main content of website -->
</body>
</html>
You can read more about this here
HTML:
- The
lang
attribute is used to declare the language of the webpage. Create an <html> tag and add thelang
attribute to the<html>
tag with the valueen
.
- The
viewport
meta tag is missing. theviewport
meta tag is used to control the layout of the page on mobile devices. Add theviewport
meta tag to the<head>
tag:<meta name="viewport" content="width=device-width, initial-scale=1.0">
- Use the
<main>
tag to wrap all the main content of the page instead of the<div>
tag. With this semantic element you can improve the accessibility of your page.
- You must use a level-one heading (h1) even though this is not a full-page challenge. You can create an '<h1>' element within your 'main' element that will be hidden visually but visible and readable by screen readers. The class "sr-only" hides content visually and here are the styles to copy. e.g.:
<h1 class="sr-only">QR Card Component</h1>
I hope you find it useful! π Above all, the solution you submitted is great!
Happy coding! π
Marked as helpful
@carolyngorski
Posted
thank you this was very helpful. @MelvinAguilar