YouTube Transcript:
Installing VS Code & How Websites Work | Sigma Web Development Course - Tutorial #1

Skip watching entire videos - get the full transcript, search for keywords, and copy with one click.

AutoDub

Understand YouTube Foreign Videos

Immersive YouTube Voice Translation

Break language barriers, embrace global quality content

Solve Foreign Video Barriers Instantly

Video Transcript

Video Summary

Summary

Core Theme

This video introduces a comprehensive, project-based web development course designed to transform beginners into profitable full-stack developers using modern technologies and practical learning.

Mind Map

Click to expand

Click to explore the full interactive mind map • Zoom, pan, and navigate

From today's video, we will start the Sigma Web Development course.

Like it with high energy, guys.

Because in this video, I am going to make you a profitable web developer from zero.

This course will be very modern because web development has changed over time.

A lot of new things have come.

A lot of things have come in JavaScript that make work very easy.

A lot of technologies have come that will make your work very easy.

This course will be for those people who know nothing.

You know zero if this course is for those who don't know anything about web development.

What we will learn in this course, I will tell you in a while.

Web development is a very profitable thing.

I have personally earned a lot of money through web development.

And I believe that you can also be very successful by learning web development.

During the course, you will be given notes, cheat sheets, references, all these things.

This course is going to be a little different because I will tell you all the technologies that you should learn according to your experience in this course.

And I will make this course a complete course with all the web development technologies.

The course content will be complete web development, front-end, back-end,, database I will teach you as much as you want to learn

I will tell you what exactly course content will be in a while

but you guys have faith that I will make you a full stack developer

you will be given a lot of projects in the course

and at the end of the course we will make some good projects

so that your grip on web development can become very strong

according to me project based learning is the best way to learn.

That's why I will make many projects for you.

And if you agree, then write in the comment section below,

I agree.

Because when you comment, I get a smile on my face.

So do comment.

I want to assure you that after finishing this course,

you will be able to make any kind of website from start to end.

And during this course, i will make many websites

so that your confidence will go up

so lets start with our first video of

sigma web development course

lets roll the intro

alright guys so i have come to my computer screen

and now as i am doing it, you guys follow it as it is, I have downloaded the Google Chrome browser here, you also download the Google Chrome browser, I am not saying that it will not work, but you guys have to do exactly the same as a beginner, what I am doing here, so here we will follow exactly as I am doing it and along with that, as the videos come, you will be able to follow along exactly I will go to google and write download vs code

now what is this vs code

vs code is a source code editor

I am in windows so I will click on windows

if you are in mac, linux or any other operating system

then you can download it for that operating system

and the process will be exactly the same

that in my downloads folder

here is the VS Code

and here you can see

this setup is already downloaded

I will refresh it

and here you can see

the setup of VS Code

I can double click and install it

so simply install VS Code

it is as easy as installing a game

you can read the agreement here

this license applies to

damages and after this I accept

the agreement, I will accept it, you too

read it like me and I am the

fastest reader in the world

....

next we will do

here it is important to check both the icons

checking both the icons is very important, check it is important to check both the icons it is very important to check both the icons

if you want a desktop shortcut

means if you want to get a shortcut in the desktop

then click on create a desktop icon

and then next, then install

if your PC is fast like mine, then it will be this fast

but if your PC is slow then there is no problem

it will be a little slow install, nothing more than this

now here I will recommend you to subscribe to the channel

because these videos I want you to follow exactly

as I put the video, you get the notification

so if you want to follow this course completely

ideally you should subscribe

with that said our VS code has been downloaded

I have opened my VS code

don't be afraid of this beginners

and I am saying this again

if you already know things

we are taking beginner friendly start here in initial videos

but we will raise the bar like anything in the upcoming videos

so stay tuned

okay I will request you guys

that you tell me in the comment section

are you a beginner, advanced or intermediate user tell me in the comment section what is your level? Are you a beginner, advanced or intermediate user?

Tell me in the comment section how much do you know about web development?

Beginner, advanced, intermediate, please.

Do comment on this.

Now, what is VS Code here?

Why did we download it?

Let's understand this.

So if you are a beginner and you don't know what VS Code is,

let me tell you that VS Code is a code editor

which helps you edit code.

Now you will say, Harry, I can edit code in notepad

so yes do it in notepad it will be done

yes I am not saying sarcastically it will be done

here let's set it up and show you what is in it

which makes it a little different from notepad

here see we set it up quickly

I will not browse color themes here

in fact I do it, I keep dark modern here,

my theme and I have done all this, next section,

after this next section, if you want, you can also

close this welcome, but again here are some tips

I am telling you, that's it, your VS code is here

it has started, this is the screen of VS code,

you can see here you can make a new file,

you can make a new folder, but I will recommend you to close it.

Yes, you close it. Now why did you close it? I am going to make a new folder here and I am going to name it

You guessed it right, Sigma Web Development Course.

And we will do everything in this course. We will do everything.

