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

Mobile first, BEM

@FelixCriollo

Desktop design screenshot for the Loopstudios landing page coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
2junior
View challenge

Design comparison


SolutionDesign

Solution retrospective


  • Use CSS without scss, it is more complicated.
  • how to make the nav better with js.

thanks for see my challenge.

Community feedback

@pikapikamart

Posted

Hey, awesome job on this one. Layout in desktop looks good, responds fine and the mobile layout looks good as well.

Some suggestions would be:

  • The alt for the website-logo img should have been alt="loopstudios", the image already has the text needed, better use it. Also when using alt attribute, avoid adding words that relates to "graphic" like "logo, image, icon..", img is already an image, no need to describe as one.
  • Do not use any other element inside ul element as a direct child unless it is li element. Only li element are used inside it as a direct child.
  • Do not remove the visual indicator for an interactive element outline if you removed this, make sure to add an indicator such as box-shadow or a custom outline on the :focus-visible state of the element.
  • The alt for the image after the hero-section needs to use alt="' since it is just decorative or maybe a meaningful alt kind of confused on this one.
  • see all needs to be a link a and not button, since it is supposed to be a link to a page to "see all" creations.
  • Each creation should have been a a tag because it serves as a link link for the specific creation the website made.
  • The hover effect on each card does not suits well, its light can hurt eyes and it makes the text not visible, adjust to another one.
  • Also, another one, always have a main element that will wrap the whole main content of the webpage. A preferred structure would be:
<header />
<main />
<footer />

FOOTER

  • Website-logo img should use alt="loopstudios".
  • The links below it should be inside nav element, since those are still your navigational links.
  • The social media links should be inside a ul element, since those are "list" of social media links.
  • Each a tag that wraps the social media should have been using aria-label attribute, to which the value corresponds to the social media it wraps. For example, the a tag that wraps the facebook should have aria-label="facebook", this way, users will know where this link would take them.
  • The svg for the social media should have been using aria-hidden="true" since it is just decor for the social media.

MOBILE

  • Hamburger menu should have been using button element and not div. div alone is not accessible. Along with aria-expanded to which the value is changed by javascript, whether the user have toggled the button or not. Have a search for it the net.
  • The button that will be used in the dropdown should also have aria-label="navigation menu dropdown" attribute, this way users will know what this button does.

Aside from those, great job on this one.

Marked as helpful

2
nageeb0 5

@nageeb0

Posted

very good

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