Huddle Landing Page | HTML & CSS

Hi, Karan Niroula! 👋

Could you please describe the problem? At what screen size does the problem happen?

I recommend using a code-formatter. This way, your code base will have a consistent format, which makes it easier to read the code. I suggest using Prettier as your code-formatter.

Prettier · Opinionated Code Formatter

Here are a few suggestions for improvements:

• Use landmark element: Wrap the whole content with a landmark element. The social media links can be wrapped with a <footer>. The rest of the content should be inside the <main> landmark.
• <img> must have alt attribute: Each of <img> element must have alt attribute.
• Make sure the alternative text includes the image's text: For images containing text like the Huddle logo should have an alt value of “Huddle”. Reference: Checklist - The A11Y Project #for-images-containing-text-make-sure-the-alt-description-includes-the-images-text
• Avoid legacy element: You should not use HTML to make the text bold by using <b> element. Also, <b> should be avoided whenever possible.
• Each page must have one <h1>: The <h1> element is used to define the main heading of a page. The "Build The Community Your Fans Will Love" should be wrapped by a <h1>.

You need to make sure the HTML is right first. I know that you are learning CSS Grid. But, you should get the HTML right because the HTML impacts the way users of assistive technologies interact with the page. Also, if the CSS fails to load the page will still make sense because of the correct user agent stylesheet.

I hope this helps. Happy coding! 👍