Solution QR Code Component

Well done for completing the challenge

As a front-end developer, your job is to make the website look just like the designer wants it to. If there are any differences, try to fix them quickly so that the website matches the design as soon as possible.

This challenge consists of two parts: the mobile component and the desktop component. However, it appears that the mobile part has not been developed. It's important to address this issue and ensure that both the mobile and desktop aspects of the challenge are completed.

.Do not forget ⚠️ to check your FEM report (It provides value information), to see what is incorrect and update your code with it. This should be done immediately after submitting your challenge.

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.

--

More info

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

More info

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.

Helpful links

-Flexbox

-Grid

.It seems that you are not currently using an external stylesheet for your web page. I would recommend utilizing an external style.css file for your styles. This approach offers several benefits such as code reusability, ease of maintenance, browser caching, and improved performance

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.

HEADINGS ARE NOT PROPERLY USED ⚠️:

• This solution consists incorrect usage of <h3> so it can cause severe accessibility errors due to incorrect usage of level-three headings <h3>

• Every site must want only one h1 element identifying and describing the main content of the page.

• An h1 heading provides an important navigation point for users of assistive technologies, allowing them to easily find the main content of the page.

• In this solution there's <h3> element which is this <h3>Improve your...</h3>, you can preferably use <h1> instead of <h3>. Remember <h1> provides an important navigation point for users of assistive technologies so we want to use it wisely

• So we want to add a level-one heading to improve accessibility

• Example: <h1>Improve your front-end skills by building projects</h1>

• If you have any questions or need further clarification, and feel free to reach out to me.

• If you have any questions or need further clarification, you can always check out my submission and/or feel free to reach out to me.

.

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

Happy coding!