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

Loopstudios landing page

@Prabhanjanmisra

Desktop design screenshot for the Loopstudios landing page coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
2junior
View challenge

Design comparison


SolutionDesign

Community feedback

@Mennatallah-Hisham

Posted

Hi Prabhanjan,

you did great in this challenge

I have few suggestions for you

  • you can improve your HTML markup using meaningful tags, like <ul> for lists <footer> instead of <div id="footer">
<header> 
 <nav>
</header>
<main/>

<footer/>
  • make sure to add href="#" to your <a>
  • each page should have only one <h1>, it's better for SEO
  • it is also a good practice to add a meta description
  • for the social section, <a> should be used
<a href="#" aria-label="facebook">
<svg aria-hidden="true"/>
</a>
  • aria-hidden="true" is used so that the img is not read by screen readers

Here are some helpful articles

  1. Meta description: https://moz.com/learn/seo/meta-description
  2. Semantic Html: https://web.dev/learn/html/semantic-html/
  3. Headings best practices: https://medium.com/swlh/html-heading-tags-best-practices-78a85f63df47

Hope you find this helpful, Happy Coding

Marked as helpful

0

@Prabhanjanmisra

Posted

@Mennatallah-Hisham Thank you so much for your helpful advice. I'll make sure to keep your tips in mind while working on future projects.

1

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