Responsive mobile-first huddle landing page solution

Community feedback

• 

  T

  ApplePieGiraffe•30,545

  @ApplePieGiraffePosted over 3 years ago

  Hi there, Sebabatso-M! 👋

  Well done on this challenge! 👍 Your solution looks pretty great! 👏

  In addition to AgataLiberska's helpful feedback, one or two minor things I'd like to suggest are,

  • Making sure there's always a little bit of space between the social media icons at the bottom of the page and the edge of the screen, even when the height of the screen decreases (by adding some margin/padding between the two).
  • Using CSS background images to add and position the background image in this challenge. It'll keep those images out of your HTML, which will make your markup slightly cleaner, and I think it's easier to manage the images and CSS background images, then (since you won't have to worry about the images overflowing their container and its easy to make sure that they are clipped instead of stretched/squeezed when the size of their container changes). 😀

  Hope those tips help. 🙂

  Keep coding (and happy coding, too)! 😁

  1

  ---

  

  Sebabatso Mashego•165

  @Sebabatso-MPosted over 3 years ago

  @ApplePieGiraffe Thanks a lot for the feedback, will make the neccessary changes👍💯. You are appreciated!

  1
• 

  Agata Liberska•3,995

  @AgataLiberskaPosted over 3 years ago

  Hi @Sebabatso-M, well done on this solution, it looks great! It's nicely responsive and the layout looks great. There's only a few things that caught my attention:

  • you could add a transition to your hover states to make your solution a bit more polished

  • In the real world, the social media icons would be links to the brand's social media - so in the solution, you should probably use anchor tags and not just icons :)

  • I don't think <section> tag is the best choice for the illustration alone. The illustration is just decorative here, it doesn't represent any standalone content. Instead, I would use this tag to wrap the illustration and the text together, because that is a section - an intro to a brand or something like that (in your solution I would use <section> for your container__sub div)

  Hope this helps :)

  1

  ---

  

  Sebabatso Mashego•165

  @Sebabatso-MPosted over 3 years ago

  @AgataLiberska Thanks a lot for taking the time to look over my solution and for the feedback, it truly means a lot. Thanks for the insight, i'll make the neccessary changes!👍💯

  0

  

  Sebabatso Mashego•165

  @Sebabatso-MPosted over 3 years ago

  @AgataLiberska i decided to rename the section tags to div tags, i put the illustration in its own div in order to make things easy for when using flexbox for the desktop layout, is that ok? Otherwise, i added the anchor tags and some transitions.

  0

  

  Agata Liberska•3,995

  @AgataLiberskaPosted over 3 years ago

  @Sebabatso-M yes I believe so, I always use divs to position things with flexbox etc. :)

  1