@JulioCinquina
Posted
Bem-vindo ao Frontend Mentor, Lucas!
Sua solução ficou bastante parecida com o design. Parabéns! 🎉
Aqui vão algumas dicas:
O Frontend Mentor gera a captura de tela da página da solução no Firefox com uma largura de 1440 px. Para conferir se sua solução coincide com o design, você pode entrar no "Modo de design responsivo" (Ctrl + Shift + M
), colocá-lo na resolução 1440 x 900, fazer a captura de tela clicando no ícone de câmera e compará-la com aquela que vem com os arquivos do desafio (design/desktop-design.jpg
). Para o design mobile, use a largura de 375 px.
Hoje, a maioria das pessoas acessa a internet por dispositivos móveis. Por isso, tornou-se comum o design mobile-first (focado em dispositivos móveis). Na prática, isso significa — entre outras coisas — fazer a página para dispositivos móveis primeiro e, depois, usar media queries para adaptá-la para desktops (com min-width
em vez de max-width
).
Para seguir as melhores práticas de acessibilidade, temos que definir os pontos de referência (landmarks) da página. Aqui, todo o conteúdo exceto o rodapé poderia estar dentro das tags <main>
e </main>
. Para o rodapé, podemos usar <footer class="attribution">(...)</footer>
em vez de uma <div>
.
Espero ter ajudado!
———
Welcome to Frontend Mentor, Lucas!
Your solution looks very similar to the design. Congratulations! 🎉
Here are some tips:
Frontend Mentor generates the screenshot of the solution page in Firefox at a 1440 px width. To check if your solution matches the design, you can enter "Responsive design mode" (Ctrl + Shift + M
), put it in 1440 x 900 resolution, take a screenshot by clicking the camera icon and compare it to the one found in the challenge files (design/desktop-design.jpg
). For the mobile design, use a width of 375 px.
Today, most people are browsing the web through mobile devices. Because of that, the mobile-first design approach became common. In practice, this means — among other things — making the page for mobile devices first, and then using media queries to adapt it to desktops (using min-width
instead of max-width
).
To follow the best practices of accessibility, we have to define the landmarks of the page. Here, all content except the footer could be inside the <main>
and </main>
tags. For the footer, we could use <footer class="attribution">(...)</footer>
instead of a <div>
.
I hope this helps!
Marked as helpful
@LuTymos
Posted
@JulioCinquina Thanks for the feedback and advice! I will use them in the next project