Skip to main content Link Menu Expand (external link) Document Search Copy Copied
TSA Reference

Webmaster HS

Table of Contents

  1. Overview
  2. Rules
  3. Competing
    1. Organization
    2. Selecting a Stack & Frameworks
    3. Designing the Website
    4. Documentation
  4. Examples
  5. Additional Resources

Overview

Competitors make a website following the given annual theme.

Rules

  • Teams of up to 6 participants create a website
  • One team per chapter may compete at nationals
  • The top 12 teams get into the semifinals where up to 5 team members must be interviewed
  • The website is based on a theme assigned each year found in the themes and problems
  • The website is judged on appearance, content, and function
  • There must be an about page on the website where all the documentation goes
  • The website, in addition to basic HTML, may use other technologies like Java applets and HTML5
  • Frameworks like Wordpress and Bootstrap are allowed but prebuilt templates and themes are banned
  • Template engine websites like Wix and Weebly are banned

Competing

Organization

As with most large projects, it’s best to have a system to keep everything organized.

Google Drive is a good way to keep all documentation, brainstorming ideas, and meeting notes together. Make one shared folder for the team then add the following subfolders for organization:

Folder Purpose
Meetings Meeting agendas and notes
Documentation Store all the documentation
Brainstorming All your ideas for the website compiled into one
Assets Store things like photos as a backup

You will also need a way to contact the people in your team efficiently. Texting, Discord, or Slack all work. You may also want to do online meetings every couple weeks to check in on Discord or Zoom.

For more information on team organization, see this guide.

Github is easily the best option for collaborating on the code for 70% of projects. Repl.it is another option which allows you to collaborate live and it can host static websites, Flask, and Node.js.

Selecting a Stack & Frameworks

One of the easiest ways to create your website is to simply make a static site with HTML, CSS, and Javascript. You can create a repository on Github for it and then host it by enabling Github pages in the settings.

More experienced developers might want to do fancier things like store information in database or have a dynamic site. For that, you’ll need to decide on a web stack.

A web stack is a collection of software used to create a website. They all typically consist of some web server, database server, and programming language. LAMP (Linux, Apache, MySQL, and PHP or Python) and MEAN (MongoDB, Express.js, Angular.js, and Node.js) are two common options. While not really a stack on it’s own, Flask is a web framework that uses Python which is easy to learn. Go with whatever your team knows best. If you still can’t decide, go with the MEAN stack.

For hosting your website, as mentioned before, if it’s a static website, you can simply use Github. Repl.it is an option for Node.js and Flask. For more complex applications, a service like Heroku might work best. You can configure also Heroku to automatically update when your Github repository is updated.

Frameworks and libraries for CSS and Javascript will help save time and headache.

Common CSS frameworks:

Common Javascript libraries:

  • jQuery - Makes DOM and other JavaScript stuff less of a pain
  • animae.js - Animate stuff

Designing the Website

Record your ideas an text on a Google document in the shared folder mentioned before. You can create a rough outline of the website on paper to share. Canva is a tool you can you to make rough designs as well.

Creating the website will require careful thought in the UI, color scheme, and text to make navigation easy for the user and to make it visually appealing. Flux is a Youtube channel with tutorials and information on web design. You can create a color pallette with coolors and select fonts and icons with Google Fonts.

Documentation

In the about page you must put all the documentation for your website. It must include a list of the sources of information you used, documentation for all copyrighted material, the Student Copyright Checklist as a PDF, and the Plan of Work log as a PDF.

Examples

Additional Resources