Web Development Roadmap 2020 [Learning Path] - Start Coding at Home!

Key Takeaways

hello everyone and welcome to another JavaScript master video how can I start learning web development is it easy where can I find learning resources these are the questions that appear in every beginner's mind in this video I will give you an answer to all of them as well as provide you with the best resources to learn web development on your own [Music] as I mentioned by the end of this video you're going to know exactly what is needed to be a good developer will firstly go over all the necessary tools and software to start coding we only need a few things first one is a browser many developers use google chrome and they prefer it because it has some awesome built-in features for web developers it has chrome developer tools browser you most likely already have if you have another browser you can switch to google chrome or you can just stay with your old browser the second program that we need is a code editor I highly recommend Visual Studio code many developers use it nowadays and it is extremely popular the third thing that you may need not now necessarily as version control version control like get and github there are many differences between them allow you to basically keep different versions of your code at certain points in time for example if you're working on a longer project that takes you for example two three weeks maybe months even when you add a new feature you're going to want to save the program at that point in time so that may be in later if you do something wrong you can revert to that point in time that is what version control is for you do not need it at the start but later you're definitely going to need it regardless of the pad that you choose and more on that later in this video now HTML stands for hypertext markup language and it is the most basic building block of the web hypertext refers to links that connect webpages to one another either within a single page or between websites HTML uses so-called markup to annotate text images and other content to display in a web browser in other words you have access to elements or tags such as head title body header footer and so on and it's hard hTML is a fairly simple language made up of elements which can be applied to certain text to give them different meaning in a document or a website with HTML you can define a structure of a web page for example you can add a header you can separate the page into three different columns of content you can add a navigation menu and so on you can also embed content such as images and videos into the page to conclude to build websites you should know about HTML it is the fundamental technology used to define the structure of a web page HTML is used to specify whether your web page content should be recognized as a paragraph list heading link image or any other available element you can right now click on any element on this page in the YouTube and choose inspect elements so just right click and then inspect element to open up your browser's developer tools and it will show you the current structure of the page that you're looking at now that you can see this are you looking forward to learning it the second stage of your learning are the basics of CSS CSS stands for cascading style sheets and it is the frist technology that you should start learning after HTML while hTML is used to define the structure and semantics of your content CSS is used to style it and lay it out for example you can use CSS to alter the font color size and spacing of your content split it into multiple columns or even add some animations you should first learn the basics of how it works what the syntax looks like and how you can start using it to add styling 2d HTML CSS is the first technology you should start learning with the HTML as you can see right here you can practice it simultaneously with HTML you can do them both at the same time moving back and forth between the topics for example you can create a div or you can create a navigation bar and then simply add some styling with the CSS to it and make it look nice right here you can see some of the HTML beginner and CSS beginner topics that you should learn while learning HTML and CSS of course so first you can start by learning HTML structure this is the basic structure of any web page at the top we have the doctype then we have the head element and then the body element and then you can learn how we put elements inside one another to make sense next on we have the HTML tags as I mentioned there are some tags like head body div we have h1 we have different headings different paragraphs many different tags you can learn them all basically the second thing that I would like you to learn is the HTML tags as I mentioned before there are many different HTML tags some of them are head body then we have the dips for different divisions we have also headings so h1 h2 h3 some paragraphs images videos many different tags some of the tags request mandatory attributes for example if you want to display an image you can use an image tag but then you need to provide it an attribute called SRC or source inside of that attribute you need to put the link of the image so that it properly displays on the webpage there are many different attributes that correspond to many different tags so you can learn that as well next you can move on to some CSS I would dare to say that the CSS box model is the most important concept of all the CSS we have padding margin and then just some width and height of the element so you can learn that first you can just Google CSS box model or I can also leave your links in the description then we can learn positioning so what are the different ways that you can position elements on the website and the third most important thing which is a bit more advanced right here but also I would consider it a basic nowadays is that you need to make your webpages responsive what does that mean basically nowadays people use tablets phones laptops 4k monitors or full HD monitors you need to make your website look nice on all different displays and this is where the media queries come in handy once you learn HTML and CSS that you're able to create a simple web page then you can move on to the next stage the next stage is also the hardest stage of learning web development it is JavaScript most people say that they can even understand JavaScript up to some point but they simply cannot read create what they can see on the tutorials and this is where the real problem lies also there's so many frameworks and libraries we are going to explain that later when it comes to JavaScript and maybe many people just lose the track when it comes to learning JavaScript it is the real programming language of the web HTML and CSS will just markdown languages you write something that simply makes sense to the web but javascript is a real programming language so why should you learn JavaScript well more and more of the logic is making its way to the client-side in order to facilitate lightning-fast user experiences the second reason is that the JavaScript is everywhere the second reason is that javascript is everywhere it is even moving to the server side right now with the framework called nodejs we are going to learn that in a moment and the third reason is that javascript is well fun with JavaScript you can create some useful tasks that your webpage elements will do the real power of javascript actually lies when you start adding to it and when you start learning some of the most advanced things so in here I would recommend that we first start with the easy ones we first need to know what variables are variables like in general sense and variables in JavaScript how we can declare them how we can use them what are some different ways of declaring them then we need to know about data types which data types exist in JavaScript how we can use them how do they behave when we add them or try to add some different data types one to another then we need to know some basic operators their assignment operators there is equality operators and many different operators you can just brush through them just by googling operators in JavaScript the third thing that we need to know is Dom document object model and the events of the Dom this is the first thing we're actually seeing the interaction of JavaScript in the browser so you can just choose some elements explore it and then play with the browser with the HTML and CSS you created you can now add the JavaScript the fourth thing are functions functions are like the main building block of JavaScript functions at the most basic level is just some block of code that can take in some input and then modify it and return some output we're going to be using functions a lot to our JavaScript career also with the functions we can add the objects you can learn what objects are how to define them how to structure them what can go inside them and how we can actually retrieve elements from the object this sex thing regarding JavaScript is logic and control flow so in here I'm talking about basic programming language skills so how we do some if statements switch statements loops while loop for loop function objects how we declare variables and stuff like that you need to learn how does the language work and after all of that we can move on to the fourth stage now you know that the main fundamentals of the web are HTML CSS and JavaScript now you'll learn the basics but I would I would say before moving to some of the frameworks that we are going to see right now I want you to master the fundamentals now you know that HTML and CSS and JavaScript are the fundamentals of the web everything else that you will learn will be based off of one of these three topics now is the time to learn by building projects build one two three five or even ten different pot projects based on the technologies that you know HTML CSS and JavaScript this is the perfect stage in which you can learn by building projects projects can be landing pages for some imaginary companies you can even copy the style and look of the pages of the popular companies now you can create portfolios portfolio for yourself photography portfolio and you can also create hobby projects for example if you are playing soccer or any other sport you can create a score counter or anything like that when you master these fundamentals then I would suggest to move on to frameworks because then they're going to make much more sense and here we are with advanced topics so what do I want you to learn with the advanced topics CSS has new features of flexbox and grid which allow you to style and structure your webpage more easily now is also the time where version control comes in you're going to be building projects so you need to know how to do version control also here's the deployment once you create some projects and maybe when you create your own portfolio you will want to deploy your projects what does to deploy mean it means that you're actually going to put your projects on the web you're going to have an active link and anyone with an internet connection will be able to access your real projects and this is also the time when we want to expand our JavaScript skills now I'm talking about real programming skills the one that you're going to use in real complex web applications first array and object methods you need to know how arrays in a Java Script behave how we can manipulate them what are some of the built-in methods that we can call on them how can we filter some of the values from an array how can we loop through it how can we extract on with some values and stuff like that when it comes to the objects you need to know how to the structure the object how to for example take only keys or only values from an object enter into array and so on in here you can also learn about classes because classes in JavaScript are well nothing more than objects now it's also the time to play with a synchronous j/s a synchronous j/s is closely connected to the API data fetching so what those two things mean now when you start creating projects you can also use different api's API stands for application programming interface basically it is a simple database that some other company created you can search for fun API projects to do so you can actually fetch real data coming from a certain API I have already created a few videos that contain API data fetching on this channel for example YouTube has its own API you can create your own YouTube clone application just using their API and then you can simply display their videos also there's some API is for currencies so you can just create a currency exchange calculator using their API as synchronous J's in simplest terms means that the JavaScript isn't going to be executed in a linear fashion it is going to be a sink meaning some code is going to need some time to be done to be executed and then we can do something else so that means that you need to learn JavaScript promises and async await as I mentioned HTML CSS and JavaScript are the main building blocks of the web I put this meme on the left side just to give you some introduction to frameworks the HTML doesn't need to load J's and CSS if the HTML and CSS are in J s this may seem mind-blowing at first but this is exactly what a front-end library are react does so now we can move on to frameworks now that you know the fundamentals of the web I'm getting kinda repetitive here you can start with frameworks they allow you to build powerful single page applications with organized and interactive user interfaces that sure sounds amazing right so why would you use them they are used to make building and working with programming languages easier frameworks typically take all the difficult repetitive tasks in setting up a new web application and they either do the boring stuff for you or they make it very easy for you to do we have some frameworks and libraries right here these are the front-end frameworks we are going to explore the difference between the front-end and the backend really soon but right here we can see some front-end framers or libraries we have react which many would argue is not a framework but a library the difference right here is minimal then you have angular and view at the end so let's see how we could use some of these frameworks in our applications this is where the front-end comes in if you want to be a front-end developer this is going to come really handy for you then we have deep back-end developers we're going to explain all the differences there and then at the end if you want to do both you can actually choose front-end and the backend to build something more full okay so let's start with the front end so a front-end developer is the person who implements web designs through coding languages like we learn them HTML CSS JavaScript and then you can pick some framework like react on any site you can see the work of a front-end developer in the navigation layouts even in the way that the site looks different on your phone and desktop we talked about this this is responsive design so which framework to choose there will be many different recommendations by many different people I personally use react and I would say that it is currently the best choice that you can make on the blue right here we have Google Trends for react we can see that it's growing and in here we have angular react is definitely really popular right now and there have been some surveys that show that react is the most loved framework out there now as I mentioned if you only want to do front-end you can stop right here back-end developer builds complex systems that have all kinds of logic that happen in the background that make the websites work so if you don't have an eye for the design this may be the place that you might want to be in you are still in the web development field but you don't have to worry about the button designs or proper fonts colors etc and it is also a bit closer to traditional programming data needs to be stored and retrieved business logic and rules need to be followed and results need to be calculated you need to work with databases as well so this is where the JavaScript framework nodejs comes in it allows JavaScript to be run on the backend so if you want to take this route then you can simply explore more on the topic of nodejs after you know all the basics of JavaScript of course and the last thing is the full stack of web development if you're working as a full stack developer you can make use of your knowledge of both front end and the back end in here you will need to pick a technology stack tech stack is the combination of programming languages tools and frameworks that developers use to create web application in most cases it is consisted of a client side and a server side language plus a database really popular JavaScript full technology stack is so-called myrn stack the M stands for the database and it is called MongoDB you can export that as well then we have an Express which is basically addition to the nodejs that allows us to make routes easier we'll need to make a lot of routes if we are working on the backend then we have the front-end part or the client side which is react as I mentioned I will strongly recommend it I already have some of the projects on the JavaScript mastery YouTube that you can use if you're building react applications and at the end we have the nodejs which is a framework that enables us to run JavaScript on the backend if you choose to be a full stack developer you will be able to build full stack programming web interfaces for example Facebook is a full stack web application it needs to have a database to store users it also needs to have a proper back-end to handle all the logic in there and it also needs to have a front-end or a client side which will allow you to actually see all the profiles of users the messages and the feed of the Facebook for example it is a fun fact that react is actually built by the Facebook team so Facebook developers and finally thank you for watching this video now you're at the end and you know what you need to do first go for the HTML practice it a bit then move on to the CSS finally do JavaScript and really really practice JavaScript once you know JavaScript really well like closures classes imports exports es6 arrow functions and stuff like that feel free to move on to react which is an awesome front-end framework then if you want to do back-end you can also learn nodejs and finally we have full stack development you need to choose a technology stack like myrn and then you can make use of react on the front end and nodejs on the back end plus a database to actually be a full stack developer and build complex web applications now i went through all of this really quickly and without any issues like you need to know this this this and this but right here is where I would really like to slow down learning web development is not going to be easy you're going to get stuck a lot of the times it is really not simple but it is doable it is absolutely doable for anyone you just need to have the will and you have to practice with practice comes perfect and if you practice a lot you will be able to make it as a full stack developer without any issues and I guarantee you that so all that you need to have is time and effort if you put that in you're definitely going to make it thank you so much for coming to the end of this video if you liked it feel free to leave a like and if you like the informative content that they post also subscribe as I mentioned after the HTML and CSS the hard JavaScript is going to come and JavaScript is exactly the expertise of this channel it is called JavaScript mastery after all so if you need some help with JavaScript feel free to subscribe also I'd like to emphasize that I'm currently in the process of creating a full JavaScript course the course is going to be about JavaScript only really covering all the fundamentals and then moving on to the expert things the course is currently in the making process so what you can do right now is sign up for the mailing list in the description down below I'm going to keep you updated in the in the course making process and you'll definitely going to know when the course is released thank you so much and now that you come to the end feel free to open visual studio code feel free to open your browser and start learning [Music]