Skip to content
Submitted about 1 year ago

Responsive Card With QR Code With SASS

Cristian Melo•50
@cristianmeelo
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

I usually develop the design part with a design created in Figma, often using a grid. When developing in React, I frequently use Emotion or Styled Components. This kind of challenge is interesting as it brings me back to the basics plus without Figma, but with a little extra touch – SCSS. I feel more organized and scalable with SCSS, even though this component may not be scalable (but it's still good practice, isn't it?).

I have a question about the title and the description – do h6 and p elements make sense, or would h4 be more appropriate?"

Community feedback

  • Renan Rodrigues•960
    @irenanrodriguesPosted about 1 year ago

    Oi @cristianmeelo, 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.

    Em sua classe .background, você usou o justify-items: center;, para tentar centralizar, mas esse comando é para o css grid, o correto é justify-content: center;

    Altera seu width: 100% da sua classe .card, para width: 350px, assim você não precisa usar as media queries com margin, para controlar a largura do card.

    Para sua dúvida sobre o título, tem um vídeo do Prof. Gustavo Guanabara que fala sobre hierarquia de títulos.

    Marked as helpful
    1
    Cristian Melo•50
    @cristianmeeloPosted about 1 year ago

    @irenanrodrigues valeu demais!

    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