Frontend Mentor | Huddles Landing Page with Curved Sections coding challenge solution

Solution retrospective

Hello!

All comments are most welcome and greatly appreciated!

Please check out my solution to the huddles landing page with curved sections built using HTML, CSS(Flexbox) and a bit of Javascript(JQuery). Some features of this solution are:

Fully responsive across all screen sizes
A scroll-to-top button
Custom animations
Long CSS stylesheet

Please any tips on how to greatly cut down on the length of CSS?

Community feedback

Chamu• 13,110

@ChamuMutezva

Posted about 3 years ago

the logo.svg was already created for you. No need to create another image, huddle was part of that image .
the heading h1 is supposed to give a general meaning of the site content, hence using part of the logo will not help users who rely on assistive technology to get a glimpse of what to expect on the site
it is recommended to have one h1 element per page even though having several does not cause errors but it gives a bad experience to those who rely on assistive technology. Read more here about headings
form control elements are required to have labels - accessibility reasons.

Ayoola• 120

@Josh-Ay

Posted about 3 years ago

@ChamuMutezva OH! THANK YOU! I was actually thinking that the logo image would have been created but I guess I did not see the logo.svg file. Thank you thank you so much for taking out time to comment on my solution. I really learnt a lot in terms of the structure and accessibility of websites.

I have made the appropriate changes.

Huddles Landing Page with Curved Sections

Design comparison

Solution retrospective

Community feedback

Please log in to post a comment

Join our Discord community