Module 1: Pre-coding

Overview

In Unit 2, students begin their introduction to web design techniques. It is common for students at this point in the course to have ideas about what they want their web pages to look like. However, in most real world web pages, what pages "look like" is secondary. A more important first question is: "What do I want my web page to say?" This course places an emphasis on content first, presentation second. The strength of this approach to web design is that it lends itself to designing web pages that are robust, with content that is flexible and deliverable to users regardless of which web-enabled technologies or configurations they're using. The creed among web developers who pratice this approach, and among standards organizations who promote it, is that content and structure should be separate from presentation. In this course, we will be focusing in Unit 2 on content and structure using HTML. Later, in Unit 3, we will turn our attention to presentation using Cascading Style Sheets (CSS).

In Unit 2, students will construct a website that will serve as a portfolio for displaying the work they complete in this course. This portfolio will continue to play a key role throughout the course.

In the current module module, students will be introduced to the pre-coding steps that are helpful to go through before they begin working with the nuts and bolts of web page development: coding in HTML. Just as there are pre-writing steps that ought to be done prior to writing an essay, there are pre-coding steps to do before coding a website. It is important for the instructor to reinforce that planning ahead will reduce the number of mistakes they'll make while constructing the site, which will save time, and in the working world will save money.

Lesson 1: Pre-Coding (Lesson length 60 minutes)

• Estimated time required: 30 - 60 minutes
• Link to student Lesson 1 page

Tips for Delivering This Lesson

• Students are always eager to get started constructing their website. The tendency for most students is to skip preliminary planning and start coding a site from the onset. Emphasize that initially in the process of developing a website the developer should spend plenty of time communicating with the client to understand what the clients needs are. Using paper to develop a preliminary sketch and file diagram reinforces the notion that planning ought to be done first.
• When students are ready to set up their folder structure, it can be helpful for students to watch the instructor step through the process. Proceed slowly and emphasize the naming protocol for folders and files that are created in this activity, since these folders and files will be referenced extensively throughout the curriculum, especially when linking to content between files. This is especially critical if your class is structured in a way that encourages students to begin working at their own pace.
• Some students may have grand ideas and may sketch a complex site and design that is beyond the scope of this course. Be honest with these students that their designs may require advanced skills beyond those taught in the course, but if these students prove throughout the course to have the aptitude to learn the advanced skills required, their original sketch can be used to motivate them. Perhaps by the end of the course they will have successfully realized their vision.

Example Output

When this lesson is complete, students will have created a blank home page and three sub-folders.

Example index.html file (source HTML only, no visible content)