Submitted over 4 years ago

Huddle Landing Page of Breakpoints

Arun•285

@arun-roberts

Preview site View code

This is a solution for...Huddle landing page with a single introductory section

HTML
CSS

1newbie

Design comparison

SolutionDesign

Solution retrospective

Too many breakpoints? I guess it is only two but it seems like a lot of clutter. Just wasn't satisfied with how it was scaling. Even though it's such a simple page.

Also just had a look at the report. I wrapped the social media icons in a div to generate the white circle around the icons because I couldn't find free SVGs with the circle. I then placed the whole thing inside the a so that the entire area of the circle would be clickable. Is there a better solution? Aside from just having access the whole icon and circle SVG?

And <section>s are all meant to have headings then? What might be a better choice? <aside>? Our old friend <div>?

Community feedback

Roman Filenko•3,335
@rfilenkoPosted over 4 years ago
Hi, just a few points:

first disable browser defaults, add box-sizing - it will help with sizing elements.

no need of div for social icons, you can use pseudo elements(::after), make anchor a flex container and align icon inside, delete all mediaqueries with sizing and margin of svgs;

start with mobile, make layout with flexbox or grid, and when scaling up - add changes with mediaqueries;

add hover effects for links and buttons, transition for smoothiness;

you can use sections or articles, in footer I would use simple ul with links.
1
Arun•285
@arun-robertsPosted over 4 years ago
@rfilenko

Thanks for the box-sizing tip! Haha, life is so much easier now.

Same for using ::after for the social icons. So much more manageable.
0

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