Mobile-First Solution to Result Component

Hello @fumzy123!

Your project looks great!

I have a few suggestions for you to improve it:

• Try a lighter color for the box shadow, it'll look closer to the original design.

• On your question about the headings, h1, h2, h3, h4, h5 and h6:

<h1> defines the most important heading. <h6> defines the least important heading. Only use one <h1> per page - this should represent the main heading/subject for the whole page. Also, do not skip heading levels - start with <h1> , then use <h2> , and so on.

I really hope that helps you!

Usually headlines are chosen by hierarchy of the document to create levels of importance and accessibility. In modern designs this often is not really feasible. Generally you always want exactly one h1, for seo reasons, accessibility, and schematic html.

For this project i personally used h1 for "Your Result" as is describes the purpose of the page pretty well. The downside is that it breaks the visual "flow" of the headlines from h1 - h6 (h2 is bigger and looks more important then h1)

As for splitting the css files there really isn't a single correct solution. The more you can split it up in a meaningful way the cleaner it will look, but this can make it cumbersome if someone doesn't have the same mindset as you and has to scan multiple files so find the part they want to change. I think you did pretty well in this regard.

The result looks great, you really improved on the design!

You are asking about typography, or rather when the heading elements (h1-h6) should be used. These things are not related! Typography is a stylistic concern, use CSS for this. To describe your content, use HTML. (Read more about Separation of Concerns and Semantic HTML.)

Heading elements describe their respective section; this is content. "Your Result" would be a good heading for the whole component. Similarly, "Summary" would be a good subheading. Therefore, the subheading should be one heading level higher (say, if "Your result" is h1, "Summary" should be h2). You can read more about headings on MDN or on web.dev.

You can argue that "Reaction", "Memory", etc. may be headings, in the same way I am arguing they are just labels for their respective scores. My argument for them being labels is: A document outline (e.g. a table of contents) wouldn't benefit from these being headings.

Unfortunately, there is no generic heading with no level. For that reason I would design components as if they are the only page content, like in your HTML. Those pages can always be embedded through iframe elements.

As for your images: It is always good to consider writing alternative text (its alt value), and in most cases it should actually have text. But in this case, the images for "Reaction", etc. are purely supplemental; their surrounding content wouldn't suffer if they were missing. In fact, their alt value is exactly the same as the immediately following word. For such cases, the HTML specification recommends using an empty alt value.

Regarding typography: Font, weight, style, size, color, etc. should all be set through CSS, not through HTML elements. What typography to use on a page should be considered on a case-by-case basis. A reputable news site may want to use a serif font on a light theme, whereas a playful coding site may want to use a monospace font on a dark theme.

You asked about typography in relation to headings, so I'll assume you meant "what heading for what size": In addition to "typography through CSS", a heading's level may be conveyed by more than just its size; it may be conveyed through color, font, weight, surrounding symbols or whitespace, or more.

Your CSS is separated very cleanly; a global stylesheet and a component-specific stylesheet. However, your style.css would likely be considered an anti-pattern: It requires the browser to follow one link, only to follow more links. The document has a head section, specifically for metadata such as stylesheets; there is no reason for your indirection.

Also, you can separate your component-specific CSS from the rest of the page by using Web Components, more specifically a Shadow DOM.

Note: Custom elements require JavaScript. Personally, I don't like to use JS when something can just as easily be built with HTML and CSS alone.