This content is an introductory lesson for a free web development course, focusing on setting up the development environment, understanding fundamental web technologies (HTML, CSS, JavaScript), and introducing practical tools and career opportunities in web development.
Mind Map
Click to expand
Click to explore the full interactive mind map • Zoom, pan, and navigate
In the last video, you guys gave a lot of love.
It's my pleasure to keep this course free.
A like is needed for this free course.
You know, when I started web development,
there was no comprehensive course of this quality.
Forget free or paid, there was no such course.
So I can understand how important it is for some people to be free of this course.
And trust me, I live up to the expectations.
With that said, like this video
because in this video, we are going to make our first website.
And in this video, I am going to order an iPhone 15 Pro Max.
Why? How? What will happen? We will see that in the video.
For many of you, this will be the first website of your life.
So it's going to be fun.
You guys are excited, right?
Write in the comment, I am excited.
And whatever I am excited will write in the comment, I will give heart to all those comments.
In this video, we will learn to link an HTML website with CSS and JavaScript.
Along with that, in this video, I will be giving you notes, cheat sheets and many other resources.
I will tell you some techniques that I have learned in years and will make your web development speed 10x.
In this video, we will also see how to make your VS code awesome.
Your VS code screen will look killer
In this video, I will also tell you how to earn money from web development
So let's start with full energy
Let's roll the intro
Alright guys, so we have come to our computer screen and before moving forward in the video, I would like to tell you all that you must access this playlist. Secondly, we are very close to 5 billion subscribers, so if you have not hit the subscribe button, then do it.
In today's video, we are is to customize our VS Code.
So this is the folder in which we started our web development series.
Now I have to give you the source code of this web development series, so I will configure Git here.
Now it is not necessary for you to know about Git, but I will fire the desktop and add a new repository.
I will click on add and click on create new repository.
I will name it as Sigma web dev course.
I will select this folder and initialize this repository with greed me.
I will write source code for sigma web development course.
I will click on create repository.
By doing this, a repository will be created here
whose name is sigma web dev course
I will put all the things that were relevant from the first video
These two files were relevant from the first video
I will name it video 1
Right click new folder
I will make a video 1 here
And I will move these two files to the video 1 folder
I am not pushing this video on git,
these are sample videos, you can use your sample videos.
So now whatever the source code will be, I will keep updating it here,
and I will keep pushing it on git here.
Now how do you push it on git here?
You don't need to learn this,
but this procedure is very simple.
Why do you use git?
I would like to tell you that
the git is used by web developers,
or general coders use it when they have to collaborate their code with other people.
So what will happen is that you will work with many programmers
and those programmers will collaborate with your source code
and to do this kind of collaboration, they will also push some code,
you will also push some code, maybe one person is editing a file,
another person is editing another file
so here github comes in use
and what is github desktop?
github desktop is a utility to use git
the difference between git and github is
git is open source
but github is a microsoft owned company
which by using git
helps you to host repositories on your web interface
I will tell you more about git in the coming videos
but I am pushing this repository on my code with harry github account
so you will get the link of the repository in the description
so as I will give you links
if you follow that then you will get all the code
and I will talk about it later
I am making this video, the course in fact
in such a way that absolute beginners can follow it
so as I click on the published repository,
this code, this folder will sync with my github account.
So all the code that I am going to upload here,
it will go to my github account and it will keep syncing.
The changes that will be here will be there.
If someone has made changes there, I can pull it here.
I can pull it by clicking here by fetch origin.
I will teach you all this.
We will dedicate a whole video to git. You don't take tension at all. I did this thing so that I can give by fetch origin I will teach you all this I will dedicate a whole video to git You don't take tension at all
I did this thing so that I can give you code
Now I will make a folder named video2
And I will go inside this video2 folder
I will press shift right click
And I will open with vs code
So here is open with code
You will get this option
If you guys have installed the way I told you
vs code
If you have made some changes
And you have not checked
That checkbox which I showed you then you can have a problem.
So we will do it, we will dismiss the notification.
Now whatever file I will make here,
like I will make index.html here,
that file will be made here too.
So everyone knows about this now.
I know there are a lot of intermediate people here
who are saying that we already know all these things,
but I am making this course according to this
that all beginners can follow along.
So I will make three files here, one I made here index.html, the second file I am going to make is style.css, and the third file I am going to make is script.js.
And the name of these files can be anything, but I just want to keep these files self-explanatory, that by looking at their name, we can know what they are doing index.html, html file, script.js, javascript file, style.css
there is a style sheet, so I have made these three files here
I will go to index.html and put an exclamation mark
and as soon as I put an exclamation mark
you see this code has come here
I will click on view word wrap so that you can see this code
the horizontal scroll bar moves away from the word wrap
I checked the word wrap here
so now you guys see
we will understand it, but for now you understand that this code is
HTML code, we use it to make a website
now come to the tab of VS Code extensions
extensions are used to enhance the functionality of VS Code
we use extensions
to make VS Code better
extensions of VS Code make us write code
so which extension we will use
first of all i will put some extensions
which will make our VS Code killer
if your friends see this they will say
hacker, hacker
so what i will do here
there is an extension called vs code icons
which i will install
you will get to know
that whatever file it is
you can see the icons
here
i will activate it and you can see these icons clearly thanks for installing VS Code icons here i will activate it
and here you can see
that our icons are looking good
in the coming time if we make a folder
then this kind of icon will come
so these icons look good
and here there are many good themes
which you can use
there are some themes jellyfish theme
there is one github theme
there are many themes
you can use these themes but
I can use only one theme at a time, this is default vs code theme
which shows you vs code like this
now if I change my theme
then my vs code will look different, I will show you
which one I will prefer when it comes to theme
first I will show you github theme so g it comes to theme I will first show you the getup theme
how it looks like, so getup theme is officially
a theme provided by getup, now see here
getup dark, getup light, getup dimmed
getup colorblind, I like this one better
because the colors in it
sorry I don't like this one, I will choose getup dark
because the colors here are different sorry i dont have this one i will choose getup dark
because the colors are different
another theme is jellyfish
and many people like jellyfish theme
if i install this you can see the VS code
after this there is material theme
and that is also popular
if i use material theme here material theme and material theme icons, we had to install this material theme
if you have installed material theme icons, then you can change your icons
which extension to control and here we have installed many extensions
I will also tell you how to delete extensions
here I am showing the material theme icons in this way
if I want the material theme icon are shown in this way and if you want you can use VS Code icons if I want material theme icons to be removed
then I will simply remove it
and all my extensions are visible here
like material theme icon
and I want to use this one
so I will select it
and if I want I can uninstall it
and sometimes when we uninstall anything
then reload is required
so I have to click on reload required.
And when I click on reload required,
then my VS Code will be reloaded.
So you can customize your VS Code as per your liking.
I will select my VS Code icons here.
I will select it as VS Code icons,
so that my icons look like this. I like this a little.
I also like the jellyfish theme a lot.
After this, there is another extension whose name is Prettier.
I will not install it either. but I just want to tell you.
There is another extension, ES7, when we react, you will know.
And yes, we will react in this course. For all those asking.
Sorry for the spoilers, but we are going to react in this course.
So here is ES7 plus React Redux, React Native Snippets.
This extension gives you React snippets.
We will use it when we react.
We will not install it for now.
But now the most important extension is
We will install this extension called Live Preview.
Because this is a very useful extension.
All the extensions I have told you mostly help you
to change the look and feel of VS Code.
But the extension I am telling you today, Live Preview
will be used by you. Let's come to our HTML, CSS, JavaScript files. to change the look and feel of the website but the extension i am telling you live preview, you will actually use it
let's come to our html, css and javascript
files, so here are our html, css
and javascript files
this is html file, this is some code
which tells the website
how to look
so here i am saying
document should be there in the title
i will write here harry bhai's first website
course's first website
Harry's first website will be a lie
Your first website, you guys have to write your name in it
Whatever your name is, first website
And if I write inside the body
Hey this is my first website
And everyone write congratulations in the comment below
Everyone who has this first website
Write congratulations, congratulations For my first website, okay And congratulate each other, make the environment and everyone write congratulations in the comment section everyone who has this website write congratulations
and congratulate each other
make a good atmosphere in the comment section
i also come in the comment section
and i give you all my heart
now
how to see this
so there are two ways to see
we have installed the extension
live server earlier live server was also working There are two ways to see it. The extension we have installed, Live Preview.
Before it was also available.
But Microsoft has released it.
So I will recommend this.
It is also available.
But I am not going to use it.
After installing live preview,
You can see this icon.
Click on it.
Now you can see your website.
You can see your website. Because my website will be like this now you say that i want to see this website here
because my website will be seen in browser
so if you want to see this in browser, click here
open in browser, it will open in browser
and one more thing, you can close it and write
harry bhai's course is good
assume you have written it, i am praising my course
but yes, har is a good course
I have written here
and you have noticed one thing
I have not reloaded this website
but still it has updated the content
which I have written in this VS code
which means whatever I will write here
will be updated here without reloading it will be updated
will it be or not?
clap for us
ok it will be done
and here
hey this is my first website
harry bhai's course is good
now i will write here
sigma harry bhai's course is good
ok so here you have seen
how this extension will help us
if you reload it, it will not make any difference because it is being reloaded live
so there are two things, sometimes we want that
our page is our preview here only
I will close it so that you can see the code wide
sometimes we want that our code is
we can see it here only because we want to see its code here Because we want to see
Its live preview. So let's say I'm writing anything
Harry's course is good and this is sigma course
And let's say I write something else here. I can write a lot of things here
So I will write here and I will keep watching here and I can make it small and big
Something like this. So I will see the live update here
My old videos, if you have ever seen it, then I
I used this extension of live server.
Either this extension was not there
or I didn't know. Whatever it is, it is.
Now if something new comes, it takes time to find out.
But this is something that you should use.
Because I use AEC in my daily life.
I do web development.
Many people asked
that do you also do web development or just teach?
I do it too. I make websites.
I not only make videos, I make websites, not only videos
I also work by making websites
and yes I earn money by making websites
Now all this code that I am writing, you will get it on github
So you can go to the description of any video
You will get the code of that corresponding video
You don't have to take that tension
Now I will close this because my preview is visible here.
Now consider HTML, CSS, JavaScript, which we talked about.
About which we talked so much in the last video.
Now I will tell you how to link all three.
Now you will say that yes, you have made index.html.
Very good, the title is also visible here.
See here, the first website of the Harry's course.
Suppose I change its name to Sigma web development course so it will change
Sigma web development
here it is written as Sigma web development course
and you can see here
that it is updated
so it will keep getting updated
it will be live updated
now I want my background to be red
ok
such things are done with CSS
so I can write here
body and background color becomes red So this type of work is done with CSS
So I can write here body and background color red
So this is the syntax of CSS
I will teach you CSS in such a way that you will not be able to forget it
Don't take tension, what is written here is CSS which makes the body color red
And here you see
Will the color of the body be red or not?
Now I will tell the beginners that it will not be red.
Why it will not be red? Beginners will think it will be red. But it will not be.
There is not such a good world. This HTML file is running now.
He does not know about this CSS file.
Now what is going on in my house, what does my neighbor know?
Now suppose I made lentils here. And I expect
Suppose my neighbor has made rice. And suppose I expect
that I eat it together. It does't happen, you can eat it sometimes
but you are getting what i am saying
so you have to link it
you have to tell your neighbor that i am making dal and you are eating rice
there will be a handshake, so how will that handshake happen
in html you will tell where is your css file
so there is a link tag and the reason for not using notepad
you will get to know here, as soon as I write link here
see here link colon css as soon as I select it
see here it has done half of my work
write rel is equal to style sheet
I had to type this manually in notepad
this is the syntax of html
I had to write this but here automatically
it has come
now style.css is my luck
its name is also style.css
of the file and here also style.css is given if its name was harry.css then I would have written harry.css is my luck, it's name is also style.css, it's file name and here also style.css is given.
If it's name was harry.css, then I would have written harry.css here.
And guess what?
Now my background has become red here.
Now if I want the color of my text to be white,
then I can make the color of the text white here,
I can write color white here.
Now nothing will work here, I wrote color white,
so see it became white.
The valid css syntax will work and we will talk about it later
so this is working
now how will javascript work
if i write here alert
and i write here
welcome to sigma
web development course
suppose i wrote here
welcome to sigma web development course
so what will happen, will alert come here?
why not?
I'll tell you that this syntax is absolutely correct
and I'll read javascript properly
so don't worry about this
the code is welcome to sigma web development course
why didn't it flash?
is my computer broken?
no, my computer broken? No, my computer is absolutely fine I want to tell you that I have to include the script
And let's include the script from the body
just before
Now here as soon as I include the script
I will write in src
script.js how did I write this?
First of all I wrote script here
Emmet abbreviation
What is Emmet?
Emmet is a plugin which is built in VS Code
as you select it
it will be auto completed
if I am writing a script and selecting colon src
it means I want to give a source file
you can type it manually
but the suggestions here
make your code writing
more powerful
and increase your power stronger make you a great developer
and increase your powers so that you can't get into trouble
and as a developer you can be self-sufficient
as soon as possible
you can see here, i have included it
now i will come here, so you see here
welcome to sigma web development course, everyone write in the comment that i have become self-sufficient
write it, because i know that your soul has been satisfied
By seeing this box that javascript
Also run, css was running
Javascript also run, now your soul is satisfied
I will reload it, it will come again, I will do ok, it will stop
So as soon as I visit this website
I will get to see an alert here
This is called an alert in javascript
I will tell you what happens next in javascript
Don't want to start weirdly, I will finish the html Then css then javascript Don't say you didn't tell the alert Don't start it weirdly
I will finish HTML and then CSS and then Javascript
So don't worry
And the best practices
I am telling you
You have to remember them
Because what I am telling you
Is from my experience
Like I said live server
You can use it if you want
Nothing wrong in that Now Use the live preview from Microsoft.
Awesome.
Now I want you to write Sigma batch OP in the comments.
If you are enjoying the course, write Sigma batch OP in the comments.
It will be fun to see.
Yes, it's a batch.
It's a free course, so what?
It's a batch.
So write Sigma course OP with a hashtag.
Now a lot of people commented in the last video
on how to do the mouse wheel.
So you have to go to settings
and write mouse wheel
and here you have to check editor mouse wheel zoom
then you have to press ctrl
and then mouse wheel
i have pressed ctrl here and as soon as i do this
i will be able to zoom in
and if i right click and do command palette
then i can toggle screen cast mode
and whatever i write here
you will be able to see i have not toggled screen cast mode and you can see what I am writing
I have not toggled the screen cast mode in this video
because you already know what I am typing
so I can toggle the screen cast mode
in the last video we talked about
how websites work
and you understood this very well
now I will take the example of iphone 15 pro max
and i will show you how
client server interaction will be
whenever a user
orders an iphone
so you will find it interesting
i will show you
so guys how does the website work
i have come to explain on apple.com
data must have come from explain this on apple.com Now see apple.com is a website Data must have come from their server
Till here
Whatever html files are there
I will click on preorder
And after this
When I am recording, it has not even come
He is saying that it will come by September
I will select 15 pro max
Let's take any color
Let's take black titanium
Let's take 250 GB No Apple coverage Colour, black titanium, 2 wefts, no trade in, no apple coverage
After this, you can see that the communication is going on with their servers
So in total, the HTML, CSS, JavaScript
You can see that I have sourced the view page
So I can see it like this
And this is our original website
On which we were working
Now I will check out quickly here.
I will do continuous guest.
I will show you a fun thing.
As soon as I click on inspect and click on network,
you see 2 and 4 communication is going on with Apple servers.
Which means that here, as I am doing action here,
JavaScript is communicating to the server.
And there appropriate action server is taking and sending me data.
I will say here I would like to be delivered,
continue shipping address, I will put the name etc.
Will deliver on 19th October, shipping date,
if it comes I will tell you, I will keep you in the update, okay?
Yes, everything is fine, terms and conditions,
I read it, I agree, place your order.
I agreed, place your order.
Like the video because I also order iPhones to explain web development to you.
Here we have OTP. I will confirm OTP.
And my purchase has been done here.
In total, I requested something from the Apple.com server.
I said, give me an iPhone 15 Pro Max.
Apple.com said, take it.
So this kind of communication between the server and the client
This is done through JavaScript without loading the page
Like you saw I selected iPhone here
After that I clicked different things
So all those things are done through JavaScript
How is the styling done?
With the help of CSS
And all that is written is HTML
I hope you you remember this example
and i will show you when i get the phone
or else many people will say that it's fake
so this is how your websites work
i hope you understood from this example
tell me in the comment section
if i want to give away this iphone
so what will be the best thing You can also know that I have done a genuine giveaway
And I can also give away
You tell me in the comment section
I don't know about all this
Now I want to tell you
Where you will get notes and cheat sheets
If you go to codewithali.com
You will get to see notes
And you can download notes
With that
You will get also see cheat sheets
for example if i want to access html cheat sheet
so i can access cheat sheet here
there are all the elements here
but i will tell you about all the elements in this course
and if you want to download notes from html
so you can download pdf notes from here
i have written handwritten, you will enjoy reading it
I will tell you everything in this course
but if you download these notes, you will enjoy it more
I will make your learning experience so good that you will say that it was fun
now I want you all to do one thing
put the initial review of this course in this first video
I want you all to go to this video
and in this video and in the comment section
post the initial review
I want you to write in the comment section
how you liked this course and give me 5 stars
tell me by rating it
I know the course is not that good
but what quality and all that
I will be happy if you do this work, I will like it from the heart
Go to the first video and rate this course
Now we will talk
After doing this course
How can you earn money
So the first way to earn money from web development
It is very simple, you do freelance
Freelance as a web developer, you make websites
There are many websites that you
You can make and make them
You will get a lot of money by making them
Many people integrate APIs
And by integrating APIs, many people earn a lot of money
Many people say that chat gpt has come
Now chat gpt has come, then nothing will happen
Everything is done in chat gpt, but this is not true
Making a website for you is easier for me
And when you use chat gpt
Then you become a giga chat developer
so use chat gpt
as much as you can and you
can save your time, infact
i am telling you the truth, since chat gpt came
i am able to deliver more to my freelancing clients
all the websites i had to make
from the start, i do half
of the work with chat gpt and that work
which chat gpt is not can't do, I do it
I finally package it and give it to you and I don't have to answer anyone
that what did I use chat gpt, what did I do without chat gpt
you can easily deliver everything
use chat gpt, chat gpt can't do everything
you have to use chat gpt and
after that make a website and deliver it to the freelance client
where will you get freelancing clients, you can go to a website and deliver it to the freelance client. Where will you get freelancing clients?
You can go to a website like Fiverr. Yes, I know that it is a little difficult to get work on Fiverr.
But you can go here to the buyer request.
Fiverr has an option for a buyer request. Just search.
Now if you go here, you can match with the buyer.
If I show you images, then here is a buyer request.
You can give your pitch to these people that I have done this thing
and I am apt to do this work.
You will get work and it will start from here.
As you get good reviews on your gig, you will earn more money.
Suppose you have a gig of 5 star, no one has ever ordered on it, then you will never get work easily.
But if 5-6 people have ordered on your gig and everyone has given gave you 5 stars then things become easy for you
because buyers want the credibility of the people they are getting work from to be good
so that they also need work
and they are also giving money so they also want their money not to be wasted
so here Fiverr, Upwork and many other freelancing websites are there on which you can try
but before trying you should know how to make good websites
and today's date responsive, cutting edge
Using technologies, suppose you want to integrate
ChargeGPT API, you will get this kind of work, no one will tell you
Make me a design, make you a simple navbar
I am saying most of the clients do not do this work
Nowadays everyone does chargeGPT, you can make complex websites
You can earn more money
Then the second thing is get a job as a web developer
If you get a job as a web developer
If you become a good web developer, you will get a job
And it's not that the jobs have decreased
In fact, the demand for senior developers is increasing
And their backers are also increasing
People are earning more money in coding than they used to
If you are a very basic developer, then yes, you will be replaced by chatgpt
After this, you can sell your services by creating an Instagram account.
If you upload any kind of images on your Instagram account,
and if you take a little bit of traction,
where you talk about websites,
then clients start approaching you.
Many clients approach me,
who tell me that I want to make a website.
I am not saying that you should have a lot of followers.
You can start with very less following
after this you can give people
one to one help, you can get this from
clients Instagram or from social media
you can say at the end of your reel
that if you want to learn anything then you
come to my DM, I will tell you
and you get clients very easily
trust me if you find it useful
after this you can sell a course
which I was going can sell the course.
I was going to sell this course, I have uploaded it for free.
But this course was going to be paid for you.
The truth is that whenever you get paid for this course,
everyone would definitely pay for this course.
Now it is not necessary that you have to make a course for web development.
There are many things in web development.
Like how to use chat gpt api Make a course for that
If you want to make a website
Then it will be easy to sell it
Course economy is very huge
Many people contacted me to buy this course
That I should launch this course on their platform
As a paid course
But I didn't do it because I wanted to give this course for free
I decided
I also posted
Till last moment people contacted me
Please don't put the course for free but I did
So you have to write sigma batch op in the comment section and like it
Now in total, by uploading this course for free, many course sellers have been harmed
Because when you get iPhone 15, 16, 19 pro max for free
Then who will ask blackberry
That too paid blackberry
And I am saying this because I have put a I have put in this and how much experience I have put in it.
You will also know in the coming videos.
So stay tuned, you will get a lot of things in this course in the coming videos.
I am aware of the fact that we are taking a very slow start, but remember my words.
We will raise the bar like anything.
So access the playlist, like the video, name your village land in my name.
Thank you so much guys for watching this video and I will see you next time. you
Click on any text or timestamp to jump to that moment in the video
Share:
Most transcripts ready in under 5 seconds
One-Click Copy125+ LanguagesSearch ContentJump to Timestamps
Paste YouTube URL
Enter any YouTube video link to get the full transcript
Transcript Extraction Form
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.
