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

HTML and CSS

@zlatan-cic

Desktop design screenshot for the Recipe page 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 successfully implementing a responsive design that looks great on both mobile and desktop devices 📱💻. However, next time, I would spend more time planning the layout to avoid any last-minute adjustments and ensure a smoother development process 🚀.

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

One of the main challenges was handling the image display for mobile devices. Initially, I had to place the first image in the body and then use CSS to set it to display: none for desktop and display: block for mobile 📱. I overcame this by leveraging media queries to conditionally show and hide images, ensuring a seamless and responsive design experience 🎨.

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

I would appreciate help with optimizing the layout for different screen sizes to ensure a more consistent look across devices. Additionally, advice on improving the overall code structure and efficiency would be highly valuable. Any tips on enhancing the user experience and accessibility would also be greatly appreciated. 😊

Community feedback

nanikore0 100

@nanikore0

Posted

Hi, great job! Regarding accessibility, you can use <section> tags instead of divs to separate different sections of the page and <footer> for the attribution. The use of semantic HTML elements helps to clearly describe its meaning to both the browser and the developer. Hope this helps! 😊

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