Pre-Chartreuse No. 1


Type everything exactly as I tell you!

Open the Documents folder on your computer.

Inside Documents, create a folder for all your assignments & projects for this class called Web Dev Projects (clever, I know).

Inside Web Dev Projects you will place all of your project folders, with no spaces & no capitalization for folders or file names.1

For this assignment, create a project folder called colors (no capital letters!). By the end of this semester you will actually have a substantial number of files & folders in colors, as we will keep adding on to this first assignment so they all build on each other.

Open the colors project in Visual Studio Code. Create a new file for this assignment named pre-chartreuse-01.html. Using templates, create a basic HTML5 page. Save it, & then edit the file using the following instructions.

The Assignment

Reproduce this webpage: Pre-Chartreuse No. 12. Copy the text from the PDF.

This assignment introduces the following elements. You should use every one of these elements in order to complete the assignment.


Remember, <title> is not what you see in the viewport—that would be an <h1> (which you will learn about shortly). So how do you figure out what the <title> would be? Remember what is on the slide for <title> in the Web Development: The Absolute Basics presentation: “Humans see that title on tabs”. Unfortunately, you’re getting a PDF to copy, so you can’t see what’s in <title>, so, out of the goodness of my heart, I’ll help you out & tell you that the <title> is Chartreuse :: Colors. Ask me in class why I put those words in that order, & why I used double colons between the words).

  1. You might have noticed that I told you to name the folder that will hold all of your projects Web Dev Projects. But I told you no spaces & no capitalization! Those rules are for the actual project folders (& files), not for the folder that contains the projects.

    In other words, you will open the project folders in Visual Studio Code, & when you do, you’re in Webworld & the rules apply. But you will never open Web Dev Projects in VSCode directly (seriously, do not do that), so it’s OK to use spaces & capitalization for the container folder that holds all the projects. 

  2. This is a PDF, not an actual webpage, because I’m sick of students copying the source code even after I ask them not to do so. 

WebSanity Top Secret