Stooges Project

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 the Getting Started project & delete the project you accidentally created, & then follow my instructions to create the stooges 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:

Create 4 more pages in thestooges folder:

On each of those pages, place the following content:

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.


  1. 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: ©

WebSanity Top Secret