Everything means understand, we will do related to the course, we will not do much.

Now here you will press shift and right click if you are in windows

so you can see here that an option called open with code is coming

this option called open with code helps you to open this particular folder in vs code

now you will select it here, now what you will do here

you will say yes i trust this file, click on it and say yes i trust the authors

and this folder has now opened, that this file and click on yes I trust the authors and this folder is now open

means if I click on plus

to make a new file, suppose I have written

index.html

write it, even if you don't know what I am writing

write it, hit enter

and after this what I will do

I will write here

hey I am your

first html file

suppose I have written this, here you can see this dot

this dot is white in color

this dot means that

you have not saved this file

please save it

if you hit ctrl s it will be saved

I will recommend you

to go to file

and enable auto save option

so as you type

you will not see this dot

your file will be saved instantly

and I also recommend this thing we will not use ctrl s otherwise file will be saved instantly as you type it, and I recommend this thing

we will not use ctrl s, if you want to save it with ctrl s

then you can disable this option, one more thing I want to tell you

click on gear, then click on settings

and search mouse

now you can see editor mouse wheel zoom

check this, what will happen by checking this, I will tell you

just check this and close it in settings

now you don't have to worry about what is vs code, why is it vs code, how is it

what is this, why is this, what is this news, yes but you don't have to see all this

now you will press control and simply

scroll like this, so what happens

that your font size changes, now I will show you a magic

what is magic, it is a very simple logic

that here in downloads, in the folder

named Sigma Web Development Course

what happened is that this file

was made, index.html

which is very natural

so because I have opened this folder in VS Code

this file is also made here

I will make another file here

suppose I make a file named this.txt

and I write this is this so what will happen, this file will be made here too, you can see

so this folder and this VS code are running in sync, okay

now if I open this file from here with notepad

and I show you that my file is opened in notepad

so I can do that too, that is also my choice

but I will not use notepad because there are some things in VS code that notepad does not give me

and I want to get those features

I don't want to overwhelm you but I will show you

what is there in VS Code that you don't get in notepad

If I write here, suppose HTML

If I hit enter, then it automatically gives me the opening and closing tag

If I hit the exclamation mark here, then it gives me a boilerplate template of HTML

If I click on it, then see the basic code of HTML has come here.

We will discuss about it later, now you guys don't get overwhelmed by it at all.

But I just want to tell you that how this VS Code is beneficial.

Why we didn't use notepad, why we used VS Code.

And this feel comes, we are getting such a good feel.

The developer's feel is coming, the hacker's feel is coming.

That feel is also important, that's getting the feel of a hacker, that feel is also important that's why you will get confidence to do coding

now for mac and linux users, I want to comment here

things are going to be exactly similar for you

I am using windows because I have a windows laptop, I can't use 3 laptops

I can't use linux, mac and windows all together

so things will be exactly same for you

in fact I should say things will be similar

things will be very similar, so you guys can follow along

very easily, so don't take tension at all, I will tell you about some extensions

in a while and you will enjoy using those extensions

and you will also say that it is fun, what

thing did you recommend, but I will tell you in a while

and this is criminally underrated, I am telling you that

you will enjoy, before that I am telling you that you will enjoy it

before that I would like to tell you that if you right click on the command palette

then here you will get a lot of options of VS Code

you don't need to know all these options

as we move forward in the course, whatever feature

will come in use as and when

I will keep telling you and you can use it

but now what I will do here is I will toggle on telling you guys and you guys can use it. But what I will do here now is I will toggle a screencast mode.

You don't have to do this, but I will do it.

You will know what will happen if I do it.

I clicked it.

So now see, I will type anything.

If I press the caps lock, then the caps lock will be clicked here.

So you will know which button I pressed when.

Now this thing is not at all relevant for you guys.

But I just want to tell you that the screencast mode

We can change the settings of the screencast mode from here.

Now here you see the vertical offset of the screencast mode.

What does vertical offset mean? If I make the vertical offset 0, then it comes up.

If I make the vertical offset 70, then it comes down.

I will make it 60. If I give space here, it will come here, if I make it 80, it will come here,

that is, from bottom, how much will it look up, so I made it 0, in fact, I made it 1,

now I will type anything here, suppose I have done this, it will be shown at the bottom, which is ideal,

so what I will do is close this this.txt file, close the settings tab, these are tabs basically,

like there are tabs in chrome, These are exactly the same tabs.

I hope you know what it is.

What we have written about it

You will forget. I will tell you step by step

What is exactly what is it?

You can also close the welcome page of VS Code.

By any chance if you want to zoom in on VS Code

Which I will do because I am recording a video

Now add the control plus numpad plus

Look below I have shown you

I am zooming in below i am zooming in

i am zooming in because i am recording videos

ideally i want you to see the screen from close

but when i am coding i don't zoom in much

so these are related to VS code

now i want to tell you how websites work

a website basically works with 3 types of people

imagine 3 people a website basically works through 3 types of people

imagine 3 people, one is client brother, one is server brother

