Submitted over 1 year ago

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

gambi358• 290

@gambi358

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

Community feedback

Melvin Aguilar 🧑🏻‍💻• 61,220

@MelvinAguilar

Posted over 1 year 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

Hassia Issah• 50,670

@Hassiai

Posted over 1 year 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

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