Mainly HTML and CSS landing page with a small amount of Javascript

Community feedback

• 

  Nam Haϕ820

  @Nam-HaiPosted about 3 years ago

  There are quite a few issues with your design :

  • On too wide screen the css breakpoints you created just don't manage it. This is due to @media only screen and (max-width: 1600px) The css under works only for screen smaller than 1600px

  • The images in the grid strech themselves. Don't use width: 100%; height: 100% but maybe : width: 50vw; height: 50vw; There might be other solution tho. And this might not work with the current grid settings. To make it work you need to change this way : grid-template-rows: repeat(3, 50vw);

  Things to go deeper : You could add animation to the navbar when it open on mobile You could add hover effect on the buttons of the navbar on desktop Same thing on the learn more buttons. Animation can help user to understand something happen. (well here nothing happen because it is not a real website but you get the point)

  Marked as helpful

  0

  ---

  

  Brendon Mecoy•105

  @realMecoyPosted about 3 years ago

  @BlueTompon Thanks for the tips, I have made some of the changes you suggested👍

  1
• 

  Raymart Pamplona•16,100

  @pikapikamartPosted about 3 years ago

  Hey, awesome work on this one. The desktop layout is fine but some sections are not consistent (I am thinking of vh units used in here) especially when dev tools is opened at the bottom. Responsiveness is fine I think and the mobile layout is fine as well, just some paddings and white-spaces being too large.

  Nam already gave great feedback on this and yes, you didn't account a large screen on this one so like what Nam said, the layout breaks in wide screen.

  Some other suggestions on this one would be:

  • Avoid using height: 100vh on a large container like the body tag as this limits the element's height based on the remaining screen's height. Instead use min-height: 100vh, this takes full height but lets the element expand if needed.
  • A typical structure of a site looks like:

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

  This way, all element that has content are inside landmark elements.

  • Same for height: 100% on large container especially when it is relative to the body tag.
  • Website-logo shouldn't be inside nav since it is not being treated as a link. Also there is a provided logo-image on this one, why create an element to use sunnyside as text?
  • Do not directly type the wordings as uppercase on the markup, if you do this, screen-reader will read the text letter-by-letter and not by the wordings. Use only the lowercase version to write in the markup and instead use text-transform: uppercase on it.
  • Arrow-icon svg should use aria-hidden="true" on it since it is only decorative image.
  • Lots of images in here are just decorative. Decorative image must be hidden at all times by using alt="" and extra aria-hidden="true" attribute on the img tag.
  • Also there are text which you could make use of heading tag like on the heading text before the testimonial section.
  • Also when wrapping text-content, do not just use div use a meaningful element to wrap it like heading tag or p tag.
  • When using heading tag, make sure you aren't skipping a level. If you use h4 make sure that h1, h2, h3 are present "before" it.
  • Person's img should be using the person's name as the alt like alt="Emily R". A component like this when a person's name and image are both present, use the person's name as the value as it is a meaningful image.
  • Person's name could use a heading tag.
  • Also in general, avoid using vh unit in the height property. Use rem instead so that it will be consistent for users.

  FOOTER

  • Same goes for the logo, the svg provided should be used in here with the fill property being used to change the svg's color.
  • 3 links could be inside nav since those are still your navigational links.
  • Remember that when using ul element, only li tags are accepted as a direct child of ul and not any other tags.
  • Each a tag that wraps social media, it should have either aria-label attribute or screen-reader element inside it. The value for whatever method you will use should be the name of the social media like aria-label="facebook" on the facebook link a tag. This way, users will know where this link would take them.
  • Each img inside the social media link should be hidden since they are only decoration so use alt="" on it and add extra aria-hidden="true" attribute as well.

  MOBILE

  • Hamburger menu should be using a button element and not a link.

  SUPPOSING BUTTON IS USED

  • The button will be using the method I mentioned using aria-label attribute or screen-reader element inside. The value will describe what does the button do. The value could be aria-label="navigational dropdown menu".
  • The button should have a default aria-expanded="false" attribute on it. It will be set to true if the user toggles the button.

  Aside from those, great work still on this one.

  0

  ---

  

  Brendon Mecoy•105

  @realMecoyPosted about 3 years ago

  @pikamart Thanks for the many tips, there are so many that I have run out of time to fix them, I will have to carry on after work tomorrow, will let you know when I'm done...

  1