Submitted 21 days ago

Crafting a responsive landing page using html and css grid

#accessibility

Oluwatosin itsekure• 40

@magictems

Preview site View code

This is a solution for...

Recipe page

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 take pride in my ability to independently address challenges that arise during development. Successfully overcoming obstacles through my own efforts not only boosts my confidence but also reinforces my expertise in troubleshooting and problem-solving within the project scope. This sense of accomplishment fuels my passion for continued learning and growth in web development.

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

I encountered some minor bugs during the development process, but through careful examination and attention to detail, I was able to identify and resolve them effectively. This hands-on troubleshooting experience enhanced my problem-solving skills and deepened my understanding of the project's intricacies.

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

I am open to receiving feedback and corrections as they provide valuable insights for improvement. Embracing constructive criticism fosters a culture of continuous learning and refinement, ultimately leading to a higher quality end product.

Community feedback

Abdul Khalid 🚀• 72,160

@0xabdulkhalid

Posted 21 days ago

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

I have a suggestion 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>

You can't skip headings, you always need to move from h1 to h6 for preserving the page structure.

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>Simple Omelette Recipe</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

Additionally you need to change other h3 elements into h2 elements, You can easily style them using css.

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

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

Happy coding!

Please log in to post a comment

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