Visual Studio Code 2022 | Web Dev Setup | Top Extensions, Themes, Settings, Tips & Tricks

Summary

This video tutorial offers a beginner's guide to setting up Visual Studio Code (VS Code) for web development. It covers installation, customization, and usage of features like extensions, themes, and keyboard shortcuts. The tutorial also introduces VS Code's powerful built-in tools like Emmet for HTML and CSS shorthand, IntelliSense for code suggestions, and the terminal for command-line operations. Viewers are directed to additional resources for learning web development languages and VS Code proficiency.

Takeaways

• 💻 **Choose a Code Editor**: The first step to becoming a web developer is selecting a code editor, with Visual Studio Code (VS Code) being recommended for its community support and customization options.
• 🔗 **Download and Install VS Code**: VS Code is a free, open-source, and cross-platform editor available for Windows, Linux, and macOS, which can be downloaded from code.visualstudio.com.
• 🛠️ **Customize VS Code**: After installation, customize VS Code by integrating it fully into your operating system and adjusting settings like font size and tab size for better readability and coding experience.
• 🗂️ **Understand the Interface**: Familiarize yourself with the VS Code interface, including the sidebar for project files, search functionality, source control integration, and extensions.
• 🔍 **Utilize the Command Palette**: Use the Command Palette (Ctrl+Shift+P or F1) to quickly access and execute commands without navigating through menus.
• ⌨️ **Master Keyboard Shortcuts**: Enhance productivity by learning and using keyboard shortcuts for common actions instead of relying on the mouse.
• 🎨 **Select a Theme**: Personalize your coding environment by choosing from various themes available in VS Code, including dark and light options.
• 📚 **Extensions for Enhanced Productivity**: Install essential extensions like Live Server for real-time previews, Prettier for code formatting, and Auto Rename Tag for HTML editing convenience.
• 📁 **Project Management**: Learn to open and manage project folders in VS Code, create necessary file structures, and switch between files efficiently.
• 💡 **Embrace Built-in Features**: Leverage VS Code's built-in features like Emmet for HTML and CSS shorthand, IntelliSense for code suggestions, and multi-cursor editing for faster coding.
• 🖥️ **Terminal Usage**: Overcome any fear of the terminal by learning its basics in VS Code, as it's essential for tasks like file management, running Node.js scripts, and using Git for version control.

Q & A

What is the first step to becoming a web developer according to the script?

The first step to becoming a web developer is to pick a code editor.

Which code editor is recommended in the script for web development?

The script recommends Visual Studio Code (VS Code) as the code editor for web development.

What are some of the features of Visual Studio Code mentioned in the script?

VS Code is described as free, open source, cross-platform, with great community support, tons of extensions, fully customizable, lightweight, and fast.

How can one get started with VS Code as per the script?

To get started with VS Code, one needs to download and install it from code.visualstudio.com, and then select additional tasks during installation for full integration.

What is the purpose of the sidebar in VS Code?

The sidebar in VS Code contains the explorer for project files, search functionality, source control with Git integration, run and debug options, and the extensions panel.

What keyboard shortcuts are recommended for navigating VS Code?

The script suggests remembering keyboard shortcuts like Ctrl+Shift+P or F1 for the command palette, Ctrl+K Ctrl+S for keyboard shortcuts, and Ctrl+Comma for settings.

What are some settings changes recommended for new users in the script?

The script recommends increasing the font size for readability, adjusting the tab size, enabling bracket pair colorization, and turning on word wrap.

How can one change the theme in VS Code as per the script?

To change the theme in VS Code, one can go to the manage cog, select themes or color theme, and use the up and down arrows to cycle through themes or search for additional themes.

What is the benefit of using the 'Live Server' extension mentioned in the script?

The 'Live Server' extension is beneficial as it sets up a local web server to view changes in real time without having to reload the page.

How does the 'Prettier' extension help in web development?

The 'Prettier' extension helps to keep the code formatted and uniform, making the code 'pretty' and easier to read.

What is the functionality of the 'Emmet' feature in VS Code?

The 'Emmet' feature in VS Code allows for shorthand coding, enabling users to write HTML and CSS more quickly by expanding abbreviations into full code.

How can one open a project folder in VS Code?

One can open a project folder in VS Code by right-clicking on a folder and selecting 'Open with VS Code' or by using the 'File' menu and choosing 'Open Folder'.

What is the significance of the 'IntelliSense' feature in VS Code?

