Tiny Corner of Pitt(sburgh) Website
This is your major assignment for the Web section of this course. It will count for 10% of your final grade. Through one of several hosting options, you will put up a small website featuring a little part of Pitt or Pittsburgh that you know.
- Website with at least 3 internally linked pages, each containing some text and image information about your tiny corner, and linked to the other two pages.
- The site must be public and can be hosted on your Pitt webspace, Github Pages, or a private host. (See me if you don't want to make it public.)
- Rough draft due for workshopping in class 10/13. (I don't have a deadline for an optional draft due to me for feedback this time, but feel free to ask me for feedback and in office hours.)
- Final version to be graded due
10/20 10/2310/25 (11:59pm).
- The Final version will be turned in as a link to your website on our blog, with a ~2 sentence description of your site aimed at your peers in the class. Along with this public description of the content of your site, you will also turn in a "cover letter" meant for me (Prof. Vee). This ~300-500 word cover letter will serve as your explanation to me about the choices you made for your site: content, design, license, style elements. This "cover letter" can accompany your link on our public blog, or it can be linked from the blog post to your shared Pitt Box folder, which only you and I can see.
For this assignment, I'm asking you to choose one small aspect of Pitt or Pittsburgh that you participate in or know about and that you might want me and your peers to know more about. This could be an organization at Pitt, your favorite restaurant in Pittsburgh, a particular spot on the shore you've been to, a wonderful camping spot or place to take a field trip (which could be drivable from Pittsburgh), etc. Introduce us to this place or group or thing and teach us a bit about it. The topic is pretty open, but the emphasis should be on featuring something local that we might not already know much about and that could use some publicity. Check with me about your topic if you're not sure.
I will assess your website based on these criteria:
- Do you describe the tiny corner of Pitt(sburgh) with enough detail in both text and image that I get a good sense of its context and value, who is associated with it, and what it means to you?
- Have you included any relevant history or connections to Pitt or Pittsburgh?
- Did you include all of the elements of the site I ask for (see below)?
- Does your site offer a coherent and thoughtful design that fits with your chosen subject?
- Did you include a short, public description of the site on the blog?
- Did you include a "cover letter" that adequately explains your choices for your site?
Because this is a website assignment, I will be looking at the form as well as the content of your site. Specifically, I'll look for:
- Have you broken up your site into (at least) 3 logically organized pages? (potential pages: About, History, People, Menu, Image gallery, Other associated sites, etc.) Make sure your landing page (perhaps your About page) is index.html.
- Does each page have a substantive amount of information on it? (250 words and/or several images)
- Is it free of typos, grammatical errors and anything else that makes it look unprofessional?
- Is it turned in in the format I asked for?
- Does your website include the following elements? You must include:
- Three separate, linked pages in html with titles
- Pages must be linked to a CSS file
- A navigation bar with at least minor CSS styling. See W3Schools for help.
- At least 3 appropriately sized and placed images with alt tags for accessibility (optional: click on images to enlarge, or include an image gallery)
- At least 3 external links (freebies: link to Pitt's website or our class website!)
- A visible and descriptive heading on each page
- At least one unordered or ordered list (other than your navbar)
- Multiple paragraphs
- A copyright notice at the bottom of each page (preferably in a footer). You can choose a Creative Commons license or claim All Rights Reserved. ...Especially for those who started this class with some HTML/CSS experience: you can include more elements such as divs, borders, floating elements if you'd like. You are also welcome to use some cut-and-paste code for a nice navbar, image gallery, making your site responsive, etc. It will make your site look fancier. I will still expect you to have all of the other elements of the site above, and you should always credit where you got your code.
Where and how to turn in your work
You need to compose this document in HTML and CSS. I recommend that you do so in a text editor such as Sublime (available on the lab computers and as a free download) or in a program designed to support HTML and CSS, such as Dreamweaver. Do not compose it in Word or Google docs and paste it in somewhere or convert it because you will end up with a lot of junk formatting you'll need to remove.
You have to get the site online somehow, but you can choose how you do it. You cannot use a sitebuilder like Wix or Weebly or Wordpress.com. You can use GitHub Pages or your Pitt webspace. Hosting through these sites is free, although GitHub pages requires a little knowledge of GitHub and the command line, and Pitt's webspace requires use of a FTP client (such as FileZilla or WinSCP). Both sites have good directions available to help you out. You can also host the site through a private host such as BlueHost or HostMonster or Reclaim hosting. This will mean buying a domain and paying for hosting on a monthly or yearly basis. I recommend doing this if you want to expand your web repertoire, host a personal portfolio for jobs, start your own blog, etc and can help you with this if you're interested.
A few tips on writing this assignment
Have fun! Make your site quirky or interesting or informative. Teach us about this little part of the school and city we share. Think of our class as your audience.
I am not expecting design perfection from anyone in the class, but especially from the students who are new to HTML and CSS. But I do want you to push your own skills a bit--even if you're already well-versed in web design. And I do want you to have put some thought into the information you present and the way you present it. Your cover letter is a chance to explain the thought you put into it.
I encourage you to use me, each other, and the 8 billion HTML and CSS tutorials available online to help you out. W3Schools, Khan Academy and Lynda tutorials (available through MyPitt) may be particularly helpful to you.
Goals of this assignment
I hope that this assignment will help you:
- Gain basic familiarity with HTML and CSS as languages for the web
- Consider different options and means to put files on the Web
- Understand different copyright licensing options available to you when you share your work online
- Share a personal connection to your city and university
Good luck and please email, talk to me in class or visit me in office hours to ask any questions you have about this assignment.