Latest solutions
Blog Preview Card With CSS @scope
Submitted 9 months agoI'm mostly insecure about the readability, so I would appreciate if you have any questions about the code, such as "why did you do this and not that?" or if you can point out any part that seems confusing or unnecessarily complex.
Useful Resources
- CSS Scope by Miriam Suzanne
- Inclusive Components / Cards / #The pseudo-content trick by Heydon Pickering
Latest comments
- @JogramadorSubmitted 8 months ago@lucarlePosted 7 months ago
Good solution, pretty close to the design. If I have to point just one thing out it would be using h3 for the table items, I don't understand why you did so. Anyway, good work! 👍️
0 - @Astr0n1Submitted 9 months ago@lucarlePosted 9 months ago
I would understand if you had the card as a
<article>
, but why only the text?Overall it seems like you knew how to solve the challenge, and I found interesting the use of utility classes, but some of the values applied differ from the design. Was that a intentional choice, or did you not find them on Figma?
Also, you didn't include the hover effect.
Marked as helpful1 - @munizz-gSubmitted 10 months agoWhat are you most proud of, and what would you do differently next time?
Atualmente, o que mais me orgulho é estar aprendendo a escrever um código mais limpo
What challenges did you encounter, and how did you overcome them?A princípio o desafio foi bem simples de ser desenvolvido, sem muitos desafios.
What specific areas of your project would you like help with?No momento em nenhum, porém estou aberto a sugestões de melhorias.
@lucarlePosted 10 months agoÉ considerado boa prática utilizar
em
ourem
para ajustar o tamanho da fonteCoder Coder tem um bom vídeo explicando esse assunto se estiver interessado
Marked as helpful0 - @detanadedSubmitted about 2 years ago@lucarlePosted about 2 years ago
Hey, I just submit a solution dealing specifically with this problem: Centering the component to perfect match the design, without excluding the attribution and without using any "hacks". I hope you find it helpful, feel free to ask any subsequent questions.
*I'm assuming you used position absolute so that the footer didn't interfere with the centering of the card, correct me if I wrong. If instead you wanted a sticky footer effect, I recommend you give a look in Kevin Powell Easy Sticky footer, MDN Layout cookbook Sticky footers and/or Every Layout The Cover.
0 - @indhuhari14Submitted about 2 years ago@lucarlePosted about 2 years ago
2A. There is a problem with your use of
height: 100vh
. Specifically, your container's content is spilling over when the viewport shrinks smaller than the content size. That is the main reason why you should be cautious of settingheight
and it's generally recommended to usemin-height
instead.Furthermore, there is also a minor issue with 100vh on mobile which you can learn about in The problems with viewport units
Marked as helpful0 - @dav9goSubmitted about 2 years ago@lucarlePosted about 2 years ago
Not sure If I understand your question. Are you referring to semantic HTML? Or maybe ARIA attributes?
1