Sunnyside Agency - CSS Grid/Flex - Responsiveness Prioritised

Community feedback

• 

  P

  Emmilie Estabillo•5,540

  @emestabilloPosted over 3 years ago

  Hey @grizhlieCodes, congrats on completing this project! I'm getting some text overlap on medium widths, starting at 420px or so, down on the services and testimonial section. Some of the text actually disappears right before the next breakpoint. A few more:

  • The CTA on your nav should be left as an anchor tag instead of a button wrapped in an a tag.

  • For the images, I think there's no need to create several divs and hide/show depending on screen size. Look into srcset and maybe <picture> tag to handle image changes. I'm actually not sure if the images in the services section are meaningful. I'd probably choose to keep them as background images. Then you wouldn't have to worry about grid and overlaps.

  • The class nesting looks quite deep. section.services article.service.graphic-design .text-container .service-heading , for example, is very specific. Overriding it will be difficult. I suggest to nest sparingly, keeping classes at the root level and nest only pseudoclasses and pseudoelements.

  Hope this helps!

  Marked as helpful

  3

  ---

  

  Rafal•1,395

  @grizhlieCodesPosted over 3 years ago

  @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!

  1

  

  P

  Emmilie Estabillo•5,540

  @emestabilloPosted over 3 years ago

  @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 :-)

  1

  

  Rafal•1,395

  @grizhlieCodesPosted over 3 years ago

  @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 😁👍

  1
• 

  T

  ApplePieGiraffe•30,545

  @ApplePieGiraffePosted over 3 years ago

  Hi there, Rafal! 👋

  Slightly late to post this! 😅 But I wanted to drop in to say great job, once again! 👏

  It looks like the discussion between you and Em has covered just about all I could suggest! 😂 Overall, everything looks really nice and I especially like the transition you put on the mobile menu! 🤩

  Well—okay, tiny thing—but it might be worth taking a look at your solution report and trying to clear up some of the errors that are there in order to improve the accessibility and semantics of your solution. 😉 I've actually learned a lot about HTML itself and a bit about accessibility by looking over my own solution reports. 😆

  For instance, it's recommended that you use spans instead of divs within button elements because spans are inline elements by default (but IDK why that matters enough to be an issue, TBH). And there isn't really a reason for button elements to be wrapped in anchor tags, since elements of that sort should either be one or the other. Just small stuff, once again, but I find it a little interesting to learn about and know! 😄

  Well, glad you learned new stuff while completing this challenge and might even make some content for others to learn from (that's what it's all about)! 👍

  Oh, yes, and keep coding (and happy coding, too), of course! 😁

  Marked as helpful

  2

  ---

  

  Rafal•1,395

  @grizhlieCodesPosted over 3 years ago

  @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.

  1

  

  Rafal•1,395

  @grizhlieCodesPosted over 3 years ago

  @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!

  1

  

  T

  ApplePieGiraffe•30,545

  @ApplePieGiraffePosted over 3 years ago

  @grizhlieCodes

  😀👍

  1