Fylo Landing Page With Two Column Layout-master

Community feedback

• 

  バレンタイン 😈•64,170

  @VCaramesPosted about 2 years ago

  Hey @Rayane-Boucheraine, some suggestions to improve you code:

  • The logo Alt Tag in the logo needs to be improved upon. The logo is arguably the most important image in you page. So the description should state the company name and what they do.

  • Your headings are being used incorrectly. You always start with an <h1> Heading and go down the ladder from there. The only headings that are used in this challenge are <h1> and <h2>.

  • Remove the height from you file class and use margin/padding to create the desire spacing. Currently, theres a massive white gap there, which does look good.

  • Your "buttons" were created with the incorrect elements. When the user clicks on the button they should directed to a different part of you site. The Anchor Tag will achieve this.

  • Your testimonial needs to wrapped in a Blockquote Element

  • The illustrations and social media icons need to have an Alt Tag with a description.

  • While having interactive content (cards, links, icons, buttons, etc…) can definitely make content less static, if not done properly, it can actually have negative effect on your users experience. By simply just applying a “hover” effect to your content, you’re assuming that every device is compatible with “hover” effects. Unfortunately, most devices are not. To provide your users a better experience, you can use the @media (hover: hover) . Now users that that are devices that are not “hover” compatible will be able to enjoy your content.

  More info:

  https://css-tricks.com/solving-sticky-hover-states-with-media-hover-hover/

  https://youtu.be/uuluAyw9AI0

  • Your CSS Reset is extremely bare. You want to add more to it.

  Here are few CSS Resets that you can look at and use to create your own CSS Reset or just copy and paste one that already prebuilt.

  https://www.joshwcomeau.com/css/custom-css-reset/

  https://meyerweb.com/eric/tools/css/reset/

  http://html5doctor.com/html-5-reset-stylesheet/

  • To make you content accessible to your users, it is a best to use rem/em instead of px for your CSS property values. For media queries, I definitely suggest using em for them. By using px your assuming that every users browser (mobile, tablet, laptop/desktop) is using a font size of 16px (this is the default size on browser). Em's will help with users whose default isn't 16px, which can sometimes cause the your content to overflow and negatively affect your layout.

  More Info:

  https://betterprogramming.pub/px-em-or-rem-examining-media-query-units-in-2021-e00cf37b91a9

  https://uxdesign.cc/why-designers-should-move-from-px-to-rem-and-how-to-do-that-in-figma-c0ea23e07a15

  Happy Coding!

  0