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, CSS, and responsive design Web Page

@YasserEsam

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 achieving a clean and visually appealing design that closely matches the provided specifications

Next time, I would focus on improving the accessibility features of the project. This would include adding more semantic HTML elements and ensuring that all interactive elements are accessible with keyboard navigation. I would also consider implementing a more modular CSS architecture to further streamline the styling process.

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

One of the main challenges I encountered was aligning the design precisely with the provided mockups, particularly in terms of spacing and responsive behavior. To overcome this, I used browser developer tools to fine-tune the CSS and adjust the layout to match the design as closely as possible. I also used media queries extensively to ensure that the page looked good on both mobile and desktop screens.

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

I would appreciate feedback on the following areas:

  1. Responsiveness: Are there any improvements I can make to ensure the layout is even more fluid across different devices and screen sizes?
  2. Accessibility: Are there any specific accessibility improvements that could be made to enhance the usability of the page for all users?
  3. CSS Organization: Does the CSS code follow best practices in terms of organization and modularity? Are there any recommendations for refactoring or improving the stylesheet?

Community feedback

@PedroEustaq

Posted

Responsiveness: Yes there is a type of Grid called Flexbox, it is very helpful to make containers flexible and to move things inside them! Accessibility: I don't think so, normally people read recipes by scrolling down, which is present on your website. CSS Organization: its simple has that! Nice Semantic!

1

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