Lesson 14: dropTop

In this lesson, we’re going to use our HTML and CSS skills to build a virtual desktop environment that acts as a launching pad for your favorite places and applications on the web.

dropTop

Click Here to see a finished version of the project that you will be creating below.

Project Setup

droptop_directoryComplete the following steps to get started building the dropTop project.

  • Create a root folder in code anywhere called droptop
  • Create an index.html file in the new root folder
  • Create a style.css file in the new root folder
  • Create a droptop.js file in the new root folder
  • Create an images folder inside the root folder

Project Files

Write the code in the two PDF files into the corresponding html and css files that you previously created.

Images

Download and extract the zip file below, and then upload each of the images into your images folder:

Javascript

Copy the code below into the droptop.js file.