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 technologi
es 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 w
e 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 web
sites 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 alo
ng 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 yo
u 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 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 import
ant 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 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 hi okay I will request you guys that you tell me in the comment
section what is your level 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 whi
ch 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 h
ere 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 th
e 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 m
eans 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 s
ee this dot your file will be saved instantly as you type 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 natu
ral because I have opened this folder in VS Code 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 lat
er, 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 ex
actly 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 not exactly same, but in fact I should say things will be similar, not exactly same 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 extensio
ns 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 telli
ng 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 re
cording 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 t
o 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 th
e 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 but still according to my locality 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 f
rom 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 wan
t 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 writ
e google.com So this is how it works. This is 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 i
t 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 so
metimes 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 s
lash contact it will show you and if not available, it will show you If not available, it will show you 404 Or if there is 500 error, it will show you a page with 500 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 Then the client did something Browser sent the same request to t
he 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 wi
ll 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 similar content so what google does, google's server its backend process the data in such a way that it can send this kind of html for corresponding query means when i write shubham, it will send this when i w
rite Harry bhai, it will send this so the process of generating this through which system is happening is the same backend now this backend can be Django this backend can be Flask, this backend can be NodeJS this backend can be PHP this backend can be Ruby on Rails and the database inside the backend is used, i. database inside the backend is used the backend code is not visible to the client this is the frontend code which is sent by the server and how the server made this code we don't know if
you are confused then don't be confused we will see the backend later now we will understand how the frontend works the frontend is. Now the frontend is primarily made up of three languages. HTML, CSS and JavaScript. These are the three languages that are needed if you are making a website. Every website needs HTML, CSS, JavaScript in most of the cases. If you only use HTML, then it becomes a very basic skeleton of the website. After that, when you use CSS you can style it like this button is l
ooking like this so it is only because of CSS along with that this button is looking red here or this button is looking a little curvy all this is happening with the help of CSS the edges you are seeing here all this is happening with the help of CSS so CSS's job is to style a page what color will be the button all these things are done through CSS CSS is the beauty of HTML HTML is the existence of any page this is a standard that has been agreed any website will be made on HTML so that the brow
ser can understand how to parse browser's job how to parse the job of the browser is to parse the HTML and HTML is a skeleton, it is a standard anyone who will make a website in this world will make it in HTML skeleton will use HTML, it is a standard such a standard has been made so that everyone make the same type of pages and if someone is making a browser then the same language has to be parsed if as a beginner you have learned 80% HTML, then you are good to go for web development. Now, some
things happen directly from HTML. Like if I write a very quick HTML code for you, then I am writing HTML code in this way. I have used the emmet abbreviation by hitting the exclamation mark. You guys don't worry at all about how I wrote this code. I will write, hey, this is HTML. And I wrote this code I will write hey this is html and I can directly open this html file and as soon as I open this html file directly here you can see it will open like this, I can open it directly by double clicking
here and it opened, now see hey this is html but it is not styled at all means this html file is very basic now you can directly run videos from HTML. I have an HTML file that I will show you with which you can run videos. I will do one thing, I will change this HTML file so that we can show videos in it. So there is a video tag in HTML. If you hit enter video, then whatever video you put in SRC will be played. Like if I put video 1.mp4 here, you see VS Code has automatically shown put video 1.
mp4 you can see vscode automatically show me video 1.mp4 this is the benefit of using vscode so you can see here i will reload it so i can see video 1.mp4 to play it i have to write controls and i will refresh it so i will get the controls i can play it. This is a plane and it needs a lot of money to be sold. It needs a lot of money. It is asking for 130 crores. Finally. If I put video2.mp4 here I have put video1 here I have two more videos outside I have some more videos here If I put it here a
nd then I refer them If I put video 2.mp4 instead of it, then video 2 will be seen. I will reload and show you. The video you have put, so put Ben Stokes video and show it to people with your own hands. These were Ben Stokes lookalikes, now if I do video 3 here, then my third video will play. So I will reload it, and you can see I can play it. So our third video has started, I have run video 3.mp4 here, so I will close it now, and in the same way we can run video 4 as well. And I have a DJ video
in video 4 in which DJ is playing. So you see this. 🎵 🎵 So, you can make such things only by using HTML. That means you don't have to do anything else. You can play videos and display images, everything is possible with html If you want to style it, for example, I want a border or a red background So what do I have to do for that? For that I have to use CSS CSS adds beauty to any website Then comes JavaScript, which adds interaction to a website For example, what will happen when I click
on search? What will happen when I write code with Harry? Like I wrote code with HR and here autocomplete came. Why did this come? It came because a request went to the server and for this query, the results of autocomplete came here. So all these things happen with JavaScript. We call this client-side scripting means if we want to do scripting in the client want to do coding, only on the client side we can do it with the help of JavaScript, this is also brain so our website is made beauty with
brain I am talking about the website, beauty with brain added beauty from CSS and brain came from JavaScript, now JavaScript helps you guys easily I added beauty from CSS and brain from javascript now javascript helps you to make page dynamic like without loading page if you want to change content then it's all done by javascript there are many mosquitoes here so let me kill them oh my god mosquitoes my racket is working like the video because i eat current snacks for you when i was in college O
h my god Like the video Because I will show you the current When I was in college I was told that I have to learn 100% HTML and 100% CSS Until you learn all the properties But this is wrong Why? Because HTML is only 80% CSS is only 40-60% And JavaScript is only 50-70% of CSS and you can learn only 50-70% of JavaScript you can start web development, you can make projects and you can move forward by making and making ok in this course I will tell you about the impact of chat gpt and web developmen
t so we will also talk about this, you guys stay tuned so never run after perfection, don't think that you will do HTML for 1 year and then CSS for next year and then JavaScript for 3rd year and then projects for 4th year Do HTML 80% CSS 40-60% and JavaScript 50-70% and you can make a great website and as you make websites your experience will teach you more HTML, CSS, JavaScript and you won't even know that you have perfected HTML, CSS, JavaScript while you are making money and working as a pro
fessional web developer so you are earning along with learning and with that you are also improving your skills so don't think that I will make a website only when I remember all the HTML tags I will make a website only if I know all the HTML tags, properties of CSS, JavaScript I will teach you only what matters We are going to learn what matters I don't want you to learn for years That's why I have designed this course in this way So that you can learn only what matters You can learn other thin
gs from practice I am going to teach you a lot of things in this course Here are some mosquitoes to learn the sigma web development course You can learn other things from practice I am going to teach you many things in this course Here are some mosquitoes to learn sigma web development course Our audience is increasing In this course we will learn HTML, CSS, JavaScript I will teach you tricks which you have never heard of I have learned many tricks in my career I will tell you in this course I h
ave learned many in a course, I will tell you here only. I have learned some amazing tricks in my career very late. And I want you to learn all these tricks as soon as you start. Now if you have any doubts in this course, in the coming videos, then you can use the hashtag doubt and ask your doubt. I am going to try to answer all the doubts. I will try, I will try my best to solve your doubts. So if you have any technical question please put hashtag doubt and please don't put hashtag doubt in use
less questions or comments write them without hashtag doubt so that I can prioritize the reply of hashtag doubt comments I will try to answer all the doubts as much as I can and you will learn everything in this course so like this course if you haven't done it yet That will bring a smile on my face Now what is react, next.js, angular So all these front end frameworks Help you to use javascript properly HTML, CSS, Javascript make a website Help in making this process fast How? We will learn this
in this course yes in this course i told you i will make this course for you i will make you from zero to hero in web development tie your seat belt because you have now got the ticket of sigma web development express i want to give you a good analogy to teach html, css and javascript html is just like Car skeleton, then it's painted CSS, and internal engine is in car, then that's JavaScript as an example of a human skeleton is HTML, then skin and everything is CSS and brain is JavaScript which
is nervous system now I will take you to Forbes.com as soon as you go to Forbes You will see a website Forbes.com is a website which uses HTML, CSS and JavaScript Just like any other website If I click on inspect Then you will see the inspect element Now you can see that they have used script in head And to add css they have used link so what i will do is i will remove their css so to remove css i will simply clear all their style tags by using delete key so as soon as i remove all style tags a
nd link tags so as soon as i delete all the style tags and all the link tags as soon as I delete all the style sheets this page looks like this it has only raw html, what should be the size of the image and only raw html is written here which is not styled at all so the condition of Forbes.com is like this without css, it is showing only raw buttons Raw text, Raw links And similarly, by removing the script tag I can see how the website will look without JavaScript Now if I delete the HTML tag of
this page Like this, I have deleted the head and everything So it becomes a blank page So this is the role of HTML, CSS and JavaScript in making a web page. For your information, I would like to tell you this course was initially made to be paid. But I changed my mood and converted it into a free course. And I thought I would put it on YouTube. So I want all of you to be serious. Many people have reached out to me to launch this course as a paid course. There were many big companies. But I was
getting a voice from my heart that this course should free to launch. but as you earn crores in the coming time, you will give me tea, coffee, parties and all the gifts this is our agreement in this video so when you start earning crores, lakhs after this course, then send me a green leaf or maybe a red leaf but you have to do this only when you start earning well so just keeping you aside, in the next video I will tell you how you can earn money by completing this course. I will put light on th
is because this is also important, how to get a job, how to earn money, that's also important. Personally, how I do freelancing, how clients come, I will tell you everything A to Z in this course. I want to tell you some action items, the first action item is that you have to access the playlist of this course, which I will give you in the description. Everyone bookmark that playlist. Click on the star button to open the playlist. Click on the star button to bookmark. Click on the save button to
save the playlist. Many of you have said that the course is paid. We will buy it then too. Thank you so much for all the support. Whatever you show me love and trust, it gives me courage. But this course is going to be free. There should be no technical issues. I am putting all if you guys are aware of this but this course is free Now, there should be no technical issues I am putting these videos in 1080p resolution So you guys should see it clearly But many people say that the video is in HD 2
40p, 144p, you guys watch Bali ka Vadhu You finish your mobile's internet by watching Bali ka Vadhu And then you say that your videos are not HD Call some municipality so i hope you understood the request in this video what is response, how these websites work we got a basic idea that how client-server interaction works in the coming videos we will see how the website is made we are going to make our first website in the next video so you should have a lot of excitement because in the next video
our first website is going to make our first website in the next video So you should be very excited Because in the next video, our first website is going to be made And it is possible that many of you will have that first website So access the playlist Thank you so much guys for watching this video And I will see you next time Thanks for watching!
Comments