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.
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).
-
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. ↩ -
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. ↩