Sunnyside-agency-landing-page using html,css,js

Community feedback

• 

  T

  Chamu•13,130

  @ChamuMutezvaPosted over 1 year ago

  Hi Fareda

  Having gone through your work, here are my suggestions:

  HTML

  • HTML has landmark elements that provide a powerful way to identify the organization and structure of a web page. Among other things Landmark elements improves the accessibility of your website as they allow keyboard navigation. These elements include header, main, footer etc
  • use semantic HTML where ever possible , before using elements such as divs , check to see if they isn't any other element that can do the work better. For example, anything related to click events should not be assigned to a div or image .
  • following on the same issue of semantic HTML, the label element is usually associated with input elements. If you want to describe an image , that is done using the alt value. This element should have been a button as it is associated with the mobile menu control. That applies also to the logo which was supposed to be an anchor element with the logo image as a child element
  • the menu items list should be a list of anchor elements - find out more on how to code an accessible navigation
  • heading elements should follow an order where you do not skip headings. An h1 can be followed by an h2 and the next heading level up after that will be an h3. You cannot jump to an h5 element
  • since h5 class="h5">LEARN MORE</h5> is supposed to link to another section or page with more details on a particular topic, the best element to use here will be an anchor element.
  • the footer social icons are treated as anchor elements as well, they are meant to be links to social media platforms.

  CSS

  • always start with a CSS reset stylesheet. One common one is by Andy Bell. A reset stylesheet will normalise your CSS so that you site appears the same in all browsers
  • font sizes should not be in px values, where possible use rems. You will find some of the reasons here Why font-size must NEVER be in pixels
  • using the !important should be the last action and is not encouraged. It may be a sign that there is a certain declaration that is not right.
  • keep your specificity as low as possible , avoid declarations such as footer ul li . Target classes where ever possible,

  Marked as helpful

  0