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
Not Found
Not Found
Not Found
Not Found

Submitted

Results summary component

@andressakaren

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


What are you most proud of, and what would you do differently next time?

PT-BR

  • Escolhi esse desafio para voltar a praticar depois de um tempo parada. Sinto que progredi um pouco mas percebi a importância de se manter sempre em atividade. Para os proximos desafios, vou procurar estudar mais para fazer layouts responsivos.

EN

  • I chose this challenge to get back into practice after a break. I feel like I've made some progress but I realized the importance of staying active. For the next challenges, I'll try to study more to create responsive layouts.

What challenges did you encounter, and how did you overcome them?

PT-BR

  • Provavelmente foram quais tags semânticas do HTML usar. E não consegui ajustar o gradiente correto das cores no score.

EN

  • Probably it was about which HTML semantic tags to use. And I couldn't adjust the correct color gradient in the score.

What specific areas of your project would you like help with?

PT-BR

  • Qualquer feedback é bem-vindo para que eu possa aprimorar minhas habilidades.

EN

  • Any feedback is welcome so that I can improve my skills.

Community feedback

@R3ygoski

Posted

Olá Andressa, parabéns pela conclusão do projeto.

Algumas pequenas dicas sobre o seu HTML.

  1. Você utilizou duas Tag's <h1>, o recomendável é que tenha apenas uma tag <h1> por página, no lugar de "Summary" você poderia utilizar uma <h2> que assim caberia melhor.

  2. Sobre a parte onde aparece as habilidades, uma tag que encaixaria melhor seria <ul>, pois é uma lista não ordenada de habilidades, elas são todas relacionadas entre si.

  3. Sobre a tag <a> que você colou dentro do botão, primeiro eu gostaria de abordar o propósito, utilizamos o <button> quando queremos criar uma interatividade com a página, como por exemplo um botão para alterar o tema da página, um botão para abrir um modal e por aí vai. E utilizamos um <a> quando queremos criar uma navegação entre páginas. O segundo ponto que eu gostaria de abordar é sobre a estrutura, ao invés de utilizar uma tag <a> dentro do <button>, você poderia ter utilizado apenas a tag <a> sem o <button>, daí bastaria estilizar ela pra ficar semelhante a um botão. E o terceiro ponto é relacionado a funcionalidade, se você clicar no botão, você verá que ele não irá alterar a URL da página, mas se você clicar exatamente no texto "Continue", será adicionado um "#" ao final da URL, indicando que a tag <a> não está cobrindo o botão inteiro, o que em um projeto real poderia causar uma confusão para o usuário, para corrigir isso você pode fazer o que falei no segundo ponto, sobre remover o <button>.

E sei como é isso de ficar um tempo sem praticar, estou muito enferrujado, não pratico desde Junho kkkkk.

E é isso, parabéns pela conclusão do projeto e espero que tenha sido bom voltar a pratica, o seu projeto ficou muito bem feito. Caso tenha ficado alguma duvida quanto ao que eu disse, por favor comente abaixo que tentarei ajudar da melhor forma possível.

Marked as helpful

1

@andressakaren

Posted

Oii, @R3ygoski. Eu não sabia desse detalhe de não ser ideal usar a tag <a> dentro do <button>, entendi a explicação. Eu já estava até fazendo isso novamente em outro desafio daqui, mas vi seu comentário e já corrigi. Muito obrigada pelas dicas, sempre me ajuda bastante e me incentiva a pesquisar e praticar mais.

1

@murilomonte

Posted

Perfeito!!! 🤌

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