Loopstudios challenge completed with responsiveness. No bootstrap.

Community feedback

• 

  Raymart Pamplona•16,100

  @pikapikamartPosted about 3 years ago

  Hey, awesome work on this one. You made a different layout on this one. Desktop seems fine, but the portion from the hero-section down to the next section is too large, too much empty white space. On mobile layout, it seems fine, but you could have made the desktop layout to be visible more, maybe adjusting the breakpoint to the mobile layout, that way you will make the layout more responsive and not just instantly show mobile layout.

  Some suggestions would be:

  • On the header the website logo link should not be included in the nav, since it is not really a primary navigation link. Separate it from the nav and include it in it's own container.
  • Website logo link should be using a tag, since you are treating it as an interactive element, hence adding the cursor: pointer on it. Better use a tag.
  • The alt of the website logo should only be alt="loopstudio", avoid adding words that relates to "graphic" like "logo, image, icon..." as a value in alt attribute. Assistive tech will handle those for you.
  • The list of links in the navbar should be wrapped inside their own a tag since those are supposed links.
  • Personally, I would separate the hero-section from the header tag. I would include it in the main element.
  • This text IMMERSIVE EXPERIENCES THAT DELIVER should be inside a h1 element. Also, if you have a text that needs to be uppercase, you don't put them directly uppercase in the html, because if you did that, screen reader will pronounce it letter by letter. Just put them in lowercase, then just use text-transform: uppercase in your css.
  • Always have a main element on a webpage. main element helps users to properly navigate your website. On this one, the main element should wrap all the sections starting from the hero-section, going down to the very bottom, but not including the footer. A usual structure would look like:

  <header />
  <main />
  <footer />
  

  • When using heading tags, do not skip a level. If you have an h3 make sure you also have an h1, h2.
  • OUR CREATIONS text should be a heading tag, also it should use the text-transform like what I said above.
  • The see all should be an a tag, because it is supposed to be a link that directs users to view more creations.
  • Each card creation in the grid should be wrapped inside a tag, since in real site, it would be a link of creation cards.
  • The text inside each card could use heading tags.

  FOOTER

  • Website logo should be using a tag.
  • Website logo should use alt="loopstudio".
  • The links below the website logo should be inside a nav element and each should be using their own a tag.
  • The social media links should be inside a ul element and each should be inside a tag , because those are list of links.
  • The a tag of each social media links should have aria-label indicating a user where this link would take them. For example, the a tag that would wrap the facebook should have aria-label="facebook".
  • Lose the word icon on the social media images.

  MOBILE

  • Hamburger menu should be using button element and not just div with img, since these are not accessible at all.
  • The hamburger button should have aria-label="hamburger menu dropdown toggler" so that users will know what this button should do.
  • The hamburger button also should have aria-expanded attribute on it. This would be changed by javascript, this will indicate to a user that a dropdown has expanded. You can search this one up on the internet to better understand it. This is really important.
  • Lastly, the hamburger toggler ordering in html is wrong. The button should appear first before the list of links from the navbar. Because if you use this current structure, if I used the button with my keyboard, open it, then use tab key, I would not be directed in the navigation links, because those links are way passed before I even got in the button. Swap the ordering.

  It may be a lot, but those mentioned are important. Still, you did a good job on this one.

  Marked as helpful

  1

  ---

  

  Abdullah Nadeem•20

  @abdnadeem382Posted about 3 years ago

  @pikamart Thank you so much for such a detailed feedback. I will surely keep these things in mind for the next time. Really appreciate the help.

  0
• 

  Conrad•950

  @ConradMcGrifterPosted about 3 years ago

  here is a codepen I made to show you how I did the underline hover effect for my project

  Link to codepen

  Marked as helpful

  0

  ---

  

  Abdullah Nadeem•20

  @abdnadeem382Posted about 3 years ago

  @ConradMcGrifter thanks!

  0