Simple landing page with hover link interactions

Community feedback

• 

  Adriano•42,890

  @AdrianoEscarabote

  Posted almost 3 years ago

  Hi Stéphanie Rachel, how are you?

  I really liked the result of your project, but I have some tips that I think you will enjoy:

  • The links must have an aria-label or sr-only text that tells where the link navigates the user. For example: Visit our Facebook. For images, you should set aria-hidden=” true” to be ignored by screen readers and to avoid redundancy and repetition.

  The rest is great!

  I hope it helps... 👍

  11

  Marked as helpful
• Account deletedPosted almost 3 years ago

  Hey there! 👋 Here are some suggestions to help improve your code:

  • It is best practice to have separate files for your HTML and CSS code. It helps in keeping your code organized and easier to maintain.

  • To center you content to your page, add the following to your Body Element:

  body {
      min-height: 100vh;
      display: grid;
      place-content: center;
  }
  

  • The purpose of the Main Element is to identify the main content of your page. It is not the container of you component. After the main element, you want add a container to wrap you separate components in.

  • The Icons serve no other purpose than to be decorative; They add no value. Their Alt Tag should left blank and have an aria-hidden=“true” to hides it from assistive technology.

  If you have any questions or need further clarification, let me know.

  Happy Coding! 👻🎃

  12

  Marked as helpful
• 

  Divine Obeten•2,415

  @Deevyn9

  Posted almost 3 years ago

  Hi, congrats on completing this project, your solution looks really good, However you'll need to center the container you can do this by: Giving the body a min-height of 100vh, a width of 100vw then you give it a display: grid; and then you place-items: center; to center the container.

  I hope this solves your problem and you find it helpful.

  Happy coding!

  11

  Marked as helpful
• 

  TOCHUKWU UCHE•280

  @Toch007

  Posted almost 3 years ago

  Hello. You did a great job there. I just completed this project too. I can see from the hover of the main object that you have the same problem I had initially. The eye<svg> is also opaque with the background color. I found a way to fix it. You can check it out in my code https://github.com/Toch007/frontendproject2.git

  11