Design comparison
Solution retrospective
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-MahatoPosted over 1 year ago
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
--
.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.
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, orrem. - Relative units are more flexible and responsive across different screen sizes.
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
Marked as helpful0
Please log in to post a comment
Log in with GitHub
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