Directory Set up

In this module we'll set up the starter project for the prework. You'll build on these basics when you start class.

JavaScript Library

First, let's set up the JavaScript library. We'll use the JavaScript library in the first few weeks of working. We will create a folder to house all of the code we're writing. It is recommended that you create the folder in a location that you can navigate to easily, such as your desktop. Get in the habit of not using spaces in the names for your folders and files. You'll see that we've separated words using -. This is a standard, and something to which you should become accustomed. To get the project started do the following:

1. Create a new folder for your projects in a drive of your choosing. Many people add it to the C drive, but your desktop will work for now, if you are more comfortable with that.

2. Name the folder javascript-library.

3. Open VS Code.

4. Open the folder in Visual Studio Code.

5. In the javascript-library folder add the following folders(not files).

    javascript-library
        └── 0-JavaScript-PreWork

For the sake of clarity and future understanding, it's important to recognize that all of these folders are at the same "level" in the folder named javascript-library. In applications you'll build, the equivalent of javascript-library may be referred to as the "root directory" because that is the farthest down the directory "tree"; this is the starting point from which all branches originate. Get used to seeing folders nested inside of each other and being able to recognize what's going on as you traverse the tree.

PreWork Folder Structure

During the prework phase, you'll be working in the 0-JavaScript-PreWork directory. Inside of this directory, we'll add more folders. Please add the following folders:

    javascript-library
        └── 0-JavaScript-PreWork
            └── 1-HTML-Basics
            └── 2-CSS-Basics
            └── 3-JavaScript-Basics

HTML PreWork File Set Up

We'll continue setting up the structure for our PreWork by adding files to the folders now. Folders are merely containers for our files. Files are where we will actually be writing code. Ensuring that you've followed the structure as it is presented will prevent confusion as you proceed through the PreWork. Go into the 1-HTML-Basics folder and add the following files, noting that each file has an extension of .html. Make sure that you are adding the files inside of the 1-HTML-Basics folder:

    javascript-library
        └── 0-JavaScript-PreWork
            └── 1-HTML-Basics
                └── 00-setup.html
                └── 01-basic-tags.html
                └── 02-h&p-tags.html
                └── 03-lists.html
                └── 04-links.html
                └── 05-images.html
                └── 06-tables.html
                └── 07-divs.html
                └── 08-inputs.html
                └── 09-forms.html
                └── 10-sections.html
                └── 11-articles-headers.html
                └── 12-footers.html
                └── 13-navs.html
                └── 14-iframes.html
            └── 2-CSS-Basics
            └── 3-JavaScript-Basics

CSS PreWork File Set Up

Next, we'll scaffold out the files for CSS lessons. Please note that the extensions will alternate between .css and .html. Be sure that you are inside of the 2-CSS-Basics folder. Add the following files:

    javascript-library
        └── 0-JavaScript-PreWork
            └── 1-HTML-Basics
            └── 2-CSS-Basics
                └── 00-setup.css
                └── 00-setup.html
                └── 01-classes.css
                └── 01-classes.html
                └── 02-ids.css
                └── 02-ids.html
                └── 03-margins-padding.css
                └── 03-margins-padding.html
                └── 04-fonts.css
                └── 04-fonts.html
                └── 05-backgrounds.css
                └── 05-backgrounds.html
                └── 06-widths-heights.css
                └── 06-widths-heights.html
                └── 07-borders.css
                └── 07-borders.html
                └── 08-positions.css
                └── 08-positions.html
            └── 3-JavaScript-Basics

JavaScript PreWork File Set up

Go inside of the 3-JavaScript-Basics folder and add the following files, they will all have the .js extension:

    javascript-library
        └── 0-JavaScript-PreWork
            └── 1-HTML-Basics
            └── 2-CSS-Basics                
            └── 3-JavaScript-Basics
                └── 00-setup.js
                └── 01-numbers.js
                └── 02-variables.js
                └── 03-strings.js
                └── 04-booleans.js
                └── 05-conditionals.js
                └── 06-functions.js
                └── 07-loops.js
                └── 08-arrays.js
                └── 09-objects.js