Frontend Mentor - Solução para componente de código QR

Esta é uma solução para o desafio QR Code Component do Frontend Mentor. Os desafios do Frontend Mentor ajudam você a aprimorar suas habilidades de programação por meio da criação de projetos realistas.

Sumário

• Visão geral

  • Captura de tela
  • Links

• Meu processo

  • Desenvolvido com
  • O que aprendi
  • Desenvolvimento contínuo
  • Recursos úteis

• Autor

• Agradecimentos

---

Visão geral

Captura de tela

Links

• URL da solução:https://www.frontendmentor.io/challenges/qr-code-component-iux_sIO_H

---

Meu processo

Desenvolvido com

• HTML5 semântico
• CSS3 com variáveis personalizadas
• Flexbox
• Layout mobile-first
• Fonte Outfit (Google Fonts)

O que aprendi

Neste projeto, reforcei conceitos importantes de estruturação semântica em HTML, centralização de elementos com Flexbox e uso de variáveis CSS para manter o código mais organizado e reutilizável.

Exemplo de uso de variáveis CSS:

:root {
  --gray-300: hsl(212, 45%, 89%);
  --gray-500: hsl(216, 15%, 48%);
  --gray-900: hsl(218, 44%, 22%);
}

Além disso, trabalhei a responsividade garantindo uma boa experiência em diferentes tamanhos de tela.

Desenvolvimento contínuo

Nos próximos projetos, pretendo continuar focando em:

• Acessibilidade (WCAG)
• Melhor organização de CSS
• Componentes reutilizáveis
• Aperfeiçoamento do mobile-first

Recursos úteis

• Frontend Mentor – Plataforma essencial para prática com desafios reais.
• MDN Web Docs – Referência completa para HTML e CSS.
• Google Fonts – Utilizada para a tipografia do projeto.

---

Autor

• GitHub – https://github.com/Nikaio
• Frontend Mentor – https://www.frontendmentor.io/profile/Nikaio

---

Agradecimentos

Agradeço ao Frontend Mentor por disponibilizar desafios que ajudam desenvolvedores a praticar e evoluir com projetos reais. 🙌

Este projeto foi desenvolvido individualmente como parte do processo de aprendizado em front-end.