Clipboard Landing Page

Community feedback

• 

  Vanza Setia•27,775

  @vanzasetiaPosted about 2 years ago

  Hello, Urinzi! 👋

  Congratulations on finishing this challenge! 🎉

  A couple of things I'd like to suggest are,

  • Use the correct font family for the site. Currently, it is different from the original design.
  • The alternative text for the images/logo.svg should be the company name (just like you did with the images inside the brands div)
  • The social media icons should be wrapped by link elements. They have interactivity so they should be wrapped by interactive elements.
  • Also, the social media icons are not showing up on my view (1280px * 670px). Try to fix this issue.
  • Use rem or sometimes em unit instead of px. Using px will not allow the users to control the size of the page based on their needs. I recommend reading this tutorial article about rem and em unit. This article explains both units in a simple way. I recommend reading it if you're not confident to use those units.

  Hope this helps! 🙂

  Marked as helpful

  1

  ---

  

  Jork•230

  @jc-paduaPosted about 2 years ago

  @vanzasetia thank you for pointing out my mistakes, I always forget to put some alternative text as I feel excited when the site starts looking good hehe. I'll try to fix and change the site based on your suggestions. Thank you so much!

  0

  

  Vanza Setia•27,775

  @vanzasetiaPosted about 2 years ago

  @jc-padua No problem! 👍

  0
• 

  David•8,000

  @DavidMorgadePosted about 2 years ago

  Hello Urinzi, congrats on getting the solution for this challenge, you managed to get the full responsive layout and it looks great!

  If you don't mind I would like to suggest you some changes.

  For your html structure, remember that the principal part for your document should always be on a main tag, all html pages should have a main tag for a better accesibility, also the first section should be a header tag.

  In your buttons a tag, you could use some :hover effects like swaping the color and the background color with a little transition to get a clear and smoother effect on hover, you could try this:

  .btn:hover {
    color: var(--Light-Blue);
    background-color: white;
  }
    .btn {
    transition: all 0.5s ease;
  }
  

  And do the same to the greent button!

  Hope my feedback helps you, if you have any question, don't hesitate to ask!

  1

  ---

  

  Vanza Setia•27,775

  @vanzasetiaPosted about 2 years ago

  @DavidMorgade

  I would not recommend using all for the transition. Only transition the property that will be transitioned. The problem with all is that it will transition everything that can be transitioned (including width and height). Usually, you can see the problem by refreshing the page or the first time you visit the site.

  Marked as helpful

  2

  

  David•8,000

  @DavidMorgadePosted about 2 years ago

  @vanzasetia Yeah you are right Vanza it was just a fast example, he can just transition both brackground-color and color.

  You can either add both or add transition property after declaring your first transition (it will override all), example:

  transition: all 0.5s ease;
  transition-property: background-color, color;
  

  or

  transition: background-color 0.5s ease, color 0.5s ease;
  

  Thanks for pointing it out!

  Marked as helpful

  1

  

  Jork•230

  @jc-paduaPosted about 2 years ago

  Maybe I'll try to learn some transitions because I focus more on layouts and being responsive of the website. I'll try adding some transitions from now on.

  Thank you for your useful remarks, sir, @DavidMorgade, and @vanzasetia.

  2