IntelliSense provides context-aware suggestions to help with coding, offering properties, methods, and functions available for the object being coded, speeding up the development process.

Outlines

00:00

💻 Introduction to Web Development and VS Code

The paragraph introduces the viewer to the world of web development and the importance of selecting a good code editor. Visual Studio Code (VS Code) is highlighted as the recommended choice due to its popularity, open-source nature, cross-platform compatibility, community support, and extensive extension library. The presenter shares tips and tricks to maximize the use of VS Code and mentions additional resources available in the video description, including a VS Code cheat sheet and a course for becoming proficient in VS Code. The installation process for VS Code is outlined, emphasizing the selection of additional tasks during installation to integrate it well with the operating system. The video also provides a quick tour of VS Code's interface, focusing on the sidebar, which includes the explorer for project files, a search function, source control integration with Git, and the extensions tab. The command palette is introduced as a powerful tool for executing commands quickly, and the status bar's informational role is explained.

05:02

🖌️ Customizing VS Code with Themes and Extensions

This section delves into customizing VS Code's appearance through themes and extensions. The presenter demonstrates how to change color themes and introduces several built-in themes, then shares personal preferences for dark themes, including Night Owl and Code Stacker. The process of installing new themes via the extensions panel is shown. The paragraph continues with a discussion on popular extensions like Live Server for real-time web server setup, Prettier for code formatting, and Auto Rename Tag for HTML tag synchronization. The presenter also covers the installation of icon packs to enhance the visual identification of files and folders within VS Code. The process of opening a project folder in VS Code and setting up a basic file structure for web development, including HTML, CSS, and JavaScript files, is also explained.

10:04

🗂️ Navigating and Editing Files in VS Code

The focus of this paragraph is on file navigation and editing within VS Code. It starts by demonstrating how to close files using keyboard shortcuts and reopen them using the 'Go to File' command. The paragraph then covers the preview feature of files and how to disable it through settings for a more permanent file-opening approach. The presenter introduces Emmet, a shorthand feature for quickly writing HTML and CSS code, with examples of how to create elements and lists efficiently. IntelliSense, a context-aware suggestion feature, is also explored, showing how it assists in writing JavaScript code by providing property and method suggestions. The paragraph concludes with a demonstration of how to close the sidebar using a keyboard shortcut and a brief mention of other shortcuts for navigating different menus within the sidebar.

15:04

🔄 Advanced Editing and Terminal Usage in VS Code

This paragraph covers advanced text manipulation and navigation techniques in VS Code, such as using the arrow keys with Ctrl for word-by-word navigation, Alt for moving lines, and Ctrl+D for duplicating selections. The presenter also shows how to use multiple cursors for simultaneous editing in multiple lines. The paragraph transitions into introducing the terminal within VS Code, aiming to demystify it for beginners. It explains how to open a terminal session, switch between different terminal types, and set a default terminal. The terminal's versatility in tasks like directory navigation, file management, and interaction with Node.js, npm, and Git is highlighted. The video concludes with encouragement for beginners to explore further with provided learning resources and a call to action for viewers to like and subscribe for more content.

Keywords

💡Code Editor

A code editor is a type of software used for editing source code. In the video, Visual Studio Code (VS Code) is highlighted as a popular choice among developers due to its open-source nature, cross-platform support, and extensive community and extension support. It's central to the video's theme as the presenter guides viewers on setting up VS Code for web development.

💡Visual Studio Code (VS Code)

VS Code is a free, open-source editor that supports various programming languages. It's noted for its customization options, extensions, and integration with Git for version control. The video emphasizes VS Code's lightweight and fast nature, making it ideal for web development, and it serves as the primary tool discussed throughout the tutorial.

💡Extensions

Extensions in the context of VS Code are add-ons that enhance the editor's functionality. The video introduces several extensions such as 'Live Server' for real-time web page updates and 'Prettier' for code formatting. Extensions are crucial for tailoring the development environment to specific needs, exemplifying the video's focus on optimizing the VS Code setup.

💡Keyboard Shortcuts

Keyboard shortcuts are quick key combinations that perform specific actions within an application. The video encourages the use of shortcuts like 'Ctrl+Shift+P' for accessing the command palette in VS Code to improve efficiency. These shortcuts are integral to the video's message of streamlining the coding process.

💡Themes

Themes in VS Code are visual skins that change the appearance of the editor's interface. The video showcases how to switch between themes, including 'Night Owl' and 'Coder Dark Theme', to personalize the coding environment. Themes are part of the broader discussion on customizing VS Code to fit individual preferences.

