Skip to content
Submitted almost 2 years ago

Huddle-landing-page-with-single-introductory-section

gambi358•290
@gambi358
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

Community feedback

  • Melvin Aguilar 🧑🏻‍💻•61,140
    @MelvinAguilarPosted almost 2 years ago

    Hello there 👋. Good job on completing the challenge !

    I have some suggestions about your code that might interest you.

    • Remove the width of the body element, let it occupy 100% of the screen width. When you set a fixed width to the <body> element, it will only work well when the viewport has the same width, this means that the website will not adapt to the different screen sizes, and will look bad when it is accessed on a smaller device.
    • A logo may not be considered as a decoration in HTML because it is often a crucial part of a website's branding and identity, and it may contain important information for the user. you should use the company name as the alt attribute value. The word "logo" is not necessary.
    • Social media icons, which are often used to link to a company's social media profiles, should typically be anchor elements because anchor elements allows users to easily click on the icon and be taken directly to the company's social media profile page. This makes it easy for users to connect with the company on social media

    I hope you find it useful! 😄 Above all, the solution you submitted is great!

    Happy coding!

    Marked as helpful
    0
  • Hassia Issah•50,650
    @HassiaiPosted almost 2 years ago

    For the left and right sides space of the page, give the nav, main and footer a max-width of 1440px, width of 80% and margin: 0 auto.

    There is no need to give the body a width value.

    nav, main, footer {
max-width: 1440px;
 width:80%: 
margin:0 auto;
}

    Give the img a max-width of 100% for it to be responsive. reduce the width of nav img .

    Use relative units like rem or em as unit for the padding, margin, width values and preferably rem for the font-size values, instead of using px which is an absolute unit. For more on CSS units Click here

    Hope am helpful.

    Well done for completing this challenge. HAPPY CODING

    Marked as helpful
    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