Not Found
Not Found
Your session has expired please log in again.
Your session has expired please log in again.
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

HTML e CSS puro, uso de flexbox

Marcello 40

@sea-cell0

Desktop design screenshot for the Results summary component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

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

@GodoiTheCreator

Posted

  • @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 helpful

0

Marcello 40

@sea-cell0

Posted

@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
Shalom2935 420

@Shalom2935

Posted

body{ display: flex; flex-direction: column; justify-content: center; } this will allow you to center the box.

Marked as helpful

0

Marcello 40

@sea-cell0

Posted

@Shalom2935 thank you, definitely going to give it a try next time!!

0

@Daniel-Bilodid

Posted

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 helpful

0

Marcello 40

@sea-cell0

Posted

@Daniel-Bilodid thank you so much for the feedback, gonna keep this in mind on my next project!!!

0

@Daniel-Bilodid

Posted

@sea-cell0 happy to help, have a nice day!

0

Please log in to post a comment

Log in with GitHub
Discord logo

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