💡Bracket Pair Colorization

Bracket Pair Colorization is a feature that colors matching pairs of brackets, improving code readability. The video demonstrates enabling this feature in the settings, emphasizing the importance of visual aids in coding and how they can enhance the development experience within VS Code.

💡Source Control

Source control, or version control, is a system that tracks and manages changes to source code over time. The video mentions VS Code's integration with Git, a widely used source control system. This ties into the broader theme of efficient code management and collaboration tools for developers.

💡Emmet

Emmet is a productivity tool for web developers that provides shorthand for writing HTML, CSS, and other markup languages. The video demonstrates how Emmet can rapidly generate code snippets in VS Code, which is a testament to the video's goal of showcasing tools that accelerate web development.

💡IntelliSense

IntelliSense is a code completion feature in VS Code that provides smart suggestions based on the context of the code being written. The video illustrates how IntelliSense can assist with JavaScript coding, underscoring the video's theme of leveraging editor capabilities to write efficient and error-free code.

💡Terminal

The terminal, as discussed in the video, is a command-line interface for executing shell commands. The video explains how to open and use the terminal in VS Code, which is essential for tasks like running Node.js scripts, using npm, and handling Git operations, thus emphasizing the terminal's role in the developer's toolkit.

💡Project Folder

A project folder is a directory containing all the files related to a specific project. The video guides viewers on how to open and organize a project folder in VS Code, which is a fundamental step in setting up a development workspace and aligns with the video's educational focus on project management in VS Code.

Highlights

Choosing a code editor is the first step to becoming a web developer.

Visual Studio Code (VS Code) is recommended for its popularity, community support, and customization options.

VS Code is lightweight and fast, making it suitable for web development.

The video provides a free VS Code cheat sheet with keyboard shortcuts, extensions, themes, and fonts.

Instructions on how to install VS Code on various operating systems are provided.

VS Code supports multiple programming languages, with a focus on HTML, CSS, and JavaScript for web development.

A tour of the VS Code interface is given, including the sidebar, search, and extensions.

The Command Palette (Ctrl+Shift+P or F1) is highlighted for quick access to commands.

Customizing keyboard shortcuts can improve efficiency.

Settings such as font size and tab size can be adjusted to personal preferences.

Bracket pair colorization is a new feature in VS Code for better code readability.

Word wrap can be enabled to keep long lines of code within the viewable area.

Themes can be changed to suit personal preferences, with a focus on dark themes.

Extensions like Live Server, Prettier, and Auto Rename Tag are recommended for web development.

Icon packs can be installed to customize the appearance of files and folders in the sidebar.

Opening a project folder in VS Code is demonstrated with different methods for various operating systems.

Creating a basic website structure with HTML, CSS, and JavaScript files is shown.

Navigating between open files and using the 'Preview' feature is explained.

EMMET is introduced as a shorthand for quickly writing HTML and CSS code.

IntelliSense is highlighted for providing context-aware suggestions and autocompletion.

The ability to split editors in VS Code allows working on multiple files side by side.

Keyboard shortcuts for navigating and manipulating code are demonstrated.

The terminal in VS Code is introduced as a powerful tool for various development tasks.

The video concludes with a call to action for viewers to like, subscribe, and follow a learning roadmap.

Transcripts

do you want to learn how to become a web

developer well the first step is to pick

a code editor let me show you how to get

set up so that you can start learning

today i'll also show you a bunch of tips

and tricks to get the most out of your

code editor

[Music]

there are a lot of code editors to

choose from but the most popular and my

favorite is visual studio code and don't

confuse visual studio code with visual

studio vs code is a free open source

cross-platform application it has great

support from the community and tons of

extensions it's also fully customizable

to fit any developers preferences and

project needs it's lightweight and fast

which is why it's perfect for web

development

throughout this video i'll reference

links to other resources and all of

those links will be in the video

description below included is a free vs

code cheat sheet that includes common

keyboard shortcuts my favorite

extensions themes fonts and icon packs

and if you really want to become a vs

code pro go check out my vs code course

at vscodehero.com

the first step is to install vs code so

go to code.visualstudio.com

download this is a cross-platform

application that works on windows linux

and mac os and go ahead and download the

appropriate version and begin the

installation

when you get to this section select

additional tasks i would recommend

checking everything this just fully

integrates vs code into your operating

system you may or may not see these

exact settings if you're on linux or mac

os or once the installation is complete

