animation on scroll , mobile first, responsive design, Scss, Bootstrap

Community feedback

• 

  Raymart Pamplona•16,100

  @pikapikamartPosted almost 3 years ago

  Hey, awesome work on this one. Just saw the site and for desktop layout, other contents are smaller than what they should be. The website-logo, the buttons and there are sections where contents are too spaced like on the 1.4k and 2.7m. Though the site is responsive which is great but if you go to like 700px, the placement again on the 1.4k and 2.7m are off.

  Some suggestions on the site would be:

  • On this layout or in just general, you typically use this kind of markup:

  <header />  # contains the topmost portion of the site
  <main />  # includes the main component
  <footer />  # just footer contents
  

  On your site, the header should only contain the nav and the rest of the elements on your site that is part of the main-content should be inside the main tag, then the footer-contents on the footer tag. So put all those section on the main.

  • Also, using section alone if not informative enough when navigated as landmark, unless your section tag is being labelled by aria-labelledy by to which points to a heading tag. So for this one, you could change all of those into just div for now.
  • Website-logo-link a tag should have either aria-label attribute or sr-only text inside, that describes where the link would take the user. Usually, website-logo directs user to homepage so use homepage as the value like `aria-label="homepage".
  • For the hero-section part, the image being used is only a decorative image, because if you look at it, it is just a plain illustration with no defined elements. Decorative images should be hidden for screen-reader at all times by using alt="" and aria-hidden="true" to the img tag or only aria-hidden="true" if you are using svg instead of img tag.
  • Only use descriptive alt on images that are meaningful and adds content to the site otherwise hide the image for screen-reader users.
  • Also, all the images used in here except for the website-logo are all decorative. Hiding them using the above method will be really great.
  • Also, there is this horizontal scrollbar at the bottom which means elements are overlapping their supposed container. I can't find this but I suspect the elements that are using those transitions since they all start at the part where they are outside their parent container.
  • When wrapping up a text-content, make sure that it is inside a meaningful element like p tag or heading tag and not using like div, span to wrap the text.

  FOOTER

  • The left-side part should be placed before the newsletter on your markup. Swap them up. The .newsletter and .contact.
  • Those social-media links could be inside a ul element since those are "list" of links.
  • Each a tag that wraps the social-media icon should have either aria-label attribute or sr-only text inside it, defining where the link would take them. For example, you should use facebook as the value if the link would take the user to facebook.
  • Wrap the input field along with the button inside a form so that it will be properly contained.
  • Also, you haven't added a validation on this one. Adding that would be really nice so that you could show that javascript skills right:>
  • Your input right now currently lacks associated label to it or an aria-label to which will define the purpose of the input element. Always include it so that user will know what they need to give on each input. Make sure that label is pointing to the id of the input as well.
  • Remember that when a button is placed inside a form element, it defaults to type="submit". So imagine if you have a close-button inside the form without specifying type="button" clicking the close-button will submit the form. Be aware of this kind of scenarios. So for this, add type='submit' on the button.

  Aside from those, great job again on this one.

  Marked as helpful

  1
• 

  Jonel Hatwell•585

  @hatwell-jonelPosted almost 3 years ago

  i will study your feedback and i saw your profile that you are from philippines, maraming salamat.

  1

  ---

  

  Raymart Pamplona•16,100

  @pikapikamartPosted almost 3 years ago

  @hatwell-jonel ^^

  0

  

  Jonel Hatwell•585

  @hatwell-jonelPosted almost 3 years ago

  @pikapikamart I implemented all your recommendations. but i don't know if i do that correctly. thank you for your help!

  1