Creative Project

Throughout this course, we'll work with a number of different technologies to build different pieces of web applications. However, it can be de-motivating to build something to a specification, especially when you are learning something new and want to make something that has your own flavor. To give you a chance to play around with the technologies we're learning, this quarter one of your homework assignments will be to write one or more websites from scratch, entirely of your own design. Each week, there will be some requirements that you have to meet, but the requirements don't force you to have any particular content, layout, color scheme, feel, etc - you'll make that yourself.

The idea is that you spend around an hour each week. This should be ample time to meet the specified requirements for the week. If you find yourself spending much, much more than one or two hours per week, talk to your TA or the instructor, and we'll make sure that the time you spend in your creative project doesn't prevent you from getting other coursework done.

Each week you can decide if you want to build on one of your previous creative projects or start an entirely new one. Just make sure that you fulfill the requirements of the week (you don't need to meet the previous week's requirements).

Example Project Idea

If you don't have inspiration for your own project, one suggestion is to build a student portfolio. This is a type of online showcase of your work. You can link into art projects, papers that you are proud of, etc. At the end of the quarter, you'll be able to share this portfolio with, well, anyone with an Internet connection :) We'll provide some small amount of guidance as the quarter goes on as to how to use the tools we're learning to do something interesting in your student portfolio page. Again, to be clear, you are not required to work on a student portfolio - the website you are building is going to be entirely of your own design, and will be graded on the weekly requirements.

CP0 Requirements

Due Thursday, March 29th at 11:00pm

Purpose: To start thinking about the web and bring your creative side when doing so.

Requirements:
Submit a PDF file called "w0.pdf" with responses to the following:

