Design comparison
Solution retrospective
Este é um trecho de código HTML que inclui um resumo de um resultado de teste em um formato de cartão. O cartão contém um título, uma pontuação e uma seção de resumo com quatro componentes: reação, memória, verbal e visual. Cada componente possui um ícone, um título e uma pontuação. Na parte inferior do cartão, há um botão para continuar.
Em termos de estrutura, o código começa com a declaração do documento HTML e a seção head. A seção head contém o título do documento, a codificação de caracteres e a viewport. Além disso, a seção head inclui um link para um arquivo CSS que estiliza os elementos HTML.
A seção body inclui a estrutura do cartão com dois contêineres principais, card-resultado e card-sumario, que contêm os componentes do resultado e do resumo, respectivamente. Cada componente possui sua própria estrutura HTML e classes CSS, que definem o layout e os estilos para os elementos. Por fim, há um contêiner para o texto de atribuição.
This is a piece of HTML code that includes a summary of a test result in a card format. The card contains a title, a score, and a summary section with four components: reaction, memory, verbal, and visual. Each component has an icon, a title, and a score. At the bottom of the card, there is a button to continue.
In terms of the structure, the code starts with the HTML document declaration and the head section. The head section contains the title of the document, the character encoding, and the viewport. Additionally, the head section includes a link to a CSS file that styles the HTML elements.
The body section includes the card structure with two main containers, card-resultado and card-sumario, that hold the result and the summary components, respectively. Each component has its own HTML structure and CSS classes, which defines the layout and styles for the elements. Finally, there is a container for the attribution text.
Community feedback
- @Karag2006Posted over 1 year ago
Hi, First off: i like your Solution, espacially the additional hover on the Summary Categories.
Now for some small suggestions: You don't use Semantic HTML. Which is an easy thing to make the Solution a little better still:
- Include a <main> tag fro the majority of your html. For Example your card-container :
<main class="card-container"> ..... </main> - Also The provided attribution could be a footer instead of a div :
<footer class="attribution"> ..... </footer> - You are missing an h1 Headline. Idealy that would be the main Thing telling people what the site is about. In this case that would be
<h1 class="txt-resultado">Your Result</h1>
And the last thing: you do have a very slight visual effekt on the <button> for focus. This could be more obvious so people prefering the keyboard have a better visual clue as to what Element has currently the Focus. What i usually do for that is :
.btn-continue:hover, .btn-continue:focus { background: linear-gradient(to bottom, var(--color-light-royal-blue), var(--color-light-slate-blue)); }This just gives the button the same effect for hover and focus states.
I hope the Feedback is Helpful for you.
Marked as helpful2@daaaan12Posted over 1 year ago@Karag2006
Hello, thank you very much for the feedback. I will start using more Semantic HTML. I am practicing every day to improve my skills and tips are always welcome. Thank you!
0 - Include a <main> tag fro the majority of your html. For Example your card-container :
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