Sunnyside Agency - CSS Grid/Flex - Responsiveness Prioritised

@emestabillo Darn, you betcha this helps. As soon as I read that button shouldn't be in <a> I recalled reading this in the past lol, think it's invalid HTML according to the spec 😅??

As regards to srcset I think I didn't like it recently since it's heavily based on width. And then when a desktop image was actually of lower width than the mobile version it wasn't behaving how I wanted it to.

Perhaps I messed up the sizes media query? Perhaps you could sprinkle how you'd approach that sort of problem too 😬?

Never used <picture> so I'll look into it, thanks. Think that's another clue of my cluelessness of images in html.

"I'm actually not sure if the images in the services section are meaningful." -> Super interesting point, never really went that 'deep' into HTML images. I think you're right, I'll apply this logic in the next image-containing project, thank you 😁

As for nesting - normally I'd agree but for this particular project I didn't care (🤫) because of its' 1 page nature. My Designo solution was as you recommended, where deep-nesting would truly mess up a lot of the component-logic that Designo offers the developer to use. This project I wanted to spend time on images, so your feedback is invaluable for me!

Super useful feedback, thanks so much Emmilie, super happy to get image-based advice as for whatever reason 12months later I haven't spent enough time on them, go figure!

@grizhlieCodes Hahaha don't beat yourself up. I also have a hard time deciding whether to include images in html or not. In this case, I think I can place the cherries and orange as background images because they're not really connected to Graphic design or Photography, like I can understand them well without those two images.

As far as changing images with <img> and <picture> (and even <figure>), my idea is that if the images have different aspect ratios, I go for <picture>. Otherwise, it's <img with srcset. Still gray on some things, I'm still learning just like you.

I'm gonna have to look at your Designo to get ideas once I'm brave enough to attempt it lol :-)

@emestabillo Oohhhh, alrighty, that makes a ton of sense to me now.

And Designo is awesome to do!! Still my favourite project, even comparing to the audiophile or invoice apps. I can’t recommend it enough for:

1. Planning HTML and CSS/SCSS
2. Thinking through components
3. It was my first time using an API (leaf js for the maps).
4. Really getting into making useful SCSS mixins. I still use many of them to this day.
5. Managing layouts, especially the more ‘global’ ones across different pages. Like ‘body’, ‘main’, etc.

Many more I’m sure but I forgot 🥲

I used designo to start thinking how to make components via HTML and SCSS. Reuse code etc. Also practices sass architecture which was a breath of fresh air 😌. Structure makes me happy.

I’ll definitely attempt a few demos in codepen to understand how you use ‘img’ and ‘picture’, I like that you have a distinction there. I haven’t come across it before.

Thanks again for the useful info 😁👍

@ApplePieGiraffe I used to use spans, not sure why or when I switched to divs..... 😮 you're right.

I think a part of my brain chooses to ignore this stuff (accessibility) so I'll use your advice and will generally study from these reports... I think I did that for the first 2 projects and then became consumed with other aspects of learning. I usually set a few targets for learning and tunnel vision on them, per project. Even the most simple projects end up teaching me stuff this way.

Thanks, useful stuff as always.

@ApplePieGiraffe I'll admit, the information about landmark-elements is pretty useful (and important, oops)... And the list of them is short, so it makes the rule quite easy to follow.

Thanks!

@grizhlieCodes

😀👍