/intro-to-javascript

Supporting files for Introduction to Javascript

Primary LanguageJavaScript

intro-to-javascript

Welcome to the Getting Started Guide!

This course requires installation or updated versions of the following:

  • Visual Studio IDE (x64) v1.75 or newer
    • (Or an IDE of your choice that supports GitHub repository cloning)
  • Git SCM (x64) v2.14 or newer
  • Node.js (x64) v18.15 LTS build or newer If you plan on installing .NET in this setup phase:
  • .NET SDK v7.0 or newer stable build
    • Check with the dotnet --v command
    • Opening a .dib notebook file.
      • If a pop up does not appear, informing you that you need .NET 7.0, you're good to go!

This guide is critical to the setup of the course. Once you have this file open within Visual Studio, you're nearly finished with the entirety of the setup.

To clone the GitHub Respository, ensure Visual Studio code is open, then follow the instructions below:

  1. Locate the Clone repository option by either:

    • Selecting the Source Control view from the left-side bar, and selecting 'Clone Repository'.
    • Type '>' into the search bar at the middle of the top of the window, and search for 'Git: Clone'

  2. Paste this link into the text box when prompted:

    https://github.com/Pragmatic-Works/intro-to-javascript.git

  3. This will prompt you for a folder to put the files into. I highly recommend that you place the folder in the Documents folder, or into another folder that has no risk of being accidentally deleted or altered.

  4. If prompted, open the cloned repository. Otherwise, open the folder from File > Open Folder

This last required step is to set up each module with npm so we can utilize the lite-server within the file.

  1. Open the 'package.json' file underneath the guide file to reveal the NPM Scripts view at the bottom of the explorer panel.

  2. For each of the modules visible within the view, select 'install', and allow the installation to complete. This will greatly simplify getting the node modules into the correct workspaces, so that we can use them later. You may see a high level vulnerability warning, but this will resolve on it's own as the .

  3. To ensure that the setup occurred correctly, select the 'Run' option next to any of the start options. image-1

  4. A terminal should appear at the bottom of the screen and a moment later, a browser window (or tab, if you have one open already), with the URL of 'https://localhost:3000'. If you see a welcome screen, you've done it correctly!

How should I set up my screen?

  1. If you're utilizing a single monitor (which is not reccommended for the purposes of this course, as it can make it difficult to see the text at times), fit both the broswer and the editor into the window. Otherwise, place the editor on whichever screen is larger. This will allow you to view all the needed data.

    fullimage

  2. Right click anywhere within the page that oened in the browser and select 'Inspect'.

  3. Switch to the Console view.

This is the view that will be utilized for this course. image

Now, you're all set up, enjoy :D!