LearnNodeJSWebDevelopment

Welcome

Welcome to learning Node JS for Web Development. I'm Andrew Peterson and I've been programming for the web for the past 4 or so years and programming NodeJS for the past year.

Through this tutorial I hope to catch you up to speed on the amazing things you can do in web development, I will further your understanding on the whole stack. From constructing the backend server to designing the front-end front-facing webpage.

I have also chosen to use git as my way of teaching this course so you will hopefully be learning or brushing up on your rusty git skills.

In this intro I plan to go over my recommended setup as of April of 2019. With how fast tech changes tools and technologies are always changing as well so try your best to keep ontop of it. I believe in you! Next I will go over your typical workflow and how it should look. After that I will go over how to upload your code and get it verified by me, Andrew.

As a note this class is self-taught. After the setup I'll be providing links to resources and basic help in the READMEs but most of the work will be on you. The challenges in each Assignment will be for you to figure out how to accomplish. If you'd like extra help feel free to reach out to me at learnNode@andpeterson.com or leave an issue on the GitHub of this class with a question tag.

Setup

Let's begin with the programs:

I linked all my recommended tools for these various programs. If you'd like to use a different text editor, git client, or browser thats fine, just know that the instructions may be a little different for you and ensure that they all work for the purpose of this class.

Once you have all your tools installed let's setup your work environment

The Environment

NodeJS

For starters ensure that you have NodeJS in your env path by opening CMD (Command Prompt) and typing node into the terminal. It should return with >_ if it didn't follow the next else continue to the next subsection.

Supposing you already installed NodeJS you will need to change the installation setup. To modify the install re-run the installer, select Change and make sure the Add To Path is installed. Now if you try it again it should be working.

Text Editor

If you are using VS Code there are plenty of useful extensions you can use to get your server up and running. I won't be using any in this class because I have yet to venture into deciding which extension to use but if you found something you like. By all means use that instead.

Git Client and GitHub

To get started you will need to signing or register for an account on GitHub. Once signed in goto this repository on GitHub and click on the Fork icon in on the top right of the page. This will copy the entire repo into your own GitHub account so any modifications made will be done on your specific account.

Once the repo has been forked you'll need to click on the green Clone or download button on the page. Then select Open in Desktop. This will open GitHub Desktop and it will ask you where you want to clone the repo to. After you have selected your directory continue through the propmt and the client will now clone the repo to your machine.

Hello World

Lets get started on a Hello World Assignment! Open this folder in VS Code by launching VS Code and selecting open folder... this will open the folder that we will be working in. Once in the folder you should notice all the files in this directory on the left side. Let's begin

Create a text file named Hello.html by selecting the new file icon on the left, or by right clicking in the side pane and selecting New File.
The file will open in your editor and now we can begin
Type Hello World! in the editor and save it using Ctrl + S
Now if you right click on the navigation pane and select reveal in explorer and and then select hello.html it should open your browser with a webpage that says Hello World! You have created your first web page!
Let's get the code checked off. Go back to GitHub Desktop and in the bottom left text box that says Update hello.html type the message first webpage and select the blue Commit to master button.
Then press Push origin button on the top of the page to push all your changes to the server GitHub.com
Now that the code is up GitHub.com lets get it signed off. Open back up GitHub.com and navigate to your local repository.
Select the New Pull Request button and select...
I will then review your code and respond in the comments

I hope that all made sense. Again if you need help feel free to reach out and I can help you in the process. If you want to learn more about git I'll include some git resouces below

Now that you are setup and ready its time to begin learning how to do web development! Follow the steps in Workflow to get started on the first assignment.

Git Resouces

Workflow

A slimmed down form of this section will be included in each Assignment as to remind you as to what to do next.

Open GitHub Desktop and ensure that all changes have been commit on the left panel
Select the button at the top of the page that says Current branch: master and select Assignment1
All your work will now be gone and replaced with Assignment1. But don't worry, you can always go back using the branch selector and going back to master
Read through README as it provides a list of Resources that will be helpful in the assignemnt
Open the terminal in VS Code by selecting Terminal -> New Terminal
type npm install to install all the required modules for the assignment
Work on the provided tasks
As you make changes be making commits Git Desktop as to keep your work saved
Once your program is complete run your program using node app.js
Work through any potential bugs (remember google is your friend)
Once your program is finished and you are happy with it push your changes to origin in Git Destkop
Make a pull request
I'll provide feedback in the comment section of the request.
Once you are happy with what you got out of the assignment move onto the next one.
Rinse and repeat

Workflow Slim