Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

huddle-landing-page-with-single-introductory-section-master

@Abelo73


Design comparison


SolutionDesign

Community feedback

Hassia Issah 50,670

@Hassiai

Posted

Add the alt attribute alt=" " to the img tag to fix the error issue. The value for the alt is the description of the image.

For the left side and left side of the page, give.container a max-width of 1440px, a width of 80% and margin: 0 auto. There is no need to give the body display flex to center the content on the page.

container{
max-width:1440px;
width: 80%;
margin: 0 auto;
}

For a responsive image give the img a max-width of 100%. There is no need to give the body a width and height value of 100% in the media query because that is the default value.

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

0
Alamin 2,000

@CodePapa360

Posted

Hi Abel Adisu👋 Great job on completing this challenge! 🥳

I noticed a few areas where your solution to the challenge could be improved, and wanted to share my suggestions with you.

  • One thing you could improve is the use of unnecessary wildcard selector * at the beginning of your stylesheet. While the wildcard selector can be useful for resetting default styles, it can also unnecessarily increase the specificity of your other selectors and make your styles more difficult to override. You can achieve the same reset by using more targeted selectors such as html, body, and box-sizing.

  • Another suggestion is to consider organizing your styles in a logical and maintainable way. For example, instead of declaring all of your styles for the body element in a single block, you could break them up into smaller, more modular blocks based on their function (e.g. layout, typography, colors). This will make it easier to locate and modify specific styles in the future.

  • You could also improve the readability of your code by adding comments to explain the purpose of certain styles or groups of styles. This will help other developers (or your future self) understand your code more quickly and make it easier to maintain.

Overall, this is a very well done solution to the challenge. Great job!

Hope I'm 👍helpful!

Keep up the good work!😊❤️

0

Please log in to post a comment

Log in with GitHub
Discord logo

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