Responsive landing page using flexbox (second challenge)

Community feedback

• 

  Raymart Pamplona•16,040

  @pikapikamart

  Posted over 3 years ago

  Hey, great work on this one. Though I had to zoom out because the layout-image is small at my end , I am using 1366x768 and I see on your css at max-width(1440px you are using width: 100% on the image which makes it small, it will be better to just remove that stylings. Site is responsive and mobile state looks great.

  MikevPeeren already gave feedback on this one, just going to add some suggestions as well:

  • It would be great to have a base styling of this:

  html {
    box-sizing: border-boxl
    font-size: 100%;
  }
  
  *,
  *::before,
  *::after {
    box-sizing: inherit
  }
  

  This way, handling an element specially its size will be easier because of the box-sizing

  • Avoid using height: 100vh on a large container like the .container as this makes the element's height capped based on the viewport/screen's height. Instead use min-height: 100vh so that the element will expand if it needs to.
  • Also for this one, using this markup is much better:

  <header /> # contains the website-logo
  <main />
  <footer /> # contains the list of social media links
  

  • 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, illustration" and others, since img is already an image so no need to describe it as one.
  • The hero-section image could be hidden 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.
  • Only use descriptive alt on images that are meaningful and adds content to the site otherwise hide the image for screen-reader users.
  • When using a tag, make sure that it has href attribute so that it will function properly.
  • 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.

  Aside from those, great job again on this one.

  11

  Marked as helpful
• 

  

  Grace•32,130

  @grace-snow

  Posted over 3 years ago

  You've got lots of great feedback I agree with completelg there, so I'll only add that your attribution is overlapping the paragraph when I view this on mobile

  01

  Marked as helpful
• 

  MikevPeeren•2,100

  @MikevPeeren

  Posted over 3 years ago

  Hey @GeorgeCaldarescu,

  Good job, try to add some animations/transitions to your hover states. That way it doesn't feel as abrupt to a change to a component. Also try to keep the component the same the register button for example changes. On small mobile devices(320) I also miss some spacing which removes part of the text.

  00

  Marked as helpful