Submitted 5 months ago

Recipe Page using HTML & CSS

Andy•140

@AStombaugh

Preview site View code

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 think I got the design close, but my biggest personal goal was to have clean, simplified semantic HTML and CSS—as little as I could get away with to accomplish what I needed.

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

Due to my choosing to add padding on the `` container, I had a hard time getting the header image to fill the width of the screen on mobile. My workaround for this was to use negative margins and calc width to force overflow, but I believe there is a cleaner solution to this. It works, it's just not pretty on the backend.

main img {
    width: calc(100% + 3rem);
    height: 10rem;
    object-fit: cover;
    border-radius: 0;
    margin: -1.5rem -1.5rem 0 -1.5rem;
  }

Also, a minor problem: in the Instructions section, the 1 marker has a serif character instead of sans-serif like the design, even though I believe it's the same font. I even tried overriding the font just to be sure. I'm not sure if that's something I did wrong or if it's just a small error with the image file provided.

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

Ensuring correct HTML tags were used and if there's a suggestion on how to handle my issue with the header graphic better.

Community feedback

Alex•3,130
@Alex-Archer-IPosted 5 months ago
Hi!

You are doing great with semantic tags! Better than me - I was in rush with this challenge and totally forgot about ol list =)

The only thing is the headers. I think that "ingredients", "instructions" and "nutrition" are headers of the same level and they all can be a h2 or h3. The headers hierarchy has a tree structure. For example, the page has one h1 and multiple articles which have h2 headers. Than the articles could have a sections with a h3 etc. Sure, it's a spherical cow in a vacuum example, real projects are often more tricky.

About the image... well I noticed too late that in the mobile version it has a full screen width, so I just separated it from the other content and used the same paddings. I don't like it, honestly. Your solution seems more elegant =)

P.S. Yep, I thought the first marker in the instructions has different font too. But I guess it's just an oversight.
Marked as helpful
1
Andy•140
@AStombaughPosted 5 months ago
@Alex-Archer-I Thank you! That's a great point about the headers. I was so focused on going down the tree as I hit an item that I forgot about the hierarchy and did some unnecessary work there.

I'm working on the product page now and I realized that all I had to do for the header image was put it in its own section so I could apply padding independently to the image and the rest of the body. Whoops!
1
Alex•3,130
@Alex-Archer-IPosted 5 months ago
@AStombaugh

Yeah, but in this case you have to apply left, right and top paddings for the image and left, right and bottom for the rest of the page. Maybe it's a nice solution, but it makes me feel some kind of... clumsy? Idk.

Well, do you mean that one with the perfume? I didn't do it yet (couldn't wait to do some js stuff), but as far as I know it has two images for different versions. I can recommend you the picture tag for them. It contains various sources and media values and could picked up the image depends on it.

<picture> <source srcset="mobile.jpg" media="(max-width: 900px)"> <img src="desktop.jpg" alt=""> </picture>
1
Andy•140
@AStombaughPosted 5 months ago
@Alex-Archer-I Yeah, you'd be treating the header image as its own container and then the rest of the content as a container to separate the padding.

I haven't tried the picture tag, but for the images, I used content: url() and swapped them in the media query. I should try the picture tag though, that looks really clean!
1
Alex•3,130
@Alex-Archer-IPosted 5 months ago
@AStombaugh

Hah, I realized why I don't happy with this approach. Cos you need a similar padding for both containers and it's inconvenient if you have to change them sometimes. But that is where the css variables come on the stage. Now I like this solution a bit more. Or dislike it a bit less. It depends. Just like that glass with half of water and half of air.

By the way, I not one hundred percent sure, but it seems to me, that the image in the perfume challenge isn't a header. Cos it's aside on the desktop version. That is where picture could be useful too - when you need an image wrapper for some reasons.
1
SergioBrandaoF•130
@SergioBrandaoFPosted 5 months ago
Not bad, but the dimensions of your solution site don't match the provided design.
0

Please log in to post a comment

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