The Specs Page for 4020, 2021S1

Final Project Specifications

Who You may work in groups of 1-3 people. Really, it is best to work in a group.

What You will produce an interactive website that makes strong use of all of HTML, CSS, and JavaScript. You are encouraged to experiment with things outside of the bounds of class.

Why You will be amazed at how much you learn in this process!

Milestone #1

On Monday by end of class, each group should submit a project proposal. Write this in HTML format. Just supply what you would put in the body of a page; I will take care of the rest.

Site Structure

All of your stuff should go into a directory with your group's name. Make this name a single word; you can use camel case. Also, place an index file in this top directory that links to the other directories for your page. This file should have a byline listing all participants in the project.

Inside of this directory, place two more directories, CSS and scripts. Place all of your CSS files in the CSS directory and all of your JavaScript in the scripts directory.

Have at least two other folders in your top-level folder, each of which has an index file.

Download the zip archive groupName.zip on the left. It gives you some starting code with all of the specified directories created, an index file in each directory, and a bare-bones CSS file.

Change the main folder name from groupName to your actual group's name. Change the other folder names to something evocative of the content they house.

You are not limited to two other folders. You can add more if you wish.

Elements Checklist

  1. Above all, be creative and have some fun!
  2. Each of the two topic sites should have a different appearance. Each can have other pages than just the index. You can use the same styles throughout each topic site.
  3. All topic sites should have some interactive elements. Buttons, text areas, sliders, and canvases can be pressed into service. Also suggested: some use of mouse events.
  4. Use CSS to govern layout. Have at least two of a table display, flexbox, or grid in your pages.
  5. You are strongly encouraged to do some exploring and to use HTML elements, CSS features, and JavaScript capabilities we did not cover in class. These are things that make a site great.
  6. Keep your CSS in the CSS folder and your JavaScript in the scripts folder.

Displaying Code or Math

If you want to discuss code here are some useful items. Place this in the header of your document.


<link rel="stylesheet" href="/~morrison/SCRIPTS/styles/sunburst.css"/>
<script src="/~morrison/SCRIPTS/highlight.pack.js"></script>
<script>hljs.initHighlightingOnLoad();</script>

You can display math by putting this in the header of your document.

Put your code inside of this.


<pre><code>
</code></pre>

and it will display prettily. I have a program that can translate things from symbols to HTML character entities.

MathJax understands LaTeX. Inline math mode is bounded by the tokens \( and \). Display math mode is bounded by bounded by the tokens \[ and \].

To activate it, place this in the header of your page.


<script type="text/javascript" async
  src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.7/latest.js?config=TeX-MML-AM_CHTML">
  </script>

Here is a sample.

\[{1\over\sqrt{2\pi}}\int_{-\infty}^\infty e^{-x^2/2}\,dx = 1.\]

This is what I typed.

\[{1\over\sqrt{2\pi}}\int_{-\infty}^\infty e^{-x^2/2}\,dx = 1.\]

Submission

I will post hours during finals week. During the posted times, you can use Google Calendar to set a 15 minute appointment (on the quarter hour, so 9-9:15am, not 10:05-10:20am). During this appointment this is expected.