Creative Project

CSE 154 - Fall 17

Overview

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 hour 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.

Week #10 (optional - not for credit)

Due Wednesday, December 6th at 11:00pm

• Finish your creative project, whatever it is you want.
• This is your last chance to get TA feedback on your project.
• We will show the class some of our favorite creative projects in class on Friday.
• If you want us to consider yours to show the class, include a readme.txt with this text at the top:
  • I would like to submit my project to the class showcase. I give permission for the instructors to show my project to the class.

Week #8 Requirements

Due Monday, November 20th at 11:00pm

• Write a .sql file with code that creates at least one table, inserts at least one row into the table and then makes at least one selection from the table.
• You can create other files to go with this as well, though you don't have to.

Week #7 Requirements

Due Monday, November 13th at 11:00pm

• Write a php file that outputs JSON content.
• Write an html/js page that does an AJAX call to load JSON data from the php file and display it in some way.
• The code on the lectures page for 11-08 is a good starter code.
• You can create other files to go with this as well, though you don't have to.

Week #6 Requirements

Due Monday, November 6th at 11:00pm

• Write a php file. It can do as little or as much as you want.
• You should be able to load your PHP file from a browser.
• You can create other files to go with your PHP file if you want, though you don't have to.

Week #4 Requirements

Due Monday, October 23th at 11:00pm

• Create an html page that has at least two different views which a user can switch between.
• The view switching should be handled by javascript code in a .js file.
• Use document.createElement at least 3 times and place those elements on the page.

Week #3 Requirements

Due Monday, October 16th at 11:00pm

• Author a .js file, and use <script src="..."> to link it into an HTML page
• Use document.getElementById or document.querySelector or document.querySelectorAll to select at least one element in your HTML document (you can use it to get a value, or create additional HTML content and append it into the DOM, or anything else - the only requirement is that you select something)
• 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

Week #2 Requirements

Due Monday, October 9th at 11:00pm

• Your webpage must have at least 2 different HTML pages and you must link to the other from index.html
• You must add an id attribute to at least 3 different elements, and a class attribute to at least 7 different elements
• CSS Selectors: Use 3 different contextual CSS selectors in your css files (examples: ul p { ... }, ul > p { ... })
• 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)
• Turn in a file called "w2.zip" containing your two files to the turn-in link provided. (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.)

Week #1 Requirements

Due Monday, October 2nd at 11:00pm

• 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 unique types of HTML tags (e.g., <html>, <head>, and <body>).
• index.css must have at least 10 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
• Turn in a file called "w1.zip" containing your two files to the turn-in link provided