stats card

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.

HTML 🏷️:

• This solution may cause accessibility errors due to lack of semantic markup, which causes lacking of landmark for a webpage and allows accessibility issues to screen readers, due to accessibility errors our website may not reach its intended audience, face legal consequences, and have poor search engine rankings, highlighting the importance of ensuring accessibility and avoiding errors.

• What is meant by landmark ?, They used to define major sections of your page instead of relying on generic elements like <div> or <span>. They are use to provide a more precise detail of the structure of our webpage to the browser or screen readers

• For example:
• The <main> element should include all content directly related to the page's main idea, so there should only be one per page
• The <footer> typically contains information about the author of the section, copyright data or links to related documents.

• So resolve the issue by replacing the <div class="container"> element with the proper semantic element <main> along with <div class="attribution"> into a <footer> element in your index.html file to improve accessibility and organization of your page

.

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

Happy coding!

Congratulations well done. To add the purple layer, you can use mix-blend-mode: multiply start with opacity: 0.5; play with it until you get what you want.

Looking at your page, the responsiveness is not quite there yet. When going to smaller screen the image get squeezed and there is a overflow, see if you can fix this. As for the image, you just have to switch to the mobile image when on small screen size.

If you want to learn more about mix-blend-mode check this link.

W3Schools - mix-blend-mode

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.

.Avoid skipping heading levels ⚠️.

• Always start with the h1 (which can only be used once) and you will go down the hierarchy level depending on the heading’s level of importance.

-.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 ⚠️.

2. 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 info

3. Reliance on CSS positioning properties instead of modern layout techniques:

• CSS positioning properties are used extensively, causing difficulties in managing and maintaining the layout.
• Consider adopting modern layout techniques like Flexbox or Grid for improved flexibility and easier maintenance.

-Flexbox

-Grid

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.