"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 your cs204 folder (not cs204-assignments)
  • create an index.html file in there. I suggest copying the template.html file from the readings 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 your index.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 and li
  • h1 and h2
  • p
  • em or strong
  • img
  • figure and figcaption

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.