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 solução

@santosfer

Desktop design screenshot for the QR code component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Community feedback

Ecem Gokdogan 9,380

@ecemgo

Posted

Some recommendations regarding your code that could be of interest to you. 🤗

HTML

In order to fix the accessibility issues

  • You need to replace <section> with the <main> tag and <div class="attribution"> with the <footer> tag. However, please keep the <footer> tag outside of the <main> tag. You'd better use Semantic HTML, and you can also reach more information about it from [Using Semantic HTML Tags Correctly]
  • Each main content needs to start with an h1 element, and also contain only one h1 element. Your accessibility report states the need for one main landmark. So, you need to use a <h1> element in the <main> tag instead of using the <h3> element. You can replace the <h3>Improve your front-end skills by building projects</h3> element with the <h1>Improve your front-end skills by building projects</h1> element.

CSS

  • If you want to center it correctly, you can use flexbox, and it is an easy way to center. You can add your body in this way:
body {
    min-height: 100vh;    
    display: flex;
    justify-content: center;
    align-items: center;
}
  • and you can add this style to your .attribution like this:
.attribution {
    position: fixed;
    bottom: 0;
}

Hope I am helpful. :)

Marked as helpful

1
Adriano 310

@adriano-wb

Posted

Muito bem Fernanda, o seu código está bem definido e cumpriu o desafio solicitado com sucesso. No entanto, ainda ah algumas questões que você precisa se atentar.

  1. Você não definiu uma tag <main> para indicar o conteúdo principal de seu HTML
  2. A página deverá conter um elemento de título de nível 1, use apenas um <h1> por página
  3. Elementos <section> e <article> sempre devem conter um elemento de título <h1> ... <h6>

Contudo, essas são sugestões para lhe deixar mais capacitada, que seu site possa ser mais acessível e que seja fácil encontrá-lo por mecanismos de busca como o Google. Pode não ser importante aqui neste projeto, mas se preocupe quando for em projetos reais para uma empresa sua ou para um cliente.

Marked as helpful

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