Introduction to Web Development || Setup || Part 1

Web Dev Simplified · Beginner ·🌐 Frontend Engineering ·8y ago

Key Takeaways

The video covers setting up tools for web development, including a web browser, text editor, and version control system, specifically Google Chrome, Visual Studio Code, Git, and GitHub.

Full Transcript

hello everybody in this video we will cover how to set up the tools needed for this course as well as explain the reason for each tool in total we'll only be using three tools during this course our first tool will be a web browser which will allow us to display the web pages we build and this course I will be using Google Chrome for all examples and projects but any major web browser such as Firefox or edge will work I would however recommend using Chrome in order to follow the course as exactly as possible a download link for Chrome is in the description below second we'll need a text editor to write our HTML CSS and JavaScript files in while most courses say to use something like notepad or text made I recommend using Visual Studio code notepad and text made a very basic text editors that offer no extra functionality while Visual Studio code is a text editor developed specifically for web development this means Visual Studio code is packed with features specifically geared towards web development as refer guests in this course we'll explore many of the great features Visual Studio code has to offer but for now go to the link in the description and download Visual Studio code lastly we will need to install git which is a version control system gate lets us save changes to our code as different versions which we can swap between at any time with ease it also makes it incredibly easy for multiple people to work on the same project at the same time by allowing us to merge both people's changes easily it is not necessary in order to learn the basics of web development but it is used by nearly every web development company on top of git we will be using github github is a website that lets you store the different versions of your code github is by far the most popular website to be used with git and is again used by almost every web development company setting up these technologies can be a bit tricky at first but after the initial setup everything runs incredibly smoothly first you will need a download to get from the link in the description after that go to github website and create an account next we need to link our github account to get to do this will utilize the terminal if you are on Mac or Linux and if you're on Windows you will need to use git bash which comes with get with your terminal window up and enter the following commands make sure to use your github username and email when entering these commands if you're not comfortable with the terminal and to the following command into your terminal this will make us so that when you commit your changes to get it will open Visual Studio for you to enter a message instead of using the terminal right now your get and github accounts are linked and you can start submitting code to github but there's a slight problem every time you want to submit anything to github it will force you to type in your password this doesn't seem like much of a problem but will become incredibly annoying as you use get more in order to get around this we'll be setting up your github account with an SSH key in order to do this we will need to create a private and public SSH key and give github the public key after this is done each time you submit information to github it'll check the public key against your private key in order to verify that it is you sending the request instead of making you enter a password first we need to check if you have any SSH keys already generated to do this enter in the following command into the terminal if you do not see a file name ending in dot pub or you receive an error saying that the SSH folder does not exist that you will need to create an SSH key to create an SSH key enter the following command making sure you to use your github email this command will prompt you multiple times to enter information but the default values are just fine for us so hit enter until the key is generated next we will need to copy the key in order to give it to github by running this command if you already had an SSH key then make sure to use the file name of your dot pub file in place of the ID RSA file also make sure you enter the correct command depending on which operating system you are on now go to github and log in in the top right corner click on your profile icon and select settings from the drop-down after the settings page loads click SSH and gbg keys and lastly click the add SSH key button inside of the title box enter any title that you want such as my computer and then paste the key that we copied earlier into the key box congratulations you are now set up with git and github in order to test your setup enter this command into your terminal you should be greeted with a message that says that you have successfully authenticated if you do not receive this message the refer to github x' official documentation on setting up your SSH key it will be linked in the description below this concludes all the setup we will need for this project in the next video we'll discuss the details of how web pages work

Original Description

