Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Simple CSS QR-code component

P

@Pamellaoliveiraconte

Desktop design screenshot for the QR code component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Community feedback

@irenanrodrigues

Posted

Oi @Pamellaoliveiraconte, tudo bem? Parabéns pela solução, conseguiu reproduzir bem o desafio. Se você aceitar, tenho algumas dicas, que você pode usar no seu código.

Vi que você teve problemas para centralizar seu card, com o flexbox. Isso aconteceu porque você usou na sua classe .container, o certo era você usar na tag body.

No .container, remova o margin e height. Adicione apenas um padding: 20px;

Recomendo você remover a div.card, você configurou duas vezes a imagem do qrcode, apenas deixe a configuração que você usou para sua tag img.

Tente começa a desenvolver usando tags semânticas, como <main>, assim você melhorar a acessibilidade e a organização da sua página.

Marked as helpful

0

P

@Pamellaoliveiraconte

Posted

Oi @irenanrodrigues , muito obrigado pelas dicas! Estou no inicio e realmente ainda tenho dificuldades com posicionamentos e utilizo das tags semânticas. Resultado de ficar só na teoria e não praticar!. Vou tentar refazer o projeto com suas dicas e todas que recebi aqui. Muito obrigado mesmo!

0

@cristianmeelo

Posted

Oi Pamella, vi que tu terminou o desafio. Ficou muito bom! Podia me contar uma pouco da tua escolha em usar um h2 ao invés de um h4 ou h6?

Senti falta da tag main dentro body, talvez semanticamente,

<div class="container"> essa div poderia ser main ?

Marked as helpful

0

P

@Pamellaoliveiraconte

Posted

Ola @cristianmeelo , utilizei o h2 porque interpretei como sendo um titolo secondario da página. Referente a tag main, realmente é importante utilizar, e quando fiz o desafio acabei nem percebendo essa minha falha. Muito obrigado pelo feedback! Conclui um curso ful stack mas percebi que muita coisa do front-end não foi mostrada e estou tentando estudar e praticar para melhorar meu conhecimento.

0

@suryathink

Posted

Hi Pamella Oliveira Conte,

Your deployed site looks exactly the same as the Screenshot.

Great job with your code.

Happy Coding!

Marked as helpful

0

Please log in to post a comment

Log in with GitHub
Discord logo

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