"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.) You can update it once it's graded, or replace it entirely with something much better.

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

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.

Structure

If you're new to HTML, it's natural that you might copy the structure for Ottergram for your personal page. But it's not a good fit. Ottergram is just a photo gallery. There's not much text, and it's just a single list of photos. So, I suggest you be more creative and personal in your web pages. For example:

  • You might have several sections, say on different aspects of your life (academics, hobbies, travel, pets, whatever)
  • Have some paragraphs of text, talking about these things. (It doesn't have to be long.)
  • Have some images as appropriate.
  • Maybe some hyperlinks to relevant external sites

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

  1. tar up the folder and drop it to the cs204 course account
  2. submit a short document to Gradescope saying "I am done or something like that"; that helps me grade and shows that your page is done and ready for grading.

I'll grade the folder in your cs204 folder, but the dropped tarfile should work as well.

Time and Work

Finally, when you have completed the assignment, make sure you fill out the Time and Work report. That report is required.