Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Mobile first huddle landing page with scss

ToNisamBioJaβ€’ 330

@ToNisamBioJa


Design comparison


SolutionDesign

Solution retrospective


Hii!

I would really appreciate if somebody looked at this one for me!

I used the BEM naming convention and I paid attention to make the code readable and clean. I also ordered declarations by type(position, display, colors, font, miscellaneous…).

This one was trickier for me than I expected. The background image was a problem for me but I managed to complete it on my third try.

I tried hard to get it to the original design but I still didnt manage to place the social links where I wanted. But I think its still pretty close to the original one.

I went with a mobile first approach as always and on mobile I think I got it very close to the original.

On a previous challenge somebody pointed out that I dont use box shadow and hover effects enough so I added some on this one(just something simple). I need to learn animations more and I apply them to these designs more.

On the design comparison it shows it a little different than it is when you preview the site :/.

Sorry for the long text on such a simple challenge.

All feedback is appreciated as always. Thanks in advance!!!

Community feedback

P
ApplePieGiraffeβ€’ 30,545

@ApplePieGiraffe

Posted

Hello, ToNisamBioJa! πŸ‘‹

Good job on this challenge! πŸ‘ It's great to hear that you learned a lot and your solution looks nice and responds well! πŸ‘

One small thing I'd like to suggest is to add background-size: cover to the body so that they background image fills up the entire area of the screen in the desktop layout. πŸ˜‰

Also, it might be worth using padding rather than margin to add space around the content of the page and the sides of the screen because the body of your page seems a little misplaced in the dev tools because of margin collapsing. It's not a huge deal, but it's useful to be aware of when layout things out in CSS. Learn more about margin collapsing in this great article.

Hope that helps a little. πŸ™‚

Keep coding (and happy coding, too)! 😁

Marked as helpful

1

ToNisamBioJaβ€’ 330

@ToNisamBioJa

Posted

@ApplePieGiraffe Thank you for the advice and nice words!

1
Digvijay Ghoshβ€’ 1,020

@dvion0o0

Posted

it is completely responsive you have done a great work here πŸ‘

Marked as helpful

1

ToNisamBioJaβ€’ 330

@ToNisamBioJa

Posted

@dvion0o0 Thank you very much!!

0
Nebiyou Ersaboβ€’ 185

@NebiyouErsabo

Posted

Great job here! Just add cursor:pointer on the social icons and you're good to go.

I think you nailed this one! πŸ‘

Marked as helpful

1

ToNisamBioJaβ€’ 330

@ToNisamBioJa

Posted

@Nebiyou12 Will do! Thank you so much!

0

Please log in to post a comment

Log in with GitHub
Discord logo

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