Websites

The WPI Green Team’s website, created by Kyle Corry.

Websites are a great starting point for any project, as they can be used as a central location to host a variety of media. WPI provides many resources to create websites, so even project teams with limited programming experience should be able to create and update a site. Websites can be used to tell a story through interactivity, such as animations, games, or other forms of user interaction. The styling of a website can also be used to portray a certain mood or theme which may be useful for your project (ex. retro themed sites). This guide was created using WordPress.

Resources

Training/Workshops

WPI Courses

  •  CS 4241: Webware

WPI Student Groups

Software

The following software is recommended to create websites. Software in bold is officially supported by WPI.

WordPress (WPI SUPPORTED)
  • Used to create blogs and websites – recommended for teams without programming experience
  • WordPress sites can be requested through Marketing
  • Compatible with all major web browsers
  • Available for free

HTML/CSS/JS (WPI SUPPORTED)
  • Programming languages used to create fully customized websites
  • All WPI students have access to their own personal website, located at https://users.wpi.edu/~username where “username” is your WPI username. Access to this server can be gained by following this tutorial. You must also modify the permissions on your website to allow others to view it.
  • Compatible with all major web browsers
  • Available for free
Drupal (WPI SUPPORTED)
  • Used to create websites, events, and blog posts for official WPI pages (such as www.wpi.edu)
  • To create or edit official WPI pages, you must be trained and requested by a specific department, and most student projects will not need to use Drupal.
  • Compatible with all major web browsers
  • Available for free
Google Sites
  • A free tool to create websites and blogs visually.
  • Compatible with all major web browsers
  • Available for free
Squarespace
  • A popular tool to create websites visually.
  • Compatible with all major web browsers
  • Requires a paid subscription
Wix
  • A tool to create websites visually.
  • Compatible with all major web browsers
  • Requires a paid subscription

Books

Websites

Videos

  • Derek Banas
    • A YouTube programming tutorial maker who has several videos about HTML/CSS/JS and WordPress
  • LearnCode.academy
    • A YouTube channel dedicated to teaching programming and has several videos on HTML/CSS/JS

Website Tips

  • Use easy to understand language
  • Design for accessibility
    • Include alt text for all images to help people with screen readers understand what images are on the screen
    • Use proper headers (h1, h2, h3…) when creating sections on your website
    • If you create a custom button, be sure to provide the role and aria labels for people with screen readers
    • Pick colors with contrast ratios above 7, you can calculate them here
      • This helps people with visual impairments see everything on your website
  • Do not clutter the page
    • Leave some open space on the page, and make sure the text is easily navigated
  • If possible, use a fixed width container for text to optimize your website for readability
    • This number is between 59 and 72 characters (around 560 px)

Sample Projects with Effective Use of Websites

Cape Town IQP Website (2007 – 2015)

A screenshot of the Cape Town Project Center website (https://wp.wpi.edu/capetown)