Come up up with your own available domain name. Use GoDaddy or another resource to verify that the domain is available (don't actually buy the domain). For this part, you only need to provide the name you've chosen.
Create your own interesting 404 for your domain name. Be creative! It can be a scanned or photographed picture of a sketch, or something you mock up on the computer with a graphic/illustrator program.

CP1 Requirements

Due Monday, April 2nd at 11:00pm

Requirements:
Submit a zip file called "cp1.zip" (make sure this is saved as an actual zip file) meeting the following requirements:

Your project must include two files: index.html, and index.css
index.css must be linked into index.html to style the page
index.html must have at least 10 different types of HTML tags (any tag excluding <!DOCTYPE, <html>, <head>, and <body> will qualify towards this count).
- Suggestion: Refer to this page for a comprehensive list of different HTML tags, and post on Piazza if you have any questions about any! You may use ones we haven't talked about in lecture, since there are many more that we could possibly cover in class.
index.css must have at least 5 different CSS selectors
index.css must apply at least 10 different CSS rules to content in index.html
HTML and CSS files must be well-formed and pass W3C validation

CP2 Requirements

Due Monday, April 9th at 11:00pm

Your site must have a page called index.html as well as at least one other html page that is linked from index.html. You must also have an associated .css stylesheet for your site that is used by your .html files.
In the files that you write for your site:

You must add an id attribute to at least 3 different elements, and a class attribute to at least 7 different elements (not all 7 elements need to have the same class, but at least 2 elements should share a class).
CSS Selectors: Use 3 different contextual CSS selectors in your css files (examples: section p { ... }, section > h2 { ... })
CSS Selectors: Use ids or classes in 3 different selectors in your CSS files (example: #unique { ... })
Use the box model: 5 different CSS selectors must apply at least one of margin, padding, or border styles to some HTML elements.
Flexbox: Use display: flex; to make at least one flex-container, and apply at least one flex property to the items in the container (flex-basis, flex-grow, etc).
As with CP1, your HTML and CSS files must be well-formed and pass W3C validation.

Turn in a zip file called "cp2.zip" containing your files to the turn-in link provided. If you'd like to opt-in to a CP2 showcase, please submit this survey!
- If Cloud9 doesn't download as a zip on a Mac you can download the files separately and then select them all and choose file->compress.
- There is a limit to the size of your submission for GradeIt - you may never run into this, but we've had some submissions exceed the size limit already. This usually happens when including libraries and/or high-resolution photos in your zip file. You can make your zip file smaller by using absolute paths to images if they are publicly available online, or compressing them to smaller sizes using photo-editing tools or online software (ask on Piazza if you're unsure how to do this)

CP3 Requirements

Due Monday, April 16th at 11:00pm

Purpose: To practice adding interactivity to a web page using the DOM and event handlers in JavaScript.

Author a .js file, and use <script src="..."> to link it into an HTML page. You should not have any JavaScript code in your HTML.
Your page should have a window.onload listener as shown in lecture/section/lab.
Use document.getElementById or document.querySelector or document.querySelectorAll to select at least one element in your HTML document and do something with it. (Example: you can use it to get a value from a document object (DOM element), or create additional HTML content and append it into the DOM, or modify existing content in the DOM, or anything else with the object you've selected.)
Handle any event (like a mouse event, keyboard event, or use a timer) and respond to it in some way in your page using a JavaScript function(s) in your .js file. Note your window.onload listener does not satisfy this requirement, you must add at least one more.
Tip: You can find a list of some different event types you can listen for here (not comprehensive) and post on Piazza or go to Office Hours if you want to explore those not covered explicitly in class!
Turn in a zip file called "cp3.zip" containing your files to the turn-in link provided. If you'd like to opt-in to a CP3 showcase (separate from CP2), please submit this survey (make sure you are logged into your UW account to access the survey)!

CP4 Requirements

Due Monday, April 23rd at 11:00pm

Purpose: To practice changing the DOM by adding/removing/appending elements using JS in response to an event(s) and to update elements on the page using the classList to separate style from behavior.

You must have an HTML page index.html that either meets the following requirements or links to another HTML page(s) you submit that meet these requirements.
Any .js code you use must use the module-global pattern (recall the module-global template).
Write JS code in a index.js file linked to an HTML page that adds and removes DOM elements in response to some event(s) (anything other than onload). You must use document.createElement, element.appendChild, and element.removeChild each at least once in your code in response to the event(s).
Use JS to dynamically modify a classList of an element (add/remove a class that is defined in a linked CSS file).
Suggestions: For updating your page, consider things like adding to a list (e.g. a todo-list or an option list), adding/removing paragraphs or images to your page, building a form that adds new options based on user input, implementing a timeout/interval feature, etc. You might find Section/Lab examples helpful for some inspiration!
Turn in a zip file called "cp4.zip" containing your files to the turn-in link provided. If you'd like to opt-in to a CP4 showcase (separate from CP2 and CP3), please submit this survey (make sure you are logged into your UW account to access the survey)! Please make sure to use absolute links to large media files (e.g. high-resolution photos) if possible to reduce the size of your cp4.zip.

CP5 Requirements

Due Friday, May 4th 11:00pm

Purpose: To explore different API's available on the web and use AJAX with them to fetch and process data on your website.

You must have an HTML page index.html that either meets the following requirements or links to another HTML page(s) you submit that meet these requirements.
Any .js code you use must use the module-global pattern.
Write JS code in a index.js file linked to an HTML page that makes a request to a public API and processes the response to change the page in some way.
Suggestions for finding an API:
- There are a ton of API's on the web today - you can find ones for dog breeds, Game of Thrones trivia, government data sets, Pokemon, etc. If you can think of some interesting data that could be integrated in an interesting way on your website, consider Googling "API for X" where X is the topic of interest.
- With that, even when the data they respond with may be very interesting, some APIs can be frustrating to work with due to poor documentation (what? documentation is actually useful?) or outdated response formats (XML, HTML, etc.). We recommend using API's that return data in JSON or plaintext format since we cover that more in this class and these formats tend to be easier to work with. We also recommended finding APIs that don't require API keys, although some popular APIs require such keys (e.g. Google Maps, Spotify, etc). Some APIs have great documentation on how to use an API key to get started quickly, but others may be non-trivial to set up. Visit OH if you are having any questions about the API you want to use!
- Some API ideas:
  - Science
  - Health
  - Linguistics
  - Fun/Miscellaneous
- Turn in a zip file called "cp5.zip" containing your files. If you'd like to opt-in to a CP5 showcase, please submit here! (remember to please keep image files to a minimum to avoid large folder sizes)

CP7 Requirements

Due Monday, May 14th 11:00pm

Purpose: To practice implementing your own JSON-based API in PHP and using it as a client in JavaScript.

Write a PHP program that outputs JSON content.
Write an index.html page that links to a .js file that fetches JSON data from your PHP program and uses the response to display in some ways.
The code on the PHP JSON API lecture is a good starter code. You may also find the section and lab examples from Week 7 useful for ideas.
Suggestions:
- Recall that one of the benefits of writing functions in PHP instead of code you can write in JS is that you can quickly process data with file i/o. While you are not required to ues file i/o in this CP, it can help create a pretty useful API. As an idea, consider writing your own folders and files to process and return data in JSON format in your API (e.g. see the random recipe generator exercise for lab, where we created a small collection of txt files to process in the response).
- We've primariy practiced processing txt files and directory contents, but depending on your own interests and project focus, you can process other files like .csv, .gcode (3D coordinate files for 3D Printing models), .pdb (protein code encodings), etc.
You may create other files to go with this as well, though you don't have to.
Turn in a zip file called "cp7.zip" containing your files. If you'd like to opt-in to a CP7 showcase, please submit here! (remember to please keep image files to a minimum to avoid large folder sizes. If you use any file processing in your API, make sure to turn these files in as well)

CP8 Requirements

Due Monday, May 21st 11:00pm

Purpose: To practice creating your own SQL table and querying it.

Write a setup.sql file with code that creates at least one table with at least 3 different columns.
In setup.sql or in a PHP file, write two queries using the table(s):
1. One query should insert at least one row into the table.
2. One query should return a filtered selection from the table (a SELECT query).
Your code should be valid MySQL as covered in lecture/section/lab. That is caling source setup.sql on Cloud9 should not result in any errors.
You can create other files to go with this as well, though you don't have to. Now that you have learned how to integrate a database with SQL and PHP though, this is a great opportunity to start thinking about wrapping up what you'e learned this quarter into a "full-stack" portfolio piece to show prospective employers!
Turn in a zip file called "cp8.zip" containing your files to the turn-in link provided. If you'd like to opt-in to a CP8 showcase, please submit this survey!

CP9 Requirements (Optional)

Due Tuesday, May 29th 11:00pm

Purpose: To wrap up your creative project work with a final portfolio you can publish, showcasing your exploration of web programming throughout the quarter. You may also opt in to the final creative project showcase (no specific requirements this week for the showcase :)) We'll show how to publish your projects using your UW webspace next week!

The CP is optional this week, but this is your last chance to get TA feedback on your project! We're happy to offer any suggestions/feedback for you to implement to prepare for publishing as a portfolio piece (which is very useful to have on hand to show for applying for internships/jobs!)
If there is any specific feedback you would like, add a feedback-notes.txt file to your zip folder - this will help your TA know what kind of feedback you would find most helpful for this final submission.
Feel free to also use this as an opportunity to practice different topics we've covered in the course for final exam preparation!
A few ideas for adding to your creative project:
- Incoporate different types of client- and server-side validation (e.g. with HTML5 input validation features, JS validation, PHP)
- Write a brief overview of what you've learned in the course and how your portfolio showcases that - this is helpful for employers to see your development process.
- Explore a few other API's to try out.
- Extend an API you wrote in PHP and write an API specification for users who could use it - this helps showcase your experience writing and documenting an API, which is a great skill to have as a web developer.
- Explore different JS libraries such as jQuery, d3, HighCharts, etc.
Turn in a zip file called "cp9.zip" containing your files to the turn-in link provided. Remember to try unzipping your files locally to check that they were correctly zipped if you used Cloud9 to zip them. If you'd like to opt-in to a CP9 showcase, please submit this survey!