HTML & CSS (No JavaScript even Hamburger menu.)

Community feedback

• 

  Raymart Pamplona•16,100

  @pikapikamartPosted about 3 years ago

  Hey, awesome work on this one. Layout in desktop is good, and for the mobile, it is good, but like you said, the hamburger is not present.

  For me, I would accept this but even without hamburger menu but of course, if you are working with a team, you would need to follow the design, just to give importance to the designer's work.

  Also, even without animations, it is already nice. You don't really need to add many animations, only add animations to elements that you think it really needs, like an interactive elements, a link, a button like those. But if the element is supposed to be stagnant, you don't need to add animations.

  Some suggestions also would be:

  • The a tag that nest the sunnyside logo on your header and footer should have an aria-label. Since mostly websites uses the brand logo as a link to go to the homepage, using aria-label="homepage" on the a tag will be really good. aria-label is a piece of text that assistive techs reads when they are at that element.
  • Add a main element on your website. Adding this will make your site accessible, since it guides a user to where that user is currently at when navigating your website. On this one, it would wrap all the content starting from the first section, going down to the bottom, but not including the footer. It would look like

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

  • The a tag on the arrow icon on the hero section should have an aria-label. On this one, since the arrow-icon is like a go down right, like when clicking it, the focus would go down. I suggest adding the page-link name to the aria-label , like aria-label="main" if the arrow would take the user to the main. Also the alt text on the arrow-icon should have been left empty like alt="". When you are using images on you website, if you think that the image doesn't add any meaning or content, you should use alt="". If the image on the other hand adds content, add a meaningful alt attribute.
  • The alt text of the person on the testimonial section could have used their name as the value, like alt="Emily R".
  • aria-label should have been also used on the social media links. For example, the a tag that holds the facebook icon should be aria-label="facebook".

  Other than those, great job. But remember on other challenges, to follow what the design is, because that is what others do at real job okay.

  Marked as helpful

  0
• 

  Carl Eder P. Ballenas•290

  @CarlTheBeginnerPosted about 3 years ago

  I'm glad sir that you found my mistake on that. I will do better next time😊

  0