Huddle Landing page

Community feedback

• 

  Raymart Pamplona•16,100

  @pikapikamartPosted about 3 years ago

  Hey, great work on this one. The desktop layout right now looks fine, just the hero-image is a bit wider than the design making the text on its right side a bit pushed. At the moment, the site is not responsive from other screen-sizes, for example, going into 850px, you can see that the layout is being hidden by the screen since the layout is not responding well. Mobile state looks great though.

  Also, just a quick note, if you are just starting out frontend or just web dev in general, stay away for now from frameworks like tailwindcss and just use the native css or scss so that you will properly grasp those fundamentals:>

  Some other suggestions would be:

  • For this one, you could have used this markup:

  header />
  <main />
  <footer />
  

  This way, all content of your page will be inside their own respective landmark element. Since if you look at the design, it makes sense to create those landmark since there are elements that belongs to each one.

  • Remember that a website-logo is one of the meaningful images on a site so use proper alt for it. Use the website's name as the value like alt="huddle".
  • When using img tag, you don't need to add words that relates to "graphic" such as "logo" and others, since img is already an image so no need to describe it as one.
  • The hero-image to be honest is not really informative since it is just a vector. 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 the image is using svg.
  • Also when you are using alt make sure that you are using descriptive text that really gives meaning on what the image is portraying or what the image is all about.
  • The register link could have just been used by itself and not wrapped by p tag or wrap by div.
  • Also, using background-attachment: fixed is not really great since it just hurt performance on the site, you can try to inspect the layout in dev tools while it is open in bottom so that you will have extra more scroll on the site. Try scrolling and you will notice spikes, then try removing the property, it will look more seamless.
  • 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.
  • Also, when you are creating an interactive component, use interactive elements. For example, why adding cursor: pointer on the social-media if it will not be interactive, right? So it will be better to just make them totally interactive by using proper html tags.
  • Lastly, addressing the responsiveness issues on the site:>

  Aside from those, great job again on this one.

  Marked as helpful

  2
• 

  Onyekachukwu Aribeana•160

  @Onyeka-AribeanaPosted about 3 years ago

  Thank you so much for your feedback. This is the longest anyone has ever written me 😁 but so thanking your time to enlighten me. I guess I'll take a break from TailwindCSS for now till I get a better of native CSS. Also you made good points that I will now take account of.

  Thank you soon much 🤗

  1