this is what you're going to see a vs

code can be used for many different

programming languages for now we're just

going to focus on the basic web

development languages which include html

css and javascript so we're going to set

it up for that but first let's take a

quick tour

on the left side we see our sidebar at

the top we have our explorer this is

where you're going to find all of your

project files and directories once you

have a project folder opened

next is search this is pretty

self-explanatory this will allow you to

search within your project files there's

also a find and replace functionality

and next is source control

this uses git integration and if you

don't know what git is don't worry i

have an entire video that explains it

and i'll include a link for that

next is run and debug

we're not going to get into debugging in

this video but of course i have a video

for that too and next we have extensions

we'll come back to the extensions tab in

just a bit

at the bottom we have our manage cog in

this menu you'll find things like

settings keyboard shortcuts themes and

settings sync the top of this menu we

see the command palette or the shortcut

for is ctrl shift p

if you have a keyboard with an f1 key

you can also just press f1

so this is a really cool feature in here

you can search for just about anything

you can open a file change a theme view

the keyboard shortcuts basically every

command that's available is here in the

command palette and you don't have to

complete a word just start typing and

it's going to figure out what you're

looking for it's very helpful saves a

lot of time if the only keyboard

shortcut that you remember is ctrl shift

p or f1 then you're going to be set also

at the bottom of the user interface is

the status bar it has a lot of useful

information if you're using source

control you're going to see the branch

that you're on you're also going to see

the current line number and the language

of the current document and many other

pieces of helpful information let's go

ahead and check out the keyboard

shortcuts we can go to the manage cog

and then go to keyboard shortcuts or we

can press control k control s

you can see here that there are tons of

keyboard shortcuts and you can even

customize them and now you'll never

remember them all but try to remember as

many as you can as you need them when

you notice yourself needing to use the

mouse for something look for the

keyboard shortcut for that action and

then try to remember that for next time

you're going to save a lot of time by

using keyboard shortcuts over using the

mouse

now let's look at some settings to get

to the settings we can go to the manage

cog and then we can go to settings or

you can press ctrl comma

there are just a few settings that i'd

recommend that you change right off the

bat and these are just my personal

preference so you can set these however

you like

first i like to increase the font size

just a bit i'm going to change mine to

18.

i have a larger screen i just want to

make sure that i don't strain my eyes

and make sure that the font is nice and

readable and next is the tab size so by

default it's four i prefer two but again

personal preference

next let's search we go up here to

search settings and let's type in

editor bracket pair and i'm going to

enable bracket pair colorization there

used to be an extension for this but now

it's built right into vs code so i'm

going to enable that and i'm going to

turn the bracket pairs on to true and

the horizontal i'm going to change that

to true as well and lastly let's go up

here and search for word wrap

and so editor word wrap i'm going to

turn this to on

this will prevent long lines of code

from going off the right side of the

page

everything automatically saves so we can

just close that and next we're going to

look at themes now again we can go to

our manage cog and go to themes or color

theme or the shortcut for that is ctrl k

ctrl t

in here we can use the up and down

arrows to cycle through the themes so

i'll give you a quick preview of the

built-in themes

so we've got abyss dark dark plus

hindi

monica monica dimmed red

solarize dark tomorrow night blue

high contrast and then quick warning

we're about to get into the light themes

so put on your sunglasses

so here we go light light plus quiet

light and solarized light all right

let's get off of that i don't care much

for light themes at all i prefer the

dark themes so i'm going to show you my

five favorite themes we can search for

them right here by going to browse

additional color themes

so there's tons of additional themes

here first i'm going to search for night

owl so night owl by sarah drazner this

is a great theme another one that i like

is cobalt 2 that's by west boss

and then shades of purple this one is by

amadowas

another great one is the coder coder

dark theme and that's by my friend

jessica at codercoder and then my

favorite theme of course is my code

stacker theme

so to install this i just have to hit

enter and it will install and apply this

theme

and we just want to just go ahead and

say yes install

and that's it so now we have a new theme

and there are links to all of these

themes in the description or you can

just search for them right here or from

the extensions panel which we're going

to look at next all right so we're

actually already in the extensions panel

it's right here on the side here and

we're just going to clear out this

search

and so in the extensions panel we're

going to find all of our installed

extensions and then there's a bunch of

popular extensions that we can install

or we can manually search for an

extension in the marketplace

so the first extension that we're going

to look at is live server now this is a

very popular extension with over 17

million downloads this extension sets up

