CS2 CSS Project 2024
🃏
<<< Back to
main site
Due Date: Thursday, October 24, 2024
Need help? Remember to check out Edstem and our website for TA help
assistance.
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 Casino, 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, etc…)
Tasks 🎰
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!
Task 1 First, complete all the HTML requirements for your
site:
- 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.
- 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.
- The
about page must have at least 2 facts about your topic of
choosing, and should also contain information about your topic.
- 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.
- There should be at least 4
divs used across your 3 pages. Remember
that divs are used to group elements together, and then style them all
together.
- There must be a
H1 header on each page, and 2
H2 headers on each page.
- 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.
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!
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
divs 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.
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.
Bonus 🎰
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!
1-3pts: Websites of exceptional design quality can get up to 3 points
of extra credit!
Hand-In 🎰
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
-
Make sure the content and title of the files 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.
-
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.
-
Create a .zip file from your CSS Project folder.
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.
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.
-
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...)
-
Submit on Canvas under the CSS Project assignment!
Congrats! You just finished the CSS Project! 
CS2 CSS Project 2024 🃏
<<< Back to main site
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 🎰
Introduction 🎰
Don wants to hire a new web developer for his Casino, 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, etc…)
Tasks 🎰
Task 0 Create a new folder in your
CSSfolder that's inside of yourCS2folder, and call itCSS_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!
Task 1 First, complete all the HTML requirements for your site:
homepage, calledhome.html. Another page should be anaboutpage calledabout.html. The last page can be of your choosing.aboutpage must have at least 2 facts about your topic of choosing, and should also contain information about your topic.CSS_Projectfolder. The other two images can be from the internet with links.divs used across your 3 pages. Remember thatdivs are used to group elements together, and then style them all together.H1header on each page, and 2H2headers on each page.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.
Task 2 Create a
CSSfile in your folder, and call itstyle.css. Link theCSSfile to all of your HTML files. Recall, we learned how to link CSS in the lab!Task 3 Using your newly created stylesheet, add Don's required style tests to your page!
Don's requirements are as follows:
divs on your pages.widthandheightproperty applied to make it fit on the page well.And of course, you should use any extra CSS you may need to make the pages look nice.
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.
Bonus 🎰
3pts: Add a button to your page, and give it style!
2pts: Fill out our feedback form.
1-3pts: Websites of exceptional design quality can get up to 3 points of extra credit!
Hand-In 🎰
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
Make sure the content and title of the files 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.
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.
Create a .zip file from your
CSS Projectfolder.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.
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.
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 withB0...)Submit on Canvas under the CSS Project assignment!
Congrats! You just finished the CSS Project!
If you have any issues with completing this assignment, please reach out the course HTAs: cs0020headtas@lists.brown.edu
If you need to request an extension, contact Professor Stanford directly: don.stanford@gmail.com