Summary Result Challenge

Hello there 👋. Good job on completing the challenge !

I have other suggestions about your code that might interest you.

• <span> is an inline HTML element used to apply styles to specific parts of text without changing the structure or meaning.

  Paragraphs <p> and headers <h1>, <h2>, etc., provide semantic meaning to the content. Paragraphs are used for grouping blocks of text, while headers are used to define headings and subheadings in a document.

  Headers should be used to describe the part of text they are in. If a single word or a short phrase can adequately describe the content, using headers might be unnecessary.

• Also, avoid using the <div> tag just for text. <div> is a generic container used for grouping content and applying styles, but it doesn't convey any semantic meaning. Similarly, avoid using <span> for entire blocks of text, as it doesn't provide the same semantic value as other tags like paragraphs.

I hope you find it useful! 😄

Happy coding!

Hey, awesome solution!

I think you pretty much nailed the looks from the design.

Now, I am no expert but there are some things I try to be vary of when I go on about building a simple page. I have only 2 points for you.

• When it comes to html heading tags, make sure to always start with <h1>, and then follow it up with the smaller heading tags e.t. <h2>, <h3>, etc. Try to keep the heading numbers sequential if you have many headings. But never place a lower heading tag before a higher heading tag, in your case: h4 before h3.

• Do not use <span> tags, inside <span>. Thats what we have <div> for. I usually only use span when I want to manipulate text inside headings or paragraphs

Not a super biggie, but I think it something everyone should know when it comes to html. Either way, I think your solution looks great.

Feel free to have a look at my solution for this challenge too. I can use some feedback on things to do differently for next challenge!

I recommend you to separate the css variables into :root{ --color_white: hsl(221, 100%, 96%); }