Skip to content
Submitted over 3 years ago

Completed using BEM and SASS

Abhishek Singh•15
@abhisheksinghwork7
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Agency landing page
  • HTML
  • CSS
  • JS
2junior

Design comparison

SolutionDesign

Solution retrospective

Hey guys! This was my first Junior level challenge. It was a great experience. Just wanted to ask few things:

  1. While rearranging sections or divs from mobile version to desktop version What is the best method to go about it? Should we strictly use the margins and paddings from the design image OR rely on the auto resizing from flex and grid to just put things in place.

  2. While placing an image is it better to use the picture tag in HTML which changes the image according to the media width or should we place the image using CSS for mobile and desktop versions separately?

Any feedback would be appreciated. Thanks

Community feedback

  • Chamu•13,130
    @ChamuMutezvaPosted over 3 years ago

    Greetings Abhishek. There are several issues that i feel needs addressing.

    • do not set width on the body like width: 23.4375rem; , rather have a div wrapper that is a direct child of the body that you can control the width , using padding and margins and max-width.
    • the nav links i would prefer them to an unordered list - try using semantic elements where possible to help with accessibility.
    • whilst the site looks good at 375px , it is not the same after that mainly due to the width you set on the body.
    • though float can still be used - i wouldn't encourage its use, look into flex and grid . Happy coding
    Marked as helpful
    0
    Abhishek Singh•15
    @abhisheksinghwork7Posted over 3 years ago

    @ChamuMutezva Thanks for the valuable Feedback. I would surely consider working on these points on my next project.

    0
  • Yemisrach•1,430
    @Yemisrach15Posted over 3 years ago

    Hey Abhishek. Good job🙌🏾

    For you second question, I would say using the picture tag is better as it is a modern solution. If you use picture, you write less CSS which means less work. Yay😁! Don't take my word for it though.

    Keep up the good work

    Marked as helpful
    0
    Abhishek Singh•15
    @abhisheksinghwork7Posted over 3 years ago

    @Yemisrach15 That is the reason I purposely used it, as it is a modern solution. Hopefully will try and include more such features in future projects. Thanks for your valuable feedback though.

    0

Please log in to post a comment

Log in with GitHub

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord