Submitted 5 months ago

MySolution-QR-CODE-COMPONENT-MAIN

pure-css

Caio Lopes Silva•70

@CaioLopes5556

A solution to the QR code component challenge

Preview Code

Solution retrospective

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

What I'm proud about:

I'm proud of the perfect gap between the items in the container (I tried to make it look the same as possible)

What I would change:

I would may use better names for the div's. It's something I deal with every project.

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

Chanlengers

I didn't know if I needed to agroup the texts in a div, but by the time I was coding, I realized it was necessary.

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

What I would like help with

How can this code be more semantic

Code

Please log in to post a comment

Community feedback

Bernardo Poggioni•6,950
@R3ygoski
Posted 5 months ago
Olá Caio, parabéns pela conclusão do projeto, ele ficou perfeitamente semelhante ao design proposto.

Vou começar comentando a seção "What specific areas of your project would you like help with?". Essa parte, na verdade, se refere às áreas específicas do projeto em que você sente necessidade de receber uma ajuda.

Sobre os desafios que você mencionou, a utilização de uma <div> para cobrir o título e o texto não era estritamente necessária, pois seria possível obter o mesmo resultado apenas com margin e padding. No entanto, a abordagem que você utilizou também está correta, então não há problemas nisso.

Em relação à parte onde você menciona o que mudaria no projeto, percebi que você falou sobre renomear as <div>, não ficou claro se você se referia ao uso de HTML semântico ou apenas ao nome das classes CSS.
- Caso tenha sido pela classe, o nome delas já estão bons, mas você pode considerar utilizar uma Metodologia chamada de BEM, ela pode ser de grande ajuda para nomear classes, segue um link: Metodologia BEM.
- Caso seja mudar de <div> para algo mais semântico, há dois pontos que poderiam ser ajustados, são eles:
1. A div.qr-component poderia ser alterada para <main> pois representa a parte principal da página.
2. A div.attribution poderia ser alterada para um <footer> já que é uma parte dedicada a metainformações.
Outra sugestão, percebi que você aplicou height: 100vh; ao <main>, o que faz com que ele ocupe toda a altura da tela. No entanto, seria mais apropriado aplicar essa propriedade ao <body>, pois ele representa a página como um todo. Além disso, em vez de height, recomendo usar min-height, para que a altura mínima corresponda ao tamanho da tela, mas permitindo que a página cresça caso o conteúdo aumente, evitando problemas de overflow.

Por fim, sobre a div.attribution, ela não está aparecendo, não sei se foi intencional ou não, caso não tenha sido, você pode considerar alterá-la para que fique fixa na parte inferior da página com o seguinte CSS:
```
position: absolute;
bottom: 0;
width: 100%;
```
Isso fará com que ela saia do fluxo normal do HTML e se posicione na parte inferior do <body>, assumindo que nenhum elemento pai tenha a propriedade position: relative;.

E é isso! Novamente parabéns, caso tenha ficado qualquer dúvida quanto ao que eu tenha mencionado, por favor comente abaixo que tentarei ajudar da melhor forma possível.
Marked as helpful

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