*Become a web developer* with my *FREE Web Development Roadmap* - _260+ videos, 120+ projects, 60+ articles_ 👉 https://webdevsimplified.com/web-dev-roadmap.html In this video you will learn how to set up your computer for web development. We will be setting up your browser, text editor, and version control system. Downloads: Google Chrome: https://www.google.com/chrome Visual Studio Code: https://code.visualstudio.com Git: https://git-scm.com/download Links: Github: https://github.com Github SSH Key Documentation: https://help.github.com/articles/connecting-to-github-with-ssh/ Terminal Commands: Set Git Username: git config --global user.name "Your name here" Set Git Email: git config --global user.email "your_email@example.com" Set Git Commit Message Editor: git config --global core.editor "code --wait" Check for Existing SSH Key: ls ~/.ssh Generate SSH Key: ssh-keygen -t rsa -b 4096 -C "your_email@example.com" Copy SSH Key (Replace the '⋖' symbol with an actual less than symbol): Windows: clip ⋖ ~/.ssh/id_rsa.pub Mac: pbcopy ⋖ ~/.ssh/id_rsa.pub Linux: sudo apt-get install xclip xclip -sel clip ⋖ ~/.ssh/id_rsa.pub Verify SSH Key Setup: ssh -T git@github.com
Watch on YouTube ↗ (saves to browser)
Sign in to unlock AI tutor explanation · ⚡30

Playlist

Uploads from Web Dev Simplified · Web Dev Simplified · 1 of 60

