Design comparison
Solution retrospective
Esse foi o meu primeiro projeto após uma pausa considerável no meu estudo de programação. No geral, acho que me saí muito bem e pude revisar vários conceitos; evidentemente, há várias partes do código que deixam a desejar como:
- uma melhor identação para meios de leitura
- organização dos seletores do css
Entretanto, estou satisfeito com meu trabalho.
Community feedback
- @GodoiTheCreatorPosted over 1 year ago
-
@sea-cell0 Parabéns pelo código, ficou muito bom!
-
Sou iniciante aqui no site, mas queria passar umas dicas que me passaram aqui e que vi em projetos de outros usuários também.
-
É interessante usar as tags "corretas", que seriam <head> para cabeçalhos, <main> para o conteúdo principal, <footer> para rodapé, etc, assim o código e o site se tornam mais acessíveis, e o FrontEnd Mentor não acusa erros nesse mini relatório deles. Também utilizar o atributo "alt" nas imagens para descrever uma imagem, assim, quando o site não carregar corretamente, por x motivo, o usuário poderá ver do que se tratava a imagem, também auxilia os usuários com deficiência visual.
-
Sobre o código em si, um detalhe importante é o uso do :hover no CSS, você acabou utilizando o :active o que faz com o que o botão apenas mude de cor quando pressionado e não quando colocamos o cursor por cima.
-
Novamente, parabéns pelo código! Vai ver que os outros desafios se tornam mais fáceis com a prática, esse primeiro foi complicadinho pra mim. Tenta escrever em inglês também se tiver alguma dúvida grande pois grande parte do site é gringo então é mais fácil de te responderem rápido.
Marked as helpful0@sea-cell0Posted over 1 year ago@GodoiTheCreator olá, obrigado por responder e por contribuir no post; o terceiro item que você citou foi uma boa dica, sempre negligencio essa parte semântica, vou tentar lembrar da próxima!!
quanto ao quarto item, eu interpretei como sendo :active mesmo, pois a foto de referência se chama "active-states", então não tá bem especificado se o certo é :hover ou :active; usei o que me pareceu melhor.
enfim, brigadão pelo feedback, estarei te seguindo por aqui.
1 -
- @Shalom2935Posted over 1 year ago
body{ display: flex; flex-direction: column; justify-content: center; } this will allow you to center the box.
Marked as helpful0@sea-cell0Posted over 1 year ago@Shalom2935 thank you, definitely going to give it a try next time!!
0 - @Daniel-BilodidPosted over 1 year ago
Hi, my congratulations you did a great job 🎉
𝐒𝐨𝐦𝐞 𝐭𝐢𝐩𝐬 𝐟𝐨𝐫 𝐲𝐨𝐮𝐫 𝐜𝐨𝐝𝐞 🛠
🔹 You need to put a landmark in your code
simply wrap your code with <main> landmark instead
📚 The <main> HTML element is intended for the main content (content) of the <body> of the document (page).
🔹 And you need to add an alt tag to your images
📚 The alt attribute contains a textual description of the image, which is optional but incredibly useful for accessibility
I hope it was helpful, you are great, keep up the good work 👍
Marked as helpful0@sea-cell0Posted over 1 year ago@Daniel-Bilodid thank you so much for the feedback, gonna keep this in mind on my next project!!!
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