Interactive Omelette Recipe Website with Responsive Design.

Solution retrospective
I'm most proud of how I took a basic recipe page and turned it into a more interactive and visually appealing website by adding gradients, transitions, a navigation bar, and a responsive layout. I also implemented a recipe download/print button and added a gallery carousel which really enhanced the user experience.
If I were to do this project again, I would try using a frontend framework like React or a CSS framework like Tailwind to speed up development and add more reusable components. I’d also like to improve accessibility and explore deploying with a custom domain.
What challenges did you encounter, and how did you overcome them?One of the main challenges was creating an attractive and fully responsive layout using only HTML and CSS. I had to experiment with different layout techniques like Flexbox and media queries to ensure the website looked good on both desktop and mobile screens.
Another challenge was styling elements like buttons, borders, gradients, and transitions to make the site visually appealing without any JavaScript. I overcame this by using CSS animations, hover effects, and transitions to add interactivity and visual flow to the page.
This project helped me improve my CSS design skills and understand how to achieve dynamic effects using only core web technologies.
What specific areas of your project would you like help with?I would appreciate feedback on the following:
Visual Design & Layout: Are there any improvements I can make to the spacing, color palette, or overall layout to make the website look more modern and clean?
Responsiveness: The site uses Flexbox and media queries. I’d love suggestions on how to better optimize it for different screen sizes or edge cases.
Accessibility: I want to ensure the page is accessible. Are there any semantic HTML improvements or accessibility best practices I might have missed?
Performance: Since I’m only using HTML and CSS, are there any tips to make the page load faster or reduce CSS bloat?
Please log in to post a comment
Log in with GitHubCommunity feedback
- P@Jdaans
I like the way you made it your own it looks really nice, the image is a little to big but the idea is awesome
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