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

Responsive Recipe Page for Simple Omelette

@najahaja

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 proud of how well the recipe page matches the design specifications and how effectively it adapts to different screen sizes. Using the custom "outift" font and creating clean, organized code were highlights. The functional features, such as styled lists and tables, enhance user experience and readability. Next time, I’d focus on improving accessibility with better screen reader support and explore advanced responsive design techniques. Performance optimization, including asset compression, and ensuring cross-browser compatibility would be priorities. Additionally, I’d consider adding interactive features and more detailed code documentation for easier future updates.

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

I faced several challenges, such as aligning complex layouts and ensuring responsiveness across devices. To tackle these, I used CSS Flexbox and Grid for layout management and media queries to adjust styles for different screen sizes. Integrating the custom "Young Serif" font required using the @font-face rule correctly. Styling the table posed issues with alignment and borders, which I resolved with specific CSS properties. Additionally, keeping the code organized was a challenge, so I used clear class names and comments to maintain readability and manageability.

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

I’m looking for guidance on several aspects of my project. Firstly, I’d appreciate advice on optimizing responsiveness across various devices, as I’ve used media queries but feel there might be room for improvement. I’m also seeking confirmation that my @font-face implementation for the "Young Serif" font is correct and whether there are any issues with font loading or fallbacks. Additionally, I’d like suggestions on enhancing the styling and alignment of tables to improve their readability and visual consistency. Any recommendations for boosting accessibility, especially for screen readers and keyboard navigation, would be valuable. Lastly, I’m interested in tips for further organizing and clarifying my CSS and HTML code to maintain a clean and efficient codebase.

Community feedback

MikDra1 6,050

@MikDra1

Posted

Responsiveness:

  • Use Flexbox or CSS Grid more for layout adjustments.
  • Implement fluid typography using viewport units (e.g., vw).
  • Optimize breakpoints with a mobile-first approach.

@font-face Implementation:

  • Ensure multiple formats (WOFF2, WOFF) are used.
  • Add font-display: swap; to improve font loading.

Accessibility:

  • Add aria-labels to interactive elements.
  • Ensure logical tabbing order and visible focus states.
  • Use semantic HTML tags (e.g., <header>, <nav>).

Code Organization:

  • Consider BEM naming for CSS classes.
  • Group related styles and use comments for clarity.
  • Minify CSS for improved performance.

For the table at the bottom I would encourage you to use grid layout and not tables. If you want to practice tables that's okay, but you should also try to make this table in grid to test your skills in more modern approaches.

Hope you found this comment helpful 💗

Good job and keep going 😁😊😉

Marked as helpful

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