Skip to content
Submitted about 2 years ago

Huddle-Landing-Page-HTML-CSS

DurgaDevi Shanmugam•70
@Durgathev
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Huddle landing page with a single introductory section
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

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

Community feedback

  • Lucas 👾•104,400
    @correlucasPosted 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
    1
    DurgaDevi Shanmugam•70
    @DurgathevPosted 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.👍✌

    1
  • Dun•290
    @DundeeAPosted 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
    1
    DurgaDevi Shanmugam•70
    @DurgathevPosted about 2 years ago

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

    0

Please log in to post a comment

Log in with GitHub

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