Projects

Points: 30% of your grade

Due: Monday, 05/11 before your scheduled class time.

Summary:

Create a website. That's it!*

*Ok there are few guidelines, but this is largely an open-ended project with some minimum technical requirements. I want you to use this final as an opportunity to make something that interests you. The goal of this project is not to create the World's Greatest Website (although you can totally go for that), but to demonstrate that you can put together a functioning, responsive website.

Guidelines:

No matter what sort of website you make, it must meet the following minimum requirements to get full credit:

1. Minimum 2 HTML pages. These pages should be linked together so a user can navigate between them.
2. Minimum 1 CSS stylesheet. While you might have multiple stylesheets for different pages or screen sizes, you can technically put all your CSS in one file.
3. Minimum 1 Javascript file. Your Javascript must use jQuery.
4. Minimum 1 external library (in addition to jQuery). For example, animate.css or p5js (but feel free to find your own).
5. A scrolling event using jQuery. (Scroll Event Tutorial Video, Codepen example 1, Codepen example 2)
6. An animated element. You can do a traditional animation in CSS, or use jQuery+animate.css.
7. A modal popout window using the jQuery .toggle() function. (Modal popout & .toggle() function Tutorial Video, Codepen example 1, Codepen example 2).
8. A brief project statement (or "about" section). A couple sentences (or more) describing the "why" of the project (doesn't need to be serious). If you're making a portfolio, you should have some sort of bio, artist statement, or statement of purpose.

In addition to your website including those elements, it must also do the following:

1. Your website must be hosted as a GitHub pages site. Create a new GitHub repository specifically for this project. The link you turn in should be a publicly-accessible link that anyone can access.
2. Your website should just "work." That means that all your links should work, we should be able to figure out how it works without having someone explain it to us, your positioning should function how you intend it to, things should be sized appropriately, etc.
3. (optional) Your website should work well on both mobile and desktop environments. Keep in mind both portrait and landscape phone orientations, as well as wide and narrow desktop windows. Be sure to test out multiple sizes when you write your code. The majority of website traffic is now through mobile devices, not desktops, so keep that in mind!
4. (optional) Include a custom domain. You can create a custom domain name so your website URL isn't "username.github.io/website-name." If that interests you, I recommend taking a look at namecheap.com.

Option 1: A Portfolio

Create your portfolio website! Think about an effective way to present your work on a website, whether that's writing, design, film, art, etc. Portfolio websites come in all shapes and sizes, from the minimal and straightforward to the vintage, elaborate and downright impossible to navigate (though sometimes that's part of the appeal).

Think about your portfolio site as both a place to present your work and as an expressive work in itself.

Option 2: A Web "tool"

Create a web tool, or a website with some specific purpose. I use the term 'tool' loosely, as some of the examples listed below have pretty narrow uses, and many are largely useless. (Note, some of the below examples wouldn't meet the minimum techincal requirements for this project, but conceptually they fit the bill.)

isitraining.org make-everything-ok.com ismycomputeron.com hasthelargehadroncolliderdestroyedtheworldyet.com isitchristmas.com donothingfor2minutes.com fallingguy.com donothingfor2minutes.com online-stopwatch.com theuselessweb.com

Option 3: A work of Web Art/net.art

A piece of web art/net.art (using the web as an artistic medium) or a creatively "useless" website that does something kind of neat.

rrrgggbbb.com pointerpointer.com intotime.com therevolvinginternet.com endless.horse

Option 4: Educational or Fan Site

Know a bunch about a topic and you're just dying to share? Now's your chance! This could be a fan site of something/somehwere/someone you admire or enjoy, or a topic to which you want to bring awareness. This site can be totally serious and factual, or completely ridiculous.

Option 5: Other

Surprise me!

How are we presenting our projects?

If we were still meeting for class in person, we would each be presenting our final web pages in front of the class. I'd still like to do that! During our last class on Monday, we'll be meeting over Zoom and taking turns presenting our websites. You'll each have up to ten minutes to present your site and get feedback.

I want our last class to be a low-pressure fun time. The presentations are meant to be a super informal chance to show off your hard work! It'll be our last shared time together as a class, so let's enjoy it :)

Timeline

Here's a timeline with some milestones designed to help you work through this project incrementally. Required milestones are assignments worth 10 points each (see the assignments page for more info). Optional milestones are there to help you stay on track, and don't need to be turned in.

Milestone	Due	Required?
Project Proposal	Tuesday, 04/21 @11:59pm	Yes
Website mockup/outline	Monday, 04/27 @11:59pm	Yes
Rough Draft (HTML structure)	Monday, 05/04	Optional
Second Draft (CSS styling + JavaScript)	Friday, 05/08	Optional
Finished Site	Monday, 05/11 before your scheduled class	Yes

How to submit:

Push your final changes to GitHub, and then post a link to your website in the Final Project assignment on Canvas.

Points: 30% of your grade

Due: Sunday, 05/10 @ 11:59pm

How to receive full credit:

Satisfy all the minimum requirements listed above.

Final Thoughts

Have fun with this assignment! Use this as an opportunity to help yourself if you want! Maybe you're working on getting started as a freelancer, or you're trying to build some kind of side hustle you need a website for. Make the website for that thing you need in your life. Or again, just make something ridiculous. As long as it's a working website, that's all I really care about it.