Reponsive, Grid, Flexbox, basic JS SunnySide LandingPage

Community feedback

• 

  Cor-Ina•250

  @CorinaMurgPosted over 1 year ago

  Hi Atlas,

  I love it! I am working on the same project right now. I'm hoping to finish it in the next couple of days or so, and then I will take a peek at your code and leave a feedback. If you are interested, it would be great to chat over our approaches and learn from each other. No pressure though! Great job! Corina

  Marked as helpful

  1

  ---

  

  Atlas K•370

  @AtlasKaplanPosted over 1 year ago

  @Cor-Ina That sounds great Of course, I would love to. And I know there are several areas of opportunity, so I would be happy to exchange ideas with you. I will be on the lookout, so we can review our codes.

  1

  

  Cor-Ina•250

  @CorinaMurgPosted over 1 year ago

  @AtlasKaplan Sounds good! I will let you know when I'm done.

  Marked as helpful

  1

  

  Cor-Ina•250

  @CorinaMurgPosted over 1 year ago

  @AtlasKaplan @AtlasKaplan Hi Atlas, I submitted the project yesterday, and now I can finally look at other submissions’ code. Mine has quite a few features that are not according to the design, so I was happy to look at your code and learn how I can improve mine. I liked how you matched the typography, and in general your desktop layout is very close to the spec. It was really easy to follow your code. You did a really nice job keep it very clean!

  Two suggestions that could help with responsiveness:

  1. One-column layout: 1025 px might be too wide for a one-column layout. I think even a tablet width can use two columns. My suggestion is that you change from one to two-column at least at 700px, if not sooner.
  2. Images: You included them with CSS as a background image, which works nicely. But, we had to use the mobile versions for smaller screens. You can easily add them to the media queries. In my code, I used the <picture> element in HTML which allows you to add them at once, so no need to change anything in media queries. Here’s an example: <picture> <source media="(max-width: 480px)" srcset="images/mobile/image-transform.jpg"> <img src="images/desktop/image-transform.jpg" alt="Egg on a yellow background">

  </picture>

  I was going to start a new project, but since there are quite a few features I need to change to Sunnyside, I’ll spend more time on fixing my code. Happy to exchange more chat more about this project if you are interested. Corina

  Marked as helpful

  1