Mobile first then coded for dekstop, html, css, js.

Community feedback

• 

  Raymart Pamplona•16,040

  @pikapikamart

  Posted almost 4 years ago

  Hey, great work on this one. Layout in mobile seems fine as well for the desktop layout. Though there is a bug, when you toggler the hamburger menu in mobile, then close the dropdown, then if you go to the desktop layout, the navigation links disappears. You might want to check that one out.

  Some suggestions would be:

  • I saw in your css, declared in the * selector, you have overflow-x: hidden on it, you don't want this sitting on the * all selector. Remove those.
  • I also lots of usage using vh unit in the height property. I would not recommend using this unit, because it is really hard to maintain, as this will only take unit based on the screen's viewport. It might look good to where you are coding, but if a user have small screen size, it will become distorted, changed or destroyed. Use rem unit instead. If you try to inspect your layout in dev tools at the bottom, you will see that the screen hides the navigation links, since you are using vh unit on the header's height, it will only take what is left of the screen, minus the dev tools dimension.
  • There are usage of display: inline-flexbox that is not a valid value, display: inline-flex is the correct.
  • On your .topnav selector, the sunnyside link have a display: block property, that is why, even if I hover anywhere on the sunnyside x-axis, I can trigger it. You don't need to change its display.
  • The mylinks selector that holds the navigational links don't need to have position: absolute. I am talking about all on the desktop layout. It would be better to remove that property on the desktop view since it doesn't really need it.
  • I don't know why the links on you header doesn't show the outline when I tab on those. You might want to test those one out.

  Sorry for not giving a direct solution to those what I see, I am just troubled about your css that is why it is hard to give some solution about it, that is why I am just pointing those things out :>

  • Avoid multiple usage of h1 tag. You just need at least 1 h1 per page on a website.
  • The alt text on the image of the people on the testimonial section could have their name as the alt text like, alt="Emily R".
  • When using heading tags, do not jump from h1 to h3 include an h2. Use heading tags incrementally by one level. h1 to h2 to h3. ...
  • On the footer section, the a tag that holds the social media icon should have an aria-label. aria-label is used by assistive techs to describe what is that element text, especially when an element only contains an image. On your case, for example, the a tag that holds the facebook svg should have aria-label="facebook".
  • On mobile state, the hamburger menu should have used button element and not a tag. a tags are used for links and that hamburger menu is just a control element and not a link element. That is why button is used with it, along with a aria-expanded attribute, if you are supporting accessibility.

  Some issues I have not a direct solution because of like what I said, but just a reminded for next project or challenge, always check using dev tools, try changing the screen size, test if your layout will still look good in those different screens.

  Still, great work on this one.

  11

  Marked as helpful