a local web server so that you can see

changes that you make to your code in

real time without having to reload it's

a must have for web development so let's

go ahead and install this

the next extension we're going to look

at is called prettier this extension

helps you to keep your code formatted

and uniform throughout it makes your

code pretty

next we're going to look for

auto rename

ag

whenever you change an html tag it

automatically

renames the corresponding tag so it just

saves you a little bit of time

there's a couple of other things that

you can install to customize vs code

one of them is

icon packs so we're going to look for vs

code

dash icon

i like these icons

so this adds some icons to your files

and folders to make them easily

identifiable

the other thing that we can look for are

product icon packs so the one that i

like is called fluent icon

and so what that does is it changes the

icons on the left side in your sidebar

so i'm going to install that now you can

see that the icons on the left side just

look a little different here's the

default and here are the fluent icons

there are other icon packs that you can

choose from as well

next let's open up a project folder so

there are several ways to go about doing

this from outside of vs code i'm on

windows so depending on the operating

system that you're using it might differ

but i can right click on a folder that i

want to open up in vs code and then

open with vs code

and you'll want to say yes i trust this

author and now you can see that we have

our demo folder opened in vs code we can

close this getting started and the other

way is from inside vs code we can go to

file and then open folder and then again

just pick the folder that you want to

open up in vs code from your operating

system file explorer so now that we have

a project folder open we can now add a

folder structure and some files in a

typical basic website you're going to

have an index.html file a css folder

containing your style sheets and a js

folder containing your javascript files

so let's go ahead and add our index.html

file so we go right here add new file

we're going to name it index.html

so as we create a file it automatically

opens it for us

next let's create a new folder so right

here add new folder we're going to name

this one css

and then inside this folder we're going

to create a new file we're going to name

this

style.css

now we have that file and folder created

now there's a shortcut instead of

creating a folder and a file at the same

time we can just click add file and now

we can create a folder and file at the

same time so we want to create a js

directory and then slash and we'll

create an app.js file so now it creates

the folder and the file for us and again

it opened the file now to switch between

these files we can use control tab or

ctrl shift tab to go forward and

backward between the files if we want to

close a file we can press ctrl w

so let's just close all of these files

a great way to open a file again instead

of using our mouse we can press ctrl p

and then we have our files right here

ready for us and we can just select

which file we want to open and hit enter

if you have a lot of files to search

through just start typing the name of

the file and it's going to pop up now

notice something if i click on app.js

it pops up here and it's italicized and

if i click on style.js it's replaced

right here so this is a preview if you

want to open and keep the file open you

have to either double click the file

and now it will remain open

or edit something inside the file and

now it will remain open as well you'll

notice that none of these are italicized

anymore if you want to change this

functionality we can go to the settings

so control comma

and then let's search for

enable review

so workbench editor enable preview let's

go ahead and uncheck that

and we can close the settings let's

close these files and then let me click

on app and you see this not italicized i

can click on style and it's not

italicized and they

remain open as we click through i prefer

it this way all right next i want to

show you my favorite built-in feature of

vs code and it's called imit now think

of emmitt as shorthand with it you can

easily write a lot of code quickly and

it dramatically speeds up your html and

css workflow here i'm going to

demonstrate creating an html page you

can do this by just pressing exclamation

point you're gonna see emit pop up says

emit abbreviation

so i'm gonna press enter now and there

we have it a basic blank html web page

ready to go if you've never seen html

before and you have no clue what all

this is don't worry i'm just

demonstrating the capabilities of vs

code and imit you don't have to know

exactly what any of this means right now

so other things that we can do we go

down here to the body we start typing we

can create a div by just typing div

enter and that creates a div tag for us

we can automatically start typing inside

this div tag

we can go below that and then let's

create a list so we'll say ul

and we can say greater than li

times 4 so we just created a list with 4

items in it

i could also

create a div with the class of my class

just by typing period my class

and now we have the div with the class

of my class

i can create an input

and i can give it an id

of boo and a class of bar just by typing

this there we go we have our input with

the idn class

if i just type input then we can see in

this pop-up all of the different input

types that we can select from so if i

needed a date input just hit enter and

now i have a date input and within it

you can create a really complex html

structure with one line it's really

awesome and i have an entire video on

emmett if you want to learn more now

somewhat similar to emmett is

intellisense this is another built-in

feature of vs code and it helps you with

context aware suggestions intellisense

features are sometimes called by other

names such as code completion code

assist or code hinting vs code