who is client brother, second one is server brother

third one is browser brother

who is also called babu brother

browser brother, so browser brother, client brother

server brother, what is this client, what is this server, what is this browser

I am the client, you, all of us who use a browser, who is the browser, what is this server, what is this browser I am the client, you, all of us

who use a browser, who is the browser?

this is chrome, hello chrome, I am the client

I will say this to the client, when I write codewithharry.com

suppose I write codewithharry.com, so what I basically say

I say to this browser

that please give me codewithharry.com website

or if I writehari.com website or if i write

here youtube.com i say

give me youtube.com website i say

browser give me youtube.com

i want to see youtube, what browser says you want

youtube, take this ok

so here i will enter youtube.com

so it brought youtube.com from the server

are you understanding

it brought youtube.com from the server

and it showed me this screen by parsing

this work was done so fast

because my internet speed is very fast

it is so low nowadays

people's internet speed is also very fast

it is very fast so's speed is also fast, but still according to my locality, it is very fast

so with this fast internet speed

all these things are very fast

so client sends a request to the server

through the browser, the browser

is the client's, that is, my assistant, whatever I say

from the browser, he will do that, he will help me

to bring this webpage from the server

who is managing the server, the server is

being managed by youtube, youtube.com server is being the server? YouTube is managing the server.

And there is some code written in that server

which sends me this kind of code.

When I write youtube.com, this code comes. Now how to convert this code

is the job of the browser.

So client browser says something like this

Hey, give me youtube.com.

Browser says, do you want youtube.com

wait i will ask for youtube.com

then browser goes to

server and makes a request

to give me youtube.com

server will either give it

or say it is not there

or error

or server error

whatever the response will be

ideally it should be 200

With that response,

Our browser comes back to the client

And shows this page. I hope it is clear to you.

Client, Browser, Server

Client to Browser, Browser to Server, Browser to Client

This is how it works. This is a little more important.

When you write google.com

Client asks for google.com

Browser says wait i will get it from server

Browser goes to server and gets google.com

And gives it to you.

Along with google.com

Server sends images, videos

and other things like icons

the URL of these icons

is also written in this code

and that is also the job of the browser

to display it properly

so the server sends a bundle to the browser

and by passing this bundle

and showing it like this

is the job of the browser

now the user who will interact further with this page, the browser will make additional request this is how browser works now further interaction will be done by user

with this page, browser will give additional request

if i right click and inspect and go to network

and i type here harry bhai

so many requests he has sent for images

and many more requests, so as you interact

more requests will be sent to browser

so in total you can consider it as a restaurant

you send a request, and as soon as you send the order

a waiter takes your order

and then the waiter goes to the kitchen and sends your order to the kitchen

consider the kitchen as a server and then finally

when the kitchen gives the order back, what does the waiter do?

who is doing the work of the browser

the waiter saw you

order again, it is possible

that the order is not made in the kitchen for some reason

it happens very less that you order something

and you did not get it, but it happens sometimes

like this, sometimes it happens here too

that you get to see error 404 error

or 500 error, server is not working

error like this, so whenever

you get to see such errors, you are told

but ideally 200 means ok response comes so whenever you get this kind of error you are informed about it

but ideally you get 200 okay response

and you get this kind of webpage

so you can consider it as a restaurant

so whenever you type google.com slash mail, it will show you

and if you type codewithari.com slash contact

it will show you

Whatever server will send, it will show you

So this cycle goes on

Client sent the request

Browser then sent the server

Server then processed the request

After this, the server sent the data back to the browser

And whatever data was sent

Browser showed it to the client

Browser sent the same request to the server Then the client did something and then the server did the same

and then the server sent something

and then the client got the data back

and so on. Now you will say that all this is fine but what is the back end?

what is the back end? The back end is how the server is processing the request

Now if you have a blog

and there is a lot of data in the blog

so what will you do? Will you store every webpage of the blog separately? you have a blog and there is a lot of data in it

so what you will do is you will store every webpage separately

or you will generate the content dynamically

let me take google example

so you can see here

the header, links, format

doesn't change

let's say i here shubham

so as soon as i write shubham

now see

when i wrote harry bhai, google is showing me

Paste YouTube URL

Enter any YouTube video link to get the full transcript

Most transcripts ready in under 5 seconds

Get Our Chrome Extension

Get transcripts instantly without leaving YouTube. Install our Chrome extension for one-click access to any video's transcript directly on the watch page.

Add to Chrome — Free

Works with YouTube, Coursera, Udemy and more educational platforms

Get Instant Transcripts: Just Edit the Domain in Your Address Bar!

YouTube

←

→

↻

https://www.youtube.com/watch?v=UF8uR6Z6KLc

YoutubeToText

←

→

↻

https://youtubetotext.net/watch?v=UF8uR6Z6KLc

YouTube TranscriptPreparing your results…

YouTube Transcript:Installing VS Code & How Websites Work | Sigma Web Development Course - Tutorial #1