Skip to content
  • Unlock Pro
  • Log in with GitHub
Solution
Submitted almost 4 years ago

Loopstudios Landing Page

Thomas Emerson•290
@emersonvisuals
A solution to the Loopstudios landing page challenge
View live sitePreview (opens in new tab)View codeCode (opens in new tab)

Solution retrospective


Hey everyone, just completed another coding challenge. Let me know what you think!

Thank you! 😀

Code
Select a file

Please log in to post a comment

Log in with GitHub

Community feedback

  • Malesela Kgobe•585
    @M-Kgobe
    Posted almost 4 years ago

    Hi Your solutions looks pretty good.

    Your github repo does not work, you might have posted an incorrect link or something. you also seem to have a lot of issues in your report, check it out.

    Marked as helpful
  • Raymart Pamplona•16,040
    @pikapikamart
    Posted almost 4 years ago

    Hey, awesome job on this one. Layout in desktop looks really good and the mobile state is good as well. Though you are using too much screen size for the mobile layout, I already get the mobile layout at point 1200px, which desktop layout should still be present at that point. Adjusting breakpoint will be really great.

    Some other suggestions would be:

    • The alt for the website logo should be alt="loopstudios", the image already have the text needed better using it. You usually use the website name for the website-logo's alt.
    • The list of links in the header should be inside a nav element, since those are your navigational links.
    • The text usage for all the capital letters, for example, the hero-text, when you have a design that needs the text capitalized all, you don't explicitly type the sentenced in capital letters in html, because if you do that, assistive tech will read that sentence, letter by letter. Instead just use regular text like "Immersive experiences that delivers" and just use text-transform: uppercase on the css. Same goes for every capitalized text on your site.
    • Always have a main element that will wrap the main content of you website. A typical structure would look like:
    <header />
    <main />
    <footer />
    
    • The second image after the hero-section should be alt="" I think or maybe use more meaningful alt value.
    • "SEE ALL" is better to be anchor tag a rather than button since it looks more like a link to page to "see all" collections.
    • Avoid using multiple h1 on a webpage. Only use at least 1 h1 per page.
    • You don't need javascript to use the hover effect on your element. You don't need those mousenter listeners, you could just use :hover property on the css to do those. For stylings, let css handle it, you don't need to use those if you are just applying effects for the :hover state.

    FOOTER

    • Website logo should use alt="loopstudios".
    • Social media links should be inside anchor tag a since those are "links". Each a tag that wraps the social media, should have aria-label or sr-only text, to which the value will be the name of the social media.
    • The bottom links should be inside nav element, since those are still your navigational links.

    MOBILE

    • The hamburger menu should be using button element and not div. When there is an interactive component, always interactive element.
    • The button will should also have aria-label attribute or an sr-only text inside it, describing what the button should do, a sample text could be "navigation menu dropdown". The button should also use aria-expanded attribute, the value will be changed by javascript, either true if the user toggles it or false, it the user does not.
    • You don't have to create a separate list of links for the dropdown. You should use the original links, reuse html elements so that your markup won't be bloated.

    Just those above, still, great job on this one.

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
Frontend Mentor logo

Stay up to datewith new challenges, featured solutions, selected articles, and our latest news

Frontend Mentor

  • Unlock Pro
  • Contact us
  • FAQs
  • Become a partner

Explore

  • Learning paths
  • Challenges
  • Solutions
  • Articles

Community

  • Discord
  • Guidelines

For companies

  • Hire developers
  • Train developers
© Frontend Mentor 2019 - 2025
  • Terms
  • Cookie Policy
  • Privacy Policy
  • License

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

How does the accessibility report work?

When a solution is submitted, we use axe-core to run an automated audit of your code.

This picks out common accessibility issues like not using semantic HTML and not having proper heading hierarchies, among others.

This automated audit is fairly surface level, so we encourage to you review the project and code in more detail with accessibility best practices in mind.

How does the CSS report work?

When a solution is submitted, we use stylelint to run an automated check on the CSS code.

We've added some of our own linting rules based on recommended best practices. These rules are prefixed with frontend-mentor/ which you'll see at the top of each issue in the report.

The report will audit all CSS, SCSS and Less files in your repository.

How does the HTML validation report work?

When a solution is submitted, we use html-validate to run an automated check on the HTML code.

The report picks out common HTML issues such as not using headings within section elements and incorrect nesting of elements, among others.

Note that the report can pick up “invalid” attributes, which some frameworks automatically add to the HTML. These attributes are crucial for how the frameworks function, although they’re technically not valid HTML. As such, some projects can show up with many HTML validation errors, which are benign and are a necessary part of the framework.

How does the JavaScript validation report work?

When a solution is submitted, we use eslint to run an automated check on the JavaScript code.

The report picks out common JavaScript issues such as not using semicolons and using var instead of let or const, among others.

The report will audit all JS and JSX files in your repository. We currently do not support Typescript or other frontend frameworks.

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub