Skip to content
Submitted 11 months ago

Recipe-page || Pure HTML & CSS

Krishna Rawat•20
@Krishnarawatethic
A solution to the Recipe page challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

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

This time I did it faster and learned many things and I would next time try to manage my tags properly to avoid confusion next time.

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

The challenge was to arrange containers with style tags correctly also some concept related to list styles and table border CSS properties were new and challenging.

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

I would like me to correct me to how to avoid this image error. I mean whenever I host my pages on GitHub images always never showed.

Code

Please log in to post a comment

Log in

Community feedback

  • Account deleted

    Removing a / from the src attribute before assets likely solved the problem of loading an image because it changed the path resolution behaviour in HTML.

    Make sure to check your Github as i made a Pull request

    When you specify a path in the src attribute of an img tag without a leading /, the browser interprets it as a relative path. By removing the /, you made the path relative to the current page's URL instead of an absolute path.

    • For example, if your page URL is https://www.example.com/recipes/omelette.html and the original src attribute was src="/assets/images/image-omelette.jpeg", the browser would look for the image at https://www.example.com/assets/images/image-omelette.jpeg.
    • By removing the leading / and having src="assets/images/image-omelette.jpeg", the browser now looks for the image relative to the current page's URL, resulting in https://www.example.com/recipes/assets/images/image-omelette.jpeg.

    So, removing the / changed the path resolution to be relative to the current page, which likely resolved the issue of the image not loading.

    Marked as helpful
  • Eugenia Antonova•430
    @EugeniaAntonova

    Congradulations with the challenge!

    With the image you just need to change a path. You have this now <img id ="img" width ="602px" height="100%" position="absolute" src="/assets/images/image-omelette.jpeg" alt="Burger logo">. And the only thing to change is a dot. Like this: <img id ="img" width ="602px" height="100%" position="absolute" src="./assets/images/image-omelette.jpeg" alt="Delightful omlette you will have">

    Also, it would be much easier for you to use a little bit more semantic markup, and learn positioning techniques. Try with this one to make something like:

    <main> <article> <the rest of the code> </article> </main>

    then you can give the main a display of grid and place-items: center. And your article will be perfectly centerd all the time! You then can add a padding inside the main to give some air at the top and bottom;

    You can even go further and give a display grid to the article. With this you will not have to position the image absolut.

    So, learn more about semantics, grid, flex and semantic classes naming and you will very soon succeed!

    Good luck on your way

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