CS 302 Computer Fluency
Elaine Rich

A Personal Website

For this project, you’ll build your own personal website. I’ve made one for myself that you can use as a model. You can change it to make it yours by replacing the pictures and the text. You can also change the design. For example, you can change the background color.

I’m going to describe how you can do this project if you’ve never made a website before. You’ll start with one I’ve built, then use a simple text editor to change mine to make it yours.

If, however, you have built websites before and you’d like to start your site from scratch, you might want to use a more sophisticated tool such as:

· Dreamweaver (this one costs money),

· Drupal, or

· Wordpress

You’re also welcome to try something more ambitious, even if you’ve never make a website before, if you’ve been looking for an opportunity to learn how. This is it.

Part I

1. Start by looking at the site I’ve built. You can view it in your browser by going to:

http://www.cs.utexas.edu/~ear/cs302/WebsiteProject/

2. Download the zipped file http://www.cs.utexas.edu/~ear/cs302/WebsiteProject/WebsiteProject.zip. Open it and you will have a copy of all the files that you need. You will find:

a. The front page, index.html.

b. The subfolder css, which contains the style sheet.

c. The subfolder images, which contains one image you’ll need, BarRainbow.jpg, plus one of my pictures. (You don’t need the picture of my cats but I put it there so you can see where your pictures will go.)

Depending on what operating system you are using, you may have to issue an explicit command to get the file unzipped (or, as Windows calls it, to extract the files). In Windows 7, as soon as you click on the link, you should get a popup window. Choose Open. You should then get all the files in a single directory in your temporary file area. Copy and paste the whole directory to a place where you can work with it (wherever you put other things for this class).

In Windows Vista and there’s a button that says Unzip all Files. That does what you want. It prompts you for a directory into which to put the files. You should create a new directory and put all of these (unzipped) files/folders in it. The links in my index.html file are relative links, so you need a directory/subdirectory structure that matches mine. Or you can change the structure of your links.

Your goal is to end up with a folder, in a place where you can work with it, that should contain the three things listed above.

Part II

Make the site yours. You’ll want to:

· Change the content of the index file to make it yours. To do this, open it in a simple text editing system, such as Notepad, Wordpad, or TextEdit. You do NOT want to use Word for this. (If you try simply clicking on the file, it will probably be opened by a browser, since it is an html file. You don’t want this.) Get into the editor you have chosen and then open the file. If you are using Notepad or Wordpad, and probably other such simple text editors, you will have to tell the editor to look for files of all types. Otherwise it will not look find files with extension .html.)

· Replace my pictures with yours.

· Change the style sheet if you want to change the appearance of your page. Again, use a Notepad like editor to make your changes.

Part III

Publish your site.

1. Decide where you want to put your site. You can use any web hosting service you like. Two reasonable (free) choices are:

· Dropbox

· Google Drive

2. Move your site (all of it) to the server you have chosen.

3. Test it to make sure it works as you expect.

4. Ask a friend to test it. This will guarantee that you’ve set permissions to allow people other than yourself to get to your site.

Extra Credit

In a nutshell, to get extra credit, make your site better than mine. You can add graphics and videos. You can add pages (perhaps one for each of your interests). You can make your site dynamic in any of a number of different ways. Maybe you’d like your pictures to display as a carousel, for example. Make the site yours however you want to.

Turning in Your Project

Use the turnin system to submit a document that contains the url of your top level page (the file index.html).