Web Development In 2024 - A Practical Guide

[Music] hey guys welcome to my practical web development guide for 2024 so believe it or not this is the eth or ninth year that I've done this I think the first one was back in 2016 or 2017 so it's crazy how fast time goes by and I'm sure that many of you or or most of you know what this is but for those that don't every year I do this guide and I go through just about every web development technology that I can think of from tools to languages to Frameworks as well as some of the different routes that you can take and and just offer some of my own personal advice to succeed in web development and I do this because it's extremely overwhelming just to learn what you need to learn because there's so many different things so I try to put it all in one place and put some things into perspective and you can kind of pick your path from there and I also have a page on my website that has all the content that I've created including YouTube videos and playlists as well as premium courses on a lot of the stuff that we talk about in this guide and I put it in the same order as well so it's easy to follow and I'll have a link to that in the description all right so a couple of notes some things to keep in mind as you're watching or listening to this video uh it is long so you may want to kind of put it on in the background while you're cleaning or exercising or whatever it is you do and I'll have time stamps in the description so you can just jump around if you want to so first off you do not have to learn everything we talk about in fact I'd say it's impossible to learn everything that I mentioned in this guide even if your life was extended 100 more years so look at it like a restaurant menu you can see what's available and then you pick and choose what looks good to you so next this is not a latest trends video I know there's a lot of those types of videos out around this time of year I will outline some of the new technologies but that's not what this video is about it's about absolutely everything that I can think of that you may have to learn as a web developer and I don't care if it's 20 years old or 20 days old if it's relevant then I'll talk about it also if you've watched past years you'll notice that I don't really remove anything I just add to it so most of the stuff that was in last year's video will still be in this year's video I just elaborate it on a bit differently I don't even go back to previous years for reference lastly I always try to keep these pretty objective however I do share my opinion on some things I'll try to make it clear when I'm giving my opinion uh keep that in mind that neither myself or anyone else has experience with every single piece of technology in this guide so some of it is based on research and just what I've heard from others all right so before we talk about specific Technologies I want to talk about some of the common roles and paths that web developers choose and I think it's important because it will help you decide what you want or what you need to learn so the first one is one that I feel like is overlooked a lot especially when it comes to like YouTube videos and so on typically they just talk about front end backend full stack but a web designer is pretty typical uh pretty typical path to take which is sort of like a mix of development and design and these are people that are more focused on the front end but don't really build complex uis and applications they stick to you know static websites small business websites things like that they may use a CMS like WordPress um they're usually pretty good at design as well as HTML and CSS because a lot of times they go solo in their Freelancers so they have to build their projects from the ground up and uh they typically have some knowledge of programming you know basic JavaScript Etc but usually not enough to build uh a complex full stack application without using some kind of third-party software so the they get into kind of the business side of things SEO maybe some marketing things like that so if that sounds interesting to you then you might take this route next we have what is I guess the most common role that people start with and that's a front-end developer so this is someone that works on the client side of the web so they work on the user interface they create the interactions that a user has with a website or web app now I will say that the lines between front end and backend are are getting more blurred every day especially with Technologies like nextjs where some of the page is rendered on the server and some of it's rendered on the client but for the most part front-end developers work on the client side of the web um with the most important Technologies being HTML CSS and JavaScript in general um most of the time they'll also move on to front-end Frameworks like react view angular and I'll talk more about those later next we have a backend developer this is someone that works on the server side so they work with databases database ORS um they're not focused on the user us interface at all they're usually the ones building the apis that the front-end developers will consume and get data from the server now with the front end your programming language is is typically going to be JavaScript but on the back end you have you know dozens of languages to choose from you can use JavaScript of course with something like node.js but you can also use Python PHP C and and many many more languages which we'll talk about later then you have a fullstack developer who works on both the front and back back end so you'll need to know HTML CSS JavaScript but also need to know a server side language or server side technology you'll work with databases and ORS just like a backend developer now in my experience it seems that most fullstack positions are more focused on either the front end or the back end but you still do need to know both and again that line is is getting more and more blurred and it seems that full stack is the most popular end goal for people it seems at at least from what I I see you know running a channel and and seeing a lot of developers and people that are coming up it seems like front end is where they want to start but ultimately they want to be full stack developers now I'm going to throw a fifth role in there and that's devops and this is someone that's responsible for deployment and maintenance of your application maintenance of the servers um there you know security scalability they do write code but it's not the same as front end or backend development you're not building the application you're building the infrastructure that the application runs on and you'll typically need to know Technologies like Docker and kubernetes you'll need to know about certain hosting platforms like AWS um you might write bash scripts Python scripts need to know how to manage a Linux server this isn't really my wheelhouse but it may be something that you're interested in and it's usually a separate role than uh a software developer now for the rest of this video when we talk about certain Technologies or concepts I'm going to have the typ types of developers that it pertains to up in the leftand corner here so you'll see something like this with WD for web designer front end backend full stack and devops and this will help you keep track for whatever your your goals are all right so now we've talked about the different roles let's talk about some goals and paths that you can take as a web developer and one thing I want to mention that's really important is that your goals can change over time so what you choose now doesn't mean you won't change it later I've been doing for about 15 years and I've been a freelancer a full-time employee a consultant an instructor um and I've done side projects so you you most likely won't do the same thing for your entire career so don't feel like you're stuck with whatever you choose now so the most common is to learn to code to become a full-time developer for a company and this is where you know you work for a company you get salary uh benefits your pay can vary greatly depending on where you live and and what company you work for but it's a very stable job and you don't have to worry about finding clients or anything like that you just show up you do your job hopefully you really like coding and you get to you know do your passion for work so it doesn't really feel like work you get paid quite a bit um there's positions for all types including the ones that we talked about many developers strive to work at at like a Fang company which is you know Facebook Amazon Apple Netflix Google these are some of the biggest Tech compan IES in the world and they pay very well however there are there's a lot of companies out there that pay just as well if not better so don't feel like you have to work for one of these huge corporations there's there's so many companies out there so freelancing is another option and this is for developers that are somewhat business savvy it definitely isn't for everyone there's a lot of added stress in running your own business but it can be incredibly rewarding in many ways you know you'll probably struggle from financially at first depending on where you're starting out but if you gain the experience and you put your all into it you can possibly make much more than you could at a 9 to5 UM as a software developer and and freelancing is essentially investing in yourself and you do need to know quite a bit you kind of have to be a jack of all trades master of none because typically you're starting out solo so you'll need to do everything from the the design to the HTML CS to whatever you're using for a backend if you do have a backend or if you're using Wordpress typically you're going to go for technologies that allow you to create things fast um and you can also Niche down and work with certain industries so for instance you might do medical websites or something like that um there's so many different routes to take within the route of freelancer so another option you have is to work for a startup which is a little different than working for a large company it's pretty risky because most startups do fail that's just a fact but if you're one of the first employees it can be very very rewarding and you can be very successful and make a ton of money um and then you could also think about starting your your own startup later on down the line I wouldn't say that should be your first goal once you learn how to code um and that kind of leads us to the next one which is to create a product or a SAS which is a software as a service so you could build some kind of app that you could charge monthly for so you have recurring income and I would say this is great for a secondary goal so maybe start off either as a full-time employee or a freelancer and work on a product that you think will be successful in your spare time and then you know if that starts to grow you could always switch over and do that full-time and then internships uh they do offer Real World Experience there's paid internships and even if it's not paid you do get a lot of experience and it looks great on your resume for when it is you know when it comes time to find a job and typically internships that aren't paid they will lead to a paid position so it's a great option if you know just to get you going in the industry so these are just some of the things you can do these are I would say the most common especially the first two full-time employe freelancer um there's a lot of things that I would say you can do but I wouldn't s just starting out with like Consulting like teaching things like that again like I said earlier you don't have to stick with one thing once you choose that path all right so let's get into some of the basic essential tools that you need to start coding so first obviously you need a computer with an operating system people ask me all the time what's the best laptop for coding the truth is you can use just about anything from the last 5 to 10 years for web development if you were doing something like 3D modeling then you need a a bit more of a powerful computer but for web development you don't need much I'd say just make sure you have at least 8 GB of RAM and an SSD I think the bigger decision is what operating system you want to use but even that really just comes down to preference people ask me what I prefer I I like Mac OS just because it things seem to work a bit more smoothly especially when it comes to things like the terminal I think that Windows has gotten a lot better though and I do use Windows I'd say probably 30% of the time I just prefer Mac OS for my serious projects and then obviously you have Linux which is a great option because you can kind of mimic your production environments and it's very beneficial to learn Linux server Administration if you're going to be doing any kind of devops all right so so again it just comes down to preference so a text editor this is where you'll write your code and there's a lot of options out there personally I prefer Visual Studio code it's free it's open source it's very powerful it's very customizable I'd say about 80 to 90% of the web developers that I talk to use vs code um some other options are Sublime Text which technically isn't free but it has a trial That Never Ends if you do use it for a long time I would suggest paying for it um there's adom which is free and open source Vim is also pretty popular it's a bit more advanced than the others it has a uh quite a learning curve but it's very powerful and the people that use it swear by it and you don't really have to use your mouse at all so you can be very very efficient and fast writing your code so there's also idees which are integrated development environments they have a a little bit more features than a standard text editor you don't really need an IDE for most types of web development but there are some that are geared towards specific languages for instance you have pycharm for python developers you have PHP storm for PHP developers so that may be something you want to look into But ultimately I would definitely recommend vs code to to most people as far as far as web browsers go that's really preference I'm sure that all of you already have a preference I like Chrome there's not really a specific reason it just does everything I need to I I like the dev tools I think Chrome and Firefox would be the the the two most popular Firefox also has great Dev tools maybe a little better than Chrome um you could even use Microsoft Edge I I came up in the the Internet Explorer days and Microsoft browsers were just horrible I remember i6 and it it was just a nightmare but now Edge actually uses chromium under the hood so you could just as well use that um Safari I'm not too crazy about Brave is really cool for uh for privacy features Brave and Vivaldi and then there's a a newer browser called polyan which is directed toward web development but it's not free and personally I'm not going to pay for a browser Chrome does everything I need um so it's just preference and then for terminals it used to be that that front-end developers didn't really need to use a terminal for much but now with all the the framework clis and npm and git you do need to know at least the basics so as far as terminal programs go I think the default in Mac OS or most Linux dros are great uh for Windows Windows used to really suck with terminals with the you know the CMD command prompt I never really could get into Powershell uh but now the windows terminal isn't bad it has SSH you used to have to use tools like putty um I prefer get bash on Windows which is a third-party bash terminal um but you could also use the windows subsystem for Linux it is a bit more advanced though so I wouldn't suggest that for beginners um and then for Linux obviously you have tons of of thirdparty terminals you have Terminator alitt for Mac OS I'll either use the default or iterm 2 which just has a a little more features and I think it looks a little better all right so now we've come to the first big part of learning to be a web developer and that is HTML and CSS so these two technologies are essentially the building blocks of the visual part of the web HTML is a markup language that's used to structure the content of a web page and then CSS cascading stylesheets is the styling language that's used to style the content so you can think of HTML as the skeleton and CSS as the skin you can't have one without the other HTML itself is actually very very simple it's just a bunch of tags that you use to structure your content so as far as what you want to learn about HTML you want to learn how to create semantic markup this means using the correct tags for the correct content you also want to learn about accessibility this is making sure that your content is accessible to everyone including people with disabilities you want to learn all the common tags and attributes so things like heading paragraphs lists there's a lot of older deprecated tags that you don't even have to bother with uh I would say semantic tags excuse me like header and footer are very very important so spend some time learning how to structure your pages semantically and then CSS is a a much different more complex technology it's a styling language that's used to style the content of a web page it's very powerful and it's constantly evolving um there's a lot to learn about CSS you want to learn about all the core properties for things like colors fonts the Box model which is how elements are laid out and spaced on the page and how to use margin padding borders um spec specificity is important because sometimes you'll have multiple styles that apply to the same element and you need to know which one will be applied and the different units of measurements like pixels M's Rems and percentages you'll want to learn about different types of selectors like classes IDs there's also what we call pseudo selectors um you want to learn about the different layout methods like Flex box and grid these are are used to lay out your elements in columns and rows and then responsive design is really important all of your projects should look good no matter what device they're being viewed on you know there's there's a few elements to responsive design but media queries are probably the most important uh this is where you can apply different Styles based on the size of the screen so you definitely want to be familiar with responsive design so next we have CSS Frameworks now at this point these are optional and you could just go right to JavaScript however these Frameworks can make things much easier when it comes to creating layouts they're also very popular and a lot of companies use them and they're pretty easy to learn when comparing it to other Technologies like a programming language so my personal advice would be to spend a week or two learning one of these Frameworks and there's uh there's a ton to choose from however these are the main four that I would suggest looking at and to be even more specific I'd say the first two but that's just my opinion so bootstrap is one of the original CSS Frameworks it's been around since I believe 2011 and it's a very widely used technology and has a large community which is always a plus its component based which means that there's a lot of pre-built classes that you can use for things like buttons cards nav bars Etc and the upside to this is that you can create uis and websites really quickly and you have less classes in your HTML the downside is that sometimes bootstrap websites can look pretty similar now it's fair to say that you can really customize bootstrap and make it look however you want but you will have to learn SAS which is a CSS pre-processor and I'll talk about that in a minute um bootstrap also has an easyto ous grid system that a lot of people like however I definitely wouldn't suggest using it just for that because you have CSS Grid or Flex box which are built into CSS so you don't need to use bootstrap just for the grid another plus to bootstrap is you get a set of JavaScript widgets like models carousels and dropdowns and this is great for people that don't have a lot of JavaScript experience and still want that functionality so I'd say bootstrap is one of the best tools for Freelancers because you can create websites and layouts very quickly now Tailwind CSS seems to be the most popular right now as far as you know content that you see out there and what people are talking about you see it everywhere in new projects a lot of startups are using it it's a utility first CSS framework that allows you to build custom designs without pretty much ever leaving your HTML and being utility first makes it a bit different than the rest of these because instead of having a class for let's say a button which would generally have mult multiple Styles you have a class for each style so you'll have a class for the background color for the text color for the padding so you almost never have to write any custom CSS because every CSS property has a class the downside to this is you end up with a ton of of classes in your HTML but the upside is that you can really customize your layout and they don't all look the same which can be an issue with a lot of these other options all right so next we have balma which is a newer framework that I really like it's it has some good-look components and it's really easy to use as far as class names go it's not as popular as bootstrap or Tailwind it's also not as customizable as Tailwind um but it is very fast and lightweight and I think it looks good then you have materialize which has been around for a while it uses Google's material design system and as far as component-based Frameworks go I think materialized is one of the best looking um obvious obviously that's just my opinion there's a ton of components to choose from and there's also JavaScript widgets like modals and dropdowns similar to what you would get with bootstrap um from what I from what I can tell its popularity has come down since the release of Tailwind but it's still a very viable option and some other Frameworks out there are semantic UI Foundation UI kit I'm not going to go over all them because they're they're all pretty similar once you learn one it's pretty easy to pick up another one so SAS is another option that you may want to learn around this time it's a CSS pre-processor that adds extra functionality to CSS so it allows you to write CSS with variables and functions mixins um Native CSS is catching up with SAS features for instance we have custom properties in CSS which are essentially variables they're not as clean looking as SAS variables but they basically do the same thing um there's still a lot that SAS can do that CSS can't though so you can nest and inherit Styles which is a very helpful feature I would say learn SAS if you're using a framework like bootstrap where you need to customize the Styles also it can make your CSS very modular so you can separate it into different files and then you can import them into one another and this makes it easier to maintain you basically create your own CSS framework and you have a separate file for things like button stop or navbar Styles it's been around for a while there are other CSS pre-processors like Les and stylus but they kind of just faded away SAS has a a really good ecosystem of both command line tools and guey tools to compile it because you can't use SAS files directly in the browser right you can't just include them like you can CSS you have to compile it down to regular CSS and there's different tools that allow you to to do that it's also great for theming so where you want to have different color options and things like that um it is optional but again it's something that's really easy to learn so why not learn it you could you could learn it in a weekend and I have a crash course that pretty much shows you all the features that you need to know so next we have a batch of really helpful tools that you'll most likely learn and use early on so git is a version control system for saving and versioning your code as well as collaboration and say you should learn it no matter what type of developer you are you don't have to learn it before you start coding like you don't have to learn it right the second but it should be on your list uh as something to learn pretty early on it's it's really not difficult to learn the basics at the very least just create a GitHub account and learn how to create a repository and push that push your code to that remote repository and you can do it through the terminal through commands or you can do it directly through your your text editor through the guei markdown is another thing that you should probably learn it's a markup language that's used to style text similar to HTML it's used in a lot of places such as GitHub it's used in readme files which you should have for every project that you create it's used for documentation and it's very simple to learn you can literally learn it in a weekend or even even in a day uh and the things that you don't know you can always just go and reference I forget the the exact URL to the markdown website but very simple stuff so next we have editor or IDE extensions so most text editors such as vs code Sublime Text adom they have extensions or plugins that you can install and EMT is something that anyone that writes HTML and CSS should be using it's it's not even extension for vs code it's built-in but with some text editors you do have to install it so it gives you really nice shortcuts to create all kinds of HTML tags with classes and IDs and content CSS Styles it saves a ton of time it saves you a lot of typing so definitely something you should learn early on live server is another great one that I use all the time it gives you uh a devel local development server that updates as soon as you save your files so you don't have to go and manually refresh the page uh prettier is something that I use a lot it's a code formatter that will help you keep your code clean you can make it so that it's it it formats your code when you save the file another thing that I would highly recommend is to learn the shortcuts of your editor because it makes you much more efficient and makes you code much faster all right so next we have some AI tools that can Aid in writing code and problem solving AI is getting bigger by the day obviously almost to the point where it's a little bit scary but I know a lot of people fear that AI will replace replace their jobs or replace developers and I think that may be true to an extent when it comes to basic tasks but for the most part I think it's just going to change the way that we write code it's going to change the landscape and what developer roles entail uh my suggestion would be not to worry about it too much and try to utilize the tools that are out there to your advantage to make you a better developer and the two AI tools that have been pretty much invaluable to me are GitHub co-pilot and chat GPT so co-pilot is an AI pair programmer that helps you write code and you can install it as an extension to vs code and many other editors uh it's not perfect but it is pretty amazing and it helps you be more efficient saves a lot of time um helps you solve problems I use it for even things like like generating sample data you can say give me you know 20 give me a Jason file with 20 users with these fields and it just generates it for you so really cool stuff there's others that are similar like tab9 kite there's a new AI tool that looks really interesting called Codi I haven't used it yet but it looks really powerful and not only can you use it for like Auto completion and suggestions but you also have a chat window where you can interact with it and ask it questions about your project and not just a single file the entire project even if it's you know hundreds of files so really cool and then chat gbt is obviously huge right now it's incredible for learning just about anything um there's a few things that you really have to understand though when it comes to using tools like this the first is that it can be wrong it can be very wrong in fact so you can't just rely on that uh I use it kind of as a starting point along with other resources and the other thing is to make sure that you don't rely on it too much if you're just using it to generate code and using that code without understanding it you're not doing yourself any favors so use it as a learning tool not as a crutch and if you find yourself doing that I'd say don't even use it for now um but if you use it correctly it can be a great tool so next we have design tools and this is another area that you may or may not need to know depending on your goals and I usually suggest that you learn the basics of design unless you're working strictly backend as a freelancer you're going to need to know some of this stuff I think one thing that a lot of people don't realize is if you plan on freelancing you have to kind of have an eye for design and be able to create good layouts and good-look websit unless you're Outsourcing that work which you probably can't afford to do when you're starting out so as far as tools go figma is a great tool for designing websites and uis that's probably what I would recommend most people it's free it's web-based uh it's very easy to use it's not something you need to rush to learn but it will help you in certain situations some others include sketch which I believe is still Mac OS only uh you also have adob Adobe products like XD Photoshop Invision seems to be really popular for mockups and prototypes and then you have canva balsamic as well as well which are both web- based now while we're on the topic of design and again unless you're a backend developer I usually suggest learning at least the basic principles and these are some of the ones that I suggest you keep in mind when you're building websites or uis so color and contrast is important which color paletes look good the difference in brightness between elements I see a lot of hero images where I can barely read the text uh that's against the background image so you want to make sure that your text is readable this is one of the the biggest and most obvious mistakes that I see so white space Also important uh it's another big mistake I see when people don't have enough space between their elements or they have too much space having the right amount of white space can make a huge difference and really improve readability and just the overall experience of the website scale is also important you want to make sure that your elements are sized correctly you don't want to have a huge button and then a tiny input field things like that everything should be proportionate and then visual hierarchy you want to make sure that the most important elements stand out and you can do this with size color contrast this helps users navigate your website or UI and it's not only important for how your website looks but it's also important for how it functions and how successful it is in terms of sales or signups or whatever the goal of of the website is so obviously there's other principles typography is another one you want to make sure that your fonts are readable and consistent things like that and I think these are skills that anyone that works in the front end can benefit from you don't have to be a designer but you should know the basics okay so everything we've covered so far has to do with creating static websites and layouts and not really any Dynamic functionality or interactivity so that's where JavaScript comes in JavaScript is the programming language of the browser now how much JavaScript you learn depends on your goals so if you plan on being a backend python developer then you probably don't need to learn much much but if you want to become a front-end developer you'll probably end up using a JavaScript framework like react so you need to learn quite a bit if you want to be a backend or full stack developer and use node.js then obviously you need to learn quite a bit of JavaScript as well so this brings me back to why your end goal is so important now people always ask me how much JavaScript should I learn before moving to a framework like react and Shameless plug here I do have a course called modern JavaScript from the beginning that'll teach you everything that I recommend plus more it's a a 37-hour course but as far as just you know an overview of what I would suggest I'd say learn the fundamentals first so variables functions conditionals Loops things like that then you want to learn about the document object model which is how JavaScript interacts with the HTML and CSS learn how to select elements and manipulate them this is what's going to allow you to create things like like uh dropdowns and models and menus you know icons you click on and the menu slides out cool things like that and then high order array methods are important for working with data so methods like for each map filter and you should also learn the fetch API so that you can make requests to either a backend or a public API and fetch some data so you want to learn about HTTP and methods like get post put and delete and learning about promises and asynchronous code in general is a must in with JavaScript and then learn about Json which is a data format that's used to send data back and forth between the client and server so as a front-end developer you'll be using the Json data that's sent from the server and if you're a back-end developer you'll be creating or generating that Json data so I'd say that that's the minimum that you should learn before moving on to a front-end framework you can learn more if you want such as object-oriented programming classes prototypes things like that but I think that this is a good starting point all right so WordPress is a CMS or content management system that's built on the PHP programming language and I always struggle with where to put WordPress in this guide because technically it is full stack but you don't need to be a full stack developer to use WordPress or any tool like it for that matter uh a very common learning path is to learn HTML and CSS then a little bit of JavaScript and then get into WordPress and possibly PHP that was actually my path back in the the late 2000s so WordPress is especially handy for Freelancers there's a few reasons for that it allows you to uh build Dynamic websites quickly with little to no coding skills it's great for clients because they can easily update their own content without having to create uh without you having to create a custom admin area which can take months to build there's tons and tons of of themes that you can use as well as PL plugins to give you certain functionality both free and paid uh I do always recommend that people that that want to use WordPress also learn PHP so that they can really customize and create their own themes and plugins it does make all the difference in the world if your client asks for something specific and you can build it on on your own because there's no Plug-In or theme for that does what they want um believe me when I started freelancing I didn't know much PHP and I was using Wordpress and there were a lot of times where I had to tell my client that I couldn't do that or I'd have to pay someone else to do it but once I learned PHP I was able to just go in and customize everything I should say PHP and JavaScript because there was was some front-end stuff there's also a huge Community for support and learning I think something like 35 to 40% of the web is still run on WordPress so many like small business websites things like that all right so once you're able to create a basic website or small application front-end application you need to know how to actually deploy it to a live server and this is something that a lot of people don't seem to think about until they're done with a project and they're like now what so websites or applications that are just front-end HTML CSS JavaScript can pretty much be hosted anywhere you don't need to have a server like Apache or engine X which we'll talk about later in the in the backend section there's literally hundreds of options out there some of the most popular services are static hosts like netlify versel GitHub Pages now you can use something like versell to host like a nextjs website which is server rendered in fact versell created nextjs but they're also great for just plain old HTML and CSS projects and those three services are extremely easy to use because all you really have to do is push your project to GitHub which you should already know how to do it this time and then link your account and choose the repository that you want to deploy they will give you a URL they'll assign you a URL but you're going to want to purchase your own domain for your website most likely and there's a lot of services for that I personally use name cheep but there's Google domains GoDaddy there's so many different domain name registrars out there that you can use and as far as SSL certificates go a lot of Hosting Services these days include SSL so you don't have to really do anything extra if they don't and you need to purchase an SSL certificate on your own you can purchase one from from name cheep um there are different types or you can get a free one from a service called let's encrypt so that might be something you need to look into now out of the the hosting Services here for simple static websites or simple front-end applications or even SSR projects I prefer net lefi and versel I think they're both very similar they both offer Sim similar features you get things like form submissions serverless functions logs and and so on if you're are running a business and you you need for instance business email for your domain name things like that then you might want to go with a company like hostinger or blue host and these companies offer shared hosting which is very very cheap usually under like $10 per month and these Services I'm recommending for for mostly front-end projects when you get into larger full stack or or or or apis you're going to need something a little more a little more advanced something like AWS or digital ocean and I'm going to get into those Services a bit later but I would just suggest taking a look at some of them and and seeing what works for you you know do your own research on on the services all right so let's see where we're up to at this point I'd say if you're familiar with most of what we've talked about then you're somewhat of a a foundational front-end developer or a web designer if you you lean more towards design as well and if you plan on being a backend developer a lot of this doesn't really apply to you however I usually do suggest learning the basics of HTML CSS and JavaScript even for backend devs it just gives you a better understanding of how the frontend works and how to work with it and that's just my personal suggestion but I know not everybody has enough time to learn everything so you should have a familiar development environment that you work with including a text editor or IDE a set of helpful extensions some kind of local development server like live server uh a terminal although at this point you probably don't need it much and then you should know the basics of git and GitHub so you should know HTML and CSS pretty well enough to create static websites with responsive layouts have a good understanding of the Box model knowing some design principles and stuff that also is very helpful you should know at least enough JavaScript to create some Dynamic elements like models dropdowns tabs form validation and just the ability to make Pages Dynamic and be able to add and remove CSS Styles dynamically with JavaScript and having knowledge uh about HTTP requests about the the request response cycle HTTP methods and using the fetch API understand asynchronous code and promises and then you should also be able to deploy a basic website or application to uh a live server using a service like netlify a versel or whatever it is that you choose now CSS Frameworks like I said are optional but in my opinion are recommended I would suggest either bootstrap or Tailwind they're easy enough to learn and they do help you you know style your websites much faster SAS is also optional but recommended as well because you can learn it really fast and I think I mentioned this but I I might not have but it's really important to to learn CSS before you jump into any kind of CSS framework just like with JavaScript you need to know fundamentals before you move to a JavaScript framework um some of you may choose to go the WordPress route especially if you're going to be freelancing if so you should know how to install and set up plugins themes widgets also work on learning how to create your own themes and plugins once you're ready to start learning PHP as far as Jobs go you could start applying with this knowledge but typically front-end positions are going to want you to know a framework like react or view so you might want to learn one of those first in my experience there are a lot of jobs that are willing to train you if you do know if you you know you're familiar with JavaScript but you just really haven't gotten deep into a framework yet some companies are willing to train you on that um you could also start freelancing at this point you could create websites for small businesses and individuals so it's really up to you on where you want to go next now from here it really depends on what you want to do and I think there's a few different paths you can take from this point so let's say that you want to be more of a web designer or or work for a small agency or freelance you might choose to learn more about design get better at CSS maybe get more into WordPress or even some no code tools like web flow you probably want to learn some SEO practices as well because that's something that a lot of clients will will need um this route usually is a mix of coding and business and you work really close with clients in other businesses you may even get into some marketing I did this for quite a few years myself um you could also go the the full-blown uiux designer route which is kind of out of the scope of of this guide um but maybe you find that you're better at design than coding I I've seen a lot of people do that they start off wanting to be a web developer but they end up um getting more into you know figma or uh Adobe XD and they they get more into the design side of things so that that could be an option as well and then the next option is to proceed with the front end and this this is probably the most common among my audience at least if you're more into the coding aspect and you want to work for a company as a front end or even full stack developer you can continue to learn more about JavaScript and learn a framework like react view or angular all right you can learn about UI components and state front-end workflows and and build tools like webpack and vit static site generators like Gatsby and SSR Frameworks like next JS you'll also learn about testing and performance this route is much more focused on coding and less on on design and again this could be for you whether you plan on being a front-end or a full stack developer and I want to stress that if you do plan on freelancing you can still proceed with this particular path it can be really beneficial to learn something like react and maybe a static site generator like Gatsby and use that along with a headless CMS that's that's a good stack for a freelancer because you can create things that are very Dynamic and you can create them really quickly and I'll talk more about that stuff soon next if you want to be a backend developer or a full stack developer and just start with the backend next you can take this approach so you can move to a server side programming language like python C PHP or stick with JavaScript and learn a runtime like node.js or even a newer runtime like bun JS or Dino so you'll also need to learn a backend framework like Express if you're using node D Jango for python larl for PHP uh maybe asp.net if you're getting into C so lots and lots of choices and we'll get into all of that and then you're also going to need to know about uh databases so either relational or nosql databases with this option you'll be creating apis for front-end developers to work with if you're going full stack then you'll be creating and consuming apis you may also want to learn a little a little bit about devops and how to deploy server side applications to and apis to production so I'm going to continue with what I see most people do and move further down the frontend developer path so we're going to take the the middle option here now before we look at front-end Frameworks and ecosystems I want to address a change that's that's happening where the front end is evolving quite a bit and this may seem complicated and overwhelming at first but I think we're headed in the right direction so website started off with a traditional multi-page server rendered approach so think of like a PHP website each distinct piece of content is presented on separate HTML Pages whether it's static whether you create those HTML Pages or they're generated by some kind of server side language like PHP and this is still a common approach it's great for SEO but the UI isn't as fast and dynamic as if you were to use a front-end framework like react which which for many projects is absolutely fine then these front-end Frameworks come along and change it up where we're building single page applications or spas and this is where the entire UI the entire application or front end is bundled into a JavaScript or or multiple JavaScript files and the browser loads a single HTML page so when you click on a link it doesn't actually go to a new page like it would for a traditional HTML or PHP site it just changes the URL and then JavaScript handles the rest and this makes the site very Dynamic it gives you a very fast and and interactive user interface on the client side but it's not great for SEO and it can lack performance in some areas so now we have what are called SSR or serers side rendered websites this is where the page is initially rendered on the server by default and then sent to the browser similar to traditional websites however we can still have that interactive fast user interface by using client side components in Frameworks like react and view so you really get the best of both both worlds and we do this through what are called met meta Frameworks or SSR Frameworks there's different names for them but some examples are nextjs which you can use react and you can have your pages server side rendered nujs for view you have spelt kit for spelt so I'll talk about those Technologies in a bit but that's kind of the approach that we're St stting to see more of now now in addition to that you have static site generators like Gatsby gridsum Astro nextjs is also a static site generator and these are Frameworks that allow you to build static websites with react view felt so you can have a static website with a dynamic UI and I know that sounds a bit confusing but it I think it's a good thing because it gives us more options and allows us to build better websites or more interactive websites and applications so instead of talking about front-end Frameworks and then talking about SSR and static site generators I'm going to talk about them all together as an ecosystem I think that makes more sense so if you're a react developer and you want to learn SSR then you're probably going to use something like nextjs or remix because you already know react you just need to learn the the the nextjs way of doing things now since this can be confusing especially for beginners I always say that I always say I always say start with a single page application if you're learning react just start with Spas using Create react app I'll talk about that in a minute and basically go with the whatever's in the framework's documentation then once you're comfortable with that you can move to a meta framework like nextjs so think of it as you're you're not just learning or getting into react or view but you're getting into that entire ecosystem and that can include SSR SSG State Management mobile Frameworks UI component libraries and more so you don't have to learn all these things but the more you learn the more types of projects you can build now there's a crap ton of Frameworks out there but these are the big four you have react view spelt and angular and I would suggest learning one of these because if you choose some obscure framework it could go away at any point you know and no longer be supported and there's probably not much of a community you may have a hard time finding a job so would stick to one of these and I'm going to go over each one and then after that we'll go over the ecosystems of each one so we'll start off with react which is a front-end framework that was created in 2013 By Facebook and I would say it's the most popular front-end framework it's been around for quite a few years now there's quite a few react jobs out there in many areas so if you're looking to work as a full-time developer then react is a good choice it's a component based framework work as are all of these and it uses jsx which is a syntax extension to JavaScript so it basically allows you to write HTML within your JavaScript and within your components it's not required with react but it's the most common way to use it and the most common way to write components now and when I say components I'm talking about pieces of the user interface so a search input uh a nav menu an article whatever you you you start to think of your website in terms of UI components now technically react is a UI library and not a framework however it's so popular and has such a huge ecosystem that I think it's fair to call it a framework and it's a direct competitor to Frameworks like angular and just know that react is a library so you'll most likely be installing a lot of other packages react does have one of the or I'd say the biggest ecosystem and that's not necessarily a good thing because it means that the framework itself is pretty bare bones and you'll need to install other packages to do things like routing Etc I'd say it's pretty middle of the road when it comes to the learning curve there are some things that might make you scratch your head and things that are a bit easier to do in other Frameworks especially when it comes to State however it's much easier than something like angular at least in my opinion it's also pretty quick to to get something up and running with now when it comes to Performance all the Frameworks are pretty impressive it's hard to really gauge this because it depends on the project and how you write your code react is generally more performant than angular um it's also much lighter but it's not as performing as something like spelt but again it depends on the project and how you write your code you can use things like memorization and lazy loading things like that to improve performance now there's also a lot of jobs in react in most areas at least in the US I'm not really familiar with other countries and this is definitely a good reason to get into react but it shouldn't be the only reason if you hate writing react you may be better off using something that you like even if there's less jobs and remember if there's less jobs there's probably less competition as well also remember when there's a lot of jobs with a certain technology that's really popular a lot of people know that technology so you have to weigh the pros and cons next we have vue.js which is a framework that was created by Evan u in 2014 and it gains more popularity every year a just the fact that it was created wasn't created by a tech giant like Facebook or Google and is still one of the most used Frameworks is pretty impressive and it shows that it's a great framework one of if not the main focus of vue.js or main focuses is Simplicity and performance and it is component based of course just like the rest of these and it uses a template syntax that's very similar to HTML and view components are very simple there's an area of the template for for the output or the HTML the logic or the JavaScript and the Styles and there's two different ways to write your JavaScript in view components now at least with uh since version three there's the options API where your component is an object with properties and methods and then the view version three introduced the composition API where it's uh you have a setup function and you return the data and methods from that function I'd say the options API is a bit easier to learn but the composition API is more powerful that's just my opinion though so like react view is also very lightweight and on its own it has a a pretty similar ecosystem to react when it comes to you know SSR and SSG Frameworks and so on and we'll take a look at those soon I would say that Vue is one of if not the easiest Frameworks to learn of course I'm saying that relative to the others uh it's also very powerful and it has a lot of the same features as react so as I said Vue has a focus on performance and it's very fast has a very small bundle size so next we have angular which was created by Google and there was a version back in the day called angularjs I believe around 2010 and the entire framework was revamped for version two which is just angular so if you hear angularjs and angular those they're usually two different Frameworks so if you just go by the cont content in things like YouTube and Twitter and you know things you read online you might think that angular is kind of dead however it's still very much alive and used by a lot of really large companies and Enterprise level projects so I don't think it's going anywhere anytime soon the others are more popular with startups smaller companies individuals and of course they're they're also used by really large companies um but you see mostly react and view if you're looking at YouTube tutorials and videos and stuff like that um but yeah angular is a true full-featured and opinionated framework meaning that there's certain ways to do things where with something like react you have much more freedom and you can there's a million ways to do the same thing now angular includes a router it has its own HTTP client it has its own Services animations and much more it also uses typescript by default which is a superet of JavaScript that lets you use types and you can use typescript with any framework however it's the norm it's the default for for angular applications and it also ships with the angular CLI which is a command line interface that allows you to create an angular application with virtually no configuration and it's used to build and deploy your app not only that but you can set your project up to be a spa so a single page application or an SSR or a pre-rendered static site so the ecosystem as far as third-party tools is much smaller than react or view because again so much is included in the framework itself I think angular has a pretty steep learning curve and I don't usually recommend it for beginners unless they're going to be working for a company that uses it um but that's that's just kind of my opinion and it seems to be the opinion of a lot of people the bundle size is larger than others which is expected because it's so full featured however it's still pretty fast for what it is um for most projects the bundle size isn't going to be an issue anyway so the last one we have is spelt which is a modern JavaScript framework for building web applications that takes a kind of a different approach in fact technically spelt is a compiler and it focuses on shifting a lot of the work that's traditionally done at runtime to compile time so other Frameworks like the ones we just talked about use what it's called a virtual Dom while spelt comp piles your components into highly optimized vanilla JavaScript code during the build process so this results in faster and more efficient applications and it's also the most lightweight of the four as far as writing codes felt offers a simple and intuitive component-based approach where components are written using a clean HTML like syntax with JavaScript logic embedded directly within them so when you write spelt code it it it feels a lot like vanilla JavaScript out of I'd say out of all the Frameworks it's almost like what you wish JavaScript would be on its own in terms of how you create events and dynamic interaction with with HTML uh spelt has a a pretty easy learning curve I'd say spelt and view are definitely the easiest to learn uh it has a very straightforward development experience which makes it an an attractive choice for building modern web applications the downside to felt is that it's it's fairly new so when it comes to finding jobs I just don't see a lot of them and I'm not saying that you can't find a job as a spelt developer but there's a lot more react View and angular jobs out there and it's a it's a great framework on its own though and I would suggest checking it out um now the ecosystem for spelt is really small because there's an official meta framework called spelt kit that pretty much includes everything you need to build a full stack application you can build Spas SSR static websites it handles all the routing the building the dev server and much more all right so now I want to talk about the ecosystems for each of the four Frameworks and instead of showing you a page with all the SSR Frameworks all the static site generators I'm keeping it within that particular framework ecosystem and some of this stuff is are tools that are built into the framework but most of it is is thirdparty tools to add function it and I'm going to start with react because it has the biggest ecosystem and then I'll talk about the others and you're going to see that most of what is available for react is also available for the others whether through native features or through thirdparty packages so we'll start with create react app that's probably what you're going to start with if you if you're just starting to learn react and this is more more of a traditional way to use react it's a CLI a command line interface that allows you to to spin up a project with no configuration it's great for beginners and it's what you would use to create a spa or single page application so you could install react manually if you wanted to but I wouldn't suggest it because create react app gives you additional features like Hut reloading gives you a Dev server service worker and more and it's built on top of the webpack build tool and you can eject from create react app if you want to customize the configuration and really dig into webpack but I wouldn't suggest just that unless you really know what you're doing now as I said react is referred to as a framework but it's technically a UI library and it doesn't have some of the essential things that you would find in a framework and a router is one of those things so with a single page application you need to manually Define your routes it's not like an SSR framework where you just put a file into a certain folder and then it's accessible you need to install the router and you need to create your routes and the most popular way to do this is with react router which is the official re router that you would use and you'll typically learn about this along with react it's very easy to use it has a lot of features and it's very well documented now when it comes to managing state or data in your application you have component level state which just pertains to that component which is pretty easy to handle but then you have app level or Global state where you need to share that data between multiple components now in my my opinion react isn't the best with State Management out of the box there is a built-in context API that you can use along with some hooks but it's fairly difficult for beginners to grasp also if you're building something with a lot of State you might have to reach for a third party solution so Redux has always been pretty popular um Redux also isn't the easiest thing to deal with I think Redux toolkit makes it a bit easier that's another a library you can use on top of Redux you also Al have mobx which is a popular state management tool there's some others like zo zustand zustand I'm not sure how to pronounce it but um that's gaining some traction recoil xstate there's a lot of different ways you can manage state within react but I would say learn the the native features first learn the context API learn the you know usate hook user reducer hook and so on now when we get into the server side rendered Frameworks I think that this is where react's ecosystem really shines nextjs is a great framework and just great platform to build react projects with it uses react server components so all of your components are actually rendered on the server by default and you can fetch and load data very easily from the server you can also make them client side components and make them Dynamic just by adding a single line at the top saying use client um next JS also is a static site generator so you can create static websites then you have remix which is another SSR framework that's built on top of it's actually built on top of react router and it's very similar to nextjs it's a bit more difficult to learn in my opinion but it does have some features that next doesn't and I do have a crash course on both if you want to check them out SSR websites are great for SEO and performance you really get the best of both worlds like like I said earlier and you can also use uh something called a headless content management system like content full or sanity and I'll talk more about those later but those pair really well with SSR Frameworks now Gatsby takes a different approach compared to traditional single page applications or or SSRS it's a static site generator so instead of rendering content on the client via JavaScript Gatsby generates static HTML files at build time so this approach results in really fast load times and improved SEO so it's built on top of react so if you already know react you can easily jump into Gatsby it has a data layer that uses graphql which is a query language for apis and I'll get a little bit more into that later um but yeah Gatsby and nextjs are both used to create really fast static websites and again you could use something like a headless CMS for your data and use the stat static website as your front end so of course you can write your own CSS and styles but you you might want to use a UI component library or UI kit these are pre-built components that you can use in your application and they're great for beginners because you don't have to worry about styling you can just import the component and you can use it so there's a bunch of these material UI is uh really popular one it uses Google's material design pattern and it's very customizable has a a ton of components to choose from some other popular ones are react bootstrap which has pre-built bootstrap components Shakra UI which I really like I think has some really goodlooking components and then you also have a library called styled components which is a CSS njs library that allows you to write CSS in your JavaScript so this is is it doesn't come with pre-built components like the other ones do but it allows you to essentially create your own pre-built components so another part of the ecosystem is react native which allows you to build native mobile applications using the react framework and what's great about react native is that you can use the same codebase for both IOS and Android usually when you build native mobile apps you have separate a separate Swift Code base for iOS either Swift or objective c and then you'll have a separate cotlin or Java code base for Android apps where with react native it's it you have just one app for both and it's also great for web developers because you can essentially use your JavaScript skills to build mobile applications so those are the main parts of the ecosystem but there's plenty of other smaller things you might find yourself using such as react query which is a library for fetching caching and synchronizing data you have libraries to work with forms like formic and react hook form react testing library and many other libraries to to test your react applications there's libraries for animation there's even even Frameworks and libraries for using react to build VR so virtual reality and augmented reality environments um you certainly don't need to learn all of this but if you learn react you can get into all this stuff pretty easily so the vue.js ecosystem almost seems to miror reacts it has a lot of the same features and tools so create view is similar to create react app but just for vue.js it's a CLI and Scaffolding tool to create a single page application and it's built on top of a build tool called vit so vit is a newer build tool that's much faster than webpack we used uh we used to use something called the Vue CLI which is still around but I don't think it's supported anymore I would just suggest using Create view uh if you're building a spa with VJs and then Vue router is the official router for VJs it's very similar to react router it allows you to create routes for your application it's very easy to use very well documented now State Management with the native vue.js is is pretty easy compared to react just by the way components are structured but there are tools if you need more advanced State Management so VX used to be the official state management tool for view but now it's called pinea which works in a very very similar way to VX and it allows you to share your state across components and pages and it works of course with view version two and version three you also have other options like xstate Harlem uh and there's a lot of other thirdparty tools you can look into if needed and then nujs is very similar to nextjs it's a server side rendered framework or meta framework for vue.js it's great for SEO and performance it's also a static site generator so it includes most of the features that nextjs does as far as filebase routing server components data fetching utilities um it uses the Nitro server engine if you're a view developer and you want to get into SSR you're probably going to be learning nujs and then gridsum is a popular static site generator built on top of you and it's very comparable to Gatsby and it's ideal for building fast and efficient static websites blogs documentation sites it's also um uh it also uses a graphql data layer just like Gatsby so you can kind of see the pattern here everything that react has view basically has in its own right and then as far as UI libraries go VY is probably the most popular it's similar to material UI for react it's based off of Google's material design pattern very customizable tons of components probably what I would recommend but there's others as well um if you want to use bootstrap components you have bootstrap view I believe believe there's also one called view strap you have quazar Buffy which is uses the balma framework so tons of of UI kits available and then as far as mobile development there's not really something that's directly comparable to react native um you do have native script or native script view but native script you can use any any um uh framework with you could even use react with it and it has access to Native API so you can essentially create uh a native mobile app with View and have a single code base for both IOS and Android and then some other things you might run into our view query or tan stack which is basically the react query for view it's a way to fetch and cache data you have view testing utilities you have native animations that you can use um that's built into the framework and then for virtual reality you have Vue VR so just some things that I figured I'd throw win that you might find uh find in the ecosystem now for angular the the ecosystem isn't as big or I should say a lot Mo a lot of the stuff is built into angular itself because it's a much more full-featured framework so you're not reaching for as many thirdparty solutions so the angular CLI is the official command line tool for angular it allows you to create build test and deploy angular applications and it's it's similar to create react app and create view it's built on top of webpack and it's pretty easy to use also very well documented um you can enable SSR with angular CLI which is pretty cool it was initially called angular Universal the SSR framework but that repo has been merged with the CLI there's also options to pre-render your app which is similar to static site generation now the angular router is the official router for angular and it's very similar to react router and view router except it's built built in you don't have to install it separately and it includes things like route guards it even has some animation options uh so very cool now as far as state goes one thing I really like about angular is the concept of services this gives you an easy way to manage your state because you can inject a service into your components and you can share data from that service across your entire application okay you also have ngrx which is the official state management tool for Ang it's similar to Redux um it's it's actually built on top of something called rxjs which is a library for reactive programming using observables so dealing with asynchronous code similar to promises and it's a bit more complex than other State Management tools but also very powerful and it's great for larger complex applications uh and again for SSR and static sites you can just use the CLI so there is no nextjs or njs for for angular U it's all included and bundled in the CLI for UI kits angular material is pretty popular you also have NG bootstrap Prime mg Clarity and a bunch of others as well with that you just kind of have to go through and see which ones you like what what components you like the look of and so on uh if you even want to use a UI kit and then for mobile apps you can use native script just as well as you can use it with any framework um you can also use ionic for hybrid apps which I'll talk about later and then as far as other tools you might find yourself using obviously typescript because that's the default with angular some other packages I've used are angular fire to work with Firebase um which we'll also talk about later formly for forms and angular testing library for testing um and testing is built in with the CLI as well so spelt is newer than the other framework it doesn't have as big of an ecosystem because it has an official meta framework called spel kit which is awesome I really like the way that spelt does things it's a full stack framework that allows you to build single page apps server side rendered apps and static websit so it's basically an all-in-one tool and it's great for SEO it's great for performance um it's similar to nextjs and knjs with some elements of Gatsby and gridsome so you can basically build whatever you want with spelt and it's built on top of the vit build tool um sapper was the original meta framework for spelt but it's no longer supported so spelt kit is basically the new version of sapper and State Management is is really well integrated you don't really need to reach for a third-party solution because spel kit has uh a context API and built in readable and writable stores that you can use to share data between components of course if you want you can use a thirdparty state manager but I think for most types of applications the built-in the built-in functionality is really all you need and there's also a bunch of UI kits like spelt strap which is a port of bootstrap for spelt there's U there's carbon components which is aort of IBM's carbon design system as well as flow bite and some others so the the way that spelt does it I think is is the way to do it just have everything bundled in a single official meta framework now you can see that a lot of these framework ecosystems basically all copy each other they all have the same features and tools so it really comes down to what which one you like best you can pretty much build the same stuff with any of them some are might be a little more performant than others but they're all pretty fast so those are the big front-end Frameworks and ecosystems and I know that it's a lot of information but I think it's important to know what's out there and what I suggest is is just trying each one out and seeing what kind of Vibes with you uh a lot of people on the internet like to say this one's great and this one sucks don't ever let that be the deciding factor try them out for yourself and see what you like I think they're all great and they all have their pros and cons all right so let's talk a little bit more about typescript I mentioned it a couple times but didn't really talk about what it really is um it's available for front end and backend if you're using something like node.js and typescript is a superet of JavaScript meaning that it is essentially JavaScript it is the JavaScript language but with some added features so anything you can do in JavaScript you can do in typescript but then in addition you have features um such as static typing that's kind of the main addition to it is that JavaScript by default is a dynamically typed language which means that you don't specify the types of your variables or function return values you don't say this variable is a string or this one's a number but typescript allows you to do that and you might say well why the hell would I want to do that why would I want to write more code when I don't have to and it's kind of hard to explain until you use it and really see the benefits it's not for everyone but I think it's worth learning I think that having types does require more code but it also makes your code more robust and less prone to errors it also makes your code more descriptive and readable and if you use something like vs code it will give you more intellisense and show you you know what properties and methods are available for or or what you're missing um so there are a lot of reasons to use typescript all right so headless content Management systems are becoming more and more popular and they allow you to create content in a user interface similar to what you would do in a WordPress admin area and then they generate an API from your content and you can use that API in whatever front end you'd like and these these can also be useful for Freelancers because clients can log in they can update their content easily and uh of course you could create your own custom admin area for them but that takes way more time and money and these are really popular with static site generators like Gatsby as well as SSR Frameworks like nextjs or njs so let's just take a a look at at a few of the popular ones there's tons of these out there so sanity or sanity.io is a headless CMS that can be used by projects of all sizes companies like Nike and figma use sanity there's a free option for personal projects but you can also pay for plans for for teams uh for really large projects so it can be good for really complex applications or something like a personal blog content full is another popular headless CMS that has a ton of features it's used by companies like Spotify and Urban Outfitters it's also free for personal projects and you can pay for plans for teams and there's also extensive Integrations available so strappy is a free and open source headless CMS that's built on top of node.js and it uses a mongodb database and it's great for small to mediumsized projects it's also very customizable I like strappy because it's open- source and you host and manage or you can host and manage everything yourself um the interface is pretty easy to use as well it can generate a rest API or a graphql API from your content I do have a crash course on strappy if you're interested uh I also have a crash course on the next one which is prismic and this is another headless CMS that uses a structured content model based on slices and it allows content creators to build Dynamic page layouts with reusable components and this is good for allowing non-technical users or your clients to create versatile content and and then High graph is a new uh new product that looks pretty cool it's it's not something I've used um it's a headless CMS with e-commerce capabilities so you can you can build an entire shopping platform API and it integrates seamlessly with payment gateways it also uses graphql again I'll talk about graphql in a little bit now if you haven't used WordPress in a while you may not know that in addition to the traditional WordPress CMS it also has headless capabilities and you can generate a rest API from your WordPress content and it's easy to get up and running um it's it gives you the the powerful WordPress admin interface without being bound to the front end without being bound to Wordpress themes so you can use anything you want react view spelt whatever um so this can be really good for free uh Freelancers as well now there's like I said there's a ton of these and I would just suggest taking a look look at a few of them and seeing if you like it see how you know how the API can can be generated and how you can integrate it into whatever it is you use in your front end now there are some other newer smaller Frameworks and other tools that I want to mention I'm not going to go into detail about them but I'll give you a brief overview if you're just starting out and learning one of the big Frameworks you don't need to worry about these just yet but if you're a more experienced developer you may want to check them out so solid is a declarative JavaScript library for creating user interfaces and it's built on top of jsx which is the syntax extension to JavaScript very similar to react in fast in fact the framework overall is very similar to react and solid js's reactive rendering is one of its standout features it uses um fine grained reactivity to update only the parts of the Dom that actually change resulting in high performance and minimal rendering so it's fairly easy to learn I still need to create a crash course on it it's not as popular as the other Frameworks but it's also much newer and it's growing in popularity so I won't be surprised if we see a lot more of solid JS Alpine JS is a minimal framework for composing JavaScript behavior in your mockup so in your HTML and it's quite different than the other ones we've talked about in fact I wouldn't even put it in the same category it's more of a utility Library it's very small and it's great for adding some Dynamic elements to your website without having to learn a full framework and you also don't have to write any JavaScript it almost makes HTML function as if it were a programming language so you can have conditionals and um loops and stuff like that within your HTML just by using special tags so if you have a basic website and you just want to add like a drop down or a modal you can do that easily with alpine JS and there's no need to learn learn a full framework it also pairs well with laravel templates or you can use it with d Jango and Frameworks like that and then HTM X is another really cool technology it's a a JavaScript library that allows you to create Dynamic front ends again without writing any JavaScript code and it does this by allowing you to use special attributes in your HTML to make HTTP requests and then update the Dom so it's actually similar to Alpine but it's more focused on making HTTP requests and it's great for adding some some um Dynamic elements to your website and making requests to an API or backend without having to learn a full framework and I think Alpine and HTM X are great technologies that work much differently than traditional framework so I would definitely suggest checking them out now Astro is one of my favorite new Frameworks it's actually a static site generator as well as an SSR framework and you can ALS also create a API endpoints with it I just did a quick start course that's available on YouTube and on my website what's really cool about Astro is that it builds zero JavaScript by default it actually renders the HTML pages on the server and uses an architecture called Islands also you can use Astro components which are very simple and straightforward or you can use react components views felt so it's it's sort of like a nextjs but it's not bound to react or any other framework uh it's also built on top of vit which again is a very fast build tool so definitely worth look stencil or stenciljs is something that I haven't used yet but it's a tool chain for building reusable scalable component libraries it's it was built by the ionic team and it's a compil compiler that generates web components so you can create your own components and you can basically use them in any framework you want or in just just JavaScript so JS Doc is something that has been around for a while I actually did a crash course on it years ago that I forgot about but I'm seeing a lot of it lately where people are using it in place of typescript and it's actually an API documentation generator for JavaScript but it can be used to add types to your JavaScript code it's not as robust as typescript but it's a lot easier to get into and I'd suggest looking into it and seeing if it's something that you might benefit from all right so in addition to tools languages and Frameworks you also have a lot of web apis available in the browser that you should be familiar with and I'm not going to go over all of them but I'll list some of the common ones here many of these are easy enough to learn I just suggest spending a little bit of time on them so the canvas API provides uh a means for drawing Graphics via JavaScript and the HTML canvas element uh among other things it can be used for animation game Gra Graphics data visualization photo manipulation realtime video processing and much more so canvas API probably something you you want to check out and then the geolocation API allows users to provide their location to a web application if they so desire uh for privacy reasons the user is asked for permission before they you know accept to show their location but this can be very useful for things like Maps weather apps um you can c tailor The Experience based on the user's location things like that the web storage API provides mechanisms for the browser to store key value pairs in uh a much more intuitive fashion than using cookies it also allows you to store more data than cookies and you can store data locally or session based so this is also called local storage and session storage now the web workers API makes it possible to run a script operation in the background thread separate from the main execution thread of a web application so this allows for long running scripts that are not interrupted by scripts that respond to clicks or other user interactions and allows long tasks to be executed without yielding to keep the the page responsive web the web sockets API makes it possible to open a two-way interactive communication session between the user's browser and a server and with this API you can send messages to a server and receive event driven responses without having to pull the server for a reply so this is great for chat applications and other real time applications um then you have the the web and video apis obviously these allow you to create and manipulate audio and video content you can create audio and video players record audio and video and even create audio visualizations so some others you might want to look into our web RTC for realtime communication and video streaming the Bluetooth API the web search API things like that um they're all fairly easy to get into once you learn the basics of JavaScript so I'd suggest learning about them and maybe building a small project with some of them all right now testing is something that you may or may not get into testing ensures the reliability functionality and security of your applications and I would suggest looking at your project load to see if testing would be beneficial uh I'm actually creating a video now that goes into all of that so it should be released by the time you watch this now if you're freelancing and you're using something like WordPress or building static websites you won't need to worry about testing but if you're building larger more complex applications it can be beneficial or if you're working for a company that requires you to write tests then obviously you need to learn it um but I think it's a good idea to at least see how testing Works check out some of the libraries and and some of the different types of testing as far as the different types there's a lot of them but I'd say the most common are these three you have unit testing this is where it pertains to individual units of code this is probably the most common type in web development then integration testing is the process of seeing how different elements of your application work together and then you also have endtoend testing which is the process of testing your entire application from start to finish and every programming language has testing tools I'm not going to go over all those but just some of the popular ones since we're talking about JavaScript just is very popular um it was built by Facebook and it's pretty easy to use it includes built-in assertion libraries mocking capabilities powerful features like snapshot testing mocha is another highly flexible testing framework for JavaScript uh if you're looking to run endtoend tests Cypress is is a good option it's it's JavaScript JavaScript based testing that allows you to write tests that run in the browser and then enzyme is a JavaScript testing utility for react you also have react testing Library there's just so many of these and I can't go over all of them for every language but um definitely something you want to look into if you're looking to build really complex applications all right so if you've learned most of what we've talked about then I'd say you're a pretty Advanced front-end developer so so if you're fluent with a frontend framework whether it's react view felt angular as well as their ecosystems um so have some frontend tooling skills so you should know how to use npm to install packages uh CLI tools module bundlers like vit and webpack and then server side rendering that's definitely something that a couple years ago I would say is optional but now I think that it's something that you need to get into so if you're becoming a react developer then you should be learning about nextjs or remix um spelt kit angular SSR njs whatever it is service side rendering I think is the future for um for you know a big part of web development and then static site generators also very useful if you want to build really fast performant websites uh headless cms's are obviously optional but they're really helpful again especially if you're freelancing and you want a way for your client to be able to update their own content but use whatever you want on the front end so uh really cool stuff and then some additional tools such as typescript uh Alpine HTM X some of the newer Technologies you might want to just mess with and get into web apis I would say you should understand a lot of the common uh apis that are available like canvas the speech API geolocation things like that so now that we've gone over the front end let's talk about the back end end and if you want to be a full stack developer or a backend developer that creates apis microservices you need to learn a servers side language or service ey technology and this is where you start to get a lot of options really you can use any language that you want that has HTTP capabilities but I'm going to go over some of the most popular choices and I'll give you some stats at the end of this section as well so the first option I have is Javascript right JavaScript was initially created for the browser but now we have these runtimes that allow us to use JavaScript as a server side language a very fast server side language no JS being the most common and definitely what I would suggest if you're just getting started there are some newer interesting options to play with if you already know node.js Doo is a a newer runtime that's built by the same person that created node it's very similar to node but it has some interesting features like built-in typescript support built-in package manager bung s is even newer and more interesting and I'm actually going to have a slide dedicated to to that towards the end but nodejs is very popular for building apis microservices as well as full stack applications it's non-blocking and event driven which makes it highly efficient for handling concurrent connections and IO intensitive tasks what it's not good for is CPU intensitive tasks so if you're building something that requires a lot of processing power you may want to look into something else um but node.js is is great for just about everything that has to do with web development so anything where we're just doing crud operations create read update and delete working with databases Etc it's built on the V8 JavaScript engine which is the same JavaScript engine that powers Google Chrome and it's also pretty easy to get started with now you'll need to learn about npm which is the node package manager and you can use it to install all types of packages and libraries um if you're familiar with a front-end framework then you already know how to use npm because it's used on the front end as well um you'll need to know about the node.js ecosystem there are a lot of tools and Frameworks that you can use with node I'll go over some of those soon node is pretty popular with startups as well as large companies and the biggest reason for me why I like node.js is because I like JavaScript and I like to have the same language on both the front end and backend so if I'm using react on the front end it's nice to be able to use the same language on the back end as well now python is another popular option it's a a general purpose programming language that's used for a lot of different things in fact I'd say Python's probably one of or the most diverse languages out there it's great for data science machine learning automation but it's also great for web development whether full stack application or apis in microservices and python has great readability um It's relatively easy to learn there's some phenomenal Frameworks that python offers such as D Jango and flask I'll talk about those soon and python is great for beginners it's uh like I said very readable it's easy to get into also at some point if you want to transition from web development to something like data science python is a great option it's just a fantastic general purpose language overall next we have PHP which is a server side scripting language designed for web development so unlike python where there you can use it for a lot of different things PHP isn't really used outside of web development at least on a large scale and its purpose is to build Dynamic web pages so there's some popular platforms that use PHP such as WordPress um I think PHP is great for Freelancers because again it's a tool that allows you to get things done quickly and it's Unique from other languages because you can actually go to a PHP page in the browser and load the page on the server and you can write HTML directly in your PHP files so it's essentially a template language and you can't really do that with any other languages the downside to PHP is that you you get so much Freedom that it's really easy to write bad code and I think that's why PHP does get a bad WAP sometimes but if you know what you're doing you can write clean code with PHP and Frameworks like laravel address that and pretty much don't allow you to write bad code or really bad code um so it's definitely a a good choice in my opinion now go or goang is a statically typed language developed by Google and it's known for its performance and efficiency which makes it suitable for building web services apis and Powerful applications um it's it's also great for building things like command line tools uh it's a fairly new language but it's growing in popularity it's among the top 10 primary languages for professional professional developers with a share of about 7% and it's used to it's used by some really big companies and um Power some really huge applications in apis it's not really something you'd use for like a personal blog it's more for large scale applications um one thing about goang is it has a very vast standard Library so you can build quite a bit without reaching for any kind of framework however there are some great Frameworks that you can use with go and I'll talk about those soon um it's also a very secure language it scales well making it suitable for large scale applications and it's used a lot in the the big business world so C is also a general purpose language it's a robust objectoriented langu language developed by Microsoft it's used for building desktop applications web apps mobile apps games and more and it's a very popular language and used by a lot of companies it's also used for game development with unity um it's a great language to learn and it's very similar to Java but better in my opinion it's also used with the Net Framework which is a software framework developed by Microsoft that's very very powerful and can be used with many different types of projects then you have asp.net which is a web framework for building web applications um very similar to something like Jango or laravel but it's a great language it has good performance it's very secure and definitely um definitely a candidate so Java is another general purpose objectoriented language that's actually really similar to C Java is used for again desktop apps Android apps backend web development and more and it's been around for a really long time and it's most popular in the Enterprise world it's used by a lot of big companies one stack that I see a lot of in big business is Java or C on the back end and angular on the front end so I may get some crap for this but I think Java is one of the best languages to learn programming in general uh it's very strict and it forces you to write clean code in an object-oriented way it was actually the first language that I've ever worked with so I may be a little biased on that um I wouldn't use it for freelancing or small projects but if you're looking to get into a big company it may be worth learning so Ruby is a dynamic object-oriented programming language that can be used for web applications and apis among other things its most popular web framework is Ruby on Rails and it's tough to talk about Ruby without talking about Ruby on Rails in the context of web development as far as the language goes I really like it I think it's one of the most readable languages there is um and it's it's almost like reading English and that was actually one of the goals of Matts the the creator of Ruby and it's a pretty forgiving language as well it's not a cyntax language and it has its own unique and expressive syntax it does draw inspiration from languages like Pearl small talk and lisp all of which I've never used to me I think it actually is is similar to python uh Ruby has a rich ecosystem of open source libraries and packages called gems which can be easily integrated into Ruby on Rails projects to extend the functionality so gems ruby gems it's kind of like npm if you're coming from the node.js world or pip if you're coming from Python and you can get things up and running really really quickly with Ruby it's great for Rapid development people like to say that Ruby is dead sure it's not as common as some other languages and it has fell a bit in the past 10 years but there's still a lot of companies using it now rust is a is actually a systems programming language so it's lower level um it can almost relate to something like C++ but it also incorporates highlevel language features so it's pretty unique and you don't have to worry about things like memory management like you would with C or C++ rust isn't typically associated with web development but it does have features that can make it a good choice and certain situations now rust is a popular choice for compiling to web assembly enabling the development of high performance web apps that can run in the browser and I'm going to talk more about web assembly later uh it's also a very safe language it's used by companies like Dropbox Discord Microsoft um web development probably isn't the most common case for us but it's still a great language to learn I think it will grow more popular in web development because it's commonly used with web assembly um so as web assembly gets more popular I think rust will as well um there's also web Frameworks that you can use that I'll mention in a little bit so Elixir is new to this guide and it's been gaining some popularity I've seen quite a bit about it it's a functional concurrent general based or general purpose language and runs on the erlang virtual machine and it can be used to build web applications and apis it it's very F tall an and can be used to create realtime applications like I said with goang you probably won't use Elixir for something like a personal blog or any small project it's more for large scale applications so not something I'd recommend if you're if you're just getting into web development now these definitely aren't all the languages you have to choose from some other options are Scala Pearl Swift and cotlin although those are really more on more for web app mobile apps sorry um I would suggest looking into a few and seeing one which ones you like best also look at what's popular in your area so this is a chart from jetb brains.com for 2017 to 2023 and it's the percentages for languages used by web developers and the percentages for likely to to adopt so you can see that the most used is Javascript then python HTML CSS SQL Java and so on so I wouldn't base everything on this chart but it's just interesting to see and you can pause it if you want I'll also have the link in the description um to this to this article so now that we've gone over some server side languages let's talk about some of the Frameworks that you can use with those languages and I'm not going to go over all of them there's no way I could do that but I'll list some of the more popular ones here now most of these Frameworks fit into either an an an opinionated or an unopinionated framework so an opinionated framework is is one that has a set way of doing things it's very high level and Abstract you kind of have to follow the the structure and follow the rules to use it however you get a ton of features right out of the box an unopinionated framework is you don't have as much freedom so what I've done is I've split the the Frameworks that I'm going to mention up into opinionated SL highlevel and unopinionated SL minimal all right we'll go in the same order as we went with the languages so node.js I should say JavaScript nodejs has a bunch of Frameworks there's way too many to list here so these are some of the the more popular ones now unlike the rest of these languages the most popular framework for node.js is actually a very min minimal unopinionated framework and that's Express so Express is great for building web applications and apis it has a great set of features it's well documented it's very popular you can find tons of content in tutorials and courses that use express is a great Community it's very fast and performant so that's probably what I would recommend if you're going with node.js then you have coo which is another minimal framework that was actually created by the same team as Express and it's very similar there's some more modern features but it's it's pretty much the same thing you can build a lot of the same stuff and same thing with fastify fastify is an even newer framework that is extremely fast it's faster than Express and H again has some more modern features but again I'd probably say learn Express just because it's so popular and that's probably what you'll end up using all right so those are the the the popular opinion uh unopinionated or minimal Frameworks as far as the highlevel opinionated Frameworks we have Nest or nestjs which is actually built on top of Express and it's a typescript first framework that's very similar to angular and I know that sounds weird because angular is a front-end framework but it actually has a really similar structure now it's very opinionated and you know you have to do things a certain way but it's great for building large scale applications it's very well documented I'd say if you're coming from angular and you're you're learning full stack and you're getting into node.js you might want to check nestjs out for your back end and then Adonis is the last node.js framework that I'll mention it's another very opinionated framework that's very similar to laravel I actually think that it's it's really underrated it's an MVC framework that has scaffolding authentication a template engine it's it has a lot of the features that you find with laravel so if you're coming from PHP laravel to node.js a Adonis might be something you want to check out all right so next we have Python and there's a lot of Frameworks that you can use with python but there's two that really stick out that are really phenomenal Frameworks and that's D Jango and flask and one of them is highlevel opinionated and one of them is is uh minimal and unopinionated so D Jango is very high level it's it includes everything that you need to build a web application it has a template engine an omm authentication a CLI uh like I said it's very opinionated so you have to do things a certain way but you also get a ton out of the box including an entire admin area to manage your content so basically you can create models for your content like let's say a Blog and you have a post model you'll have an admin area just right out of the box where you can add create read update and delete posts so really really cool um it's great for Freelancers as well because you have an admin area for your clients and then flask is another great python framework that's pretty much the polar opposite of D Jango flask is very minimal uh it's very similar to express it's great for building apis you can structure things how you want it's fast it's flexible it's a great option so next we have PHP and the two most popular Frameworks are laravel and Symphony and there's others like code igniter which was actually my first PHP or I should say my first MVC framework that I was introduced to and I really like it it's not used much anymore but I I I don't know code igniter has a special place in my heart I guess but laravel is in my opinion one of the best Frameworks period it's a highlevel opinionated framework it includes everything you need to build a web app it has database migrations has a really great om called eloquin and I'll get into ORS in a little bit built-in authentication uh with multiple drivers a CLI a template engine and much more I'd say it's pretty similar to Python's Django then you have Symphony which is another great PHP framework it's a bit more complex than larl and it's used by a lot of big companies laravel is actually built on top of symphony components because symphony is very modular I created a small course on Symphony along time ago but I haven't used it in years so a lot of it has kind of slipped my mind um but it might be something you want to check out now Slim PHP is another framework that I think is really underrated because you don't always need something as lock as laravel or Symphony sometimes you just need a simple framework to build an API or a small application and slim is great for that it's very similar to both Express and flask but for PHP so next we have goang one thing that I realized is with just about every language you need a web framework to build anything substantial with goang you really don't need a framework you can just use a lot from the standard Library so it's very powerful it has everything you need to build a web application um but there are some Frameworks so one is called Jin this is an includes a router template engine and more and it's more like laravel or Django so next we have C and C is a general purpose language that is used for all kinds of things web development mobile development game development and it's used a lot with the Net Framework which is a software framework developed by Microsoft then you have asp.net which is a web framework for building web applications so asp.net is probably what you're going to use if you do go into web development as a c developer it's part of the broader Donnet ecosystem and it provides a a flexible platform for developing web-based applications you can also use languages like FP and Visual Basic with asp.net so asp.net core is the latest version of asp.net and it's open source it's crossplatform it's a bit more lightweight than the original platform um but yeah so that's probably what you're going to go with with c now you also have Blazer which is a newer framework that actually fits more into a front-end framework believe it or not so it's part of asp.net core and it allows you to build interactive web uis using C instead of JavaScript so in many ways it's similar to something like reactor View and it can also be used with web assembly which I'll talk about soon so next we have Java the big web web framework for Java is spring and it's used by a lot of big companies it's a bit more complex than some of the other Frameworks and it has a lot of different parts to it so spring MVC is a web framework that simplifies the development of web applications and follows the model view controller design pattern and it provides features for building web controllers handling requests and rendering views there are some other web Frameworks for Java like hibernate uh Apache struts and play which you can also uh the play framework you can also use with the Scala programming language now if you're using Ruby for web development I'd say there's probably a 90 99% chance you're going to be using Ruby on Rails it's a very highlevel opinionated framework that just includes a ton of stuff out of the box and it's great for Rapid development because you basically have command line tools and Scaffolding that can pretty much generate a basic crud application in seconds and then you can kind of take it from there so it's great for large scale applications but you can also use it for smaller stuff I actually had a uh a knowledgebase app that I built with Ruby on Rails that served as documentation for my computer repair business a long long time ago uh rails is definitely I'd say in my top five if not top three favorite Frameworks and then Sinatra is another framework that uses Ruby that takes a more minimalistic approach so if you don't need something as in-depth as rails you could check out Sinatra now rust is often associated with systems program but it has gained popularity for web development due to its focus on safety performance uh modern programming practices while Russ doesn't have as many web Frameworks as some other languages it does offer some solid options for building web applications and apis so actic is a high performance web framework for rust it's known for Speed and scalability makes it suitable for real-time applications microservices uh actic leverages rust concurrency features and it can be a good choice to to handle many connections simultaneously and then rocket is an opinionated web framework for rust that prioritizes developer productivity so it aims to create kind of a a great outof thebox experience with strong type checking expressive syntax and a focus on safety now for Elixir you have Phoenix which is uh a framework that's inspired by Ruby on Rails it's a high level opinionated framework includes everything you need to build a web application uh it's great for building large scale applications but you can also use it for smaller projects and again it's very similar to Ruby on Rails and then plug is a minimal and composable library for building web apps in Elixir uh it's designed to be lightweight and unobtrusive all right so I mean there's other Frameworks as well but chances are if you're going with one of these languages you're probably going to use one of these Frameworks all right so you you learn a language you learn a framework at this point you should understand HTTP including the request response cycle methods status codes you should Al also understand the basics of rest which is which stands for representational State transfer and it's an architectural style for building apis it's not a standard or protocol it's just a set of guidelines for building apis and I have an older but still relevant crash course on rest apis if you want to check that out and learn more about what what it is no matter which type of developer you are you should definitely understand rest because even as a front-end developer you're going to interact with these apis and as a backend or full stack developer you'll be building these apis so something that you just need to know in web development now graphql is a newer alternative to rest and it's a query language for apis and a runtime for fulfilling those queries with your existing data it's a bit more complex than r rest and I wouldn't say that graphql is something that you absolutely need to know but it is helpful um it's a little bit more powerful because you can specify the data that you want to get back from the server where with rest you get all of the data that's available so for instance if you have a a rest uh endpoint that you hit maybe SL API posts it's going to give you all the fields for post you know you might get back 10 blog posts it's going to have the title the body all that stuff and you can't really say well I just want the title of the post you can't do that with a rest API with graphql you can you can actually send a query that says I want just the title and the category or whatever it might be so it's it's more powerful than uh than a rest API but again it's not a necessity um as a backend or full stack Dev you'll you may be creating graphql apis and you can do that with many different languages and Frameworks and as a front andev you may be interacting with these apis so you'll learn how to make graphql requests and parse the data using a client there's different graphql clients and one popular one is Apollo okay so if you're a frontend Dev dealing with graphql there's a good chance you might be using the Apollo client now as a backend or full stack Dev or even as a freelancer that works with WordPress you're going to need to learn about databases and a database is a collection of data that's stored in a computer system and the software that we use to work with that database is called the database management system or dbms and there's a few different types of databases so I'm just I just want to go over those real quick and talk about some of the the the database systems that are in those types so the first type is the most common and that that's a relational database and these have been around forever they're systems that hold structured data that can be related to each other and data stored in tables and rows so you can kind of picture an Excel spreadsheet just much more powerful and you can have multiple tables that are related to each other for example you can have a table for your users and then a table for let's say blog posts and each user can have multiple blog posts so you can relate the two tables together by putting a user ID field in your blog post table and we use something called SQ l or SQL uh which stands for structured query language we use that to interact with these databases so you can create tables insert data update delete data and more aggregate data and usually in your application you'll use something called an OM or an object relational mapper to interact with your database instead of writing raw SQL queries and we'll talk more about ORS uh in a few minutes now as far as relational databases go postgrads or postgresql is one of the most popular um for for all size projects really it's an object relational database so everything is looked at as an object with properties and it's very common with node.js and python but of course you can use it with any language as long as there's a driver that supports it so you're not really bound to a specific database system just by the language you use but some things are just more popular with others so my SQL or MySQL is very simil ilar to postgres they work in a very similar way and my SQL is very popular in the world of PHP so if you're learning PHP and you know you're learning con with content online tutorials courses chances are a lot of them are going to be using MySQL and then mssql or Microsoft SQL is used a lot with like cop and The NET Framework because it's part of that whole Microsoft ecosystem but you can still use like postgrads with C so you're not bound to any specific system as long as there's a driver available for it now you also have nosql databases these are non-relational databases which store data a bit differently they're more I'd say they're more for huge data sets that aren't as closely related so you can still have relationships but you don't get as many features as you do with relational databases in that aspect and what these are typically good for is performance and scalability they're also great for things like realtime web app applications you also have a subset of nosql databases like document databases or key value stores so instead of storing data in tables and rows with columns you store data in what are called documents in something called a collection you can kind of think of a collection as a table and a document as a row or a record in in you know a relational database and documents are formatted like Json objects so it really goes well with JavaScript script in fact mongodb which is the most common um nosql database is used a lot with nodejs now some other nosql databases include redis which is a key value store it's great for caching and storing session data it's also very fast then you have Cassandra which is a wide column store it's great for large scale applications neo4j which is actually a graph database but still considered no SQL it's great for storing Rel relationships between data so if you have a social network for instance you can use neo4j to store the relationships between users or whatever um you also have Coach DB Dynamo DB there's there's tons of of nosql databases but I would say mongodb is the most popular by far now Cloud databases are extremely popular now and it used to be that you would install the database on your server and set everything up yourself but now you can use a cloud service like a AWS or mongodb Atlas where your database is hosted separately so this is great for scaling and performance you can use a lot of the the ones we talked about um for instance you can set up a remote postgres database through Amazon web services or a mongodb database through Atlas but there's other Cloud databases such as Google's Firebase which is a realtime database and it includes everything you need from authentication to file St storage to hosting and it's an all-in-one solution for medium and and for small and mediumsized apps and then superbase is another uh another one that's similar to Firebase it's an open- Source alternative that's built on top of postgres and it's a great option if you want to host your own database but you want the features of something like Firebase because it also includes authentication and stuff like that so I prefer to use databases hosted in the cloud because it just takes so much work out of it you don't have to worry about backups or anything like that you don't have to worry about getting it set up you have full support in most cases um as long as you know you usually have to be on a paid plan mongodb Atlas does offer a free tier but if you have a serious project you're going to want a paid plan all right so it just it just lets you focus on your application and not have to worry about the database aspect of it and then fauna DB is another one that's starting to gain a lot of traction it's a serverless database that is used a lot in the JavaScript world and it has a typescript inspired developer experience with data stored in documents similar to mongodb so lastly we have file-based databases well markdown actually isn't a database but I'll explain in a minute so these have little to no setup and they're great for developing they're great for testing and for just small projects even if you want to use it in production for like a personal blog or something like like that so SQL light or SQL light it actually is a SQL database but it's file based so you don't have to install anything or anything like that you just create a file something. DB and you can just use SQL queries and there's different there's orms you can use with with it as well so I think it's great for of course just development if you don't want to set up a postgres database or something like that and you just want to temporarily use SQL light or if you just have like a simple blog and you you're not going to have a ton of data you just create a post every couple days sqlite is more than enough for something like that now markdown files are also good for um for personal websites for personal blogs things like that especially if you're using something like Gatsby or nextjs there's there's packages that you can use to work with markdown files so when you want to create a new blog post you would simply create a new markdown file in a specific folder and you would add the front matter which is the metadata at the top and then the post in the body and once you save that it'll automatically be put into your you know your your blog's front end so definitely something to to look into for smaller projects and then H2 is another file based database I've never used it so I I really can't say much about it um I would stick to SQL light or markdown for for development testing as well as small projects if you don't want to install or set up um postgres or mongodb or something like that okay so like I said SQL or SQL is used to create queries um to insert data select data all that stuff for relational databases but typically you don't write SQL queries raw SQL queries in your your application code uh it's more for the command line if you're using uh like the the MySQL shell or something like that or if you're using uh even a guey tool you can usually write SQL queries within your application you're usually usually going to use an OM which stands for object relational mapping and it's a tool so you can interact with your database through object-oriented programming within your application and it usually has its own syntax rather like I said rather than writing SQL queries and it's great for productivity it makes your code much neater um it they tend to prevent things like SQL injection attacks and a lot of the time you can easily swap out database systems and still use the same code so even if you if you use postgres and you you want to switch to mySQL you can do that just by changing a config and then keep the same code and it still works the same way so typically how they work is you create a model of your data in your application so you might have let's say um let's say you have a work workout app and you have a a database table or collection called workouts in your application you would create a model for workouts and you would Define the different fields and types that the workouts should have and then what you would do is bring that workout model into your file and you you'll be able to do things like workout. find and then pass in whatever you you're you know whatever you're looking for workout with the ID of of a certain number or whatever it might might be much better than writing select all from workouts where whatever um so it makes things much easier and some ORS are specific to the language Andor database so these are just some examples uh first we have which is an OM for mongod DB and node.js so if you're using those two things together node.js and there's a good chance you're going to be using SQ eyes is also an omm for node.js but it supports SQL datab bases like postres MySQL even even SQL light and uh and Ms SQL Server as well and it's very popular and easy to use it's very well documented um and then D Jango omm is used for obviously D Jango websites but you can use it as a standalone or without using D Jango as well SQL Alchemy is an orm for python that supports the same databases that SQ eyes does and it basically works the same way except it's for Python and you can use it with d Jango flask or any other python framework and Pongo as I I I don't know if I said this but most of these are for relational databases um except for Mongoose and then you also have P which is an omm for mongodb and python so similar to you know how Mongoose is to node.js then eloquent is an OM for PHP that's used with laravel and I really like eloquent I think it's very eloquent and it's very easy to use it has a very clean syntax well documented Doctrine is another or for PHP that supports SQL databases uh Dapper is an orm for CP and.net very popular used by a lot of big companies Prisma is a typescript omm with an intuitive data model it has automated migrations type safety it lets you declare your T database tables in a more human readable way and you can use it with JavaScript typescript rust and I believe you can use it with goang so drizzle orm is another typescript orm that you can use in in SQL like syntax or qu the queries API which is a more squiz or mongus like syntax and then mro or micro RM I'm not sure how it's pronounced I've never use this but it's another typescript RM that supports both mongodb as well as SQL databases and then nextjs is a query builder for node.js that supports SQL databases it's not an omm but it is similar it's a bit more lowlevel and it's great for building SQL queries in a programmatic way so you can imagine how many of these are when you think of how many languages and how many databases there are so there's no way I can go over all of them but I just wanted to give you guys a couple examples all right so another thing you'll need to learn pretty much no matter what route you take is is authentication authentication and authorization so authentication is the process of verifying the identity of a user it's a very important part of web development as a front-end Dev you need to know how to consume and use authentication services and as a backend or full stack Dev you're most likely going to need to know how to implement the entire system and there's a few different ways to do this these aren't all of them but these are some very common practices so one we have cookies and sessions this is a popular way to authenticate basically when a user logs in a session is created on the server and a cookie is created on the client and the cookie is sent with each request and then the server can verify that user based on the session so you should definitely learn about HTTP only cookies and secure cookies this will help you understand how to make your application more secure also you're going to be want to be aware of things like cross-site scripting and cross-site request forgeries these are attacks can be used to steal cookies and impersonate users next we have Json web tokens or jwt's and these are Json objects that are signed by the server and they're stored on the client in most cases and sent with each request and the server can verify the user based on that token and this is commonly used with rest apis and full stack Java uh full stack JavaScript applications and it's a good way to protect your API endpoints so so that just not just anybody can visit every endpoint then we have ooth which is an open standard for Access delegation and it's commonly used as a way for users to Grant websites or applications access to their information on other websites but without giving them password so for example when you see login with your Google account or login with your Facebook account that's usually ooth so that's another way that you can have users authenticate and you might have a mix of oaf and cookies and sessions or something like that now authentication libraries um you can use you can write your own middleware for authentication but there's a bunch of libraries you can use such as passport or Grant um also many framework such as larl and D Jango they have built-in authentication systems that you can use and extend and then password hashing that's also something you're going to need to look into um there's libraries like bcrypt that can do this for you you and um you know it'll it'll encrypt the password you never want to save plain text passwords in your database and then you can use the bcrypt library to compare a plain text password to the encrypted one in your database now traditionally we have front end and backend but as I've said those lines are really getting blurred and serverless architecture is becoming more popular now serverless is essentially it allows you to run serers side code without having to manage your own server so you can use a platform like netlify a versel that will give you serverless functions um you could also use something like AWS Lambda or Azure functions platforms like Firebase and superbase also considered serverless um you can use serverless functions to handle things like authentication sending emails protecting data and it also saves you money because you're not paying for an an all thetime server a server that's always running you're only paying for the time that your code is running and hits those functions okay it's event driven and your code is triggered by events like HTTP requests file uploads or database changes so if you have a small application this is a great option um serverless architecture is usually really scare uh scary scalable as well um it's also part of what we call the jamstack which is a modern web development architecture based on client side JavaScript reusable apis and pre-built markup okay so it's a a great option for static websites and small applications most of the technologies that are included in the jamstack we've already talked about so that would be static site generators like Gatsby and xjs apis like graph q and rest and then serverless functions so it's not really anything new it's just a new way of doing things so to learn more you can check out the jamstack website James Qui also has a great crash course on uh on this channel about more about what the jamstack is if you want to check that out now let's talk about deploying full stack applications and apis this is a bit more difficult than deploying a client side application or or like a static website because you typically need a web server like Apache or enginex and there can be a lot of configuration that goes into that now how you set that up depends on the type of hosting service that you're using uh you can use something called a platform as a service or a pass and then you also have infrastructure as a service or an IAS um so a pass or a platform as a service abstracts away the server and sometimes the database and you can just deploy your code you usually have a um a pretty in-depth user interface and you have access to the server through a terminal but you don't have to install and configure like a patchy and all that stuff and this is obviously easier and great for people that aren't too familiar with Linux and running servers then you have Cloud hosting and infrastructure as a service and this is where you have to manually set up and configure your server um you have full control over everything that's that's the nice part about this you can install and configure Apache you can install a database whatever you want it's basically like having your own Linux machine with root access and again it's great for people that know what they're doing but a lot of us don't right I'm I really am not that great with with devops I'm not great with setting up servers so I prefer to use a platform as a service um but there are some great infrastructure as a service uh hosting companies like digital ocean Len Noe um and then you have like of course AWS and aure which are the big boys really large companies tend to use them if they don't have their own infrastructure um but we're starting to get into devops territory here which is a whole another topic but I just want to mention that there are different typ YP of hosting and it depends on what you're building and your skill level as to what you should use and I should say that that cloud hosting like digital ocean and Len Noe I'd say they're they're semi-managed because they do have images you can use to set up an entire environment for you um you can even set up Docker and and I'll talk more about Docker in a little bit um but you can have some predefined um infrastructure with digital Ocean or Lode or vulture uh there's a lot of companies that do that now for individual developers I suggest render if it fits your need it's great for node.js python PHP rails and a bunch of other stuff it's very easy to use it's free for personal projects um you can also deploy databases and static sites Heroku is another option it's been around for a while it used to be what I used in tutorials because they had a great free tear so people could follow along however they did get rid of the free tear so if you're just learning and testing things out you'll probably want to go with render because they do have a pretty generous freet tear and all you really have to do is deploy to or push to GitHub and then log into render and select your repo much like you would with netlify or versel and and render does support full stack applications all right so I briefly mentioned bung JS but I wanted to have a dedicated section for it because it's another one of my favorite new tech technologies that I really hope takes off and I have a crash course on it if you want to go more in depth but it's essentially a JavaScript runtime like node.js but it also has a complete toolkit that includes a front-end bundler so you can easily build full stack applications it has a test Runner it has its own node.js compatible package manager so you can run bun install whatever whatever package you want um it's written in the zig programming language which is a newer language that's gaining some traction uh it's very fast it's similar to C but what I love about bnjs is that it's an all-in-one approach and you don't have to use webpack or parcel or anything like that it's all just built in um I think that javascript's biggest problem is there's just so many different damn things that you need to combine and use other languages aren't really like this if you have any experience with with other languages they have a very integrated close nit ecosystem where JavaScript is just all over the place so I think that bun really addresses this and it's still very new and it's not really ready for production yet at least I don't think I haven't checked in a in a little while but I think it will be soon and I I I'm hoping that it will gain a lot of traction all right so up to this point we've talked about everything that you need to know plus a lot of optional things to be a backend or full stack developer so obviously you need to know a server side language which one you choose is really up to you uh if you're building web apps or apis you'll need to know a framework it's very rare to create a substantial application without a web framework um there are some exceptions like if you're using a language like goang or rust but even then there are Frameworks that you can use now you'll need to know about databases this could be a relational or a a non- relational database you also need to know about ORS so that you can create models for your data and interact with your database and this could be a standalone or or one that's built into your framework and then authentication you should know how to implement um in your applications this is a very important part of web development whether you using sessions JWT ooth or something else or a combination and then you should know how to create rest apis from scratch you should know how to create endpoints and handle HTTP requests knowing graph fql is also a plus but I don't think it's a it's a it's mandatory um you also need to know how to make your applications or apis live on the internet so you need to know deployment and again this this is more difficult than client side stuff but you'll establish a process and it'll it'll start to become second nature once you have a a a workflow to deploy applications so the next batch of Technologies are things that you may want to get into but I wouldn't say are IAL to becoming a developer they're kind of extra um they may be essential for certain job positions though so the first one we'll look at is containerization and this is a way to package software into standardized units for development shipment and deployment and some people don't understand why this is valuable so let's say that you're working on a node.js application and you have it running on your local machine everything's working fine then you deploy it to a server and it doesn't work or you give it to uh another you know a coworker another developer and it doesn't work on their machine and you have to figure out why so it could be that the server is running a different version of node.js or maybe it's running uh a different operating system and something got messed up now imagine you have five people 10 people working on that project all having different machines and different operating systems and environments so that can be a nightmare and with containerization you can package your application into a container that includes everything it needs to run uh it's kind of like a virtual machine but it's much more lightweight and you can then deploy that container to any server and it will run the same way so all five or 10 plus team members can have the same container on their local machine and it will run the same way uh it's a great way to ensure that your application will run regardless of the environment because it includes the environment uh everything down to the operating system so Docker is the main tool that's used for containerization it's a platform for building running and shipping applications with containers uh it's very popular and used by a lot of big companies it's also very well documented if you plan on working for a large company as as anything that has to do with devops then you're going to need to know Docker and then kubernetes is another tool that's used for containerization it's it's an orchestra uh orchestration system for automating deployment scaling and management and it's not a a competitor to Docker it's actually used with Docker and it allows you to manage multiple containers across multiple servers all right and Aid driven automation is also enhancing the capability of kubernetes and the complexity is being kind of abstracted away more and more and developers will be able to um focus on application development and much less on infrastructure management and there's some other tools that you can use that are similar to Docker like vagrant and lxc but these are more like virtual machines Docker uses containers which are are process level virtualization so they're much more lightweight so next we have web assembly often abbreviated as wasm and this is a technology that allows us to run high performance code written in languages like C C++ and rust in web browsers and in simple terms think of web assembly as a way to bring fast and efficient software written in languages other than JavaScript to your browser and JavaScript has obviously been the programming language of the browser and just for the web in general and is great for many things most things when it comes to web development however it's not good for things like uh computationally intensive tasks so web assembly is great for that and you can Port existing code bases to the web so if you have like a C++ application you can compile it to web assembly and then run it in the browser so some things that web assembly would be good for are games video editing CAD software things like that and no web assembly will not replace JavaScript it's not meant to it's actually meant to work with JavaScript so you can use JavaScript to interact with web assembly and we're really not to the point where web assembly is just everywhere but it seems to to rise every year it seems to gain more popularity now next we have mobile development options and I know this is a web development guide however there there is a lot of crossover and you can use your web development skills to build mobile applications of course you can get into native development mobile development with cotlin or Java for Android apps as well as Swift or objective c for iOS apps but you can also use Frameworks that allow you to build crossplatform applications with web or web like Technologies so I'm going to go over some of those options now we did already talk about some of the stuff in the framework ecosystem section but I'm just going to quickly go over them again so the first choice is react native and obviously we've talked about this a little bit it's a framework that allows you to build native mobile applications with JavaScript and the react framework and what's great about not only react native but all of these really are that you can have a single code base for both IOS and Android as opposed to where you would do Native development you'd have to have two separate code bases and two separate languages so if you're a react developer you're probably going to gravitate toward react native it's it's very powerful it's used by a lot of big companies um next we have flutter which is another popular option and it's a framework that allows you to build native mobile apps with doart so doart we haven't talked about yet it's a it's a programming language that's similar to JavaScript um so if you already know JavaScript Dart is pretty easy to pick up flutter uses its own rendering engine written in C++ called skia and I know that they were working on a new rendering engine called uh impeller but I'm not positive if that's been released yet now flutter does have a slight performance advantage over react native because it doesn't use a bridge to communicate with the native components like react native does but these are are two of the most popular options uh of their kind now you also have native script which allows you to access native apis using JavaScript so you can technically use any framework you want to build uh Native mobile apps whether it's react view spelt angular um or or even just vanilla JavaScript so like I said it gives you a set of native apis to work with it's not as popular as react native or flutter but it could be a viable option especially if you want to stick to Vue or spelt or angular and then you also have ion IC which has been around for a while it's a mobile SDK software development kit that allows you to build hybrid mobile applications with web Technologies like HTML CSS and JavaScript so you can also use the framework of your choice with ionic now it's not going to be as fast as react native or flutter but it it can be a viable option I believe years ago you could only use angular but now you can use anything and it's great for Progressive web apps which I'm going to talk about next so Progressive web apps are web applications that have been designed to be to to run more like native mobile applications they're fast they work offline they can send push notifications they can even be installed on the home screen of your mobile device so it's not a native app it's a web app but it has it has to pass certain criteria to be considered a pwa or a progressive web app so first it has to be completely responsive no matter what screen size no matter what type of device it's being viewed on whether it's a a a cell phone or a a big screen TV it also has to be secure and served over https that should go without saying these days it has to be able to uh at least have some basic functionality offline even if that means just having a custom offline page it should be performant and discoverable by search engines and include a manifest file and a service worker so the Manifest file is a Json file that contains information about the app like the name description icon the service worker is a Javascript file that runs in the background and allows you to cash assets and data for offline use okay then you can also add push notifications make it installable so it's a great way to make your application more like a native mobile app than a regular web app and you can use a framework like ionic or you can use something like nextjs which has built-in support support for pwas there's many different uh Technologies and different ways to do it now you can also use a lot of the same technologies that you use for web development to create desktop applications for Windows Mac and Linux now my suggestion would be electron it allows you to use JavaScript to build really fast and Powerful desktop applications you can use any front-end framework react view angular whatever you want to use it works by bundling chromium which is the uh the the browser engine that Chrome uses that edge uses and a bunch of other browsers it bundles that with node.js into a single runtime and apps can be packaged from Mac windows and Linux uh so you have again a single code base for all three platforms and there's a ton of really popular desktop applications that use electron at least in some way including vs code which is probably the the desktop app that we use the most atom slack Discord and the postman HTP client so these are all things that I use all the time another option that I'm seeing more of is Tori and this is a newer framework that's similar to electron but it's actually more lightweight and it's actually built on Rust so it's very performant and secure it uses the os's native web renderer and the size of a Tori app can be less than 600 kilobytes and you can use front-end Frameworks of course there's also binding for python go C++ and other languages so it's definitely something that I plan on getting into this year so next we have neutralino Js and this is another option it's a lightweight and portable framework that allows you to build crossplatform desktop apps uh with web Technologies and it implements a secure websocket connection for Native operations and it embeds a static web ser server to serve the web content within the the desktop application also it offers a built-in JavaScript client library for developers now nwjs is another option it's similar to electron but not as popular it works in a similar Way by bundling chromium with node I do have a crash course on NW as well as electron if you're interested um I would say go with electron if you're going to get into this kind of thing and then you have other options for other languages for instance if you're a python developer you can look into tkinter to build desktop applications I do have a video on that um it's a standard python interface to the um the TK goey toolkit shipped with python it's not as popular as electron but it it can be an option if you're a python developer Ki excuse me Ki is another option for Python and then of course you have native uh you know other languages where you can use native tools whether it's Java um WPF for C Coco for Swift whatever it might be but that starts to get out of the range of web development Technologies all right so I don't often talk about Aesthetics in this guide it's based on software but I I do think it's important to keep up to date with design Trends so I just want to mention a couple here so trends for 2024 dark mode is obviously extremely popular it has been for a few years I think it's because it's it's easier on the eyes and it's also more energ efficient uh and it looks better in my opinion at least I personally use doc mode on everything because I get I actually get floaters in my eyes if I stare at light screens too long so um it's actually a health thing for me but I know a lot of people like it and it just seems to be everywhere whether it's just straight up dark mode or you have some kind of Toggler on your UI that will toggle dark and light and then we have ai generated designs so I think that we're going to see more of this this year um there's all kinds of tools that you can use such as mid Journey Sensei dream Studio you can use these tools to create unique designs for your projects now a lot of them do look kind of fake and and like super futuristic and sometimes they look a bit weird but I think it's a cool concept and I think it's going to be used more and more as as it improves so glass morphism is a newer design Trend that's become pretty popular it's a frosted glass effect that is used for many things like buttons cards and modals it's a bit more subtle than the previous Trend which was uh neuro new neumorphism I I don't know how to pronounce it uh I think it looks really cool and I think that it'll be around for a while and then Clay morphism is a web design Trend that is characterized by the use of soft rounded shapes and pastel colors and this trend is inspired by the look and feel of clation it's a popular choice especially for younger audiences and then ret rro futurism is a design Trend that's inspired by the future and I should say it is inspired by the future as imagined in the past so like what we used to think the future would look like and it's characterized by bright colors geometric shapes futuristic typography uh it's a great option for things like landing pages and portfolios all right so I just wanted to throw uh a little bit of that in there for you guys all right so next is iot so internet of things and the metaverse now Internet of Things refers to the connection of everyday objects to the internet and to to one another and it's a very broad term it's used in many Industries but iot is expected to have a pretty Major Impact on web development moving forward so we can expect to see more iot enabled websites uh and web applications and this will be you know as businesses take advantage of iot to improve their operations so it's something that you may want to look into and then the metaverse is a virtual world where people can interact with each other in a virtual environment and it's a concept that has been around for a while but it's really starting to gain traction so it's something that I think will be a big part of the future of the web so if this were a Trends video AI would definitely take the top spot it's something that's being used in many Industries and it's only going to become more popular so much so that a lot of people are actually terrified uh we talked about tools like co-pilot and chat GPT as well as design generation but there's many Tools in many categories so chatbots are another thing that are really becoming popular because of AI a chatbot is a a computer program that simulates human conversation through either voice commands or text chats or both and they're used for things like customer service Marketing sales so you can expect to to be integrating chatbots into a lot of your applications and and then open AI has some amazing apis that you can use to create your own tools including tools to create chat Bots uh text to speech things like that and there's a lot of AI powered no code tools and I know that that scares a lot of developers but my advice is to use those tools to your advantage to make you a stronger candidate for a job or just a stronger freelancer for clients and just because those tools are available doesn't mean every joeo is going to be able to use them or even want to take the time to use them and I I know it's just kind of my speculation but my My overall advice when it comes to AI is to use what is available to to better yourself as a developer rather than just saying poor me it's going to take my job try and use it to make yourself better um that's my advice I know some people kind of get mad at that some people might say I'm naive but I'd rather be I'd rather have that mind State than the Doom and Gloom state that is definitely not going to find you success all right so devops or developer operations is a set of practices that combine software development and it operations and it's a it's a pretty broad term it can mean different things to different people when you talk about application deployment and maintenance that's usually part of devops containerization with Docker and kubernetes and your environment that's all all devop stuff uh cicd stands for continuous integration and continuous deployment and this is using tools so that you can push code to a repository and it will automatically deploy to your server and there's tools like Travis CI Circle CI um terraform is what we call infrastructure as code or ioc you can specify the state of your infrastructure and then automate it um or automate the process of managing resources and this goes way beyond my scope of knowledge this is just from my own research now a lot of these tasks include positions of their own so a devops engineer is a specific role but as a software developer you may need to kind of peek into this world a little bit it really depends on where you work so just something to take note of now the web is getting much more interactive and animation is a big part of that so there's a lot of libraries that you can use to create animations so I'm just going to very quickly go over some of the the big ones so Gap is a JavaScript animation Library that's used by a lot of big companies it's widely used for creating really complex animations you have anime anime.js is a lightweight JavaScript animation library that offers simple and flexible animations with a focus on uh readability it supports CSS properties transforms and more and I do have a a crash course on anime and then velocity JS is known for its Speed and Performance it can be used for animating CSS SVG and Dom elements it has a very simple syntax and good documentation and then react spring is a physics-based animation library for react it provides a sample API for creating interactive animations in react there's other libraries animation libraries that you can use for react and other specific Frameworks as well uh 3js is a really really cool JavaScript library for creating 3D graphics and animations uh it provides a highlevel API for webg which is a JavaScript API for rendering interactive 2D and 3D graphics with any compatible browser so I've seen some really cool stuff built with 3js in fact if you go to the website um you'll see a bunch of really cool examples that you can look at and interact with and then typed JS I figured I'd throw that in there because it's a it's a cool little library for creating text space animations so things like typewriter effects and text transitions so it's a good choice for adding Dynamic text content so VR and AR which is virtual reality and augmented reality are getting bigger every year and I think it's only a matter of time until they're common in the world of web development because we're going to have websites that are virtual we're going to have um websites that have augmented reality which is basically a mix of virtual and the real world so if you want to start to get into that now you can it's definitely not something you have to by any means but if you want to just mess around there's some technologies like A-frame which is a web framework for building virtual reality experiences it's built on top of HTML and it's very easy to use you can also use react 360 virro react there's some other Frameworks as well that allow you to build virtual reality experiences in react and then arjs is an efficient and lightweight JavaScript library for creating augmented reality experiences on the web and it enables marker based AR directly from from the browser and even libraries like 3js allow developers to create 3D graphics and animations that are that are often used in combination with VR and AR Frameworks okay so lastly we have web 3 which is a bit tricky there's so many different things that fall under the web 3 umbrella it's a term that's used to describe the future of the web there's also many different opinions on it some people will say that it's the future of information and communication and finance and some say it's a campaign for marketing nfts honestly I don't like speaking too much on web 3 just because it's so early and it's such a a broad and and kind of uh controversial topic now the blockchain which is a huge part of web 3 has proven to be a powerful technology it's decent it's a decentralized and secure digital Ledger technology that records transactions across a network of computers and it consists of uh a chain of blocks each containing a list of transactions and once a block is added to the chain it becomes permanent and tamperproof so it enhances trust and transparency and that alone is incredibly powerful and I think will stick around uh I think learning about the blockchain and ethereum and smart contracts is a really good idea if that interests you so solidity is the language that is used to write what are called smart contracts uh solidity is a bit like JavaScript smart contracts are self executing contracts with the terms of of the agreement between the buyer and seller being directly written into the lines of code and I'm not going to pretend like I know a ton about it but being some of the first people to learn about this stuff I think could be a huge Advantage for the future so it's kind of like an investment of your time and of your your learning all right guys so that wraps up this year's guide I know that this was extremely long it's way longer than I wanted it to be but I don't want to just go through some slides and just read the bullet points I want to elaborate and just kind of let you know what I know about each part each section of this guide so hopefully you learn something from it the time stamps are in the Des uh in the description if you want to go back and look at a certain section uh again I have the page on my website that has a guide of my content including YouTube videos and courses that kind of coincide with this the topics in this in this presentation so thanks so much guys if you watch till the very end I really really appreciate that that's awesome uh if you could like the video I'd appreciate it because this this is basically my biggest video of the year every year um so thanks for watching and I will see you next time

Channel: Traversy Media

Views: 157,729

Keywords: web development, web developer, software development, web design, frontend developer, full stack developer, web dev, javascript, html css, react, node.js, php, python, django, laravel, code, coding, programming, java, rust, write code, web frameworks

Id: 8sXRyHI3bLw

Length: 163min 31sec (9811 seconds)

Published: Tue Jan 23 2024