How I'd Learn Full-Stack Web Development (If I Could Start Over)

learning how to code is hard and the majority of people who try fail and web development specifically is so overwhelming with so much information about different Technologies what you should or shouldn't be learning it all seems to just be conflicting with each other so what I'm going to do is give you a step-by-step approach for how I would go about learning web development again and there's not going to be a bunch of theoretical fluff there's not going to be a million different possibilities of directions to go just a streamlined approach from start to finish that you can actually start today the first thing you need to learn is the basics of HTML or hypertext markup language this is the language we use to define the content and structure of a website so imagine you had some text that needs to go on a website we need to Define what's a heading what's a paragraph and so on and so forth and we do this using HTML now you don't need to take a super deep dive here just yet the goal is just to be able to take some simple text and convert it into a basic HTML document and after HTML it's time to learn the basics of CSS or cascading style sheets this is how we add style and layout to a page so essentially like how do we take our content and make it sort of come to life give it some colors and some layout and describe what exactly it should look like and so now once you get through a little bit of CSS it's time to take a bit of a breather and try working on your first project I'm a huge proponent of the idea that you need to be actively learning so don't just go through a bunch of tutorials make sure you're doing things to continually learn and test your knowledge if you need an idea something you could do is make a portfolio website for yourself or sort of like an about me or resume type thing using HTML and CSS this is also a great time to learn how to use the developer tools which you'll become super familiar with over time but for now you can use them to test your CSS and sort of toggle different properties and try different things out and now that you have this first project under your belt first of all congratulations it's time to move on to some JavaScript so JavaScript is how we add interactivity to our websites it's going to be the main programming language of the web so to start out you need to just learn the fundamentals of the language and this is going to be the step that probably takes the longest I'd recommend you probably go through through some course whether it be here on YouTube or some paid course somewhere but just go through the fundamentals of JavaScript and learn how to use the language pretty well and then after that you can move on to Dom manipulation which is how we actually use JavaScript to change the contents of the website so how we add that interactivity to it and now that you've learned this new skill of adding some interactivity to your website guess what time it is Project time you can either take whatever website you already made and add some interactivity to it or build a completely new one a good project to try here would be to make some game in the browser something like tic-tac-toe or Sudoku or if you want to get adventurous you could try something a bit more complex and as you work on this project you'll probably find it's the hardest thing you've done so far but that's actually a good thing this is going to give you more opportunities to practice new debugging skills so learn how to use JavaScript with the dev tools as well as learn how to Google JavaScript problems and search them on stack Overflow and also I'd recommend trying to use chat GPT a little bit whenever you have some issues now don't just copy code from stack Overflow or GPT or whatever it is use them as tools to actually teach you how to do things but do try to start incorporating them into your workflow okay so now you have this incredible website with some interactivity but it's time to level up your skills a little bit and revisit some of the items that we've sort of brushed over earlier so with HTML I would focus on how to write accessible HTML and then with CSS I would focus on responsive design and if you're particularly interested in CSS you can learn things like Transitions and animations the grid layout system and how to write more complex selectors such as those using sudo classes and pseudo elements you can also use this time to learn some CSS Frameworks like bootstrap and Tailwind which are essentially just pre-grid and CSS for you or you can go into some preprocessors like SAS or less that add some interesting features to CSS and to be clear I don't think you have to do this I just want to mention it in case you happen to be super interested in CSS and now you should be pretty comfortable on the front end and it's time to start working with the back end so at this point what I would do is first of all just learn how to make a request to a server from the front end so with JavaScript how to use Fetch and how to write asynchronous code and for this you can just use do some public apis which are application programming interfaces which essentially just allow you to make a request and their server will send some information back to your browser now before we can move on to actually implementing our own backend I'd also recommend you learn how to use a terminal and you just need to learn the basic commands so how to do things like changing directories maybe renaming a file moving some files around deleting files just things like this and to know one more specific thing to learn with the terminal is how to use git and GitHub so git is simply a version control system this just keeps track of all of your changes sort of like Google Docs history but just for coding and GitHub is simply a website to upload your get repository too that way you can share it with other people and now to actually start writing some back-end code I'd recommend you learn nodejs with Express the reason I say this is because node.js allows you to use JavaScript on the back end so you don't need to learn a whole new programming language just a few new functions for JavaScript and with the node you also need to learn npm or the node package manager which just allows you to integrate open source code into your own projects and you'll be using this a lot more in the future so now you should be able to create a back end but usually with a back end we need to store some information that actually persists over time and for that you need to learn a bit about databases so there's two primary types of databases and I would learn a little bit about both of them so we have SQL databases and nosql databases so SQL or SQL is a relational database so this allows you to essentially just have a bunch of different tables and have them somehow be related to each other and there's a bunch of flavors of SQL most of them are very similar to each other but MySQL is probably a good starting place but feel free to use whichever one you prefer and then a nosql database is just any other type of database so it could be a document store or some kind of key value pair system lots of different things could fall under the nosql database umbrella let's start with mongodb just because it happens to be the most popular and then of course in the future if you ever need a different type of database for something specific you can learn it at that time and with that you should have the basics of back-end development down so it's time to build your first full stack project there's lots of things you could do here so so feel free to be creative but if you need some ideas maybe take that game you built earlier and add some Global leaderboard that persists with the database or you could try building some productivity tool that requires a database in some sense and at this point you could put these projects on your resume so if that's something you want to be doing try to add some unique twist to whatever your project is so that it stands out a little bit and at this point you might be saying where are the Frameworks and libraries where are the buzzwords like react and view in angular and now is the time I think to actually start learning these and a key point to notice here is that we waited a long time to learn these so why is this it's because Frameworks and libraries are simply a simplification process they provide some pre-written code to simplify the development process but if you just go straight to these Frameworks and libraries from the beginning you're going to have a hard time actually learning them and grasping everything they do if you don't understand the code that they are replacing so once you get to this point where you can actually understand them and build your own applications without the Frameworks and libraries it's time to actually start learning them because they are important for the industry I would start with react just because it's the most popular it has the largest ecosystem and because of all these things it's also the most marketable skill but of course if you prefer to learn something else you can do that too and now that you know react it's time to do another project what I do with this one is just take the last project you did and convert the code into react and at this point I'd also learn typescript so typescript is a super set of JavaScript meaning all of JavaScript is valid typescript but not all of typescript is valid JavaScript and all it really adds is just strict typing so you can Define the types of everything you write in JavaScript which can be very helpful in larger code bases now you've spent a lot of time writing code but not a lot of time thinking about how that code even actually gets to the browser how this whole internet thing is working so I'd learn a little bit about computer networking this is actually going to be very important in the future so just learn the basics of essentially what happens when you type some URL in your browser if you can answer that question you're probably good with computer networking unless you're just interested in it and want to go deeper and specifically this means you need to understand things like IP addresses HTTP and http EPs and the DNS system and I've been building these websites but we only know how to run them from our own computer so it's time to learn a little bit about cloud computing because what would happen if the power went out in my house well my website would go down and that's not good so what we want to do is learn how to use the cloud instead cloud computing simply allows you to run your code from somebody else's computers the largest cloud computing providers are going to be Amazon with AWS Google with gcp and Microsoft with Azure I'd recommend starting with AWS just because it's the most popular but any of them are fine choices and for now like many things you don't need to go super in depth you can learn more whenever you need something in the future but for now just learn how to deploy your web application to the cloud so if you're using AWS you'll want to learn how to use ec2 and so now as you're learning how to use the cloud it can also be helpful to go a little bit deeper into infrastructure so you can learn how to use things like Docker and containers which essentially just allows you to make sure that whenever your code is running no matter where it is that it's going to run in isolation and in the exact same environment every time next any good web developer should have a good understanding of security because you need to be able to not only protect your website but also the data of your users so for this you need to understand some of the more common attacks that could be made against your website so these are things like SQL injection cross-site request forgery or cross-site scripting and then you need to learn about the different concepts being used to prevent these types of attacks so things like cores and input validation on both the front end and the back end as well as simply encryption so making sure that we're using https and that we are encrypting user data such as passwords and to now you're building these incredible websites but you need to make sure that they're actually performant and that they're ranking high in search on Google and a good way to do this is to use next JS and more generally to learn about server-side rendering so this allows you to render some components from the server side and send them back sort of as raw HTML to the front end so this can not only make your pages more performant but it also makes it easier for Bots used by companies like Google to actually understand the contents of your page and properly index them in search engines now of course as you're learning all these different things they'll naturally be things that you enjoy a lot and things you don't like at all so feel free to skim some of the less important things that you might not like as much and go way deeper into the things that you do like even more but as you're doing this you want to make sure that you're still learning in the correct way and for that you should watch this video next where I go over eight of the most common mistakes I've seen with my students and even myself in learning how to code that can prevent you from actually making progress

Channel: Conner Ardman

Views: 315,479

Keywords: coding, software, engineering, software engineering, sde, swe, software development, development, web, web development, developer, tech, frontend developer, engineer, javascript, front-end, front end, frontend, js, dev, code, programming, fullstack, full stack, full-stack

Id: dPMk6_HTBq8

Length: 10min 27sec (627 seconds)

Published: Fri Aug 18 2023