Submitted about 2 years ago

Huddle-Landing-Page-HTML-CSS

DurgaDevi Shanmugam• 70

@Durgathev

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

This is a solution for...

Huddle landing page with a single introductory section

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

Hello Everyone, I'd love to hear about any suggestion for improvement.

Community feedback

Lucas 👾• 104,420

@correlucas

Posted about 2 years ago

👾Hello DurgaDevi , congratulations for your new solution!

🎯 Your solution its almost done and I’ve some tips to help you to improve it:

Make the background image becomes full width replacing this on the body and deleting it from the container, this way you're sure it always display it full screen:

body {
    background: url(images/bg-desktop.svg) no-repeat var(--violet);
    background-size: contain;
    background-attachment: fixed;
}

✌️ I hope this helps you and happy coding!

Marked as helpful

DurgaDevi Shanmugam• 70

@Durgathev

Posted about 2 years ago

Hi @correlucas, Thanks for spotting the issue I've been looking for for an hour. I'll fix the it and remember this for future challenges.👍✌

Dun• 290

@DundeeA

Posted about 2 years ago

Great job completing this challenge, I noticed a few things that can be improved

HTML structure:

You did a good job with semantic html by having key landmarks (header,main,footer), but you placed them inside a div, for best practice and to be sure your webpage is accessible you should place landmark elements directly in the <body>.

You could restructure your html by moving the container div like so : https://i.imgur.com/4PrXX8Z.png

Semantic html (accessibility) : Your 'register' button is actually a div, I suggest using a <button> instead for several reasons but most importantly it makes the web page accessible to screen readers, most the time when you have something the user can click its a good idea to use the built in button element.

CSS: I noticed you used display 'flex', now you can set 'align-items: center' which will put all the elements along the center of the screen.

I highly recommend taking a look at this guide for flex: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Marked as helpful

DurgaDevi Shanmugam• 70

@Durgathev

Posted about 2 years ago

Hi @DundeeA, thanks for the valuable feedback. It is very useful for me and will practice the flexbox property.

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