Submitted about 3 years ago

Completed using BEM and SASS

Abhishek Singh• 15

@abhisheksinghwork7

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

Agency landing page

HTML
CSS
JS

2junior

View challenge

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:

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.
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,110

@ChamuMutezva

Posted about 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

Abhishek Singh• 15

@abhisheksinghwork7

Posted about 3 years ago

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

Yemisrach• 1,430

@Yemisrach15

Posted about 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

Abhishek Singh• 15

@abhisheksinghwork7

Posted about 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.

Please log in to post a comment

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