Responsive landing page with html and css.

Community feedback

• 

  P

  Ken•4,915

  @kens-visualsPosted over 3 years ago

  Hey @thaiscode 👋🏻

  I have some suggestions for the project.

  • First, for the browser illustration, add aria-hidden="true”, because it's for decoration. You can read more about aria-hidden here. Like this:

  <img src="images/illustration-mockups.svg" alt="" aria-hidden="true”>
  

  • Next, the alt text for the logo should be the name of the company <img src="images/logo.svg" alt="Huddle">
  • Also, I suggest adding transition: all 0.2s; to the button and the links, this will make :hover smoother.
  • Now, let's quickly fix the background image, and here's how to do it:

  body {
      background: url(images/bg-mobile.svg) no-repeat hsl(257, 40%, 49%);
      background-size: cover;
      min-height: 100vh;
  }
  

  avoid using height since it's not really responsive, instead use min-height` which will let the body grow if needed.

  • Lastly, the social icons are not shown, perhaps something wrong with the CDN link, because I see them in the screenshot.

  I hope this was helpful 👨🏻‍💻 and to answer your question, yes, it's absolutely okay to use different sizing options together whether it's rem, vw, px, or %. However, I suggest using % with width, because it's a relative unit, which means it's relative to the screen size, and it will make the website more responsive even without any media queries. Whereas px is a fixed size, and you'd have to change it more often than and use more media queries, which can make the code unreadable, especially when it's a large project. Other than that, you did a nice job, keep it up. Cheers 👾

  Marked as helpful

  1

  ---

  

  Thais•255

  @thaiscodePosted over 3 years ago

  @kens-visuals Thank you very much for the comments, these are small details that taught me a lot!

  0

  

  P

  Ken•4,915

  @kens-visualsPosted over 3 years ago

  @thaiscode you're very welcome, glad to be helpful 😇 I'd really appreciate if you could mark the comment as helpful 🙃

  1