Honestly I was dumbfounded on how to make it responsive but a little bit of research and googling did the job
Latest solutions
Latest comments
- @AntonexWhat challenges did you encounter, and how did you overcome them?@Harty1989
Great job, keep going. Research and googling are the best ways to learn and practice.
- @AntonexWhat are you most proud of, and what would you do differently next time?
I am proud of the structure and comments I made in the code. The structure is also cleaner than last time and the code is very readable in my opinion 🤠. Beware though this page is not really responsive I will make it responsive later and update the files 😸
@Harty1989Great job! I don't have anything to add. Keep going!
- @biarmortariWhat are you most proud of, and what would you do differently next time?
🌟 Do que me orgulho Neste projeto, conquistei dois avanços significativos:
- Semântica & Acessibilidade
Substituí <div> por <button> nos links sociais, garantindo interações acessíveis via teclado.
Apliquei a metodologia BEM nas classes CSS, melhorando a legibilidade do código.
- Efeitos visuais profissionais
Criei transições suaves com:
css .card__button:hover { background-color: hsl(75, 94%, 57%); transition: background-color 0.3s ease; /* Timing controlado */ }
🔧 O que faria diferente
- Mobile-first workflow
Usaria min-width em media queries (em vez de altura fixa height: 500px).
Testaria em resoluções extremas (ex.: 320px) desde o início.
- Criar um checklist de acessibilidade antes de começar.
Dificuldades:
Fazer o hover funcionar bem em mobile (adicionei :active).
Evitar quebra do layout em telas pequenas.
Git confundindo renomeação de arquivos (aprendi git mv).
Superação: Pesquisei na MDN, testei no DevTools e quebrei o problema em partes.
What specific areas of your project would you like help with?Quero me aprofundar em:
Mobile-first workflow: Ainda não domino completamente a abordagem "começar pelo mobile" e pretendo estudar mais sobre media queries e unidades relativas (como rem).
Design responsivo avançado: Ajustar layouts para telas muito pequenas (ex.: 320px) e testar em dispositivos reais.
@Harty1989Great job! A little difference between design, mostly at mobile screen, but insignificant. Working in React is fantastic, keep going...
- @binyamyd@Harty1989
Great job, well done. One thing missing to be perfect, that is, the hover effect on h2 elements (HTML & CSS foundations)
Tip for that: h2:hover { color: hsl(47, 88%, 63%); cursor: pointer; }
Keep going, you are doing great!
Marked as helpful - @Harshit-Navik