Step 1: Setup of Your Code Editor
You will need to install Visual Studio Code here. This is a text editor, a program used to write code.
Once Visual Studio Code has been installed, you should install the “Live Server” extension. Extensions are small tools in our Code Editor that help accomplish tasks while coding. To install this extension:
Open Visual Studio Code
Click the Extensions option in the menu bar on the left (see below image):
Search for “Live Server” in the search bar at the top
Install the first option (it will say “created by ‘Ritwick Dey’”)
Close and re-open the Visual Studio Code program
open the Visual Studio Code program
Step 2: Create and Open a project folder in your text editor
*Step 2 should be followed along with the curriculum provided in the “set up” section of Level 0
From your computer’s desktop, right-click on your desktop and from the drop down menu select “New Folder” to create a new folder. Name this new folder: “VSchool”.
Inside the new “VSchool” folder create another new folder and call this folder “PreCourseProject”.Open your text editor, select the File drop down menu (top-left of the screen) > select “Open” or “Open Folder”.
From here select the “PreCourseProject” folder you just created. Once selected your folder’s name should show up at the top-left of your text editor’s window.
Right-click under about an inch or so under your project folder’s name and create a New File called “index.html”.
Below is an example of a successfully set up code editor:
Set up a project folder, and open that folder in Visual Studio Code.
Create your index.html file in your project folder.
Then you will see the GO LIVE button appear.
Clicking the “Go Live” button will open a tab in your computer’s default browser and create a connection to your code. Changes you make and save in your code will automatically update the web page!
If you have not done so already make sure Google Chrome has been set as your default browser.
Step 3: THE PRE COURSE PROJECT
For your project you will build a basic web app that meets the below requirements listed for an HTML, CSS and JS file. Start on this now 🙂 Do not overthink this project. Our main concern is your knowledge and understanding of the material in Level 0.
*Level 0 will guide you through completing the below items.
*Your project folder must include—and you must be able to explain—the following:
☑ Your HTML file will contain the content of your web app: words, images, links, and so forth. Any amount will do. Don’t overthink this!
☑ A that references a separate CSS file that adds styling to the HTML
elements of your web app.
DO NOT add
CSS styles directly to your HTML file.
☑ Any amount of CSS you’d like to add to your project to style it, but there should at least be some styling added.
☑ An HTML element should be referenced and styled in CSS
☑ A class should be referenced and styled in CSS
Be able to identify the following data types and notations:
☑ Arrays (Why are they useful? What does “0-indexed” mean?)
☑ Dot Notation (What is this used for and how is it implemented)
☑ Bracket Notation (What is this used for and how is it implemented)
Use each of the following in your app.js file:
☑ Create an object and navigate that object using dot notation.
☑ Create an array and navigate that array using bracket notation.
☑ A conditional statement (if, else if, else)
☑ A for loop OR a while loop
☑ An addEventListener method to call a function
The requirements listed are all that matter. It does not matter if someone told you different than what is outlined here. These are the requirements.