Skip to content
Submitted 3 months ago

Página Frontend Mentor QR Code

Beatriz Ponces•60
@BeatrizPoncesIP
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...QR code component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

What are you most proud of, and what would you do differently next time?

A parte de HTML é relativamente simples, mas o verdadeiro desafio está no CSS. Determinar com precisão a altura e a largura dos elementos pode ser complicado. Na próxima vez, vou experimentar usar grid para facilitar.

What challenges did you encounter, and how did you overcome them?

O maior desafio foi determinar a altura dos objetos, e para isso, utilizei o projeto Figma disponível no desafio.

What specific areas of your project would you like help with?

Enfrentei dificuldades com uma área específica do projeto no Figma. Há uma seção que aborda o espaçamento, mas oferece três opções, embora o projeto só necessite de uma. Essas opções seriam para tamanhos de tela diferentes? Não consegui perceber variações no espaçamento entre os modelos desktop e mobile apresentados.

Community feedback

  • py-code314•340
    @py-code314Posted 3 months ago

    Hi,

    Nice job on your first project. Congrats!

    I can suggest a few changes about your project I think will help you.

    1. Do not use px for font-size because it can cause accessibility issues. Use rem instead. If user wants to increase font-size in browser settings because of poor vision it fails to achieve the objective if you use pixel units. Please read this article to have a better idea

    2. About those 3 spaces in Figma file:

          40px - Bottom padding for your `main`
    24px - Space between `img` and `h1`
    16px - Top, Right and Left padding for `main`

      I hope that clears up your confusion about the spaces

    All the best!!

    Marked as helpful
    1

Please log in to post a comment

Log in with GitHub

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