Frontend Mentor Results Summary
In this post, we will review the Frontend Mentor Results summary component challenge solution we built.
Frontend Mentor is a platform that hosts challenges for front-end developers to improve their coding skills by building real projects. If you’re just interested in the solution, you can find it using the following URL: Solution
If you want to learn more about Frontend Mentor, you can find their website here: https://www.frontendmentor.io.
Like the QR code component we explained in a previous post, the Mentor Results challenge is also targeted to beginners. This challenge involves building a “card” which contains a result and text on the left side and a selection of skills and grades on the right side.
Starting with a Vision
Every successful web development project begins with a clear vision. In this case, I had a design image that served as my guide. The first step was to envision the skeleton HTML structure based on this image. This involves identifying the major sections and their relationships within the component. Let’s break down the component’s structure.
The HTML Structure
Our Results Summary Component consists of two main sections, a banner, and a summary. Inside each section, we have various elements. The banner section contains:
- A heading
<h1>displaying “Your Result.” - A circular element representing the score.
- A summary section with result description.
The summary section includes:
- A heading
<h2>indicating “Summary.” - Individual result sections, each displaying a different category and its score.
- A “Continue” button.
Embracing Semantic Elements
I used semantic elements to give the structure meaning and clarity. Semantics are important because they help search engines and other devices with determining the importance and context of web pages.
In my HTML, the <main> element wraps the entire content, while the <section> elements are used to divide the content into meaningful blocks. Additionally, the use of appropriate headings (<h1> and <h2>) and paragraphs (<p>) enhances the document’s semantics and accessibility.
Correctly using these headings is key for both search engine optimization and accessibility. Blind people who use a screen reader need these headings in order to get correct information about the content.
For headings we have the following options
- h1 – Used as the main heading (usually a title)
- h2 – Used as a sub heading
- h3 – Used as a sub heading
- h4 – Used as a sub heading – You usually don’t go further than this one
- h5 – Used as a sub heading
- h6 – Used as a sub heading
Another important thing to note is the use of "aria-hidden="true"" on the result icons. The icons are eye-candy. That’s the only role they serve, so for screen readers, which only need to know the content, using "aria-hidden="true"" hides the icons so the screen reader won’t read them out load.
Applying the BEM Methodology
BEM stands for Block Element Modifier and is a popular naming convention for CSS classes that helps in creating maintainable and scalable code.
Block Level
I started by defining the main component as the “component” block. This represents the highest-level container for our component. Inside this block, I added sub-blocks for the “banner” and “summary” sections. Each block is defined with a unique class name (e.g., “banner” and “summary”).
Element Level
Within each block, we have elements. For example, inside the “banner” block, we have the “heading,” “circle,” “score,” “result,” and “paragraph” elements. Similarly, in the “summary” block, we have “heading,” “results,” and “button” elements. Each element is named with a double underscore (__) to separate it from the block name.
Modifier Level
The BEM methodology also allows for modifiers. For modifiers you can think of something which adjusts the normal look of an element. A simple example would be buttons. You could have the following HTML:
<button class="button button--red"/>
<button class="button button--green"/>In the example above, our shared styling which both buttons use, is in the “button” class.
Inside the button--red and button--green class we could have background-color: red; and background-color: green; respectively.
Implementing the modifier logic within the “result” block, we get classes like “result–reaction,” “result–memory,” “result–verbal,” and “result–visual” to distinguish different categories. Modifiers are prefixed with double hyphens (--).
Making It Responsive
A responsive design is a crucial aspect of modern web development. To make our component responsive, I utilized media queries. For screens with a minimum width of 1024px, the component changes its layout. The banner and summary sections expand horizontally and adjust their sizes accordingly.
Colors and Fonts
In the CSS, I defined custom colors using CSS variables. This makes it easy to maintain a consistent color scheme throughout the component. I also imported a custom font from Google Fonts to give the text a unique style.
Conclusion
Building a frontend component like the Frontend Mentor Results Summary Component requires careful planning, a structured approach, and attention to detail. By starting with a clear vision and embracing semantic HTML elements you can create a clean, maintainable, and responsive component which will make your development process more efficient.
While BEM does make code more maintainable and scalable, it is still an optional tool. There are many other ways to tackle this challenge. Using BEM is just one of them.
No matter if the exercise is easy, difficult, small or large, if you keep to a clear overview and structure it’s usually easier to reach your goal without forgetting parts of the project.
