You Code Pretty One Day

As you sit there reading this, pizza in hand and age-determinant beverage to one side, allow me to sympathize with your internal debate. "I'm an English major," you say. "Sure, I hang out with code monkeys in the video game club, but what does web design have to do with literature, rhetoric, and writing?"

The answer is "everything." The internet today is used primarily to persuade: Buy this! Support this ideology! Look at these cats! While the web may be compared to older print and visual media, study of the underlying coding language and structure changes you from someone who needs an interpreter to move your brilliant ideas out to the web to a native "netizen," whose understanding of HTML and CSS will not only allow you to convey your ideas effectively, but master the nuanced differences that the internet, as a medium, provides.

This site is designed to give you an overview of the principles you will be learning in ENGH 375, or its graduate counterpart, ENGH 507. We'll take a look at HTML, CSS, and some principles of layout and design. The goal is to familiarize you with some of the principles and techniques you'll be learning in class. I'll be making reference to The Elements of User Experience by Jesse James Garrett throughout the site, both because Garrett's text is immensely useful in thinking about webpage design, and because it's one of the texts you'll be reading for class.

It is important to note that what this site won't do is make you a better coder. HTML and CSS are programming languages, and any language is a skill more than a knowledge set. Want to be a better coder? Get coding! But read this first...

HTML is the structural language, on which the World Wide Web is built. In terms of the phases of User-focused design, HTML dominates the structure phase. While HTML can be used to insert some design elements, here we're going to focus on it as the means to create the large moving elements of our website. Get familiar with 'dem bones!

If HTML represents the skeleton, then CSS is the surface. Here is where you'll learn how to make your web-pages the attention-grabbing, eye-catching, sales-driving machines of the digital future. CSS is a complementary language to HTML, and we'll take a look at how the two interact, as well as how to make a single set of style instructions apply to all your web pages. Grab your palette and brushes!

Between the structure of HTML and the surface that CSS provides, layout is how we turn our structure into a skeleton, on which the CSS is laid. Layout includes the determining of what goes where on your page, but also includes presentational considerations, like color and font. Layout is the part of webpage design that probably has the most rhetorical choices to be made, aside from the actual content of your page. We'll look at some of the rules of layout, and give you a pre-designed tool for simple, clean webpage design. Slides Rules Up!

Produced by Richard D. Bennett for the ENGH 507 Course at George Mason University. Last Updated 23 Mar 2015. This material is protected under a Creative Commons Attribution-NonCommercial 4.0 International License. License details may be found here.