Web Development In 2023 - A Practical Guide

Key Takeaways

[Music] what's going on guys so another year has past and it's hard to believe that I've been doing this video for six years now so for those of you that don't know what this is It's a video I do every year where I basically talk about every technology in web development from programming languages to Frameworks to tools and Concepts basically everything that I can think of and I lay it out in a linear order so that you can create plan of what you want to do and what you want to learn now this year it's I I was a little more long- winded because I wanted to talk more about things instead of just saying well you know these are the frontend Frameworks these are the backend Frameworks there's so many videos like that I wanted to just elaborate more on stuff so it's it's longer than I had anticipated it's almost 3 hours long but you don't have to sit here and watch it from beginning to end you can obviously you know watch a little here and there you can skip around I'm going to have timestamps with every single section um down in the in the description so it's don't let it overwhelm you obviously you're not going to learn everything in this guide I don't think that's even possible but I want you to use it so that you can kind of pick and choose what you want for what you actually want to do whether that's a full stack developer front-end developer whatever all right so hope you guys enjoy let's go ahead and get into it now I just want to go over uh a couple things about this video so one it's not a Trends video I do add in some current trends but it's an allaround road map starting from the very beginning even with things like text editors and browsers so it's very beginner friendly I don't assume that you know anything at all this video doesn't focus on a specific path or a specific set of Technologies we look at everything and I just try and guide you into choosing your own path in terms of Technologies you may want to be you know a front-end JavaScript developer that works with react and its ecosystem or you might want to be a python developer that creates apis and microservices with d Jango or flask it's really up to you on what you choose there's no one size fits all now as far as my own opinion goes I try to keep this video very objective however a lot of people do ask me what I use and what I suggest so you will occas usally see something underlined or in bold and that just means that that's what I personally prefer um so don't put too much into that because I'm just one person and feel free to skip around I'm going to have timestamps for every section I know some of you have watched this every year so you might want to skip around to certain parts it is a very long video so you may want to just listen to it like you would a podcast while you're driving or something like that and then a couple things I want to mention in addition to this video I created a Content guide on my website which has just a list of YouTube videos and courses that correspond to the Technologies and the topics in this video in the same order so you can use that as kind of a supplement to this video and then I also have a premium 300 plus page ebook that is essentially a written version of this guide that goes a little more into detail and covers uh a little more about technology and has some other topics as well and that's just $9.99 I'll put a link to uh in the description if you're interested in that all right so before we get into certain Technologies let's look at some of the reasons why you may want to learn to code I think this is the first step in creating a plan what you choose as far as Technologies is going to vary depending on what your overall goal is so the first one is career advancement meaning you want to work for a company as a developer could be a tech-based company or or anything really developers are needed in a variety of Industries including Tech Finance Healthcare Etc and this seems to be the the the most common goal among my viewers and just developers in general now I'd say freelancing is the second most popular goal with the rise of of gig economies and remote work many people are turning to freelancing as a way to earn money on their own terms and as a freelancer you can can offer your programming services to clients around the world um you would probably start out on your own but you could end up building your own agency which is what I ended up doing and I actually found some some real success within it and you could offer General webd and Design Services or you could Niche down and specialize in a certain area so another area of Entrepreneurship is creating products such as assass or software as a service and this does take a ton of time and effort and money and I do think it's the riskiest of the three but I I also think if you find success it can really pay off even more than than the other ones here uh my advice would be to start with this as like a secondary goal and then later on if you see the potential you could then you know move to it do it full-time I think educational content um which is what I do also falls into this area cuz you're your creating a product so some people learn programming simply because they have a personal project that they want to build or they enjoy it as a hobby and that's absolutely fine money doesn't always have to be your end goal you may even just start programming as a hobby and then switch to one of the other areas later on I also put future proofing because technology is constantly advancing I think now with AI and some of the new tools that are coming out it it just shows you that the future is technology and programming skills are always going to be in high demand and by learning programming whether it's web development or some other area you're investing in your future and you're positioning yourself for success and you may have another job right now you may not even plan to work as a developer anytime soon but it's a great skill to have okay so continuing on with goals you should decide which type of web developer you want to be the three typ are front end backend and full stack and we're going to be talking about technologies that all three of these use and I'm going to do what I did a couple years ago and color code the the topics and the Technologies so we'll have blue for front end red for backend and green for full stack all right just to just to kind of categorize all of the different um Technologies all the different Frameworks and languages and so on and make it a little easier to to understand all right so a front-end developer is someone that specializes in the user-facing aspect of web development so the technologies that I put here are examples of what you may use as that type and you definitely don't need to know every single thing I put in these columns um also I'm not going to really explain them right now we're going to talk about them throughout the span of this video but you'll need to know of course HTML and CSS and you'll typically need to know how to create dynamic Pages learn a front-end framework understand how to consume apis and so on as far as backend goes you're going to be focusing on the server side of web development so working with databases servers apis and backend developers are responsible for the most of the functionality of a website making sure it works correctly and efficiently they use languages like JavaScript using node.js uh PHP Ruby python and just about any other language and then databases like MySQL postgres mongodb um backend developers have nothing to do with the the user interface or what the user sees on a website then you have a full stack developer which has a a broad range of skills including both front-end and backend development and they have a good understanding of dynamic interfaces as well as back-end logic working with databases creating apis you using HTTP Etc and this is a full stack guide which includes both front end and backend Technologies we're going to start off with the front end and then move to backend languages and so on for the first half of this guide it's going to be very very JavaScript heavy and the reason for that is because JavaScript is the language of the front end of the client side so when you get into service side development you can use almost any programming language because that stuff isn't running in the browser or on the client all right so as far as tools and Technologies we're going to start at the very beginning here so what are the highest level basic tools for web development so of course you need a computer I mean you can write code on a mobile device but I wouldn't recommend it I do get a lot of questions about the type of system that you need to start programming with you actually don't need much especially for web development where you're most likely not running any hardore compilers or working with intense 3D Graphics or anything like that I'd say just something with at least 8 gabt of RAM and pretty much anything built within the last 10 years can be used for basic web development you do not need a $2500 MacBook Pro as far as operating systems it's really up to you you can use Windows Mac OS Linux uh unless you're writing platform specific code like if you're creating iOS apps with swift then you're going to need a Mac but other than that with web development pretty much everything is going to be crossplatform so it's just a matter of preference I use all three I prefer Mac OS so that's my main machine for coding but I I do write code on Windows I use Linux I don't really write code on it but I use it to manage my servers both both local and remote servers but again it's just it's completely up to you when it comes to operating system so you're going to need something to write code code with and that would be a text editor or an IDE which is an integrated development environment with most web development projects you don't really need a hefty IDE I'd say Visual Studio code is the most popular when it comes to web development especially front-end development uh it's a text editor but it's very intuitive it has a ton of functionality it's has great extensions and customization that's what I use that's what I would suggest some others are Sublime Text which is another one that I used for a couple years technically it's a paid editor but there's basically a never-ending trial although I would suggest paying for it if you're going to use it for any amount of time adom is another open- source powerful editor with a ton of extensions and then you also have Vim which seems to be pretty popular especially with Linux users it's definitely more complicated as it's more of a a command line editor however it's very powerful very customizable and uh the people that use it seem to really love it another thing that I want to mention that is helpful is to learn how to navigate your code or navigate your editor so shortcuts learn how to skip lines how to go right to the end or the beginning of a line how to move lines up and down without having to reach for your mouse to learn how to do it within your keyboard and a lot of them are are I guess Global a lot of the same shortcuts in vs code will work for Sublime Text so it is very helpful to uh to learn that it makes your development much more efficient and much faster when it comes to browsers Chrome seems to be the most widely used for developers Firefox being the second uh I'm seeing a lot of developers use Edge a lot lately because it is chromium based um Safari Opera brave brave is one that I haven't used yet uh I'm not sure how developer friendly it is but I I believe it does run on chromium but just about every browser has what we call developer tools where you can see your HTML CSS you can edit it locally you have your JavaScript console for debugging you can see local storage and cookies and any data that's saved in the browser the network tab to show you requests and response so you want to get familiar with those Dev tools now as far as the terminal goes it's not something you're going to need to to learn when you're first starting out uh however as you progress you'll eventually need to type some commands into the terminal even as a frontend developer you'll often use npm which is the JavaScript package manager you'll also be using git for Version Control although there there are gooey tools for that um but I would say that if you're using Mac or Linux then the the default terminal is just fine it's usually either bash or zshell but for Windows you have the the CMD command line or Powershell which are both proprietary so when I use Windows I usually download a tool called git bash which is is a Unix Bas based terminal um you also have the ability to use the windows subsystem for Linux but that's probably not something that beginners are going to use so if you're a beginner and you want something that is UNIX based I would suggest get bash for Windows and then hyper is another crossplatform terminal that you can use it has a bunch of plugins and you can really customize your interface okay so now that you know your overall goal as a developer and you have have your basic tools ready let's get into the first and arguably the most important two technologies in web development and that's HTML and CSS in fact even if you plan on solely being a back-end developer I'd still recommend learning the basics of HTML and CSS these are the two building blocks of the web at least of the the Visual Web so everything that you see in a website or an application UI in the browser it's brought to you by HTML and CSS there's other things that make it function but these are the two building blocks and usually the the the first two things that you learn when you get into web development so as far as HTML you're going to learn how to lay out an HTML 5 page with common tags and attributes this will include the dock type head body tags headings paragraphs image tags with Source attributes things like that meta tags for SEO and so on it's also important that you learn and use HTML file semantic tags like header footer section aside rather than just using divs with IDs this will make your website much more accessible and easier to understand for search engines and Screen readers and it provides a a more clear meaningful information about the structure and content of your websites when it comes to IDs and classes you're going to know when to use which so there's no set set in stone rules when it comes to this but IDs are meant for unique elements and typically to reference elements from your JavaScript um or reference elements from your HTML in your JavaScript I should say and then classes are for styling and you can have multiple elements with the same class so start with the fundamentals of CSS this is going to include things like font Styles colors margin and padding positioning you want to get familiar with the Box model which is the concept that every HTML element is considered a rectangular box that contains content and this will include the border the padding the margin and so on and understanding the Box model is essential for controlling layout and spacing of your elements another important concept to learn is CSS specificity so specificity determines which style rules are applied to an element when there's multiple conflicting Styles and specificity is based on the selectors that are used to Target the element each selector has a specific weight that determines its priority so for example if you have an ID selector that has a higher weight than a class selector and a class selector has a higher weight than just the element selector so you want to understand that so that you don't have a a bunch of instances of the important flag to kind of overwrite um specific specificity have trouble saying that sometimes another thing you want to learn is two things that absolutely change the game for CSS and that's flexbox and CSS grid so these two are they they make CSS easy to create layouts with and before that we had to use floats and I went a few quite a few years creating layouts with floats and it was an absolute nightmare so those of you that are newer to frontend web development you really don't know how lucky you have it because Flex Blox and CSS grid they they might be a little overwhelming at first but they're really easy to work with once you just you get the general gist of it down so those are two things you definitely want to learn pretty quick all right so once you can create layouts for desktops you'll want to get into Mobile layouts and responsiveness responsiveness is the ability of a website to adjust its layout and its content based on the size and the orientation of the device that it's being viewed on every year more people are viewing websites on their devices and it's crucial that your websites are optimized for mobile viewing okay there's tools that that can help you out with this such as the dev tools built into the browser so in Chrome for instance you can toggle the device toolbar and see the site not only on different sizes but with specific devices so if you want to see it on an on an iPhone 8 or on a Galaxy or some other device on tablets you can do that through the dev tools and CSS media queries are at the heart of responsive web design they allow you to specify CSS styles that only take effect when the viewport is in a certain range so for mobile devices you could apply a media query for let's say 600 pixels or less and media queries may sound overwhelming but they're actually pretty easy to work with so these are what I would say are the the absolute needed Concepts and features to learn with CSS once you get a grasp on this stuff you can move on to things like anim and Transitions and making your your your designs more uh more Dynamic and then there's a bunch of new features in CSS or coming to CSS I should say things like logical properties dark mode media queries scroll snap which allows you to specify the scrolling behavior of your web page we also have some new pseudo classes like is where and has that allow you to be more concise and dynamic with your selecting so and we're going to have nesting so there's there's a lot coming to CSS it's moving much quicker than it used to I mean we went years and years with what seemed like nothing being added to CSS but now it seems like it's starting to pick up again all right so every other year I've put things like SAS and CSS Frameworks before JavaScript and after thinking about it this year since CSS Frameworks are pretty much optional and SAS is definitely optional I think after learning HD H ML and CSS you should jump right into JavaScript and notice I have backend here as well I have the red box and I would say it's optional for the back end um but if you plan on going into PHP or Python and let's say you're going to use like template engines with PHP blade templates or something like that that's all well and fine but if you want any Dynamic interactive um aspects of your UI then you're going to have to know some JavaScript if you only plan on building apis and dealing with Json data and microservices stuff like that then you can probably skip JavaScript if you're going right into some other language um I think a lot of people jump into front-end Frameworks like react too quickly it's important to understand the fundamentals of JavaScript so you want to start with the basics you know functions Loops conditionals things like that um you want to understand the browser environment in the window object all the different methods and apis that are in the window object obviously you're not going to learn all of that right now at this point but just understand that that stuff is separate from the actual JavaScript engine from the the core language and then you want to learn about the Dom which is the document object model this is the interface in the browser that represents the structure of a web page as uh basically like a tree of nodes or a tree of objects and the Dom provides a way for you to manipulate the content and the style of a web page using JavaScript understanding the Dom is crucial as a front end or full stack developer so you want to learn to add to remove from Traverse the Dom manipulate styling learn how to listen for events and create Dynamic elements button clicks form submissions things like that okay and in 2015 there was a major update to JavaScript called es 20105 or es6 this included things like Arrow functions classes template literals destructuring I would say that all that stuff all those things that were added are now crucial to know in modern JavaScript so you definitely want to learn that stuff and then array methods so you should learn these high order array methods like for each filter map reduce this will help you be able to manipulate arrays and perform complex operations on their elements and then at its core JavaScript is synchronous single-threaded language which means that everything is executed line by line one after another however we do have ways to work with and write a synchronous code in JavaScript which is important uh especially when you're working with web applications that rely on HTTP requests to load data and content so you want to get familiar with things like callbacks promises uh if you're going to make HTTP requests to some kind of API or backend then you need to learn the fetch API that allows you to make requests over HTTP without reloading the page this will include learning Json which is the format that is used when sending data between client and server okay so now we come to some optional tools that can ex extend the capabilities of CSS so SAS stands for syntactically awesome stylesheets and it's what we call a CSS pre-processor so we create these files with either a SAS or sccss extension and we can write not only CSS but added functionality such as nesting variables functions mixins some of these features like variables are already in Native CSS however SAS variables are much more elegant than CSS custom properties at least in my opinion um CSS will also have nesting soon so I I think the need for SAS is less and and will be less um than what it used to be but I think it's still worth learning because it's really easy to learn you could you could pick it up in like a weekend now the browser doesn't read SAS files so the way that this works is you use something called a SAS compiler which will take those files with that special syntax and compile it into regular CSS and there's all types of compilers from command line tools to guey programs um there's also compilers that can integrate right into your tooling if you're using something like webpack and we'll talk more about that later so there's also something called postcss which can do a lot of the same stuff that SAS can do and more it's just implemented in a different way it's implemented via JavaScript plugins so if you wanted to like Minify your CSS or automatically add prefixes or something like that you can install those plugins so post CSS does have a learning curve and it's usually used in your tooling and environment with something like webpack um so I think at this point it would be more beneficial to learn SAS just because it's really simple to get up and running and again you could just learn it in a weekend um it's I would say it's optional but it it can help you out so CSS Frameworks are another useful tool for front end and full stack develop Vel opers and again just like I said with JavaScript you want to make sure you you learn enough CSS before you jump into a framework so these can save you a lot of time because they come with pre-existing classes and components that you can use to speed up your development they're also great for people that aren't really good with design themselves and creating uis and they're good for prototyping if you just need a quick layout so with Frameworks like bootstrap if you want to really customize things like colors fonts rounded corners and stuff like that then you're going to need to learn SAS because you basically need to change those values and then recompile the bootstrap CSS to include your customizations as far as what is available I I put the most popular Frameworks here um which are Tailwind bootstrap M I would say materialize and Bulma but the two top ones right now are tailwind and bootstrap so I would definitely suggest learning one of those two if you're going to jump into a CSS frame framework now the big difference between tailwind and bootstrap is that Tailwind is very lowlevel it's a utility framework meaning that you have classes to do certain things like set sizes margins padding um borders Etc so you end up with a ton of classes in your HTML with which seems like a lot of people hate at first however you can really customize your layouts because you're not stuck with the same old alert and card classes such as what you get get with with a framework like bootstrap now there's pros and cons to both with bootstrap you don't have to write as much CSS but it's more component based than utility based so if you need an alert or um you just want a like a card class or something like that you have those predefined Styles now bootstrap also has some great JavaScript components like models and accordion menus that can save you a lot of time because you don't have to create them from scratch and if you don't know know a lot of JavaScript then it's great because you can just Implement them really easily so for me I prefer Tailwind for projects that need a really customized UI but bootstrap for something where I need to create a layout fast especially if I want to use models and stuff now some other options are materialized which uses Google's material design style guide I really love the look of materialize it does also have uh JavaScript components it's just not as Pop popular as the other two Bulma is a super lightweight fast modular framework that has a pretty easy learning curve so that's something else you might want to look into the nice thing about these Frameworks is that once you learn one it's pretty easy to learn others a big part of it is just using certain class names which you can always look up so you it's not like you have to remember every single class name other than that you just need to know how to set up and customize your layouts when using these all right so let's just quickly talk about design because it depends on what you're doing as if you need to be good with design or not or understand UI design if you're if you're a front-end developer at a company like Amazon or Microsoft or something like that then you're probably going to have other departments that do everything that has to do with creating uis and and ux and then it's your job to basically take that design and make it function turn it into uh a user interface that works in the browser however if you're going to be a freelancer then you pretty much need to know how to build a website Soup To Nuts so you need to understand how to create layouts and there's some basic principles that you need to know now I'm of the opinion that even if you do plan on being a front-end developer at a large company and you're not really going to deal with with the design stuff you should still know some basic principles um I I've been asked to review a lot of websites and sometimes it baffles me when people have like um they'll have their elements all squished together and and they don't realize that just that little bit of margin that little bit of spacing or or white space would make their site look so much better or they'll have a big hero image and the text is unreadable and all they have to do is put a a a an overlay and it would make it look so much better so there's just a couple things that I think every front-end developer should understand so so we have scale which is the sizing of elements relative to other elements around it white space which pertains to the spacing around elements again you don't want to have your your elements all smooshed together you want to have the right amount of margin in between each element coloring contrast is a big one you want to make sure all your text is readable if you do have like a hero image and you have text over it make sure your overlay is dark enough so that you can actually read the text all right U visual hierarchy so arranging your elements in order of importance we have typography which is text type faces and font Styles things like that and then alignment and flow so direct the users's eyes to where they need to be I think if you understand these these basic design principles it'll help you as a front-end developer and Gary Simon's uh Channel design course is actually really good for this type of stuff so as far as creating design mockups and using design software again it depends on what you're doing but I think you should at least know the basics of one of these programs just how to create a a very basic layout how to slice up images things like that and you have a bunch of options I personally like Adobe XD I used Photoshop for years when I was freelancing and and uh not just Photoshop but also illustrator and I've just always went towards uh Adobe products so I'm comfortable with XD however figma is really popular right now and that's probably what I would recommend for most people it's free it's browser based so it's obviously it's crossplatform it's great for collaboration um there's just there's a lot of good things about figma that's probably what I'd recommend sketch is also great but I do believe that it's Mac only at least for creating and editing documents and then Invision is one that I've seen a lot of lately I've been working with a lot of designers for things like ebook covers and things for the website and a lot of them are using Invision and the documents that they send me are really really cool so that's something to look into and then you also have wireframing Solutions as well if you don't want to create a whole mockup but you just want like a quick layout uh you know an outline of a website Invision is also good for that but there's also uh mockups mq UPS Lucid charts which I actually use for diagrams and charts balsamic uh wireframe CC so there's a ton of different tools out there um I actually have a I have a a GitHub repo with uh I I don't even know how many resources are on it but it's called design resources for developers and it has just any kind of design um tool that you can think of that's free is on that is in that repo it almost has 50,000 Stars so I'll put that link in the description if you're if you're interested in that as well all right so we've talked about some of the main Technologies of the front end HTML CSS JavaScript there's other Essentials essential tools that you'll learn along the way that are not going to take you as long to learn but they're still essential so we'll start with Git and GitHub so Version Control is very important that's something that you're absolutely going to need to know as a developer it allows you to track your changes manage multiple versions of your code save your progress collaborate with others and much more and there's a few options other than git for Version Control such as subversion but I rarely see anyone using that anymore so git is by far the most common solution and it can get overwhelming when you get into the the less common commands but to start out just learn the basics you know uh add commit push clone and I know that there's there's guey tools for git as well so there's desktop tools there's um vs code has git integrated with it you can use that as well but I would still suggest learning the basic commands in the command line uh I have a crash course on git and GitHub it's a little bit older but it's all extremely relevant it's all the same commands and so on so the browser Dev tools we talked about those a little bit those are extremely important for front-end and full stack developers all modern browsers have them um for instance in Chrome you can hit F12 on Windows or command option I on a Mac and you'll open up the tools it's a tabbed interface that splits up into different tasks so you have the elements tab which is to view and edit the HTML and CSS obviously if you edit it it's just locally on your machine you have your JavaScript console which is important for errors and debugging the network tab will show every request that is sent to the server and the response that is sent back um and this is unbelievably useful to see what's going on between the client and server and you can use the application tab to see anything that's in your client side storage such as cookies local and session storage so you definitely want to learn at least those tabs early on next we have npm or the node package manager and you won't need this at the very beginning of Learning JavaScript but it's good to get your feet wet and start experimenting with it so npm is a package manager we can install different packages whether it's a library a framework or just some kind of tool to use in your project I believe there's something like 1.4 million open- Source packages in the npm registry so to use npm you do have to install node.js on your system which is really simple uh if you're a front-end developer you may never use node.js itself um as a runtime but you will use npm and that includes installing most of the front-end Frameworks you use npm so markdown is a lightweight markup language for creating and formatting text it's something that you should probably learn along with Git because the main readme files are markdown so these are files that have anmd extension and you can literally learn markdown in a day the syntax is very simple and you can just go to markdown guide.org and it has basically a cheat sheet for the syntax so modern text editors and idees have a system for plugins or extensions which do just that they extend the functionality of the editor and most developers have uh a suite of extensions that they use in their environment so I use vs code and there's some some common extensions and features that I use so EMT is an incredible tool for HTML and CSS where you can use short Snippets to write much faster um for instance if you want to have a div with a class you can just say dot and then the class name and then hit enter a tab now VSS code by default includes EMT so you don't have to install it as a Plugin or anything but for some other editors like Adam Sublime Text I do believe you have to install it live server is also uh a great extension for VSS code that I use it basically just gives you a a quick development envir enironment and it it reloads the page automatically anytime you save so it's really helpful for small projects prier and Es lint are used for code format formatting and linting uh bracket pair colorizer will give you color matched brackets curly braces parentheses other than that I would suggest uh specific language and framework extensions for example if you're going to use PHP you probably want to use something like the PHP in I think it's called intelence Uh yeah intelence extension if you use react you'll want to use something like the react Redux Snippets extension this will help you out immensely with code highlighting intellisense and all that now whether you're making requests from the front end to a server or you're creating a server or both you need to be familiar with HTTP clients which are tools that can make HTTP requests your browser is one of those tools obviously and you have the network tab to see exactly what's going on with the request and response now you may need something more powerful like Postman this is a desktop utility that lets you make any kind of HTTP request including post put delete Postman is essential for me when it comes to backend and full stack development but it can be useful for frontend as well so if you need to see if you need to test the response of a backend or a public API you can use Postman you could also use Curl which is a command line utility to make requests and then to make requests from your code obviously you have the fetch API but you also have axios which is a library that you can use that I really love I I I prefer it over the fetch API I think it's more full featured and it's easier to work with but it's similar to what fetch does all right so there's going to be a couple slides where we talk about AI because it's such a huge Topic in 2022 and now in 2023 we've made a lot lot of strides in this area there's a ton of new tools coming out some of which I'll mention later but these two are really incredible and if really helped me immensely when it comes to productivity and learning so first is GitHub co-pilot which is a a vs code extension there's also extensions for other editors as well co-pilot uses artificial intelligence and machine learning to provide code suggestions and autoc completion based on the context of what you're typing so it uses a deep learning model that has been trained on a massive data set of open- source code and it's able to suggest entire lines of code based on just a few keywords so you can use it as kind of an aid but you can also use it to generate data uh among other things now GitHub co-pilot can really improve developer productivity and it can reduce the amount of time spent on you know just routine coding tasks it can also help new developers learn and code more quickly by providing suggestions and examples um I do think there is a downside to this though which I'll talk about in a minute but the second tool is chat GPT which is an AI powered chatbot that you can not only ask questions and get extremely useful answers and code samples but you can also converse with it and it will remember the context of your conversation so if you don't like the answer it gives you can ask ask it to clar ver ify or change the format of your question so this technology has just taken the World by storm and I think it's the first real display of what AI is capable of and it's very useful to programmers because it can help you debug and solve problems give you code examples explain lines of code that you don't understand and much more now again with all the good stuff that comes with these tools I do think there are some negatives as well uh especially for beginners I think think that it may start to dumb people down and make them lazier because they don't have uh they don't have to do as much work and I'm not saying this about everyone or even the majority but I do think it will cause some people to think less and become more dependent on these tools I also think that um we have the issue of a loss in jobs in the future but I'm not going to really speculate on that too much that's that's for a different video with that said if if you do use these tools just be aware of what you're actually learning versus what you're having the tool do for you um I think this is going to be a big issue in the future so if you're a beginner just don't let the tools do the work for you have them help you and have them help you understand all right so once you learn HTML CSS JavaScript and you're able to use git and GitHub you want to learn to push your websites to a Hosting account you want to be able to host your projects on the web and there's tons and tons of services I'm going to mention some of the the more intricate full stack hosting Services later these ones are more for front-end projects and they're really really easy to use so first of all you're going to need a domain name um you can do that before or after you push to a host because when you use these Services they give you uh just a temporary kind of a dummy domain name just as a placeholder and then you and register a domain name I like to use name Che but you can use you know plenty of other services and then you point it to that web host so netlify is the first one here which is probably my favorite for front-end projects and it's very popular in the JavaScript Community they offer a really really generous free tier and there's features like form submissions and serverless functions which I'll talk about in a bit and it's super easy to deploy basically you just push to GitHub and then you log in to netlify with GitHub and you just simply select a repository you select a certain Branch from a repository and it will just automatically deploy and then every time you push to GitHub to that certain Branch it will automatically Deploy on netlify so you get just continuous deployment which is really nice now versel is very very similar um the way that you push your site to versel is very similar they offer similar um features there's a generous free tier so uh versel they are the creator of the nextjs framework so they're great for next projects uh I'll talk more about nextjs in a little bit um but that's another option GitHub pages is another free option for small projects it's good for like personal portfolios things like that and super simple to set up because all you have to do is just name your repository in a certain way and it will just work now the last one cpanel cpanel isn't a hosting provider it's a it's a a platform where you can um publish websites you can set up and check emails you can set up MySQL databases and there's tons of of Hosting companies that offer C panel such as HostGator hostinger um in Motion Hosting blue host a lot of them have been around for years or even decades and cpanel I like it because it gives you everything in one place if you want to set up all your emails and stuff you can do all that from cpanel where if you use these other services you have to set up separate email hosting um you can also set up my SQL databases or postgres databases you can set up FTP accounts although I wouldn't really recommend using FTP these days and you can also push from GitHub just like you can with these other ones so these are kind of the main easy choices that you have as a front-end developer okay so let's say that you've learned everything we've talked about up to this point if that's the case I'd say that you're a foundational front-end developer now in 2023 you're most likely going to have to learn a front-end framework and learn some more modern Tooling in the front end and I'm not saying it's impossible to get a job at this point I've seen it happen over and over and in a lot of cases the company will actually train you to learn react or whatever the technologies that they use are all right so it's not impossible if you're going the the freelance route I think that you could definitely start to work on getting clients just know your limitations know what you can handle there's a lot of small businesses out there that just need pretty simple websites maybe some JavaScript functionality but um stuff that I think that you could handle at this point just don't go taking on like a custom e-commerce platform or something like that so you should have uh just a basic be able to set up a basic development environment with your text editor your IDE any plugins that you use you should know how to navigate your code easily with shortcuts run a local Dev server with something like live server use EMT for fast HTML and CSS things like that you should also be able to create some decent looking websites with HTML and CSS this includes semantic markup layouts CSS grid and of course responsive design now I'm not saying you have to be great with design you should be able to look at a design and recreate it but I do think you should understand some basic design principles just very very basic I know that design is is subjective in a lot of ways but there are some things that are just objectively bad when you have things squished together or you can't read the text that's just bad and you should be able to spot that easily all right so as far as JavaScript goes you should be able to um work with the document object model interact with it the amount of JavaScript you learn depends on what you want to do I mean if you ultimately want to be a PHP or python developer you can get by with just the basics but if you're going to be a front-end developer and you want to be able to create Dynamic UI then you should learn everything we talked about and continue your journey with JavaScript going into toolings Frameworks and even nodejs on the back end the fetch API is really important and you should learn http so you should know status codes just the main you know 200 404 500 Etc and know how to make an HTTP request with fetch know how to read the responses in the in the dev tools things like that you need to know how to initialize a git repository commit your changes you should be able to create branches clone other projects make pull requests and so on I think that any Dev job you get is going to be using git and if they don't use git they're they're going use some kind of Version Control so you should know how to deploy a project I would suggest having a preferred domain name provider and a preferred Hosting account uh hosting service that you like that you can use rather than you know having 10 different ones that you use now it's optional but it's helpful to know a CSS framework like Tailwind or bootstrap and it can also be helpful to to know SAS as well so now that you have some foundational front-end skills you need to choose your next PATH so these are the main options that I came up with and of course they do blend into each other but I tried to create a few separate categories based on what you'll be doing I also put the colors for which type of developer would take that route so the first one here I if your goal is more web design based meaning maybe you want to try in freelance or create an agency that creates websites for other businesses then you may want to dig further into creating really nice layouts this means lots of CSS you may also get into some no code tools like WordPress web flow Shopify and these are great tools for Freelancers so that could be an option you know you're not really getting into building complex applications or super Dynamic uis but more like brochure type websites you can add some JavaScript functionality make it Dynamic and so on so you that's one way that you could go we also have the option to jump into the back end if your goal is to learn PHP python Ruby Java or any other service side language then you you might want to move to this area next if you're sticking with JavaScript you may want to move to node.js at this point especially if you plan on being a a backend developer and your goal is not so much creating client facing websites and applications but more like apis and microservices in that case there's really no need to learn react or or web design or anything like that so if you want to skip right to the service side Tech you could do that now as well now if your goal is to be either a front-end developer or a full stack Dev that can create Dynamic interfaces or you do want to go the web design route but also want to be able to create more intricate interfaces then I would suggest learning more about front-end tooling and moving to front-end Frameworks that's probably your best bet and and that's what we're going to talk about in the next slide because I think that's the most common Choice the most common path to take from here it's also what I would recommend to just about anyone that isn't doing strictly backend and then the last option I came up with is to keep working on your JavaScript skills and just your programming fundamentals in general meaning that you don't move to a framework yet but you maybe get into algorithms and data structures learn more about design patterns and so on um websites like code Wars are great when you really want to challenge yourself and you want to learn just get better at problem solving learning high order array methods and loops and just becoming a better programmer and Problem Solver in general so this option I think is good if you're coding as a hobby um it may not be the best option if you're trying to get a job or start freelancing quickly because if you want to do that you you want to get into the Practical technologies that are going to get you to work okay so like I said we're going to jump into front-end Frameworks and tooling now when I say tooling I mean tools that help us have a more advanced front-end development workflow as opposed to just having a single JS file included in our HTML where we have all of our JavaScript crammed into that one file now when you use a framework like react all this stuff is done under the hood and if you want to jump right into a framework that's fine that seems to be what most people do actually however if you want to look more into build tools I think it'll give you a better overall picture as to what's actually happening and how and how things work under the hood which I'm a big fan of so to put it in simple terms our projects can have a bunch of JavaScript modules which are just files that we Import and Export our code from and we can also use thirdparty modules using npm and then what these tools do is it takes everything all of our modules both custom and npm modules as well as other um files and assets like CSS and SAS files images and so on and it compiles it all into a single or maybe a few bundled files that we then include in our HTML in our script tag all right so you have your development environment and then you compile it down to assets that you have for production all right so to let's take a look at some of these tools now I may be a bit old school but I personally still prefer webpack it's a module bundler that takes all your files and bundles them together it's been around forever it's essentially the initial module bundler but it can be a bit difficult w