Submitted about 3 years ago

CSS FlexBox and SASS (re-created using Flexbox)

Go Ushiyama• 135

@Enoah35

Preview site View code

This is a solution for...

Huddle landing page with a single introductory section

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

This is my second solution using most of the feedbacks I got. Hopefully it is more readable, and better structured. Again if you can give criticism, tips or things I should avoid doing I am all ears. Thank you!

Community feedback

ApplePieGiraffe• 30,545

@ApplePieGiraffe

Posted about 3 years ago

Hey there, Go Ushiyama! 👋

Nice to see you complete another challenge! 😀 Good effort on this one! 👏

I'd like to suggest,

Turning the social media links at the bottom of the page into actual links using the anchor tag.
Making sure there's always some space between the image and the left side of the page by adding some margin/padding between them.
As Drallas suggested, taking a closer look at the responsiveness of the site (there's a horizontal scroll bar that appears along the bottom of the page right before the layout changes from desktop to mobile that you might want to take care of).

Keep coding (and happy coding, too)! 😁

Go Ushiyama• 135

@Enoah35

Posted about 3 years ago

@ApplePieGiraffe Hello! Thanks again for another set of suggestions. I will make sure to follow these suggestions and may re-try to create this project although I may not upload it again. Just to see if I get the concept before studying further. ( I have not moved to Javascript yet because I am still unsure I get the concept of Grid and Flexbox when it comes to responsive layout). Thank you again!

ApplePieGiraffe• 30,545

@ApplePieGiraffe

Posted about 3 years ago

@Enoah35

No problem! 👍 Take your time if you think you need to dig into CSS layout a little more—it'll definitely pay off if you're comfortable with the fundamentals when you build sites. 😉 Good luck! 😀

drallas• 375

@Drallas

Posted about 3 years ago

Hello

I think your responsive design still deserves some consideration to make it a more seamless transition. Layout is a bit off, it might be better to tweak it a bit to closer to the design!

Go Ushiyama• 135

@Enoah35

Posted about 3 years ago

@Drallas Hello! Thanks for the feedback. Yes It is true, the project after uploading was surprised that it was very off from the actual design.

As for the transaction you are absolutely right. I made it to change layout pretty early because it was starting to get squishy but I am sure that is because it is not well optimized. I am sure it has something to do with the Flex coding in the css part. Will see if I can find a solution for it. Thanks again for the feedback!

drallas• 375

@Drallas

Posted about 3 years ago

@Enoah35

It also still surprises me how much my work is off compared to the design, even working from Figma file knowing the exact measurements it's hard to get it right the first time. Pixel perfectness isn't the goal but myself i try to be close and do justice to the design; as if I'd build it for a client.

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