Mobile first, css animation

Community feedback

• 

  Raymart Pamplona•16,100

  @pikapikamartPosted about 3 years ago

  Hey, great work on this one. The desktop layout looks great and that animation was really really good. The responsive state could be better because there are section where the text are hard to read because the color are the same with the background-image's color. The mobile state don't have the hero-section, but looks fine in layout, but missing on that.

  Some other suggestions would be:

  • On the header , the links should be inside the nav element, since those are your website's navigational links.
  • Each navlinks should be inside their own a tag, because those are supposed links, always use interactive elements for interactive components like the links.
  • The alt for the arrow-icon image should be left empty like alt="" since it is only decorative. Decorative images should be using alt="" attribute as well as adding aria-hidden="true" on the element, meaningful element on the other hand needs meaningful alt.
  • On the main section, you are using too much section element, for example, the first content, the egg image and the text on it's left side, you could have only used 1 section just div on it. For this one, I would just use 1 section element to wrap all the contents but not including the testimonial, that will be another section.
  • learn more should be using a tag since it is supposed to be a link.
  • The alt for each person's image should be using their name as the value like alt="Emily R". When using alt attribute, avoid using words that relates to "graphic" such as "avatar, icon, image.." no need to describe it as an image, it is already one.
  • Name of the person per testimonial could have used a heading tag.
  • The decorate selector should be include inside the main element.

  FOOTER

  • Avoid using multiple h1 on a single page, only use at least 1 per page. The sunnyside could have use another heading tag.
  • The links below the sunnyside could have been wrapped inside a nav element, since those are still your navigational links.
  • Again, use a tag for the links.
  • On the social media links, those shouldn't be wrapped by nav element, since those are not your website's navlinks.
  • The social media could have used ul element, since those are "list" of links. Each a tag must have href attribute on it, so that it will function properly.
  • Each a tag for the social media should have either aria-label attribute or an sr-only text inside the a tag, describing where the link would take them. For example, on the facebook link, you should use "facebook" as the value for whatever technique I mentioned that you want to use.
  • Each img for social media should have alt="" and aria-hidden="true" since those are only decorative images.

  MOBILE

  • Lacks the hero-section, you might want to check that one out.
  • The hamburger menu should have use button element, again, interactive component.

  SUPPOSING BUTTON IS USED

  • The button should have either aria-label attribute or sr-only text inside it, like on the footer, describing what the button does, an example text could be "navigation menu dropdown".
  • The button should also be using aria-expanded attribute on it. Using false as default value then changing to true if the button is toggled then vice-versa.

  Aside from those, great work on this one.

  Marked as helpful

  1

  ---

  

  Cường•885

  @docuong0912Posted about 3 years ago

  @pikamart really detail explaination, i am looking for this comment :D , thank you so much, i was wondering about the section part,it's clear now thanks to you, most of your suggestions are helpful to me

  0
• 

  Gerri Ezeocha•460

  @GerriEzeochaPosted about 3 years ago

  Looks like you're missing your main hero section! I was looking through your src and public files and cant seem to identify the issue.

  1

  ---

  

  Cường•885

  @docuong0912Posted about 3 years ago

  @GerriEzeocha oh no, i totally forgot about it, thank you for reminding me

  0