If you don’t know who the 3 Stooges are, please watch this video: http://files.granneman.com/videos/3-Stooges.mp4
Using your file manager (Finder on a Mac & File Explorer on Windows), not Brackets, navigate to the folder that holds all of your Web development projects (probably called Web Dev Projects
if you followed my instructions on Pre-Chartreuse No. 1). Inside Web Dev Projects
, create a new folder named stooges
.
In other words, you should now have 2 projects/folders inside Web Dev Projects
: colors
& stooges
.
Inside stooges
, create a sub-folder named images
.
Using your Web browser, download the following images & place them into the images
folder:
Now open Visual Studio Code. Go to File > Open Folder… & navigate to the stooges
folder. Select Open if you’re on a Mac & Select if you’re on a PC. You should now be in a new project in VSCode: stooges
. Inside that project, you should see the images
folder, which should contain 4 images. And that’s all that you should see at this point.
If you do not end up with a project called
stooges
inside VSCode, you messed up. Switch to theGetting Started
project & delete the project you accidentally created, & then follow my instructions to create thestooges
project in VSCode.
In the main stooges
folder, create a file named index.html
. Use a template to create the basic content for the webpage.
In index.html
, place the following content:
- A
<title>
of3 Stooges & Friends
- A page title of
Stooges
using<h1>
- All 4 pictures of the Stooges, with each picture a clickable link to that particular stooge's page
- An
<hr>
, followed by© [Year] [Your name]
, with[Your name]
a hyperlink to your email address1
Create 4 more pages in thestooges
folder:
larry.html
moe.html
curly.html
shemp.html
On each of those pages, place the following content:
- A
<title>
of3 Stooges & Friends: [Name of Stooge]
- A small wayfinding menu that says
Home > [Name of Stooge]
, withHome
linked back to the home page (what element should go around this particular content?) - A page title of
[Name of Stooge]
using<h1>
- A picture of the appropriate named stooge at the top of the page, with his catch-phrase (figure it out!) as a caption
- A sub-title of
Visit the Other Stooges!
using<h2>
- Pictures of the other 3 stooges, with each picture a clickable link to that particular stooge's page
- An
<hr>
, followed by© [Year] [Your name]
, with[Your name]
a hyperlink to your email address
At this point, I should be able to click on each stooge & go from page to page to page to page, in a closed loop of eye-pokes, face-slaps, & hair-pulls.
-
To insert a copyright symbol:
- If you’re using a Mac, press
⌥G
- If you’re using Windows, use Character Map to find the copyright symbol & insert it
- Or use a character entity:
©
- If you’re using a Mac, press