Skip to content
Submitted about 1 month ago

Omelette-Recipe-Page

Emmanuel•60
@Emmxzy
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Recipe page
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

What are you most proud of, and what would you do differently next time?

If you're asking about your recipe page project, here’s how you might reflect on it:

What I’m Most Proud Of:
  • Pixel-perfect design: I matched the layout closely to the provided design.
  • Clean, semantic HTML: The structure is well-organized and accessible.
  • CSS styling & responsiveness: The page looks great on both mobile and desktop.
  • Typography & spacing: I carefully adjusted font sizes, margins, and paddings for a polished look.
What I’d Do Differently Next Time:
  • Use CSS variables: It would make styling and maintaining the project easier.
  • Improve accessibility: Adding ARIA attributes for better screen reader support.
  • Optimize images: Use WebP format for better performance.
  • Consider animations: Subtle transitions could improve user experience.
  • Try a CSS framework: Experimenting with Tailwind or Bootstrap for faster styling.
What challenges did you encounter, and how did you overcome them?

Here’s a reflection on potential challenges you faced while building the recipe page project and how you overcame them:

Challenges & How I Overcame Them

  1. Matching the Design Exactly

    • Challenge: Since the design was provided as a JPG, there were no exact values for font sizes, spacing, or colors.
    • Solution: I used browser developer tools to test different font sizes and margins until they closely matched the design.

  2. Responsive Layout

    • Challenge: Ensuring the page looked great on both mobile and desktop required careful media queries.
    • Solution: I used flexbox and CSS grid to create a flexible structure and tested the design across different screen sizes.

  3. Typography & Font Selection

    • Challenge: The design used a specific font style that needed to be imported correctly.
    • Solution: I included the necessary Google Fonts in the <head> and used font weights correctly to match the design.

  4. Spacing & Alignment

    • Challenge: Getting the right padding, margin, and line spacing to align properly.
    • Solution: I used a consistent spacing system and adjusted values in the browser for precision.

  5. Styling the “Preparation Time” Section

    • Challenge: The background of the “Preparation Time” section was different from the rest of the page.
    • Solution: I used a light purple background with border-radius and added padding to match the design.

  6. Deploying the Project

    • Challenge: Setting up a live preview for easier sharing.
    • Solution: I deployed the project on GitHub Pages / Vercel / Netlify for easy access.
What specific areas of your project would you like help with?

Here are some specific areas where you might need help:

  1. Design Accuracy – Does the final implementation match the provided design exactly? Any feedback on small inconsistencies?
  2. Responsive Behavior – Are there any issues when resizing the page? Does it look good on all screen sizes?
  3. Code Optimization – Are there better ways to structure the HTML & CSS for cleaner, more maintainable code?
  4. Accessibility (a11y) – Does the page follow good accessibility practices (e.g., proper semantic HTML, color contrast, and screen reader support)?
  5. Performance – Are there any optimizations to improve load times, such as reducing unnecessary styles or optimizing images?

Community feedback

  • Konrad•140
    @ExtendoGHPosted about 1 month ago

    Hey,

    1. Design Accuracy

    I noticed that the background color does not cover the entire body of the page, which results in a white strip at the bottom. However, it looks fine on the live version, so this might just be an issue with the screenshot. You may want to regenerate it.

    The spacing is slightly different from the design, but if you didn’t use the Figma project file directly, it still looks quite good.

    • The Preparation Time section is missing a list.
    • The table is positioned slightly differently compared to the design.

    2. Responsive Behavior

    The page is responsive, but you could remove unnecessary margins at smaller widths (e.g., below 410px) when the main heading starts breaking into two lines.

    3. Code

    • It’s a good practice to wrap each key container in a div to make positioning easier. You did this in the Preparation Time section, but it’s missing in other parts.
    • Move the stylesheet link to the end of the <head> section to avoid issues with font imports.
    • Global style reset: Adding a global CSS reset at the beginning of your stylesheet helps prevent unwanted default margins and paddings. Example:
    * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

    Use rem units instead of px

    I recommend using rem units instead of px to make the project more responsive. You can set font-size: 62.5% on the html element so that 1rem equals 10px, making calculations easier.

    SEO Improvements

    Consider adding meta description and meta keywords in the <head> section to improve the website’s SEO performance.

    Marked as helpful
    0
  • Andrey•2,510
    @dar-juPosted about 1 month ago

    Hi Emmanuel!

    You're doing a great job! I like your html code, there are no errors in the validator, the semantics are fine, the tags are selected correctly. Responsiveness and mobile version are good. You're great!

    I'll answer some of your questions:

    • Perfect Pixel is when your layout differs from the layout in each element by 1-3 pixels. In FM, there is a solution / design comparison for this - they should differ minimally. Without a Figma layout, it is difficult to layout, but possible. For this, there is an extension in Chrome - PerfectPixel, where you overlay an image on the layout and adjust it by pixels. I use this tool, it is very convenient.
    • About performance, you can use the Page Speed tool if your site is published, or Lighthouse in Chrome in dev tools if your project is on a local disk. I just checked your page and saw that you include fonts twice, in html and css. Remove the font link from html and your page will become even faster.

    Recomendation: try to avoid long constructions like .instructions li strong {, it is better to assign it own class to the tag. This will make the code easier to maintain and will increase performance.

    Otherwise, everything is great, good luck with your development!

    Marked as helpful
    0
    Emmanuel•60
    @EmmxzyPosted about 1 month ago

    @dar-ju Could you kindly provide more details? Also, would you be available on Discord to discuss this further?

    0
    Andrey•2,510
    @dar-juPosted about 1 month ago

    @Emmxzy Yes, of course, what exactly do you need to clarify? You can write to me in Telegram, it is in the profile in GitHub

    0
  • Aljon Laxamana•210
    @AljonLaxamanaPosted about 1 month ago

    Great job!

    Marked as helpful
    0

Please log in to post a comment

Log in with GitHub

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