@Alex-Archer-I
Posted
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
@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!
@Alex-Archer-I
Posted
@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>
@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!
@Alex-Archer-I
Posted
@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.
