Creating a FIRST Website

Creating a FIRST Website

So you want to build your own website for an FRC team? Well, we have some resources here to get your started. You will need:

  • Basic computer skills
  • A computer with an Internet connection, which you already have if you're here
  • A plaintext editor. We recommend Notepad++ for Windows, TextMate for Mac, and gedit for Linux.

Getting Started

Websites are made using three languages: HTML, CSS, and JavaScript. HTML stands for HyperText Markup Language and displays the text and images in a web browser. CSS stands for Cascading Style Sheets and adds styles to the various parts of the webpage. JavaScript handles the behavior of the website, like making things on the page move. HTMLDog has some fantastic tutorials on each of the three languages. We strongly recommend going through every section of the site to learn the basics of web programming.

Designing the Site

After you have an idea for what content you want on your FRC team website, it's time to start designing it. Use a tool like Adobe Photoshop and create a simple mockup of what you want the site to look like. Keep in mind that simple designs are usually more effective and easier to program.

Time to Program!

Once your team has settled on a layout, use your new HTML and CSS skills to turn it into a working website. For right now, you should focus on just using HTML files, and upload them to your webhost of choice. We suggest HostMonster. FIRST awards points for passing the W3C Validator, a website that checks for errors in your website code. Be sure to run this on your website before submitting your site to FIRST!

Writing Content

The most important part of the website is the written content. FIRST greatly emphasizes this in the requirements for the Website Award. On the home page, explain what your team is, where it's based, and information about FIRST. On other pages, go into detail about your team, talking about your team's history, mission, and previous robots. The more information, the better!

Integrate Multimedia

A website isn't complete without photos and videos. We recommend uploading all your team photos to Picasa and all your team videos to Vimeo. Using this tutorial, embed them into your website.

Spreading the Message

Throughout your entire website, make sure that you spread the message of FIRST. Your website should have a link to the FIRST website on every page and include a section describing FIRST in detail. Describe this year's game as well, so that visitors know what to expect at this year's competiton. As always, be gaciously professional!

Need Help?

Feel free to contact us at contact@bhrobotics.com, we're happy to help. If you need to look at the source of this website, just go to our GitHub. Everything is open source and free to use, extend, and rebrand.