HTML Design Best Practices

Building your webpage is stressful enough! Follow these tips to make it easy for users to access your content.

White Space Do's

White space refers to the amount of space between text or objects on the page
  • Allow for a lot of white space
  • Use margins in the style.css to make text easily readible and images have enough space around them
  • Use padding in the style.css to make white space borders around images or text

    • White Space Do Not's

    Leqaving out white space might be tempting, but it makes the page hard to focus on and follow.
  • Try to fit as much text as possible in one place
  • Forget margins and padding

    • Font Do's

    Fonts can be really fun to play around with and express a mood! However, it is best to choose ONE font for your whole site, and just change its size, and bolding, italicizing and underlining can help create emphasis

    Font Do Not's

    Squiggly, handwriting-esque and other fun fonts can be cute on paper, but become difficult to read online.

    Color Use Do's

  • Use colors you like, but limit yourself to a maximum of 3 per site
  • Utilize colors using hex codes or all the colors listed in W3 schools
  • Have a purpose for making certain text certain colors and stick to this as a key so that users know what to expect

    • Color Use Do Not's

  • Use built in colors...they're really not cute
  • Use too many colors that don't go together
  • Make font and background colors clash or unreadable
  • Use the same colors on a different page of the site, some consistency is key, but new pages should feel different
    • When using images or icons, make them all the same size, be sure to put enough space between them