# HTML Project 🍦

[<<< Back to main site](https://cs.brown.edu/courses/csci0020/)
<img src="https://hackmd.io/_uploads/H1NagEAT3.png" width=200>

:::info
Released: **9/23**
Due: **10/05 at 11:59pm**
:::

:::warning
**We will be grading all projects in Chrome.**
This means that you should check your finished project in Chrome before handing in. We will not award credit if a task works in another browser but not Chrome.
:::

## Introduction

Now that you’ve all learned the basics of how to make a web page, we would like you to help us debug and improve the CS2 website! This project must be **completed by yourself**, without the help of any other students or resources not mentioned in the resource section. As a reminder, please <u>do not</u> put any personal/identifiable information on your website to ensure anonymous grading.

## Project Goals

The goals of this project are to:
- Write well-structured HTML
- Understand basic tags in HTML
- Organize information using lists and tables

## Tasks

:::info
**This project will consist of updating three files supplied to you (`home.html`, `assignments.html`, `contact.html`), and creating a fourth file (`about.html`).**
:::

### Required Updates

:::info
Below outlines what we would like updated and created for the CS2 website. You will see <u>Minimum Technical Requirements</u> has more than what is listed below. You will have to use your creativity to fill some of those other HTML specific requirements.

:::spoiler Example of this
We would like you to create **2 lists**, as found below in **"Minimum Technical Requirements"**. Our requested website updates below do not specify any lists, so use your creativity to choose a few spots that lists may be necessary (fun facts for the about page could be one)!
:::

`home.html`
- Fix anchor tags so they direct to the correct pages

`assignments.html`
- Add a link back to `home.html`
- Fix the labs and projects tables by adding table headings
:::spoiler **Hint**
The table headings should look like:

|Project|Date|
|-|-|
|...|...|

|Lab|Date|
|-|-|
|...|...|
:::

`contact.html`
- Add a link back to `home.html`
- <mark>**All contact info should be fake and, therefore, non-identifying.**</mark>
- Add an email link

`about.html`
- Add a link back to `home.html`
- <mark>**This file doesn't exist yet, you must create it.**</mark>
- Include information about this course
- Include fun facts about ice cream (*the theme of this course!*)

### Minimum Technical Requirements
:::info
The table below outlines all the minimum requirements that we will be looking for when grading your project.
:::
| Requirement | Additional Information |
| ---------------------------------------------------------------------- | ---------------------- |
| The four pages listed above | |
| All new and existing anchor tags work properly | |
| All new and existing tables have headings | |
| The homepage links to other pages and all other pages link to the homepage | |
| An email link on the contact page| **Hint:** see the lab!|
| A hyperlink to an external page | |
| 3 headings, each with a different size | |
| An image | If you're including an image from your computer, make sure it's in the same folder as your html files |
| 2 lists, one ordered and one unordered | |
| 4 divs with different background colors | |

Feel free to go beyond the minimum requirements if this project interests you! :)

### Bonus!

Once we implement your updates to the CS2 website, we would like to collect feedback on the new changes. To do this, we will implement a feedback form.

:::success
**5pts:** Add a form to the `contact.html` page.
- Include a single-line input for the user's name
- Include a multi-line input for the user's feedback
- Inlude a submit button
:::

## Resources

:::warning
You are allowed to use **only** these resources for this project:
- https://www.w3schools.com/html/
- The HTML lab
:::

>If you have questions, please stop by office hours or post on:
> https://edstem.org
>Office hours schedule: https://cs.brown.edu/courses/csci0020/new_hours.html

## Submission
**1. Create a `.zip` file and save it as <mark>{Your Banner ID}_html.zip</mark>**

**2. Drag your HTML folder (the folder that contains all your work) into this file**

:::info
**Your files should look like this:**

    HTML folder
    ├── about.html
    ├── assignments.html
    ├── contact.html
    ├── home.html
    ├── image file(s) (if not linked directly from the Internet)
    └── anything else you created / other optional pages

:::

**3. Double check what you have done so far.**

:::warning
**Remember:** do not include your name or any other identifying information other than your banner ID. **If you don’t put your Banner ID, we cannot grade your assignment and we cannot give your extra credit for the feedback form!**
:::

:::info
**Tip:** **please try to unzip your zip file, then try to open the HTML files in the newly unzipped folder and make sure everything works as intended.** This ensures that your links are correct and that your grader can see your photos and navigate to the other pages.
:::

**4. Submit on Canvas**

>If you are unable to complete this project on time, please contact Don as soon as possible to request an extension.
>
>Don Stanford’s Email: [e-mail]