"My Page" Assignment¶
We'll do a lot of assignments this semester in which I will ask to you create something exactly like something I've done. This is a good way to (1) explain exactly what I want and (2) exercise specific skills. However, it lacks a bit of creativity.
This assignment allows you that missing creativity. Besides, students often want a chance to create a personal web page, and while you could always do so on your own time, it's nice to have the added incentive of an assignment.
So, in this assignment, you'll create a personal web page, based on the HTML and CSS that you've learned in the first week of CS 204. (So, be a little realistic.)
Purpose¶
In this assignment, you'll show your command of these concepts and skills
- HTML
- hyperlinks
- semantic tags
- HTML validation
- CSS
- tag, id, class and structural selectors
- CSS validation
Partnering¶
I will assign partners for this assignment, just for the purpose of support and camaraderie, but each person will do the assignment, so that you can customize the page for yourself. Each person will turn in a Gradescope item.
To Do¶
- make a directory called
mypage
in yourcs204
folder (notcs204-assignments
) - create an
index.html
file in there. I suggest copying thetemplate.html
file from thereadings
directory in the course account as a starting point (~cs204/pub/readings/template.html
) - create a second page as well, in the same folder. Copying the same
template.html
file would be fine, or you can modify yourindex.html
file and then copy that. - write the HTML and CSS necessary to create two nice pages, following the guidelines in the next section.
- make sure there are hyperlinks between the two pages. They should use relative URLs.
- share the CSS between the two files by having a shared, external CSS file.
- make sure all HTML and CSS is valid.
note: to access your page in the browser from off-campus, you'll need to use the username/password that Scott emailed to the class. (Everyone will use the same one.) You can give that to friends/family if you choose, or you can remove the restriction entirely. See htaccess
Validator Icons¶
You can omit the validator icons. For this assignment, since you're
outside the cs204-assignments
folder, you should be able to validate
by URL, which is easy and convenient.
Guidelines¶
I am purposely not giving you guidance on how big the pages need to be or what the subject(s) might be. If you're feeling very un-inspired and just need to get started, many students have created a main page that gives a general overview of them (such as where they were born or have lived, their major, background, all that kind of "getting to know you" information). The second page expands on some hobby, interest, cause or something else that is important to them.
HTML¶
You should use a variety of tags, showing your command of at least:
main
section
ul
andli
h1
andh2
p
em
orstrong
img
figure
andfigcaption
You may use div
and span
if need to, but consider whether there is
a semantic tag that might be better. There might not be, in which case
div
and span
are fine.
Images¶
You'll note that img
was in the list in the previous section. You
must have at least one image in your page. The picture can be one you
took yourself, or one you stole from the web (for the purposes of this
assignment, we are not going to worry about copyright). You can have
as many as you want, but at least one, to show you know how to get an
image file into your account and use it on a page.
CSS¶
We've learned a variety of CSS selectors, so I would like to see you demonstrate those skills. You should have one example of each of the following kinds of selectors:
- tag
- id
- class
- descendant
If you have others, that's fine, but the above list is a minimum.
Pair Programming¶
Even though this assignment is completely personal, I'm going to assign partners. This will give you someone to talk to when you're stumped, frustrated or revelling in victory.
Each partner will work on their own page, and there's no need to share code, but do plan to assist each other.
Camaraderie and teamwork is an important goal of this course.
Final Checklist¶
- both pages work in the browser
- links between pages work
- images display properly
- HTML and CSS both valid
How to turn this in¶
Since your work is independent of your partner's, each person should submit a document to Gradescope: that helps me grade and shows that your page is done and ready for grading.
I'll grade the folder in your cs204
folder.
Time and Work
The following link has been updated for Fall 2023.
Finally, when you have completed the assignment, make sure you fill out the Time and Work Fall 2023 That report is required.