Week 1: Getting Started with Full-stack Web Development

Overview

This is a full-stack introduction to web development, and will give you a crash-course on how to create a simple online tool. During this course, you will be armed with hands-on knowledge and tools to be able to create, build, and deploy a custom website, with its own back-end and a database.

Format of Course

The format of this course is akin to a series of labs. We will provide a series of instructions to follow, and you will follow. We will touch briefly upon some basic concepts such as classes and objects, but this will mostly be in the form of external references.

This course will start of by covering the basics across the board. Once those basics are established, the course will start expanding on more advanced concepts and mechanisms.

Requirements to Get Started

• Basic programming knowledge in any language is preferable. If you’ve never programmed anything, it’s recommended that you go learn some javascript and html
• Persistence. You will run into issues – usually during initial installation. Be ready to uninstall/undo progress and start over at some points.
• Visual Studio Code: https://code.visualstudio.com/Download. You will be using this to build your front-end
• Visual Studio 2022 Community Edition: https://visualstudio.microsoft.com/downloads/. During installation, you will be prompted to select what you’ll be working on – be sure to select “ASP.NET and web development” along with anything else you might be interested in. You will be using this to develop your back-end
• Postman: https://www.postman.com/downloads/. You will be required to set up an account. You will be using this to test your back-end.
• Sequel Server Management Studio (SSMS): https://learn.microsoft.com/en-us/sql/ssms/download-sql-server-management-studio-ssms?view=sql-server-ver16. You will be using this to build and manage your database.
• Git: https://git-scm.com/downloads.  This will enable you to connect to a remote repository and back-up your local repository (folder containing your code).
• Github account: https://github.com/. This is where your remote repository will be.

Setup

Git

1. Download the .exe for the version of OS that you’re running, launch it, and follow the setup.
2. In Command Prompt (Start -> search “cmd”), run the following commands:

git config --global user.name "Your Name"
git config --global user.email "Your Email"

The above commands are to set up your name and email that “sign” any commits that you make. The “name” is not related to your github username. If you are seeing errors when running these lines, restart your computer.

Github

1. Log into Github and create a new repository by clicking the “New” button in your repository list:

2. Select yourself as the owner, enter a repo name, set it to private, and click “Create repository”:

3.Once created, you will see your repository setup page, with several options of how to do it. You can follow any one of them, but the following instructions will illustrate the following approach:

echo "#My-First-Repo" >> README.md
git init
git add README.md
git commit -m "first commit"
git branch -M main
git remote add origin https://github.com/dlipchenko/My-First-Repo.git
git push -u origin main

Note: If the above steps fail during any of the commands involving “git”, then your git is not properly installed. Try the following:

• Revisit the “Git” section under Setup and make sure you followed all the steps.
• Restart your computer and try again.
• Google the error shown in CMD to see what other people are saying.

Create a folder on your computer that will be connected and synced with this new repo. For example: C:\Users\Dmytro\Documents\Repos\My First Repo

Open this new folder in cmd (start -> type in ‘cmd’ -> open Command Prompt -> type in ‘cd “C:\Users\Dmytro\Documents\Repos\My First Repo”’ and hit enter). In CMD start typing out github’s instructions line by line, hitting enter after each one.

The following screenshot shows this series of events. Yellow highlights the command as it’s typed in, and red highlights the result of that command:

Now, when you refresh the Github repo page, you’ll notice that it’s fully set up and contains the readme.md file that was created through the above instructions:

You can test that this is working properly, by doing the following steps:
1) add a “client” folder into your local repository (i.e. the new folder on your computer)

2) add any file (for example an image or text file) to the “client” folder

3) go back to the folder in your command prompt (needs to be done from the root repo folder), and type in the following commands, hitting Enter after each one:

git add .

git commit -m “this is my very first commit”

git push

Upon refreshing your repo on github, you will see that it now has the new client folder, inside you will find the file that you added, and if you click on “History”, you will see the commit when this folder and file were uploaded, along with the message that was supplied in the second command:

Conclusion

This lesson has provided you with a comprehensive introduction to full-stack web development and the tools necessary to create a simple online tool. You have learned how to set up your development environment with Visual Studio Code, Visual Studio 2022 Community Edition, Postman, SQL Server Management Studio, Git, and Github. By following the instructions, you have successfully connected your local repository to a remote repository on Github, allowing for seamless collaboration and version control. As you progress through the course, you will build upon this foundation to develop a custom website with a front-end, back-end, and database. Remember to remain persistent and resourceful when troubleshooting issues that may arise during your web development journey