# CS2 CSS Project 2023 🍨

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

> **Due Date: 10/24/2024**

> **Need help?** Remember to check out Edstem and our website for TA help assistance.

:::warning
**Important Note:** 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 be awarding credit if a task works in another browser but not Chrome.
:::

## Project Goals 🍦
- Complete a basic website structure with HTML
- Add a stylesheet to each unstyled HTML page
- Write one custom CSS sheet for a web page
- Creating an aesthetically pleasing site using CSS

## Introduction 🍦

Don wants to hire a new web developer for his Ice Cream shop, and is asking applicants to create him a sample site of their work. You, a hopeful applicant, are about to put your skills to the test!

In this project, you'll be creating your own website for something you're passionate about! It could be football, beekeeping, your favorite animal... the possibilities are endless!

Unlike other projects, this project is more similar to the real world: most of the work will be filling out requirements for the site, as opposed to following tasks.

Feel free to use online resources! ([W3Schools](https://www.w3schools.com/), etc...)

## Tasks 🍦
:::info
**Task 0** Create a new folder in your `CSS` folder that's inside of your `CS2` folder, and call it `CSS_Project`. All of your work for this project should live in here. Open this folder in VSCode to start making new files and editing your code.
:::

It's up to you now to make your own website!

:::info
**Task 1** First, complete all the HTML requirements for your site:

1. There must be at least 3 different HTML files. One should be the `home` page, called `home.html`. Another page should be an `about` page called `about.html`. The last page can be of your choosing.
2. The three HTML pages **must** have links to take you from one page to the next. You learned how to do this in the HTML project.
- The home page should have a link for the other 2 pages. The other two pages must at least have a link back to the home page.
4. The `about` page must have at least 2 facts about your topic of choosing, and should also contain information about your topic.
3. Across your 3 pages, there must be 4 images used. At least 2 must be downloaded images on your computer that should be in the `CSS_Project` folder. The other two images can be from the internet with links.
4. There should be at least 4 `div`s used across your 3 pages. Remember that `div`s are used to group elements together, and then style them all together.
5. There must be a `H1` header on each page, and 2 `H2` headers on each page.
6. There should be a table on one of the pages with at least 5 rows and 3 columns.

These are the **basic** requirements you must have. However, keep in mind that your web page should make sense. Example: if you are making a web page about beekeeping, you should probably include some text about beekeeping in paragraph tags, etc.
:::

:::info
**Task 2** Create a `CSS` file in your folder, and call it `style.css`. Link the `CSS` file to **all** of your HTML files. Recall, we learned how to link CSS in the lab!
:::

:::info
**Task 3** Using your newly created stylesheet, add Don's required style tests to your page!

> Note, a small part of your grade on this project is based on how good your website looks, and how much effort you used to make your website usable and aesthetically pleasing. Don't worry too much about this, but please put effort into making your website look good with CSS!

Don's requirements are as follows:

| Requirement | Notes |
| ----------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------- |
| H1 Headings on your pages should be a different color from H2 heading colors. | |
| For any table in your HTML, the background color of the rows should alternate in color. | You can set an id/class selector for any specific row in a table. Use this to, say, make all odd rows one color, and all even rows another color. |
| There should be at least 2 different colors used as background colors for `div`s on your pages. | |
| There should be some element on your page, that, when hovered, changes color. | This could be some paragraph text that, when hovered over, changes to another color. |
| **Every** image on your pages should be sized appropriately. | We expect each image to have some `width` and `height` property applied to make it fit on the page well. |
| There must be two different fonts used across the pages. | |

And of course, you should use any extra CSS you may need to make the pages look nice.

:::

:::warning
**Note**: When changing the styling of the website, you should not use the "style" attribute in HTML. In other words, you should only be adding IDs and classes to the HTML file, and defining colors/fonts/etc. in your CSS file.
:::

<br>
:::warning
**Note**: Don’t forget to link **every HTML page** to the css file! (See ["Setting up a CSS file"](https://hackmd.io/JaBurFF9RCiuv5qrg3LQ8Q?both#Setting-Up-A-CSS-File) above). You may find it necessary to add ID’s and/or classes to some of the provided HTML elements.
:::

<hr />

## Bonus 🍦
:::info
**3pts:** Add a button to your page, and give it style!

> You should be overriding the default button style with CSS to make it match throughout your entire website!
:::

:::info
**2pts:** Fill out our [`feedback form`](https://docs.google.com/forms/d/e/1FAIpQLSfml3Gl_YcXxa-41_4hJCTVNc2hxSHbYMWs0CdDSifX38tiaA/viewform?usp=sharing).
:::

:::info
**1-3pts:** Websites of exceptional design quality can get up to 3 points of extra credit!
:::

## Hand-In 🍦

:::success
**To Hand-In Project 3**:
Zipping files is a way to compress one or more files into a single file that is often smaller than the source files; you’ll submit all homework assignments through Canvas by uploading one zipped file containing all of your work.

To do this
1. Rename your source files so they **do not contain your name**. This is especially important in order to maintain the course’s anonymous grading policy that ensures your assignments are graded fairly. We will deduct points if your files contain identification data.
2. Make sure you have the **correct, most up-to-date files** before zipping. We’ve had students in the past send in older versions that didn’t contain all their finished work! You will receive a 10% deduction if TAs must regrade your work due to incorrect files.

3. Create a .zip file from your `CSS Project` folder.
:::spoiler Windows:
In Windows Explorer, go to the folder containing the files you want to zip. Select the files, then right-click on any of the selected files and select Send To… -> Compressed (zipped) Folder.
:::

:::spoiler Mac:
In Mac Finder, go to the folder containing the files you want to zip. (This would be your “HTML Project” folder) Select the files, then right-click on any of the selected files and select Compress Items.
:::

5. Right click on the newly created zip file to rename it. The name of your file should be `BannerID_CSSProject.zip` (replace "BannerID" with your own banner id, starting with `B0...`)
6. Submit on Canvas under the CSS Project assignment!

Congrats! You just finished the CSS Project! :icecream:
:::

:::warning
If you have any issues with completing this assignment, please reach out the course HTAs: [e-mail]

If you need to request an extension, contact Professor Stanford directly: [e-mail]

:::