Pre-Chartreuse No. 1

Setup

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.

HTML

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