Design comparison
Solution retrospective
This was my first attempt using CSS flex and I had some issues making the justify-content property work, I feel like the coding is all wrong. I'd appreciate any tips on accessibility, CSS flex and on how to make my code cleaner!
Community feedback
- @correlucasPosted about 2 years ago
👾Oi Leticia Fernandes, tudo bem? Parabéns pelo desafio! Seja bem vindo a comunidade do Frontend Mentor
Muito legal a sua customização, parabéns por ter ido além do que o desafio pedia! Aqui algumas dicas pra vc:
1.Ao invés de usar
<div>
pro bloco contendo o título principal, ao invés use<h1>
, porque cada página precisa de um h1 pro título principal e siga a sequência se você adicionar outro título como h1, h2 , h3…2.Use unidades relativas como
rem
ouem
em vez depx
para melhorar seu desempenho redimensionando fontes entre diferentes telas e dispositivos. Para fazer um site mais acessível, o ideal seria usar rem em vez de px. O REM não se aplica apenas ao tamanho da fonte, mas também a todos os tamanhos.3.Para melhorar o workflow e ganhar tempo você pode codar toda sua solução usando
px
e no final selecionar todo códigoCSS
E converter automaticamente prarem
tudo que forpx
com esse plugin doVSCODE
https://marketplace.visualstudio.com/items?itemName=sainoba.px-to-rem ou usar esse sitehttps://pixelsconverter.com/px-to-remAqui minha solução caso vc queira consultar:https://www.frontendmentor.io/solutions/fresh-prince-card-component-vanilla-css-easter-eggs-6Qe2CAE0H8
👋 Espero que essas dicas te ajudem e que você continue no foco!
Marked as helpful1@lichtlePosted about 2 years ago@correlucas Muito obrigada pelas dicas, Lucas! Aplicarei no meu código agora mesmo e irei comparar com a sua solução.
1 - @Aik-202Posted about 2 years ago
Hi, Leticia... Nice work, you did amazing... I see that you used an entirely different color theme, it's beautiful. I have some suggestions though...
- I'll like to ask, why did you use div for every content??. You can use the different levels of headings, the p tag, pre tag, for your content and style them as you like. I feel like the purpose of
div
is for grouping contents. So I'll advise you change the div with class name to anh1
tag. That will solve ya accessibility issues. - I also checked ya code, I don't see anything wrong with the way you wrote it tho. One thing to note is that if you are using the
justify-content: center;
to center a div, you also need to includealign-items: center
for it to work.
Nice work once again. Hope this helps.
Marked as helpful1@lichtlePosted about 2 years ago@Aik-202 Thank you so much for your feedback, Assurance! I'll update the code using your tips as soon as I can.
0@Aik-202Posted about 2 years ago@lichtle You are welcome, I'm glad I could be of help.
0 - I'll like to ask, why did you use div for every content??. You can use the different levels of headings, the p tag, pre tag, for your content and style them as you like. I feel like the purpose of
Please log in to post a comment
Log in with GitHubJoin 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