Web Developer Roadmap 2024 | Step-By-Step Guide

over the last seven years I've been on YouTube this will be the very first time I ever do a web developer road map so this is my first web developer road map for 2024 let's get into this so I'm I'll be doing this a little differently I'm not doing any crazy animations or anything I'm only going to be using notion for this particular road map and why so I can give y'all access to this road map in the link in description below all you need to do is subscribe to my newsletter and you get access to everything from my script cheat sheet to my terminal cheat sheet Visual Studio code text editor cheat sheet plus this web developer Ro map for 2024 which I would make sure to update throughout the year if anything changes so let's get into this so web developer road map let's start with number one right what is web development this can be a very simple answer as in it's front end development and backend development but I think it's also much more than that right so it is coding but I I I'd like to say it's much more than just coding too when it comes to web development it's about creating a digital environment like a digital world that's intuitive responsive and engaging for the user the viewer on that browser right so as we come to 2024 and as technology is rapidly advancing the role of web development has become more crucial than ever right and so let's go over the role of web developers so what does a web developer actually do in simple terms web developers create a fun uh create create a it and applications right and combining the Statics of both frontend development and the functionality of backend development frontend development uh we'll use Technologies like HTML CSS JavaScript JavaScript libraries CSS HTML libraries right to create all these different things now in simple terms what does a web developer actually do a web developer creates websites and applications right but combining the Aesthetics of frontend development with the functionality of backend development so frontend development focuses on like we could say the look and feel of a site using tools Technologies like HTML CHS and JavaScript to create a userfriendly interface while backend development on the other hand involves service side logic and database management um ensuring that the website operates efficiently and effectively behind the scenes when what what no one sees right now I think a question I I get often is how long does it take to become a web developer how long let's just say does it take to actually learn code it really depends let's say when it comes to the basics to learn the basics when it comes to vanilla HTML CSS and JavaScript I'd say 3 to six months and when I say 3 to six months to learn this I mean you're just learning how languages work that's it you're just learning how languages work meaning you're learning how HTML Works CSS JavaScript how to write a function how to write a loop but you don't know exactly how to put a full website together and so how long does this take depending on your dedication and the time you put into it 3 3 to 6 months some people might take a year depending if you're working a full-time job I was I was working three full-time jobs when learning how to code and so it took me time although I was fortunate to get a job in only a couple of months but again the first couple months you're only learning how languages work and I'm going to dive more into how to go beyond that later in this road map now next is your journey to to senior but I like let's change this your journey to your first job right let's kind of change it to that so in your first year I'd say expect to learn the fundamentals of HTML CSS and Javas script and start building simple websites after the 3 to six month Mark right and then as you progress and dive into more complex topics like responsive web design making a website more mobile friendly right JavaScript Frameworks and we'll dive into that later in here and then back in programming if you want to move that direction the key to learning all these Advanced things is being consistent and the differen is between learning the basics and then going past that to moving into something even more complex is you're going from from only learning how languages work to now you need to build things using the languages you learned the mistake that a lot of people make when trying to learn web development is they're just using tutorials that's it they think that's all you need to know I'm telling you this no tutorial is good enough to teach you to become 100% web developer fun developer backend developer you name it you need to build things and I've I'm mentoring so many different people if you want to check it out in the link description below too but I'm mentoring so many different people right now and the mistake that a lot of these people are making is that they're only using tutorials and sticking to that thinking that's it no build even if you don't know everything build build build and you'll learn faster than you ever thought you could and I'm speaking for myself too right and so um things that you'll start learn you're building things with HML CSS you'll eventually learn how to use like a CSS Library like tail when to dive into within JavaScript libraries like react or spelt or framework like angular but how long does it actually take to become a developer in this economy especially I'd say one or two years now now before we dive deeper into other things I want us to um to to look at some simple tools that every developer needs to know right off the bat so tax editors right Now text editors are crucial in a crucial tool in a developer Arsenal right they're where you'll spend most of your time coding so choosing the right one is important as well right so um some text editors I've used in the past and used now Sublime Text as Visual Studio code adom and now jet brins especially as I'm transitioning to the machine learning um NLP space just learning for fun not for a living it's not my job something I'm diving into for fun so I'm using jet brains which is much more advance but these are I would say probably the more popular text editors that exists right now that a lot of people use right um some cool features of popular text editors which is why we love them rather than using notepad or something one of my first text editors I've used in the past as a junior developer was notepad++ on on the Windows computer U is number one autoc completion right it just makes it easier to write your code um syntax highlighting right I'll give you an example let's see if I have visual Studio code open here you go so this is I'm building something in Astro and so syntax highlighting it's easier to read your code right so as you're looking at this there's blue things highlighted in blue things highlighted in white um meaning you know it it's just easier to read your code in general right and there are extensions if I open up visual studio code again U let me open up the simple index HTML file that's someone's code I was helping with if he's just writing something helping him build something but a cool extension on here that exists is there's something you might not be able to see this at the bottom of this text editor you see prettier and what this does this makes writing this makes your code more presentable and easier to read organize it for you and then there's also something called Port not Port I'm sorry go live an extension what this does is that it shows you live up updates to your website that you're building your application You're Building as you're building it so you know that if you wrote some code that broke your website you don't wait until 30 minutes to find out what caused it you know it immediately so these things are pretty useful so and also another thing I think that's huge that can be very helpful and something I never really took seriously into my career until four years into my career um are keyboard shortcuts when it comes to using these text editors so I do have a visual studio code keyboard shortcuts in my no sh templates I have in link description below so for for so for example when you subscribe to my newsletter um I mean I'll have all these simple things like my um recent podcasts I just just moveed this h i shouldn't have done that this will have my recent podcast uh my cheat sheets and this shouldn't be here right so I have my JavaScript cheat sheet on here I have my terminal tips tips for the terminal and text editor here so check that out if y'all want to check it out it's free below right um now let's move on to GitHub right so GitHub is amazing right when you look at GitHub it it's known for its code repositories and for those who don't know what a repository is it's like a folder another word for folder so let me open up one of my text editors here um right now I'm building something in Astro a website and in this folder if you look at my my files here I have a folder named Astro 3 and what do I mean by that if I open up my finder just want to help make this easier for y'all to understand so I have a folder on my desktop and the folder for this is Aso 3 peaceful pagi and whatever and in this folder is all my code so lit literally it's just a folder hosting your code right that's what this is and so when it comes to GitHub when we call things a repository it's another way of calling something a folder right it's another way of calling something a folder instead that host your code but GitHub is more than just a code repository GitHub is a vital tool for things like collaboration with open source it teach you things like Version Control um what is Version Control for example let's say you build your website and you're writing code and let's say 2 days until you're writing your website you realize oh my God I don't like this version of this website that I'm building I just broke everything I want to go back to what I was building five days ago and you're able to revert back to your older versions right um You also learn things like um well well I said open source already but also being able to Showcase your work in the internet this is very important especially if you want to get a job because as your learning code I highly recommend you create your repositories for the stuff that you're building even even if it's simple and you every day at the end of the day or twice a day morning and the evening you you push that code to your repository for the world to see and if you want to see why that's important I have a video on how to stay get ahead and stay ahead of 99% of developers in the internet on my YouTube channel and then on GitHub one thing that they have which is pretty amazing is that they have something called GitHub pages right so GitHub Pages you can host your Web projects directly from your your code repository right your GI reposit atory this will provide a convenient platform for showcasing your work to potential hiring managers but again this is amazing because you learn and understand get commands for Version Control um you learn to manage your own branches and what is a pull request as you make a pull request to your own repo and to someone else's repo but these things are so amazing it's simple but this will go a long way have you ever dreamed of building your own mobile application but felt stuck because building your own mobile app is kind of hard well let me introduce you to at my site an app builder that's changing the game for everyone now with at my site building an app is a breeze you can get started in as little as a few minutes and the best part no coding needed it's the perfect solution whether you're running a Blog an e-commerce site or just trying to build your portfolio to help you get your first job in Tech now here's how it works connect your website to at my site with just a few clicks personalize the app to reflect your style and you're ready to publish immediately and it's that simple you can have your Android or iOS application ready and live in app stores in no time and what about making your own app stand out at my site has got you covered customize every single part of your app to line with your vision play around with colors designs features to make your app Uniquely Yours and this tool is great for anyone whether you have just a normal website a freelancer or again just trying to show off your portfolio at my sit's versatile plans cater to everyone it's about creating a professional quality app without the high cost or time commitment of the traditional app development process think about it users have saved over $50,000 per app in thousands of hours in development time at my site makes app development quick easy and guess what budget friendly so why not start today sign up for free create your own app and see it in action only upgrade when you're ready to publish it's time to uncomplicate app development and turn your website into a powerful app with at my site which is available on apps mode during the Black Friday sale that runs from today to December 1st in the link in the description below so let's move on now now let's go on to what technologies you need to learn what languages markup languages programming languages front and back let's get into that now for this road map so now one of the first things that you will learn is HTML right so HTML is the foundation of web pages in the internet right on the web h HL means going Beyond just knowing tags I'd say it's about understanding how to structure a web page effectively right so for example we have the header body and footer down here the header typically contains a navigation and branding elements right top of the page there's the body and the body is where the main content resides and the foldo often includes additional information like your contact details and legal disclaimer so understanding those basic things but of course there's more than that just that loan a semantic markup right so when crafting HTML uh it's important to focus on semantic markup ensuring that elements like the headings the paragraphs and lists are used correctly but why for things like better accessibility people who might have a harder time using the internet browsing internet and SEO to help people find that particular website you're building for your employer so now let's move on to CSS so CSS is what brings life to your website right to your web pages and and to be honest in web in general CSS is styling making this website beautiful for example without CSS your website looks like craigslist.com with CSS your website could look like Netflix they could look like apple.com which is which are beautiful websites right but it's so CSS is about creating something responsible uh responsive I mean and and fun to interact with right so understanding how to use fonts colors effectively positioning effectively oh my gosh and that's very hard it's crucial in setting the tone and feel of your website extremely important but there are also Advanced things that you'll need to learn in CSS not just regular CSS so you need to learn Advanced layout techniques like flexbox um CSS grid which have become essential for creating responsive designs um and this isn't didn't really come become that much popular or much more deband until i' say three years of my career in Tech and I've been in tech for seven years right and so for those of you who don't know flexbox what that does that it simplifies the process of creating flexible layouts while C says grid offers more control for complex two-dimensional layouts right um now there's also something called SAS which is a CSS processor I use this a lot I love it and what this does this allows you to write more maintainable and scalable code with features like for example with SAS I don't have this on here you're able to create um variables with CSS right um You you can have some nested rules mixings media queries which are also Cru but this SAS would make it and yes SAS would make writing custom media queries for your website easier and more achievable for multiple different kinds of browsers and phones that are being used to browse your website right but on the top of that there are also CSS Frameworks that we need to move on to right so Frameworks like bootstrap materialized and Tailwind have changed the game for CSS development to be honest I don't ever want to go back to using vanilla CSS ever again unless it's a basic website but these Frameworks what they do is that they offer like for example um pre-designed components and utilities that speed up the development process meaning it allows you to create websites faster than ever what would take me probably a whole day to write with CSS um I can now build in a couple hours to materialize Tailwind now is changing the game it's becoming increasingly more popular too now let's move on to JavaScript right so after you learn all HTML CSS you want to move to JavaScript um JavaScript is the PowerHouse of web development of the internet right JavaScript is what makes us and will allow us to make the money we're making right now to be honest right how good you are in JavaScript will determine how well someone should pay you right your experience too of course but Javas JavaScript it's indispensable for creating Dynamic user experience right um there will be Core Concepts that you need to learn for example Loops functions um event handling which are the building blocks of JavaScript programming but there are also more modern features you'll need to learn JavaScript features like features things like um Arrow functions which offer a more concise Syntax for writing functions there's the structuring which simplifies the extraction of data from arrays and objects template literals which provide an easy way to create complex strings so practical examples for this might include things like creating interactive forms Dynamic content loading and client side valid so you'll need to learn all these different things now again I do have a JavaScript cheat sheet in the link description below um in my newsletter and again I'm only MCH things because this will help you out a lot like for example on my cheat sheet right here on this cheat sheet I literally give you questions that people might ask you on your for at for on your interview for your job interview right so if someone was wanted was to ask you how do you define the variables this gives you the answers um let's move down a little bit can you explain what a lexal scope is I give you the answer and code examples object arrays and you know what something I was even asked to do on my Amazon Interview and this was when I was only three years into my career at Amazon they asked me to build a to-do list which I've never done before and they said I can build it in react GS angular or vanilla and I didn't do it and so here is a tutorial on how to build a simple to-do list or this is the code on how to do it and then build it yourself right and I have it in spgs I have it in vanilla and reactjs for you right so all these things I have on here I I have because I I want I'm hoping it will help you get your first job in Tech so now let's move on now something I've been seeing on Tech Twitter a lot oh my God is typescript so what is typescript typescript is a superet of JavaScript right which has gained so much momentum and popularity in Tech Twitter right and so what typescript does is that it introduces static typing right introduces I didn't even type this in here static typing making your code more predictable and less prone to runtime areas which is especially beneficial in large scale application I think it's just beneficial in general now some typescript Basics include defining types for variables creating interfaces for complex data structures and leveraging typescripts features to catch errors during development right typescript is something I definitely add to the list it's not absolutely necessary but a lot of companies use typescript so I would make you to learn typescript next so now you're learning vanilla JavaScript you learn typescript now what would really help you get the job down the line is react but before we move to react right when it comes to JavaScript even my my my homie who works at Netflix trash Dev Christian amazing guy Filipino brother when I asked him what questions they asked him during the technical interview and when he did did his technical interview interview meaning writing code in front of a senior developer there they told him to write code on vanilla JavaScript and I asked him why vanilla why not react and he said if you're good at vanilla JavaScript then you can write code in any JavaScript library framework out there and that's a mistake I made in my career I wanted to be good in reactjs or spelt JS or VJs at the time before spelt GS but I wasn't that good in vanilla JavaScript but if I was good in vanilla JavaScript the other way around learning react would would have been so much easier learning spelt jets would have been so much easier so I highly suggest before moving to react you make it a big goal to make sure you're strong in vanilla JavaScript and don't only make learning these Frameworks these libraries so much easier right so let's move to these libraries so popular libraries that exist today in JavaScript are react VI spelt which makes it easier to write JavaScript right so react View and spell and is also angular are pretty much leading to charge in modern web application development today right so reacts component based architecture enables reusable UI elements while view offers a more approachable learning curve to be honest it's easy to learn with its Progressive framework and there's also spel GS which is popping off right now which just much of the work to compile time reducing the need for on Virtual Dom diffing right but choosing the right framework is important and to be honest this really depends on what you want to learn if you want to think about what's more in demand today with the jobs out there react is the way to go it really is it really is I if I had to start over now um after being learning and bu building a strong foundation in vanilla JavaScript I'd learn reactjs so now let's talk about preparing for the job market after learning all these tools as a f and developer and of course there's so much more to learn and we'll dive into that preparing for the job market right and and so what what I'll have on here are simple things these are things that people look for when hiring strong problem solving skills being able to know a little bit about dat structures and ALG go why data structures for the interview and alos to be honest but more than anything strong problem solving skills now I can leave it here and say that's all you need to learn but I think it's so much more than that right so what I have on here is what else can help you prepare for the job market is you need to learn how to show your potential again I have a video on this I won't dive into it too much about staying ahead of 99% of web developers out there but having a bunch of green checkboxes on your GitHub will help you go a long way showing them and proving to them how often you write code let's say five days a week minimum and not just that though how else do you stay ahead of the game show your potential don't make the mistake again of depending on tutorials but more than anything build build build I mean it like literally more than tutorials you go through HTML and CSS Course once a JavaScript tutorial once a react Course once a postgress Course once you you know what I mean everything once and after that you just build you literally just build things I I'm not going to recommend you what to build but just build and build every single day that is how you learn especially as you host these project in your repost on GitHub and showcase that to potential hiring managers it'll be much easier for you to stand out from the crowd of thousands of people applying for that one job that everyone wants right now tools for modern web development simple things you need to learn terminal get developer tools again I have a terminal cheat sheet in the link description below now let's move on to exploring backend I don't need to go through this I know this video is long as hell already but I want to make this as helpful as possible because yes as a frontend developer you're doing front end you don't necessarily need to know backend but while knowing just a little bit of back and development help you yes it will right it will help you a lot in the long term you don't need to learn this right away I see focus more in front and development first then slowly transition and just build a few things here and there and back in while front and development focuses on what you just see and interact with backend development is concerned with what happens behind the scenes right so this section that I'm going to go over introduces service side language service side languages um and databases crucial for building the functionality back end of a website so let's understand a little bit more service side programming and what what I mean is just the languages that you might want to learn now not any of these are like you have to learn all of this no there's a lot more than this too but I'd say learning at least one these are very important PHP I know my homie coding phase talks about this a lot I'd say skip PHP but if you had to learn backend I'd say python now if you're web developer JavaScript but to be honest I like python a lot that's what I'm doing now as I'm diving into the machine learning in NLP space natural language processing space I'd say learn node.js for web development um and and a little bit of python right once you learn JavaScript it's much easier to learn these back in service side um programming languages right so for example nodejs is an open source crossplatform JavaScript runtime environment and what this does that it executes JavaScript outside of a web browser um python is a web is a widely admired programming language why though a really it's because of it's readability it's very easy to read compared to freaking JavaScript by the way and it's efficiency making a popular choice for web development right and then last but not least as PHP which is very popular for smaller companies right so PHP is a service um scripting language used to make web pages Interactive and Etc so these are some popular service High program languages of course there's more but now let's move on to databases what what you would want to learn down the line too right so databases in web development store and manage data that websites and applications use in display right so they're crucial for dynamic content anything that changes based on user input like what they type into the input right onto a website and or external data sources right and then there are also databases one of the more popular relational databases that exist out there and I'm I personally use postgress SQL or postgress you don't have to say postgress SQL um it's postgress and SQL personally if I had to choose something to use a database to learn first I'd say postgress and of course to be able to do that you have to learn SQL which is a query language now I want to end it here this video is getting longer than I thought it would be so in conclusion in conclusion just talking about this entire roadmap the journey through web development is hard as hell okay it it is hard as hell font development in terms of HTML assess to backend service side program programming languages like Python nodejs and then learning uh postgress Hara Cur how to work with those databases in SQL it's a long journey it's hard as hell but this doesn't happen overnight right as we as we look at this looking at all of this this is a lot let me just backy out a little bit making a small this is a lot that you have to learn just htl Cs and JavaScript alone will take 3 to 6 months let alone how to use a terminal using CSS Frameworks JavaScript Frameworks typescript react and then building your projects then you need to learn data structures and Algos for the job interview even though it's not really relevant to your job and then if you want to learn back in or go full stack You Learn Python SQL right this is not easy journey and this will not happen overnight please this will not happen overnight this is something that you learn over time over months over years but what's important is that you learn how to learn the right way you don't get stuck in tutorial hell you don't just depend on tutorials and you're building projects and you accept that it's okay and it's normal to not know everything and it's normal to struggle that will happen it's when it comes to learning code and moving on with this you want to learn to look forward Embrace uncoming challenges that will come upon you when trying to solve these problems because for the rest of your career you're not going to be knowing what you're doing you need to learn how to learn and fail right so remember that your journey in web development is unique whether you're just starting or seeking to enhance your skills the road ahead of you will be full of a lot of opportunities but more than more even more than opportunities Road bumps and Hills that you need to climb and you're going to fall a lot but remember to stay consistent remember it's not easy but is it worth it hell yeah was it worth it for me if I can do it y'all can do it

Channel: Chris Sean

Views: 39,688

Keywords: learn, code, life, of, web, developer, html, css, javascript, query, js, php, angular, programmer, software, frontend, backend, front, back, programming, job, hired, junior, jr

Id: 4BTyN7BiQ-A

Length: 28min 37sec (1717 seconds)

Published: Tue Nov 21 2023