Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

QR-code. HTML and CSS

P
Kaczupinko 170

@Kaczupinko

Desktop design screenshot for the QR code component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


What are you most proud of, and what would you do differently next time?

I'm most proud of writing clear, maintainable code with correct semantic structure. This not only ensures that the code is easy to understand and work with but also improves accessibility and search engine optimization. If I were to do anything differently next time, I would focus on optimizing the code further for performance, such as by reducing the file sizes of images and other assets, or by leveraging more advanced CSS techniques to enhance responsiveness across different devices.

What challenges did you encounter, and how did you overcome them?

I initially encountered challenges with the layout breaking when starting from the smallest elements. To address this, I decided to take a break and then systematically rework the layout step by step. This approach allowed me to better structure the elements and maintain the overall design integrity, ensuring that each part of the project fit together as intended. This methodical process helped me overcome the initial difficulties and achieve a more polished final result.

What specific areas of your project would you like help with?

The project was small, so I didn't notice any specific areas that needed particular attention. However, any feedback, no matter how minor, would be greatly appreciated and valued.

Community feedback

Sachin 830

@SachinKumarMahato

Posted

Well done for completing the challenge

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

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

.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

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

more info

I hope you find this helpful and happy coding

Marked as helpful

0

Please log in to post a comment

Log in with GitHub
Discord logo

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord