Warning: This is an archived course website that is part of my teaching portfolio, so some links may no longer work. Please contact me with any questions about this site.

Unit #1: Landing Page and Online Résumé

Due Date: Monday, September 24, 2012

Submission Name: index.html, resume.html, styles.css (These three files should be uploaded to your Virginia Tech Filebox home directory and publicly viewable on the web. For instance, my site would be located at http://filebox.vt.edu/users/qwarnick/)

WARNING: You cannot use MS Word’s “Save as HTML” function for this assignment.


For this assignment, you will create (at least) two pages: a “landing page” for your personal website/portfolio and an online version of your résumé. You will use basic CSS to style your pages, and you may choose to include images on your pages. You will also write a brief memo reflecting on your experiences completing this project.

Landing Page

The first component of this assignment asks you to think about the first impression you want to make when people visit your website. Your landing page (a.k.a. “homepage”) should be something that you continually update and maintain over the course of the semester as you learn more about HTML, but right now you only need to include basic information about yourself so you can use the “index.html” file as a springboard for users (such as myself) who want to see your online projects. Think of your landing page as a “Visitor’s Center,” a place where people can begin to understand just who you are. You may want to include a picture of yourself, links to your social media profiles, or other information that you consider relevant to your professional online identity.


The résumé component of this assignment should be where you concentrate the lion’s share of your effort between now and the due date. While the style and format of your online version do not have to mirror the printed version, the content and architecture of this page should follow the “standard” expectations for information that most people have when they view someone’s résumé. The genre of the résumé has become fairly standardized over the past few decades, and when prospective employers view your site, they will expect to see certain information arranged in a logical order that allows them to quickly determine if your credentials and experience match their employment needs.

Remember: the purpose of a résumé is to get you a job interview. So, when designing your résumé, try to think like a business owner or human resources manager and come up with a list of information you would want to know about someone you’re about to hire. Making such a list falls under the category of “audience analysis,” a skill that all good professional writing majors have been practicing in other courses.

As you work on this assignment, pay particularly close attention to the digital ethos you are creating when you place your finished résumé on the Web. Does the way you present yourself online make you appear like a credible, trustworthy person that someone would want to hire? For example, an email moniker such as “email hidden; JavaScript is required” may be fine for interacting with your friends, but if you owned a business that grossed millions of dollars annually and that worked on accounts for Fortune 500 companies, would you hire someone whose email address was “hokiestud”? Probably not. So think long and hard about the image you’re projecting of yourself to those who visit your site.

Memo of Transmittal

After you have created your two HTML pages and an accompanying CSS file to style those pages, you will write a one-page (300-500 words) memo of transmittal to Dr. Warnick that explains and justifies the choices you made as you worked on this assignment. For example, you may want to discuss your choice of font(s), background color (if any), images, etc. Your memo should explain these choices in terms of the audience, context, and purpose of the assignment rather than relying on personal preferences (e.g., “I chose purple because it’s my favorite color.”). When your memo is complete, upload it to Google Docs and share it with me (email hidden; JavaScript is required), making sure to give me editing privileges.

Evaluation Criteria

Your grade on this assignment will be determined by your performance on the following criteria:

  • Audience: Have you effectively addressed the needs and expectations of both primary and secondary audiences of your site?
  • Ethos: Does your site project a professional identity that is appropriate for your intended line of work? Have you included enough information about yourself to show who you are and presented it in such a manner that you set yourself apart from your “competition”?
  • Content: Is your résumé structured logically and does it support the information needs of your audience(s)?
  • Design: Does your site feature a consistent visual design with respect to colors, typography, spacing, and images? Is the design unique, yet professional?
  • Markup: Do your HTML and CSS files adhere to the “best practices” that we have discussed in class? Are your files well organized and carefully commented? Do your files validate?
  • Memo of Transmittal: How well does your memo explain and justify the decisions you made in completing this assignment? Is the memo structured logically? Does the memo adhere to the conventions of standard written English?
Where am I?
This is the class website for English 4814: Writing for the Web, taught by Quinn Warnick at Virginia Tech in fall 2012.
Worthwhile Reading
The links below are the most recent additions to my collection of bookmarks that are relevant to this course. You can find a complete list of ENGL 4814 bookmarks on Pinboard.

  • CodePen
    Awesome browser-based tool for experimenting with HTML, CSS, and Javascript.
  • What Constitutes Good and Bad Web Design?
    NY Times: "Shoddy Web site design is a curse of modern life. The more dependent we have become on the Internet for information, the likelier we are to suffer from its design deficiencies. Bad design can be infuriating, inconvenient or damaging in any field. But it is especially frustrating in areas like this where many of us find the technology so inscrutable that we tend to blame ourselves for being baffled, because we feel unable to judge whether the design is at fault."
  • wireframe.cc
    Free, minimalist wireframing tool, with templates for desktop, tablet, and phone.
  • Yes, learn basic programming
    Derek Sivers thinks everyone should learn HTML, CSS, and Javascript: "If you heard someone say, 'I have this idea for a song. But I’m not musical, so I need to find someone who will write, perform, and record it for me.' - you’d probably advise them to just take some time to sit down with a guitar or piano and learn enough to turn their ideas into reality."
  • CSS Floats 101
    Another great article from Noah Stokes in A List Apart. This one focuses specifically on one of the trickiest parts of CSS for beginners to master: the float property.
  • CSS Positioning 101
    Noah Stokes's A List Apart article is a great starting point for getting better at CSS positioning. Complete with several examples.
  • Modular Scale
    Handy tool for improving typography on modern, responsive websites. (The linked articles on this page are important, too.)
  • Interactive Guide to Blog Typography
    Great tutorial for improving typography on any website, not just a blog.
  • The Basement
    Great photo essay by Cabel Sasser: "And eventually, you crawl behind a corner, and discover a bundle of conduit. Conduit for every major internet carrier you’ve ever heard of. Oh, right. You had almost forgotten. This building, this basement, is the major internet hub for the entire region."
  • Snow Fall: The Avalanche at Tunnel Creek
    Beautiful interface for this NY Times article. Perfect integration of video, images, and text.
  • Service Learning Survey
    Students: If you worked with a client from the VT Engage program, please take a few minutes to provide the program with some feedback about your experience.
  • SPOT Survey - Fall 2012
    Students: If you haven't completed the SPOT evaluation for this course, please do so during class on Wednesday. I take this feedback very seriously, and I use it to revise my classes each semester, so please be specific about the aspects of the course (and my teaching) that you found successful and unsuccessful.
  • Standards, not Prescriptions
    Nathan C. Ford: "For standardization to truly continue making the web a more stable place, we do not need more anticipatory specifications, we need solutions. Lots of them. Dumb ones, fat ones, smart ones, skinny ones. Let us embrace them all then watch them fight it out in the field. When the strongest emerge, we can adopt them into our specs and wait for the next batch of victors."
  • Into the vault: the operation to rescue Manhattan's drowned internet
    Dante D'Orazio, writing for the Verge: "Hurricane Sandy's storm surge flooded Verizon's downtown office, rendering miles of copper wiring useless."
  • Responsive Design Testing
    Great little tool for seeing what your website looks like at a variety of screen resolutions.
  • Having a Mobile Strategy is Like Having a Laptop Strategy 20 Years Ago
    John Steinberg: "I do not want to download your app. I just want to read the content on the mobile web and possibly share it if I’m engaged. The constant knee-jerk interstitialing of full-screen app download messages every time I load sites is beyond frustrating. Many site owners seems convinced that this frustration, which no doubt dampens the velocity and volume of content sharing, will convert in loyal downloading app users."
  • Google Data Centers
    Photos, video, and history of Google's physical facilities. Obviously one-sided, but interesting nonetheless.
  • Google Throws Open Doors to Its Top-Secret Data Center
    Steven Levy, in Wired: "This is what makes Google Google: its physical network, its thousands of fiber miles, and those many thousands of servers that, in aggregate, add up to the mother of all clouds."
  • Guidelines, Tools and Resources For Web Wireframing
    A nice list of resources about wireframing.
  • Save For Later
    Fascinating report on a Mozilla UX project by Brian Groudan: "All browsers support two functions: searching and revisiting. My research questions whether constructs like bookmarks really are the right model to support revisiting. I worked closely with Mozilla user experience researchers and designers to rethink how Firefox can better offer 'save for later' in the browser."