Skip to content
Submitted 7 months ago

HTML, css, Bootstrap, git e github

Teteu2005•30
@Teteu2005
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?

De ter concluído o desafio, e busco melhorar sempre habilidades técnicas.

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

Desafio de código. Busquei olhar melhor e revisar a base estrutural.

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

Por enquanto sugestões de layout, pelo fato do projeto ser básico e não necessitar de programação.

Community feedback

  • Bernardo Poggioni•5,280
    @R3ygoskiPosted 7 months ago

    Olá Teteu, bom trabalho por ter concluído o projeto.

    Tenho algumas dicas adicionais relacionadas ao layout no CSS que podem ajudar a aprimorar sua página. Uma sugestão é utilizar o display: flex; para alinhar o conteúdo da página. Por exemplo, aplicar esse estilo ao elemento body e utilizar justify-content: center; e align-items: center; para centralizar o card na página. Se desejar saber mais sobre flexbox, recomendo consultar esses dois links: W3School - Flexbox e MDN - Flexbox.

    Além disso notei também que você estava utilizando a propriedade width nos textos, isso não era necessário, pois o texto se adaptará de forma automática ao tamanho proposto, assim ele iria quebrar a linha conforme o necessário, e isso remove a necessidade de usar a tag <br>.

    Falando sobre acessibilidade, é importante usar as tags <h3> de forma hierárquica. Se quiser saber mais sobre esse tema, aqui está um link útil: W3School - Hierarquia.

    Outro ponto relevante é incluir um texto descritivo no atributo alt de todas as tags <img/>, o que é essencial para acessibilidade. Aqui está um link para mais informações sobre imagens em HTML: W3School - Images.

    E novamente, parabéns pelo seu projeto, se precisar de mais alguma ajuda, basta comentar e tentarei ajudar da melhor forma possível.

    Marked as helpful
    0
  • Joramir Jr.•250
    @JoramirJrPosted 7 months ago

    Hi!

    One easy step to center your card would be to define the 'height' and 'width' of the body to '100vh' and '100vw', respectively; after that, by defining 'display: grid' and 'place-items: center' to the body, your card would be centered!

    Hope its helpful!

    Marked as helpful
    0
    Teteu2005•30
    @Teteu2005Posted 7 months ago

    thank you very much! I will use the tip to update the code.@JoramirJr

    0

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