Skip to content
Submitted 1 day ago

Simple recipe page solved using basic HTML & CSS elements.

#bootstrap
jad58200•20
@jad58200
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?

I'm most proud of creating a clean and functional Simple Recipe page using basic HTML and CSS. It was a great way to practice the foundational skills of web development. Next time, I would focus on adding more interactive elements, like buttons for recipe navigation or a responsive design, to enhance user experience across different devices.

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

Nothing.

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

also nothing.

Community feedback

  • Marzia Jalili•3,970
    @MarziaJaliliPosted 1 day ago

    Hats off!

    Some areas you can amend:

    • First, you can set a maximum width to the image to prevent it from overflowing from the container:
    max-width: 100%;

    This will ensure that the image's width won't be wider than the full width of it's parent.

    • Second, the bg color in the design is different from the one you have set, bro. You can find the exact colors in the style-guide file provided by the challenge.

    • Also, the font is different for the headings. You could link that specific font from Google to either your HTML or CSS and then set it only for the headings:

    h1, h2, h3 {
/* i guess it is outfit or whatever that will be...*/
  font-family: "Outfit", sans-serif
}

    Great job overall, keep up the grind!

    😁😁😁

    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