Results Summary Component Main

Well done for finishing the challenge.

As a front-end developer, your primary task is to transform the designer's visual concept into a functional website. The objective is to ensure that the final website closely resembles the original design. However, if there are noticeable differences between the website and the intended design, it's important to address this issue.Use the build-in frontend Mentor design comparison tool.

1. Lack of semantic HTML:

• Semantic HTML elements are missing or not used appropriately.
• The structure does not convey the meaning and purpose of different parts of the webpage.

-.Every site should ALWAYS have ✅ a main element not only for semantic purposes but also to help assistive technology find the main content of your content. For this challenge, it will serve as the component’s container ⚠️.

--

More info

.Usage of absolute units instead of relative units:

• Absolute units like pixels (px) are used for defining lengths and sizes instead of relative units like percentages (%), em, or rem.
• Relative units are more flexible and responsive across different screen sizes.

More-details

Your CSS Reset is being underutilized. 😢 To fully maximize 💯 it, you will want to add more to it. Here are some examples that you can freely use 😁: Josh Comeau Reset Eric Meyer Reset

For improved accessibility 📈 for your content, it is best practice to use em ✅ for media queries. Using this unit gives users the ability to scale elements up and down, relative to a set value use this link to learn about media queries

I hope you find this helpful and happy coding.

Hello there 👋. Congratulations on successfully completing the challenge! 🎉

• I have other recommendations regarding your code that I believe will be of great interest to you.

DECORATIVE SVG'S ♨️:

• The alt attribute is used to provide alternative text for images in HTML documents. The alt attribute is used by screen readers to describe the image to visually impaired users, which is essential for web accessibility.

• Now, when it comes to decorative SVGs, they are used purely for aesthetic purposes and do not convey any important information or functionality to the user.

• Since these images do not convey any important information or functionality, there is no need for an alt attribute.

• So feel free to set the alt attribute as "" for decorative svg's, because alt="" will be skipped by screen readers they will consider the image as decoration

Example:

<img src="images/decorative.svg" alt="">

<img src="/images/icon-reaction.svg" alt="Reaction icon">
👇
<img src="/images/icon-reaction.svg" alt="">

.

I hope you find this helpful 😄 Above all, the solution you submitted is great !

Happy coding!