the EXACT strategy to master web development in 6 weeks

In this video I'll give you a six week plan that will cover four years of CS degree and something better than most boot camp curriculums that could cost you upwards of $15,000. Now you might be wondering hey Phil, how can you master web development in three months? Obviously it will take you a lot longer to get there and there are actually no shortcuts to get you to becoming a Full Stack junior developer. But can you build a house on a slippery slope? What you will be learning in this video is to create a proper foundation that will carry with you for the rest of your career. What I am about to tell you will give you great fundamentals that you will be able to effectively add on some sort of front end framework or library like React as Well as Node JS and some sort of database like MongoDB. On top of what you learned in this video, within 12 weeks you should know HTML, CSS, JavaScript and the following key concepts. DOM manipulation. You should know how to create HTML elements dynamically and master re rendering on the page interactively, Local storage, storing data in the browser, getting this data and updating it and making HTTP requests from a third party API with Fetch or Axios to able to pull big data and displaying it on the front end in a user friendly way. So in week one if you know nothing, you should focus on learning HTML and css in the first week. So you should learn maybe how to use H1 to H6 tags like header tags, P tags and divs and spans at the bare minimum. And you should know how to use flexbox for layouts and media query for responsive design. So here I have a profile page and you should, this is like HTML and you should be able to kind of build something out like this where it's like a simple profile page with it's all in one file and you have things like media queries on the bottom for a tablet or a mobile phone maybe you have some kind of Flex flexbox stuff. So I'll show it here, go live and maybe you can build up like a simple profile page like this and you can press on the project and you can pop up some kind of modal and then if even if you shrink it down it'll use media query and make it mobile friendly, right? So that's something that you could kind of, you can kind of create in week one or maybe even like after the first lesson with us. And in week two to three you maybe could build a to do list project or shopping cart. And next you should learn how to create These elements dynamically through JavaScript. Be able to select these elements to dynamically change the styling. During this week, you should be able to learn conditionals using if and else statements loops and learn how to declare functions, call functions, and work with arrays and objects. The most important thing you need to be able to do by the end of the next two weeks is to be able to go through each index of an array of objects and be able to render the information onto the page using a loop. Then be able to re render that array if that array is changed. So you know, most of the job as a front end developer is getting these big array JSON object arrays, these JSON object arrays and displaying it on the screen. So maybe something like this should be like a to do list. You can say hello and you can add to do goodbye add and then you can remove them, you can check them off. And this is all working with an array. Later on when you actually go a little bit further, you could actually do it from local storage where you can actually save, save that list inside of an array inside of local storage and you can get that and then you can display it inside of your task list. So here you have a task list innerhtml and you empty them out and you get the task from local storage and then you JSON parse it and then you use a foreach and you dynamically create the list. I'll show you guys how that looks right now. So right now if I said task one and then I add the task, it says task one added and then task two I add task and task one gets added. So if I look inside a local storage, you can actually see that there's tasks and there's task one and task two as an array. So actually when I refresh this page, it'll actually bring that array back and I and inside of the code I say display tasks and tries to get the tasks and then it just runs the foreach on that string and creates the list item and then creates the button and then it appends the child. And here there's a shopping cart as well. So just check that out as well. This would be a shopping cart here. So if I said enter product name, shirt $10 add to cart and total is $10 short, $30 add to cart and then it gives you 30 or $40. So this is very much like about what you do at the front end development. So this is just working with an array. And so if you look at the shopping cart and you look at the script, basically all you're doing is rendering the cart from what you need to do. So, so you're creating this list and you're adding the total price and you're saying the list is empty and the total is zero. And then every single time cart is updated, you're adding that cart item and then you're adding that total item. And then every single time you're calling this add product and then you're calling render cart at the bottom of it, right? So this is actually rendering the page or display and you have an array that you're keeping control of. And by week four, maybe you should know about local storage showing light and dark mode and login and sign up page. Local storage at this stage of your learning is a way for us to save a piece of data, albeit being within the browser. This week you will learn how to create, read, update and delete a piece of data. This is your precursor to a crud app, a create, read, update, delete app. What you learn here will directly translate to when you start learning backend and when you learn node JS and mongodb. Original purpose of local storage is for dark mode, light mode or language features. You start to learn that every time you manipulate something in the front end, you have to code a way for you to save those changes in the back end. So I think we showed a lot of local storage stuff. So one thing here, maybe I can show you this. Actually I have local storage here already. So if I remove these guys and then I say learn elixir, I add that to do and I say learn HTML add learn going add. And then I look inside a local storage, you can see that actually instead of todos I have these strings, right? Or these objects value completed but it's saved as a string. And when they come back, you can actually JSON parse them and you can actually edit it. You can say learn Phoenix and save it. And you can add to complete, complete, complete. And then if I actually refresh this or just stay that way and inside of local storage there will be inside of todos it says value learn Phoenix. Completed is true. Value learn HTML Completed is true. And you can actually remove them too. Now remove the task. Now if I say local storage, you can actually see that instead of todos it only says learn HTML and learn golang. Cool. So you have this index HTML you make go live. And this is a simple little page for login that we created. Now if I press login, I can say I think I put fill password login wrong credentials password login and now it goes into login from our fake little file and now we can log in here as well. So it's pretty cool. And you can log out and go back to this page. Now you can log in, put a buildtoy password login and even if you refresh your page, it'll stay logged in until you log out. Week 5 HTTP requests working with APIs so you have something like the Random User API or Poke API, but at a company you'll probably use something like some APIs that they make like a post API or whatever. And this is what modern day front end developers do, which is to make API requests. So I really started developing as a front end developer using Vue js and it was at an AI company at the time, but we'd have to make a lot of requests to some government APIs to actually display that data. So that was kind of my introduction into like trying to make all these requests and handle all this data. And definitely like, because I learned all that and like how data was given to me, I actually transitioned more into a backend development role or like a full stack development role, but more back end. And now like when I talk to a friend developer I can kind of understand how they want that data and all that kind of stuff. So here you'll learn about Async Await and Async Await is just a wrap around these promises to tell it to wait until this function is done to keep the event loop. Because JavaScript's trying to finish everything so fast. You need something like promises or whatever to tell it to wait until this task is done to move on and you'll handle error handling. Once you retrieve the data, you want to traverse through big objects to pick out the data you want and be able to put it onto the front run it. So we do a lot of this kind of API calls and basically like a get request or whatever. So if you actually go to like render using results, this is like a huge data set here. It has like 100 people and basically you'll have to understand how to use all this data. Like here you'll understand like maybe I'll copy this and then I'll use some kind of tool like JSON Viewer. Oops, not this one. Jason Viewer. I've been using this. I know it's like the best one but I, I've always liked it. And then you can just like format it looks nice and you can view it here. Looks nice and easy to advantage. You have to learn how to handle all these big objects and make it, you know, displayed on the front end. So we do all that kind of stuff here. Like a random users. You look at here, complete index HTML. There's some functions to create a user card, display users and we call display users in the beginning anyways, expose that, go live again. You'll see that this is handling this data set right here and making it into a pretty user interface for us to use. And that's exactly what I did here too. Login, login. This is the API request as well. So those are the things you do as a front end developer. And if you ever just like get bored and you look at the network request, you can actually see if I refresh here, you're actually getting that same API results and you're getting that same results here and you're turning that into this ui. So that's something that you do. Week six you'll do your own project, a portfolio page that has all the features you've learned. And by this point you should know how to dynamically create HTML elements using JavaScript. Re rendering the page according to the changes in array, using local storage effectively for light and dark mode, making HTTP requests and retrieving data from API calls and reading big data objects and picking off the things you need from that data and displaying it on the front end. And maybe an example of that would be like maybe this kind of page right here where you can log out, you can save the local storage state and I mean maybe something a little bit more impressive than this. But this would be very sufficient for something you could do after week six, right? Be kind of cool. So in six weeks from going from nothing to being able to build something like this, and if you just add some css, I'm sure it'll look a lot better. This would be kind of like a project that you could also build too. There's like some kind of personal dashboard where it saves your. You can get like your city and get the weather and then you can see that it's the weather here you can have a to do list that actually stores in local storage. Task 1 add, task 2 add. And even if I refresh it, I go to to do list, those will persist. And notes you can say like today shooting video save notes. And these will actually persist inside of app forever. And you'll actually see here local storage, those values are right there. To do's theme to DOS Favorites. We see notes here somewhere, notes. And then actually if I run local storage clear, all this stuff will go away. And maybe some other things you could also build or some recipe finder this maybe I put in Cheesecake search so I found a cheesecake salted caramel cheesecake recipe I can add to my favorites and that'll go inside local storage. And this has an API call. Cool. This would be kind of cool. Maybe Steak search Now I have Steak and kidney pie or Steak Diane. I'll add that to my favorites now refresh now. Oh I can look at these recipes and learn how to make them. Cool. Now here is what your next six weeks are going to look like. For three weeks, learn a front end framework or library like React. Translate all the projects you've learned from HTML, CSS JavaScript into just react. Learn key hooks like use state, useeffect, use memo, etc. Learn about global state management using Redux resistant or etc. Then for three weeks after, learn to integrate a database like MongoDB with the technologies you know. Now create your own project CRUD apps. Now with that project you should be able to apply to impress your recruiters and multiple companies you applied for and hopefully land your first junior developer job in 2025. Thank you for watching the video and if you want to learn more in detail about the exact roadmap of how you can break into tech this year, click on the link below to book a call with me and my team and please subscribe to the channel and comment below. Any other helpful tips that could help other developers watching this video? And remember, if I can do it, you can do it too. Coding saves lives.