I solved this challenge with a little display flex

Community feedback

• 

  Julio Cinquina•270

  @JulioCinquina

  Posted almost 3 years ago

  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!

  21

  Marked as helpful