Submitted about 1 month ago

Página Frontend Mentor QR Code

Beatriz Ponces• 60

@BeatrizPoncesIP

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

QR code component

HTML
CSS

1newbie

View challenge

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• 290

@py-code314

Posted about 1 month ago

Hi,

Nice job on your first project. Congrats!

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

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

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

Please log in to post a comment

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