Introductions

This project is intended to introduce you to your classmates and the Teaching Team. It will also be the beginning of your portfolio for this course that represents a record of all of your work. You will link to all of your projects for this course from this site so the Teaching Team can track your progress during the semester — thus it will be very important that you keep it up-to-date throughout the semester.

Submitting Your Work

Submit this project using GIT to commit and push your index.html and other web site files to the portfolio_NETID repository provided for you hosted in the course's Gitlab group. Note, this is how all submissions will be done for this course — only what is in the master branch of the provided Gitlab repository will be considered part of your work.

In this course, all your pages must display the way you expect in the latest version of Google's Chrome browser and written following standard Coding Conventions that is validated online.

Specification

Whether or not you already have a personal home page, you should create a separate page for this course. Your course web site must contain at least the following pages:

• index.html (by default the first page of a website that serves as an entry page to your site)
  • your name
  • where you are from
  • your year of graduation
  • a link to the course homepage
  • an image (of you or something you like if you prefer not to post a picture of yourself)
  • your computer science autobiography (see details below in Part 1)
  • two links each to (for each provide a short description of why you chose it)
    • an example of a good web site (e.g., based on their look or experience, not their code)
    • an example of a bad web site (e.g., based on their look or experience, not their code)
    • a link to a tutorial on some topic to be discussed in the course (preferably not one already included here)
• course work pages (preferably in separate folders)
  • link to a separate web page you create that describes a hobby you are interested in
    for example: an experience you had, a tutorial, a collection of pictures, or collection of links
  • link to a separate web page you create that allows users to upload an image and apply any number of "filters" you implement (see details below in Part 3)
    For example: an window, a rainbow, a message hidden within the image, or how an animal sees the world

Note, images used on your web pages (and in general) must:

• be royalty free and not "stolen" off of the web
  For example, use fotolia.com, istockphoto.com, everystockphoto.com, or pay attention to the Creative Commons licenses on web sites. If you choose to use your own images or a friend's make sure to include a credit and a Creative Commons license so other's know how they can use your images.
• include ALT text to describe its contents (in case it doesn't load or is being viewed by a visually impaired user)

For those having trouble being creative, you can fill in this template file.

Part 1: HTML - Computer Science Autobiography

To create the content for your course web site, you can use a plain text editor such as VS Code but not a modern word processor or other WYSIWYG editor because part of the goal of this assignment is to learn the basics of the hypertext markup language, HTML. For this part, do not need to worry about making your page pretty — specifically, we suggest not embedding styles directly into you HTML (even though it is possible). Instead, wait for Part 2 to focus on using CSS styles to improve the look of your pages.

Before you start this course, take a moment to reflect on your goals and motivations for taking this course and how your web/programming experiences have affected you and shaped your decision to study computer science (and to take this course).

Your autobiography should broadly attempt to answer the following questions:

1. When did you first start using a computer?
2. What event(s) made you interested in studying computer science?
3. What kinds of computers/programming languages have you used?
4. How do you use computers and programming on a daily basis (i.e., outside of course assignments)?
5. What is motivating you to take this course and what do you want to get out of this experience?
6. How do you see yourself using programming in the future?
7. What do you think a web developer does on a daily basis?
8. What kinds of skills are required to code different parts of a web site?

As a separate web page, linked to from your index.html web page, show something that interests you in whatever format you think best suits it. Again, for this part, focus on the structure of the information you want to share rather than the style, colors, etc.

Part 2: CSS - Styling your Web Site

Commonly the content of a page is developed separately from the style, or look, of the page — even by different departments of people. An obvious example of this is the thousands of free and paid CSS templates available on the web to apply to your site. This is also the basis of the popular Bootstrap framework that we will study later.

In this course, your CSS styles should be written in a separate stylesheet (typically called style.css) that is linked from your HTML pages, rather than mixing the two. This maintains a strict division of CSS (for presentation) and HTML (for content). You can choose to create a single stylesheet for all the pages in your web site or separate ones for separate pages. However, if you use separate stylesheets, you should not duplicate styles in each file but instead create a separate file that contains the common styles. Note, an HTML page can reference any number of style sheets, with later ones overriding rules set in earlier ones.

Apply at least these styles to the web pages you create for this assignment:

• One or more styles based on just the tag name (e.g., all li tags)
• One or more styles based on a class name applied to tag(s)
• One or more styles based on an id name applied to tag(s)
• While you will not be graded on the specific colors you choose for your web pages, they must have sufficient contrast to be distinguishable, even by those with visual disabilities
• Separate, simple, styled "header" and "footer" areas at the top and bottom of the main page to include useful information (e.g., contact information, validation logos, creative commons license links, etc.)

Note, you will need to change the HTML developed in the first part to accommodate your styling. We will discuss ways to do this while maintaining a clear separation of concerns during the semester, but a great example of this in action is the CSS Zen Garden.

Part 3: JavaScript - An Interactive Web Page

Build an separate, styled and interactive web page using CSS and JavaScript that allows users to:

• upload an image and apply one or more filters you have implemented to it
• reset the image to its original version
• clear the canvas to make it remove the current image

Your filter can do whatever you want, but try to make it something "original", rather than reproducing something that CSS already does automatically. Consider changing the pixels (x,y) and/or RGB values based on where they are in the image, their color values, their relationship to each other, or by applying multiple operations. You can can also include more complex math operations with JavaScript’s Math object methods.​ Also consider the affect of allowing the user to change values in your filter dynamically like a threshold, distance, multiplier, or number of times to apply the algorithm.

Your JavaScript code should be initiated by events generated by HTML input DOM elements and use the HTML canvas DOM element (you will not need to learn its drawing API, it is just a place on your page to display the uploaded image) and the JavaScript SimpleImage class, documentation and code (which you do not need to understand or download locally to complete this project), to manipulate the individual pixels of the image. Use this example, running version and code, as a guide for your work.

Resources

• W3schools
• MDN Web docs
• HTML Dog Tutorials