← Previous Next →
Introduction to Web Development || Setup || Part 1
Introduction to Web Development || Setup || Part 1
Web Dev Simplified
2 Introduction to Web Development || Understanding the Web || Part 2
Introduction to Web Development || Understanding the Web || Part 2
Web Dev Simplified
3 Introduction to HTML || Your First Web Page || Part 1
Introduction to HTML || Your First Web Page || Part 1
Web Dev Simplified
4 Introduction to HTML || Basic HTML Elements || Part 2
Introduction to HTML || Basic HTML Elements || Part 2
Web Dev Simplified
5 Introduction to HTML || Advanced HTML Elements || Part 3
Introduction to HTML || Advanced HTML Elements || Part 3
Web Dev Simplified
6 Introduction to HTML || Links and Inputs || Part 4
Introduction to HTML || Links and Inputs || Part 4
Web Dev Simplified
7 Learn Git in 20 Minutes
Learn Git in 20 Minutes
Web Dev Simplified
8 5 Must Know Sites For Web Developers
5 Must Know Sites For Web Developers
Web Dev Simplified
9 10 Best Visual Studio Code Extensions
10 Best Visual Studio Code Extensions
Web Dev Simplified
10 Learn CSS in 20 Minutes
Learn CSS in 20 Minutes
Web Dev Simplified
11 How to Style a Modern Website (Part One)
How to Style a Modern Website (Part One)
Web Dev Simplified
12 How to Style a Modern Website (Part Two)
How to Style a Modern Website (Part Two)
Web Dev Simplified
13 3D Flip Button Tutorial
3D Flip Button Tutorial
Web Dev Simplified
14 How to Style a Modern Website (Part Three)
How to Style a Modern Website (Part Three)
Web Dev Simplified
15 Animated Loading Spinner Tutorial
Animated Loading Spinner Tutorial
Web Dev Simplified
16 How to Write the Perfect Developer Resume
How to Write the Perfect Developer Resume
Web Dev Simplified
17 Animated Text Reveal Tutorial
Animated Text Reveal Tutorial
Web Dev Simplified
18 Learn Flexbox in 15 Minutes
Learn Flexbox in 15 Minutes
Web Dev Simplified
19 Custom Checkbox Tutorial
Custom Checkbox Tutorial
Web Dev Simplified
20 Start Contributing to Open Source (Hacktoberfest)
Start Contributing to Open Source (Hacktoberfest)
Web Dev Simplified
21 JavaScript Shopping Cart Tutorial for Beginners
JavaScript Shopping Cart Tutorial for Beginners
Web Dev Simplified
22 Responsive Video Background Tutorial
Responsive Video Background Tutorial
Web Dev Simplified
23 1,000 Subscriber Giveaway
1,000 Subscriber Giveaway
Web Dev Simplified
24 How To Prevent The Most Common Cross Site Scripting Attack
How To Prevent The Most Common Cross Site Scripting Attack
Web Dev Simplified
25 Transparent Login Form Tutorial
Transparent Login Form Tutorial
Web Dev Simplified
26 The Forgotten CSS Position
The Forgotten CSS Position
Web Dev Simplified
27 How to Code a Card Matching Game
How to Code a Card Matching Game
Web Dev Simplified
28 10 Must Install Visual Studio Code Extensions
10 Must Install Visual Studio Code Extensions
Web Dev Simplified
29 Learn CSS Grid in 20 Minutes
Learn CSS Grid in 20 Minutes
Web Dev Simplified
30 Learn JSON in 10 Minutes
Learn JSON in 10 Minutes
Web Dev Simplified
31 10 Essential Keyboard Shortcuts For Programmers
10 Essential Keyboard Shortcuts For Programmers
Web Dev Simplified
32 What Is The Fastest Way To Load JavaScript
What Is The Fastest Way To Load JavaScript
Web Dev Simplified
33 Differences Between Var, Let, and Const
Differences Between Var, Let, and Const
Web Dev Simplified
34 How To Install MySQL (Server and Workbench)
How To Install MySQL (Server and Workbench)
Web Dev Simplified
35 Learn SQL In 60 Minutes
Learn SQL In 60 Minutes
Web Dev Simplified
36 How To Solve SQL Problems
How To Solve SQL Problems
Web Dev Simplified
37 What Are Design Patterns?
What Are Design Patterns?
Web Dev Simplified
38 Null Object Pattern - Design Patterns
Null Object Pattern - Design Patterns
Web Dev Simplified
39 Your First Node.js Web Server
Your First Node.js Web Server
Web Dev Simplified
40 How To Setup Payments With Node.js And Stripe
How To Setup Payments With Node.js And Stripe
Web Dev Simplified
41 How To Learn Any New Programming Skill Fast
How To Learn Any New Programming Skill Fast
Web Dev Simplified
42 Asynchronous Vs Synchronous Programming
Asynchronous Vs Synchronous Programming
Web Dev Simplified
43 JavaScript ES6 Arrow Functions Tutorial
JavaScript ES6 Arrow Functions Tutorial
Web Dev Simplified
44 Are You Too Old To Learn Programming?
Are You Too Old To Learn Programming?
Web Dev Simplified
45 JavaScript Cookies vs Local Storage vs Session Storage
JavaScript Cookies vs Local Storage vs Session Storage
Web Dev Simplified
46 JavaScript Promises In 10 Minutes
JavaScript Promises In 10 Minutes
Web Dev Simplified
47 Builder Pattern - Design Patterns
Builder Pattern - Design Patterns
Web Dev Simplified
48 JavaScript == VS ===
JavaScript == VS ===
Web Dev Simplified
49 JavaScript ES6 Modules
JavaScript ES6 Modules
Web Dev Simplified
50 8 Must Know JavaScript Array Methods
8 Must Know JavaScript Array Methods
Web Dev Simplified
51 CSS Variables Tutorial
CSS Variables Tutorial
Web Dev Simplified
52 JavaScript Async Await
JavaScript Async Await
Web Dev Simplified
53 How To Choose Your First Programming Language
How To Choose Your First Programming Language
Web Dev Simplified
54 Easiest Way To Work With Web Fonts
Easiest Way To Work With Web Fonts
Web Dev Simplified
55 Singleton Pattern - Design Patterns
Singleton Pattern - Design Patterns
Web Dev Simplified
56 Responsive Navbar Tutorial
Responsive Navbar Tutorial
Web Dev Simplified
57 CSS Progress Bar Tutorial
CSS Progress Bar Tutorial
Web Dev Simplified
58 Learn GraphQL In 40 Minutes
Learn GraphQL In 40 Minutes
Web Dev Simplified
59 What is an API?
What is an API?
Web Dev Simplified
60 Learn How To Build A Website In 1 Hour!
Learn How To Build A Website In 1 Hour!
Web Dev Simplified

This video teaches viewers how to set up their computer for web development by installing a web browser, text editor, and version control system, and configuring them for use with GitHub.

Key Takeaways
  1. Download and install Google Chrome
  2. Download and install Visual Studio Code
  3. Install Git
  4. Create a GitHub account
  5. Link GitHub account to Git
  6. Set up SSH key for GitHub
💡 Setting up a version control system like Git and configuring it with GitHub is essential for web development, and using a text editor like Visual Studio Code can greatly improve productivity.

Related Reads

Up next
How to Speed Up Your WordPress Website with WP Rocket ⚡Tutorial 2026
Matt Tutorials
Watch →