intellisense is provided for javascript

typescript json html css scss and less

out of the box

vs code supports word-based completions

for any programming language but it can

also be configured to have richer

intellisense by installing a language

extension

so if we go over to extensions and we go

to filter category and then programming

languages

and we're going to see all of these

different programming languages that we

can choose from and these include python

c c plus c sharp java go php ruby and

rust so let's see what intellisense can

do we're going to go to the app.js file

this is a javascript file so we're going

to type document and we can see it's

already starting to help us so let's hit

enter we want document and then we're

going to press period and this is going

to give us a list of suggestions these

are all of the available properties and

methods and functions available to us on

document a no developer can remember

every method function and property

available so intellisense helps us and

allows us to write code much faster

right now when you're writing code you

want as much space as possible right now

i have this very zoomed in so this is

not exactly what it would look like on

your computer but i'm kind of running

out of space here

we can actually get rid of this sidebar

we press ctrl b that's going to close

the sidebar so remember b is for side

bar

and press ctrl b again it will bring it

right back

but if we want to open a specific menu

in the sidebar then those have specific

keyboard shortcuts as well so ctrl shift

e is the explorer control shift f is

this search control shift g is the

source control control shift d is debug

and control shift x is extensions so

ctrl shift e we'll go back to the

explorer

now another awesome feature of vs code

is the ability to split editors so let's

press ctrl b we're going to close the

sidebar and now let's say i want to work

on these side by side so i'll take my

app.js and just move it right over here

and now i can have two files open side

by side

i can also put this down below

horizontally if i wanted to

i guess that might be a little better if

my monitor was vertical but we can put

it wherever we want all right so let's

move this back over here

now there are a bunch of keyboard

shortcuts that will help you to navigate

quickly through your code and manipulate

the text of course you could use the

arrow keys to move around that's pretty

easy but if we hold down the ctrl key

while we move our arrow keys it moves us

one word at a time instead of one

character at a time that makes it a

little bit quicker

let's say we wanted to move this div

down below the ul we could you know use

our mouse and copy it and paste it and

delete it and do all that but just with

our keyboard we can press the alt key

and then the up and down arrows we can

move this line now anywhere we want and

let's say i want to duplicate uh these

allies i wanted to add uh two more

allies so i can press alt shift down

arrow and add as many lis as i want

now maybe i want to

change

all of these divs here to span tags so i

can press ctrl d and it's going to

select the current word that the cursor

is on but if i press ctrl d again i'm

going to select the next occurrence of

that same word and keep pressing it and

select as many as i want now they're all

selected i have multiple cursors going

on here now i can start typing i can say

span so now

all of the divs turned into span now

let's say i want to type into all of

these allies at the same time well if i

click into here i can hold down the alt

key

and i can create multiple cursors

all at the same time then i can type

into all of them and then of course as

in just about every other application if

i did something that i didn't mean to do

i can press ctrl z to undo it alright so

now we're going to talk about the

terminal this is probably the scariest

subject for a lot of people but it's

really not that scary i promise there's

so much that we can do with the terminal

so the easiest way to open the terminal

is by pressing control back tick or if

you have to use the mouse go up here to

terminal and then new terminal

all right so i'm just going to press

ctrl back tick that is the key to the

left of the number one on your keyboard

alright so i again i'm on windows so

this came up to powershell windows has

powershell or the command line and on

windows i actually prefer git bash if

you're on linux or mac os i prefer zsh

if we go up here to the right of this

plus there's a down arrow we can select

powershell command prompt or git bash so

i'm going to select get bash i already

have that installed and if you don't

have get bash installed don't worry i

have an entire video on git where i'll

show you how to get it installed the

link of course is in the description

below so that started a new bash

terminal i want to select my default

terminal so i'm going to go to select

default profile

and i'm going to select git bash as my

default let's go ahead and close out

this powershell we're going to close out

this bash so now when i press ctrl

backtick it's going to automatically

open up a bash terminal for me so again

there's a lot that we can do with the

terminal you're going to have to use it

at some point you can traverse

directories create directories create

files you're going to use it for node.js

and npm you're going to use it for git

version controlling and so many other

things

vs code is a powerful and versatile code

writing application and it can handle

every web development language that you

would want to use so what next if you're

just starting out check out my html css

and javascript crash courses to start

with and i have an entire roadmap that

you can follow and i'll include the link

to that in the description if this video

was helpful help me out by giving it a

like and subscribe if you haven't

already for more videos like this

[Music]

you