Getting Started with Web Dev in 2021 [Web Development Guide]

so how do you get started with web development well first of all getting started with web development is a great idea it is a technology or a set of technologies actually which is growing strongly which is super popular there are tons of jobs out there you can work as a freelancer you can start your own business and of course you can always get employed and web development is needed because everyone every business every product needs a website needs a web service and therefore that's a great decision most importantly though web development also is a very interesting area as you will learn in this video it's not just one thing instead it's the combination of technologies which you can learn all but which you don't have to learn all necessarily and therefore it's exciting to work with it there are a lot of different things to dive into which always keeps things interesting and it's simply fun to work as a web developer because after all you can build things which potentially get visited by millions of users they don't need to download or install anything they just need a browser and therefore it's very rewarding to work as a web developer but that's maybe something you already knew after all you clicked on this video because you want to learn how to become a web developer and therefore that's exactly what we're going to dive into now my name is maximilian schwarzmuller i have taught more than 1 million students in web development i'm working as a web developer since basically forever i would say i started at the age of 13 diving into web development and i just love working with it now to turn you into a web developer you need to know how the web works at least the basics because you can't become a web developer if you don't know that and then once you know that there are multiple paths which you can take multiple routes you can venture down so that you focus on different areas of web development or learn about all of them that's exactly what we're going to have a look at now now when it comes to the basics of how the web works that's something every web developer got to know now as for all the topics covered in this video below the video in the description you find deep dive articles tutorials and courses which you can use to learn more about the different areas so definitely check out those if you're interested also if you like the video please leave a like and consider subscribing that really helps out a lot now coming back to those basics in a nutshell the web works in a very simple way we got a visitor of a website so some user somewhere in the web for example you visiting youtube or anything like that and whenever you visit a website you of course do that by entering the url of that website the address of that website in the browser or of course you use google to find it but in that case google just gives you such a url once you click on the search result now then this address is basically used to look up the server some computer out there in the web which holds the website and that's a key part you have the user the so-called client and then that client uses an address to reach out to a server which holds the actual website so the thing which then is loaded by the browser that reaching out process is called sending a request the client sends a request to the server now on that server on the remote computer somewhere out there you then often have some code that executes their code written by web developers that code might for example reach out to a database to let's say fetch a list of products in case you're visiting amazon.com or a similar page or in the case of youtube it would reach out to a database to fetch some videos that should be displayed to you now of course that process can be very complex for example if there are machine learning algorithms involved which pick the best videos for you but in a nutshell that is what happens on the server so on that computer out there in the web not on the client's computer of course because there we wouldn't have that database with all those products listed on amazon or with all those youtube videos now once the server is done doing its thing once the server prepared the data which might be needed the server sends back a response to the client and that response is essentially the the web page the actual web page which is then displayed by the browser which is that client right the client is basically the visitor of your website using a browser that's a client so that response holds that web page which is being sent back to the client and that is in a nutshell how the web works requests and responses that's super important now if you want to become a web developer you therefore have two main areas where you can write code and where you can work and that's the server side that's that code on the server which runs machine learning algorithms which reaches out to databases prepares data encrypts passwords stuff like that and then it's the actual web page which is being sent back so the thing the browser renders these are the two main parts and we refer to them as backend for the server side code and front-end for that web page which is being sent back to the client front end because it's the the code which is interpreted by the browser and therefore it runs directly on the machine of your users of your visitors unlike the server side code which runs on a remote machine so back in that front end these are the two main areas we got in web development and as a web developer you can learn about both and i would recommend that you at least pick up some basics about both but you can also specialize on either front front-end web development so on building these user interfaces on building what the user actually sees or you specialize on back-end development to focus on that behind-the-scenes logic running on a computer on a remote computer so these are the two ends now no matter which end you want to specialize on as i just said i recommend that if you're getting started you learn about both ends at least the basics so that you get the big picture and so that you can make a real decision on what you want to specialize because if i just tell you you should specialize on front end or on back end you can believe me of course but it's better if you find your own path if you to find out what you like the most and where you want to spend your time on what you want to work so therefore these are the two ends now let's have a closer look at these ends therefore let's start with the front end and especially when you're getting started with web development i would recommend that you start with the front end because that's the thing the users see in the end and it's always more exciting to start with a technology if you can build things which you can immediately see so if you can preview your website as you're building it if you can see some progress if you would start with the backend and the server side code then you would start with code where you don't see that many results because you have no visual output i hope that makes sense now if you want to start with that front end you therefore start with that web page which is being sent back by the server with the response to the client now what is that web page that web page in a nutshell is one thing but typically it's three things okay that's confusing what do i mean well in a nutshell the response sent back which brings something onto the screen holds html code html stands for hypertext markup language and it's the core language the web is all about browsers know how to interpret html and html gives the browser instructions about the content which is part of the response html code looks something like this and there you for example see that we have a header with some navigation items in there that we then get a main section with some titles and some paragraphs and we got all these different so-called html elements in there which are invisible to the user the user would see something like this but which tell the browser which kind of content is stored on this web page it tells the browser that we got a title and a paragraph and that we got navigation items and that for example helps if users visit your website with screen readers or any other assistive technologies and it also helps with search engines and so on now that's the markup language and that's the the heart of web development because this allows you as a web developer to structure your content and to describe your content and send it back to the client to the browser to evaluate and display it but as you can tell it's not displayed in a beautiful way because by default browsers don't add a lot of styling to this markup language after all they can't really know how you as a web developer want your page to look if that title should be purple or red if the navigation bar should have a black background that's something the browser can't know right that's why we typically don't just have html as part of the response but also css code which stands for cascading style sheets and css is another programming language in addition to html which allows you to style your web page the css code looks something like this and it allows you as a developer to add instructions for the browser how certain elements should appear on the loaded web page so you give rendering instructions to the browser and again all that code html and css is executed by the browser it's part of the response received by the browser the browser then picks up that response and does something with it it parses that code and renders it to the screen so that the users of your website the visitors of your website can see that rendered screen and then you have that combination of html and css to structure your content and to describe your content and to then also give it some styling now last but not least there is a third technology which is often used on the front end and that would be javascript javascript is a real programming language which also executes in the browser which allows you as a developer to add some interactivity to your web page for example if you have some overlay dialogs which should open up if you have side drawers which should slide in anything like that interactions like this are triggered with javascript because javascript allows you as a web developer to write logic that runs in the browser so on the loaded web page on the computer of your visitors and it then can still manipulate that loaded web page keep in mind originally some html snapshot was sent from the server to the client if you want to change that html code you either need to send a different request requesting a new html snapshot or you have some client side some browser site javascript code which is able to manipulate the loaded html code upon certain events to for example insert such a modal overlay or anything like that and they offer these three technologies html css and javascript are the heart of web development technically of front-end web development but since every developer should at least know those basics every web developer should know the basics about html css and javascript and since i argued that it's more rewarding to start on the front end than on the back end my clear recommendation if you want to get into web development would be that you start with html css and javascript and as i mentioned if you are serious about that you find links below this video where i get you started with these technologies and where you can learn the very basics with free tutorials and also a couple of paid courses we got now once you have the basics down you will be able to build first user interfaces first websites that can be loaded now you will still need a server to deliver them to your end users getting started on your local system for development is easy though you don't need a complex setup there all you need is some text editor i recommend visual studio code which is a free text editor which is simply more powerful than the default built-in text editor you got in your system it for example has syntax highlighting to make working with code a bit more convenient and to help you spot errors so you need such an editor and then to get started you really just need to create a text file give it a file extension of html and throw your html css and javascript code in there now as you will learn with the resources linked below the video you can also split your code across different files to keep it organized but in a nutshell that is what you need and you can simply test and preview the code by double clicking onto that html file which will then open it up in the browser and give you a preview and that's another advantage of web development getting started with it is super simple you need no expensive hardware no paid software you can just create a text file edit it with a free editor dump in some valid html and css code and preview it by simply double clicking it that's amazing now if you want to deliver it to your end users though to the visitors of your web page then you will need some server at some point of the time some computer out there in the web which is reachable from everyone in the world and your local computer your personal computer should typically not be reachable by everyone in the world that would be a bit insecure so you need a dedicated server for that and that means that you now need to get into hosting your website now there are tons of providers out there which allow you to get started for free which basically give you some shared servers which you share with others where you can upload your code and you get a dedicated ip address you can assign a domain so this user-friendly address and then you can see your web page out there in the web once you did all of that once you cover these basics you can build static websites and that are simply websites that consist of only html css and javascript and which therefore can't really change they don't depend on dynamic data fetched from some database or anything like that they can only change in the browser to show overlaid dialogues but they can't really show dynamic data that's why they're called static because we haven't learned yet how to run code on a server how to reach out to a database and hence that should be your next step if you're getting started with web development you want to pick up a server side language so a different language than html javascript and css because html and css that's not a server-side thing at all when it comes to javascript though you could actually also use javascript on the server that is possible you can use a technology named node.js which is a extra tool you need to install to run javascript code with more features than in the browser for example being able to reach out to databases or to file systems on the server and that is one option you got there other popular server side languages which exist would be php asp.net and also python now which language you want to use that's a different discussion my recommendation is that you get started with javascript and node.js because you already had to learn javascript for the client side anyways so you can reuse that knowledge and build up on that if you then later find out that you prefer python or anything like that you can always switch but to get started i would go with javascript and node.js and pick up some resources there again you find links below the video with node.js you can write server-side javascript code which can access the file system for example to store user uploaded files which can reach out to databases to fetch and store data and where you can run all kinds of more compute intensive tasks which you didn't want to run on the client side or security relevant tasks which you didn't want to run on the client side that's where you need server side languages and with node.js you have a great start into that now the last core piece which you then also always or pretty much always will need is a database because in the end most websites also need to store some persistent data let's say you're allowing users to log into your website you then need to store their email addresses and passwords or if you're building something like amazon you need to store products but you also need to store orders refunds stuff like that and therefore that's the next building block thereafter you should dive into databases and there we got two main systems which are commonly used out there sql or sql and no sql or nosql databases now these are different technologies and i got a comparison video if you want to learn more again it's linked below the video but in a nutshell both are viable to get started both are very popular and mainstream database engines and technologies and you can now learn the query languages for these databases because both sql as well as nosql databases have their own query languages which you need to use to run queries against the database which you need to use to store data or retrieve data from the database and therefore you should either pick sql or nosql my recommendation would probably be nosql because it's a bit easier to get into if you worked with javascript and so on especially mongodb is one of the most popular databases there when it comes to the nosql technology and you can get started with that and then with node.js a nosql database like mongodb html css and javascript you got all the fundamentals you need to build any kind of website and i do mean that with those technologies you can build any kind of website now needless to say that you can always dive deeper learn more specialize in more aspects and of course optimize things and dive into advanced topics and at some point you will need to do that but this video is about getting started with web development and with the path i outlined here you will be able to get started and you will be able to build anything you want so i hope this was helpful i hope this helps you pursue your career as a web developer now as i said if you liked the video please consider clicking that like button it really helps out a lot also subscribe if you want to see more videos and more tutorials check out all our existing tutorials and please also comment and let me know why you want to become a web developer what your goals are if you want to start your own business work as a freelancer get employed by a certain company i'm eager to learn what your goals are and also check out all these other links to then dive into the specific categories i outlined in this video hopefully see you in future videos bye

Channel: Academind

Views: 33,377

Rating: 4.9560199 out of 5

Keywords: web dev 2021, web dev, web development 2021, web development, getting started with web dev, getting started with web development, becoming a web developer, maximilian schwarzmueller, maximilian schwarzmuller, maximilian schwarzmüller, web dev tutorial, web development tutorial, learning web dev

Id: UgBWUt4Y-sY

Length: 20min 56sec (1256 seconds)

Published: Wed Jan 13 2021