0:01 [Music] 0:07 Hey, what's going on guys? So, another 0:09 year has passed and we have a brand new 0:11 year to look forward to and a new year 0:12 for you to grow as a developer and learn 0:15 more to get where you want to be in your 0:17 career. So, for those of you that are 0:19 kind of new to this channel, this is 0:20 something that I do every year. I've 0:22 done it since 2017 and people seem to 0:25 really like it. It's a a complete map or 0:27 guide to web development technologies 0:30 and topics. So we talk about things like 0:32 programming languages, frameworks, 0:34 development tools, and much more. So I 0:37 just want to mention that this is not a 0:39 trends video like you see a lot of a lot 0:41 of this time of year. I will talk about 0:44 some recent trends like web 3 toward the 0:47 end, but this is a complete guide from 0:49 start to finish of essentially all web 0:52 development technologies that are used 0:54 today. I do have um some stuff 0:57 underlined and that's just to let you 0:59 know what I prefer personally. I'm not 1:01 telling you you should use that. I'm 1:03 just letting you know my personal 1:05 preference cuz a lot of people ask me 1:06 that. And then one thing I've changed 1:08 from previous years is I used to put the 1:10 names of videos on my channel that 1:13 pertain to that particular technology 1:15 that we're talking about. I used to put 1:18 um put those in the sidebar, but this 1:20 year I've actually added a page to my 1:22 website that kind of goes along with the 1:24 topics here with links to videos and 1:27 courses for each section. Um so you can 1:30 check that out. I'll put the link in the 1:31 description for that. All right. So 1:33 before we get into specific 1:35 technologies, let's first talk about 1:36 your overall goal and why you even want 1:39 to code or why you code. So if if 1:42 writing code interests you, there's a 1:44 few paths that you can take. Uh, and 1:46 that's what I really love about writing 1:48 code is you're not bound to just one 1:49 thing. In fact, you could bounce around 1:52 between a lot of these these choices I 1:54 have myself. So, I would say that the 1:57 most common reason that people want to 1:59 learn to code is to work for a company. 2:02 Developers make a a pretty good living 2:05 and uh a lot of us are passionate about 2:07 it. So, it's great to be able to go to 2:09 work every day and and do what you love. 2:11 That's a dream for many people. and 2:14 technology isn't going anywhere anytime 2:16 soon. So, you also have a lot of job 2:18 security. So, some people, including 2:20 myself, like the idea of freelancing and 2:23 running your own business. You can set 2:26 your own hours, be your own boss, but it 2:28 it does take a lot of discipline to work 2:30 for yourself. It can also get kind of 2:32 lonely. So, it's not for everybody. It 2:35 has its, you know, pros and cons just 2:36 like everything else. Another option is 2:39 to build your own products or SASS which 2:41 are stands for software as a service. 2:43 This could be anything at all. Some 2:45 examples could be selling your own 2:47 templates or plugins. You could build 2:49 something let's say some kind of patient 2:51 management portal or I don't know an 2:54 online photo editor, something like 2:56 that. I mean the possibilities are 2:58 endless to to what you can create and 3:00 what can help people out. So it does 3:02 take a lot of work and marketing to 3:04 create successful products. You will 3:07 probably have some failures, but that is 3:08 a path you could take. You could get 3:10 into my wheelhouse of creating 3:12 educational content, although this isn't 3:14 really something that I would suggest 3:16 that you start with. It's a little weird 3:18 to learn how to code and then go right 3:20 into teaching without any experience 3:22 unless you've done it as a hobby for 3:24 years. Which actually brings me to my 3:26 next option, which is to code as a 3:28 hobby. It's absolutely fine to learn how 3:31 to code and and not use it to, you know, 3:34 as your living or or whatever to make 3:36 any money from it. And you might even 3:38 start as a hobby and find out that 3:40 you're able to build something that can 3:42 help a lot of people out. You end up 3:44 making a lot of money down the road. But 3:46 my point is that there's a lot of 3:48 different roads you can take. If you 3:50 decide to take a certain road now, 3:52 doesn't mean you can't change it later. 3:55 All right. So, another thing that you're 3:57 going to want to think about is what 3:58 type of developer do you want to be or 4:00 or do you want to start with? Certain 4:02 technologies are used for different 4:04 parts of a website or a web app. So, a 4:07 front-end developer typically works on 4:09 the client side or with the browser and 4:13 that's called the front end. So, they 4:14 build user interfaces which is obviously 4:17 the part of the application that the 4:19 user deals with. Um, some typical tools 4:22 that front-end developers need to know 4:24 are HTML, CSS, JavaScript, working with 4:27 the browsers, uh, document object model, 4:30 and they'll most likely be working with 4:32 some kind of front-end JavaScript 4:34 framework. So, back-end developers work 4:37 with the server side and could that 4:39 could be any kind of programming 4:41 language. So, um, you can use JavaScript 4:44 with Node.js, JS, but on the server, you 4:46 can also use PHP, Python, C, Golang. Uh 4:50 there's there's a lot of different 4:52 languages you could use, and I'm going 4:53 to go over those later. And back-end 4:56 devs usually model data and also work 4:58 with some kind of database. And then a 5:01 full stack developer works on both the 5:03 front end and the back end. Uh it's also 5:06 important to mention that these days 5:08 that line that separates the front end 5:10 and back end is becoming more blurred. 5:13 And as far as my audience and and my 5:16 viewers, I know that most of you guys 5:18 are into full stack development. Now, 5:21 these icons or these images on the side 5:24 here, I'm going to label when something 5:26 is frontend, backend, and full stack 5:28 with these icons. And uh a lot of what 5:31 I'll be what I'll be mentioning isn't 5:34 mandatory that you learn. So, if it is, 5:37 I'll have a check mark along with the 5:39 icon. All right. So there's only a few 5:42 basic tools that are really required 5:45 when we start doing web development. So 5:47 obviously you need a computer to write 5:49 code and you need an operating system on 5:51 that computer. As far as the computer, 5:53 you don't really need a powerful machine 5:55 for web development. You can get just 5:57 about anything from the last 10 years 5:59 and it's fine for just basic web 6:01 development, but I would suggest at 6:03 least 8 GB of memory. As far as the 6:06 operating system, everyone has their own 6:08 preference. There is no best operating 6:10 system. I personally prefer Mac OS, but 6:13 I also have a Windows machine that I use 6:15 quite a bit. I run Linux on any servers 6:18 that I have. Uh, and I'll talk more 6:20 about servers later. You also have the 6:22 Windows subsystem for Linux. Um, web 6:24 browser, same thing. I prefer Chrome 6:27 just because that's what I've used for 6:28 the past decade or so. I do like the 6:31 integrated developer tools, but all 6:33 browsers these days have those to some 6:35 extent. Uh Firefox is also very popular 6:38 with developers and and recently I've 6:40 actually heard of a lot of people using 6:43 Brave Microsoft Edge along with Brave. 6:46 They're they're based on Chromium. So I 6:48 mean any of these will really do for web 6:51 development. So as far as writing code, 6:54 you need a text editor or an IDE which 6:56 stands for integrated development 6:58 environment. So, Visual Studio Code or 7:01 VS Code is my favorite text editor and 7:03 seems to kind of dominate the the at 7:06 least the web development world. It's 7:08 fast, it's intuitive, it has great 7:10 extensions, it's free, it has a great 7:12 community, but there are some others. 7:14 Sublime Text is is pretty popular. Vim 7:17 is the successor of VI, which is a Unix 7:20 based text editor, and it it seems a 7:23 little difficult to learn, but people 7:24 that use Vim seem to really love it. 7:27 Okay, so the terminal is not something 7:29 that you'll need to know right away. And 7:31 if you're a front-end developer, you 7:33 definitely don't need to master it, but 7:35 you should know the basics when it comes 7:37 to just navigating between folders and 7:39 files. Um, there are command line tools 7:42 that you'll be using, no matter what 7:44 type of developer you are. Uh, as far as 7:46 which terminal you use, that's up to 7:49 you. The default terminal is fine that 7:51 comes with Windows, Mac, whatever. Uh, I 7:54 like iTerm for Mac OS. Windows users 7:57 have PowerShell. They have um WSL. I 8:01 like to use a program called Git Bash 8:04 when I use Windows. It's a very simple 8:06 Unix based terminal. And then you also 8:08 have Hyper. Uh, it's very customizable. 8:11 You can install extensions and so on. 8:14 All right. So, a lot of people ask me if 8:16 they need to know any kind of design 8:18 software. And in my opinion, if you're a 8:20 front-end developer or a web designer, 8:24 you should learn at least the basics of 8:26 some kind of design tool. And if you're 8:28 freelancing, you're most likely going to 8:30 have to provide mockups to your clients 8:32 and and you might want to know one of 8:35 these. So, some of the big ones, we have 8:37 Figma, which is great. It runs right in 8:39 the browser. It's powerful. It's free. I 8:42 like Adobe XD just because I used to use 8:44 Photoshop and Adobe Illustrator. and 8:48 Photoshop is really geared towards 8:50 photos. So, I switched to Adobe XD 8:53 because it's more geared towards UI 8:55 design. Uh, that's what I prefer, but I 8:58 would probably recommend Figma for 8:59 someone that's just getting started. You 9:02 also have Sketch, which is pretty 9:04 popular, but I believe it it's only for 9:06 Mac. And then there's some others as 9:08 well. Canva is a a tool that you can use 9:11 right in the browser. I'm not sure if 9:13 it's free or not, but that's something 9:14 that I see a lot of people using these 9:16 days as well. 9:17 All right. So, HTML and CSS are always 9:20 going to be the first web technology 9:23 that you learn because they're the 9:24 building blocks of the web. And no 9:26 matter how sophisticated your web app, 9:29 no matter what the language on the 9:30 server you're using or what front-end 9:32 framework you're using, in the end, it's 9:34 going to be HTML and it's going to be 9:36 styled with CSS in the browser. So, 9:39 typically you're going to learn both 9:41 HTML and CSS at the same time, but 9:44 you're going to focus most of your time 9:45 on CSS just because it's it's much more 9:48 difficult and there's just a lot more to 9:50 learn than with HTML. So, I think no 9:53 matter what type of developer you are, 9:54 even if you plan on being a back-end 9:56 developer, you should at least know the 9:58 basics of HTML and CSS. So, some things 10:01 you want to learn, you know, basic 10:03 paragraph and heading tags and all that, 10:06 but you also want to learn your HTML 5 10:08 semantic tags like header, footer, 10:10 section. It's really important to lay 10:13 your pages out correctly with these 10:15 semantic tags over just a bunch of divs. 10:18 Then you want to get into CSS 10:20 fundamentals, basic properties that have 10:22 to do with colors, fonts, borders, 10:25 margin, padding. You want to understand 10:27 the box model and how that works. And 10:30 then alignment of course is really was 10:32 really uh important. So flexbox and grid 10:36 both of those are great tools. I mean I 10:38 come from the days of using floats and 10:40 tables for for your layout and I can 10:43 tell you that CSS grid and flexbox are 10:46 just they're they're godsends um for web 10:49 developers. So I would learn both. I 10:51 tend to use CSS grid for my overall 10:54 layout but flexbox for aligning inner 10:57 elements. and then media queries and 11:00 responsive design. So, so I would say 11:02 now in 2022 11:04 and maybe the past seven or eight years, 11:07 I would say it's mandatory for 11:09 everything that you build to look decent 11:12 on a mobile device. Before that, it was 11:14 kind of optional, but now with the 11:16 amount of mobile device use, I think 11:18 that it's mandatory that all your 11:20 layouts look good on mobile devices. So 11:24 simple animations and CSS transitions, 11:27 they're not really crucial at this time, 11:28 but you might want to just learn the 11:30 basics of having something fade in and 11:32 fade out and so on. All right, so as far 11:36 as extra tools that you can learn at 11:38 this point, SAS is a CSS pre-processor. 11:43 There are others like less and stylus, 11:45 but SAS is definitely the most popular. 11:47 Um, you can basically create SAS code 11:50 which is similar to CSS but gives you 11:52 some extra functionality um, such as 11:55 variables, functions and mixins and 11:59 nesting. I do think that SAS is going to 12:02 get pushed out because native CSS 12:05 already has custom properties which are 12:08 basically variables. We're going to have 12:10 nesting in CSS and I think that there's 12:12 going to be much less of a need for SAS. 12:14 But with that said, I think it uh I 12:17 think you should learn it just because 12:18 it's pretty easy to learn. There's just 12:20 some extra features to learn and then 12:23 you just compile it with a SAS compiler 12:25 down to CSS and you include it in your 12:28 projects. Also, if you really want to 12:30 customize any CSS framework like 12:32 Bootstrap, a lot of the times you'll use 12:35 SAS for that. So that's another reason 12:37 to learn it as well. And you could 12:38 literally learn it in a weekend. So you 12:41 might also have heard of post CSS which 12:44 is a different thing. Post CSS is a tool 12:46 for transforming CSS with JavaScript. 12:48 It's used in a lot of bundlers like 12:51 parcel some others which I'll talk about 12:53 later but you can you can do a lot of 12:56 the same stuff that SAS does by 12:58 installing specific plugins. I 13:00 personally don't use post CSS that much 13:03 and I wouldn't suggest learning it at 13:05 this point but it might be beneficial to 13:07 learn uh in the future. All right. So 13:10 before you go on to learn JavaScript, 13:12 you have the option to learn a CSS 13:14 framework. And these frameworks give you 13:16 basically give you predefined classes to 13:19 style elements. Now, one thing I really 13:21 want to stress here is that it's 13:23 extremely important, at least in my 13:25 opinion, to learn CSS before jumping 13:28 into a framework. Um, once you can 13:30 create just a decent looking website 13:33 with HTML and CSS, then you might want 13:35 to look into a framework because they 13:37 can really help you speed up your 13:39 projects and and minimize the amount of 13:41 CSS that you write or eliminate the need 13:43 to write CSS altogether. So, let's take 13:46 a look at some of these. So, Bootstrap 13:48 has been around for a long time. It's 13:50 currently on version five. I would say 13:52 that it's the most popular to date, at 13:54 least in my opinion. Uh, I think it's 13:56 worth learning for the simple fact that 13:58 you'll probably run into it at one time 14:00 or another. Also, if you learn Bootstrap 14:02 and you understand how it works, then 14:05 you you can pretty much use any 14:07 framework, at least at its core, by just 14:10 remembering or looking up specific 14:12 classes. And Bootstrap also gives you a 14:15 bunch of cool JavaScript widgets like um 14:18 u dropdowns and collapsible menus and 14:21 things like that, hamburger menus. So, I 14:24 think it is worth learning. I think that 14:25 it can really help you speed up 14:27 projects. Now, Tailwind is a bit 14:29 different than the rest of these. 14:31 Tailwind is a low-level utility-based 14:33 framework. So, let me kind of explain 14:35 what that means. So, Bootstrap is a 14:38 high-level framework, meaning that it 14:40 has classes like button or alert. And 14:43 that one class will contain a lot of 14:46 different styles like the the background 14:48 color, the border, the border radius, 14:50 the margin, and all that. with Tailwind. 14:53 Um, Tailwind provides very low-level 14:56 classes that do basically just one 14:58 single thing or one property. So, you 15:01 might have a class of text center which 15:03 will just add a text align center 15:06 property or you might have just one 15:08 single class for to add a little margin. 15:11 So, very low-level stuff. Now, with 15:13 Tailwind, the the negative is that you 15:16 write a lot more classes in your HTML. 15:18 So, it does really clutter up your HTML. 15:21 The benefits is that um for one, you you 15:24 don't have to write any CSS, but you can 15:26 also customize things better where not 15:29 all your buttons and and your elements 15:32 look the same as every other website 15:34 that uses Tailwind. You you do see this 15:36 a lot with Bootstrap in other 15:38 frameworks. So, I mean there there's 15:40 pros and cons to both. I usually suggest 15:42 Bootstrap first because it's easier to 15:45 learn and think that it's it's more 15:48 popular. you're going to end up seeing 15:50 it more in the industry. So, at least at 15:53 this time. So, materialize is another 15:55 framework similar to Bootstrap. It has 15:58 has classes as well as JavaScript 16:00 widgets. It's based on the material 16:03 design pattern by Google. I've I've 16:06 always liked materialize. I like the 16:08 look of it more than I like the 16:10 Bootstrap stuff, but I do think that 16:13 again Bootstrap is much more popular. 16:15 So, that's probably what I would 16:16 recommend first. Balma is another nice 16:19 looking framework with CSS components. 16:21 It's really modular. It's also mobile 16:23 first like most of these other ones. I 16:26 don't think it has any JavaScript tools 16:28 though. And then Foundation is a 16:30 wellestablished fullfeatured UI 16:32 framework that's been around for quite a 16:34 while, but it is still being used even 16:36 by some pretty large companies. And it 16:38 can be a bit more advanced in its 16:40 tooling, but it's very customizable and 16:43 it is a a nice framework. So there's 16:46 others as well, but like I said, once 16:48 you learn how CSS frameworks work 16:51 essentially, then you can basically use 16:54 whichever one you want. All right, so 16:56 this is something that I think is really 16:58 important to understand as a front-end 17:01 web developer or a web designer, and 17:03 that's UI design principles. So, if 17:06 you're working at a large company, they 17:08 may have designers that create mockups 17:10 and then it's your job to kind of take 17:12 that mockup and make it display and work 17:14 in a in a browser. However, there are 17:16 some companies where front-end 17:18 developers do have a lot of say in the 17:20 design. And if you're freelancing, of 17:22 course, unless you're you're you're 17:24 outsourcing all of your design work, 17:26 you're going to be creating some layouts 17:28 and and doing some design. So, I think 17:31 you should at least have somewhat of an 17:33 eye for design and understand some 17:35 general principles. All right? Such as 17:38 color and contrast. You want to make 17:40 sure the text is readable. We've all 17:42 seen the websites where there's a big 17:44 hero section and an image where there's 17:47 text on top of it and you can barely 17:49 read the text because there's no 17:51 overlay. Um, things like that. You don't 17:53 want to make those kind of mistakes. 17:55 Whites space. You want to make sure that 17:57 you don't have too much or too little 17:59 space in between elements. You want to 18:01 make sure your elements are sized uh and 18:04 they scale correctly relative to each 18:06 other. You want to make sure everything 18:08 on the page is arranged in in order of 18:11 importance. Typography, so nicely 18:14 formatted text, type face, sizing, etc. 18:17 So these are just some really simple but 18:19 really important things to pay attention 18:20 to if you're doing any kind of design. 18:23 All right. So, up to this point, we're 18:25 creating basic websites and making 18:27 things look nice. Now, it's time to get 18:29 into a programming language. And if 18:31 you're a web developer, you should know 18:33 JavaScript. It may not be the main 18:35 language that you work with if you're 18:36 going to be a backend or a full stack 18:38 developer. Uh you can build websites 18:41 using server rendered pages and a 18:43 template language with, you know, PHP or 18:46 Python. But if you want any kind of 18:49 dynamic functionality within the browser 18:51 and you want to have interactivity and 18:53 just mo a modern uh web app, then you'll 18:56 need to know at least some JavaScript 18:57 because that is the language of the 18:59 browser. So JavaScript front-end 19:01 frameworks are extremely popular, but I 19:04 think in some cases people move to them 19:06 too quickly. So here's some important 19:08 parts of JavaScript that I recommend 19:11 learning before moving to a framework. 19:14 So the basics of JavaScript are the 19:16 things that you use in just about every 19:18 project. So it's important to understand 19:19 them. Things like data types, data 19:22 structures like arrays, objects, you 19:24 have functions, loops, things like that. 19:27 Um things that aren't just relative to 19:29 JavaScript, but these are in basically 19:32 every programming language. They're just 19:34 basic principles. And once you learn 19:36 them, it makes it easier to to learn new 19:39 programming languages later on. So in 19:42 web development, the DOM or document 19:44 object model is really important. The 19:46 DOM is an uh it's an interface in the 19:48 browser that treats HTML documents as a 19:52 tree structure of nodes. So all all the 19:55 HTML tags in the document are part of 19:57 this structure. And nodes can be 19:59 selected, manipulated, and um can have 20:02 event handlers attached to them. This 20:04 allows you to have dynamic web pages. So 20:07 you can have when you click a button and 20:09 something happens on the page, that's 20:11 when you're working with the DOM. You're 20:12 making things happen, whether it's 20:14 making something a different color or 20:16 making something show or disappear or 20:18 making a request to some kind of server 20:21 and then showing some data, things like 20:23 that. So I would suggest learning how to 20:25 work with the DOM using vanilla 20:26 JavaScript before moving to a framework. 20:29 Asynchronous programming is important in 20:32 JavaScript. Many times uh instead of 20:34 waiting for a task to finish such as 20:36 getting data from a server, we want 20:38 things to keep moving on. So we use 20:40 asynchronous coding. So it's important 20:42 to understand things like promises using 20:45 the dot then uh syntax or I should say 20:48 then catch syntax also a sync await 20:51 callbacks things like that. And then the 20:54 fetch API is also something that I would 20:56 suggest learning because it allows you 20:58 to make requests asynchronously to a 21:00 server and you can get data, you can 21:04 post, update and delete data. Uh a lot 21:07 of front-end developers a lot of their 21:09 job or part of their job is to make 21:12 requests to APIs and then use that data 21:14 in their user interface. So you should 21:17 also fully understand JSON or JSON which 21:20 is JavaScript object notation because 21:23 this is the most common format for APIs 21:26 or API data. There is uh XML but you 21:30 don't see that much these days with uh 21:33 with modern APIs. 21:35 So array methods are also something that 21:37 you'll use quite a bit when dealing with 21:39 arrays of data. So for each map, filter 21:43 reduce. Um there's a lot more but I 21:45 would say that you should be comfortable 21:47 with the the most common ones and 21:50 algorithms are a great way to kind of 21:52 practice these. So I mean that's what I 21:55 suggest that you learn before moving to 21:57 a framework but obviously everyone's 22:00 different. Everyone has different uh 22:01 different views on that. 22:04 So let's talk about some other tools 22:06 that you're going to be running into 22:08 around this time in your in your 22:10 learning journey. So, Git is one of the 22:12 tools that every developer of any kind 22:15 should be using. It's a version control 22:17 system to track changes in your code. 22:20 Uh, there are other systems. You have 22:22 subversion and some others, but Git is 22:24 by far the most popular and it's used 22:27 for versioning, backup, as well as 22:28 collaboration. It's extremely helpful if 22:31 you have multiple people working on a 22:33 single project because it allows you to 22:36 see um who did what and see exactly when 22:39 they did it. And you can roll back if 22:41 you want, things like that. Create new 22:43 branches. These are some of the things 22:45 you should be able to do. And you should 22:47 also be able to work with a remote 22:49 service like GitHub or GitLab or 22:52 Bitbucket. Uh GitHub is is obviously the 22:55 most popular of those. And then 22:58 markdown. I don't have it here, but it 22:59 is something that you'll want to start 23:01 to learn as well. Uh because you use it 23:04 in Git to display your your 23:07 documentation or your readme files. And 23:10 markdown is really easy to learn. You 23:12 could learn markdown in like 2 hours. Um 23:15 I have a crash course on it if you're 23:16 interested. Uh just learn it or or 23:19 create a cheat sheet just to uh just so 23:22 you can look up the formatting 23:24 characters, but it's very easy. So npm 23:27 stands for node package manager and it's 23:29 the official JavaScript package manager. 23:32 U packages being code that does a 23:34 specific thing. It could be a framework 23:36 library plugin um or some kind of 23:39 helper. Just about every language has 23:41 some kind of package manager. But since 23:44 JavaScript is what runs in the browser, 23:46 many front-end developers need to know 23:48 npm. Now there is another package 23:51 manager called yarn that's pretty 23:53 popular. um and and you can use that 23:55 instead of npm, but they both share the 23:58 same npm rep they they both share the 24:01 same repository of packages. All right, 24:04 browser dev tools are extremely valuable 24:07 when it comes to debugging uh viewing 24:09 the page structure or the DOM, browser 24:12 storage, network activity and so on. Uh 24:15 it gives you a good picture of what's 24:17 going on in the browser at that time. So 24:20 all browsers have some kind of developer 24:22 tools and I would definitely suggest 24:24 that you get familiar with those uh 24:26 familiar with all the tabs in the dev 24:29 tools. Next we have text editor or IDE 24:32 extensions or plugins. So most most text 24:35 editors have the ability to add 24:37 third-party extensions to kind of 24:40 increase the functionality. Most 24:42 developers find a certain suite of tools 24:44 that they like to work with helps them 24:47 code in a more efficient way. Um, so 24:49 browse around, see what you see what you 24:51 think will help you out. Emit I just 24:54 want to mention cuz that's an incredible 24:55 tool for writing HTML and CSS with quick 24:59 snippets. And uh, it's available with VS 25:02 Code by default, but you do have to 25:04 install it as a plugin on many other 25:06 text editors. and then live server, 25:09 prettier, eslint, uh github copilot. 25:13 These are some of the the extensions 25:14 that I use all the time. And I'll talk 25:16 more about GitHub copilot later. All 25:19 right. So, now that you know HTML, CSS, 25:22 JavaScript, and some tools, you'll need 25:25 to know how to deploy your projects to 25:27 the internet and not just your local 25:29 machine. So, you have quite a few 25:31 options for this. As far as platforms, I 25:33 really like Netlefi and Versell. Both of 25:36 these are simple to use. is you can just 25:37 create a GitHub repository and then log 25:40 in and just select the repository that 25:43 you want to deploy. So, um they're 25:45 great. They have very generous free 25:47 tiers as well. And you'll want to add 25:50 your own domain name. So, domains can be 25:52 $10 to $15 per year, so they're very 25:55 cheap, unless you're buying an already 25:57 existing domain off of someone, then 25:59 they can get really expensive. Um, and I 26:02 use NameCheep. Uh this this video isn't 26:04 sponsored by anybody. So any companies 26:06 that I mention are just companies that 26:08 I've used. And then you also have 26:11 companies that offer like shared hosting 26:13 and VPS's and dedicated servers. 26:16 Companies like HostGator, Blue Host. 26:19 Most of these use cPanel, which is a a 26:22 management console for your hosting 26:24 account where you can set up your email 26:26 and analytics and things like that. Um 26:29 so there's so many different choices. 26:32 So, I'm not going to really get into it 26:33 and I'm not mentioning platforms like 26:36 AWS or Heroku or anything like that 26:38 because I'm going to mention those later 26:40 on when we get into backend and full 26:42 stack. As far as actually deploying, you 26:45 have a few different ways. You have git 26:47 with most most platforms allow you to 26:49 use, which is great. It's very fast. You 26:52 can set up continuous deployment. SSH is 26:55 a secure shell. You can log in through 26:57 your terminal. You can do things that 26:59 way. Um SSH is something you should 27:02 learn a little later on. And then FTP, 27:05 which is the file transfer protocol, is 27:07 a is kind of the old school way of doing 27:09 things and can be very slow. So I would 27:12 suggest that you do literally anything 27:14 else other than FTP if possible if your 27:17 platform allows you. All right. So we've 27:21 talked about all the basic knowledge 27:23 that you should know up to this point 27:25 along with some extra uh technologies 27:28 like CSS frameworks and SAS. So, at this 27:31 point in your career, uh, in order to be 27:34 a basic front-end developer, at least in 27:36 my opinion, you should now be able to 27:39 create websites with HTML and CSS, you 27:42 don't have to be a designer, but you 27:43 should be able to create or take a 27:45 mockup and create a website from it. 27:48 Now, even though you're not a designer, 27:50 if you plan on being a front-end 27:52 developer, you should know at least some 27:54 basic design principles and know what 27:56 looks good and what doesn't. you should 27:58 know JavaScript pretty well and be able 28:00 to work with the DOM and do things like 28:02 create a dynamic uh navigation or create 28:06 a modal something like you know things 28:08 like that. You should be able to create 28:11 basic front-end applications using 28:13 JavaScript. So you know just very simple 28:16 apps with vanilla JavaScript. You should 28:18 be able to use the fetch API to make 28:21 requests to either a backend or a 28:23 third-party API, fetching data, bringing 28:26 it into your application, and so on. You 28:29 should also be able to work with Git, 28:31 create branches, push to a remote 28:33 repository, whether it's GitHub, GitLab, 28:36 or whatever. You should also be able to 28:39 deploy and manage small production 28:41 projects. Um, so you should have some 28:43 some kind of process with a specific 28:45 platform that you're comfortable with. 28:47 And as far as getting a job, I think at 28:49 this point you can start applying for 28:51 front-end positions. However, these days 28:53 you'll probably need to learn a 28:55 front-end framework, uh, which we're 28:57 going to talk about soon. So, you're at 28:59 kind of a crossroads now, and you have a 29:01 couple of options as far as what you 29:02 want to learn next. And I'm just going 29:04 to go over those options. So, the first 29:07 one, I think, is web design. And I feel 29:09 like this option is really left out when 29:11 it comes to like YouTube and courses and 29:14 people that you watch online. Uh, this 29:16 is if you really want to get into the 29:18 visual design part of web development 29:21 and learn how to create great layouts. 29:23 So, you're going to learn a lot more 29:24 advanced CSS, probably get into 29:27 animation and transitions. This could be 29:29 a viable option, especially if you plan 29:31 to freelance. There's a lot that you can 29:33 build and do with just HTML CSS and 29:36 JavaScript. Um, you can create beautiful 29:39 brochure sites with some dynamic modals 29:41 and popups and all that. You might even 29:44 get into WordPress or some noode tools 29:46 like Web Flow. I know a lot of 29:48 freelancers that went this route and are 29:50 actually very successful. You also have 29:53 the option to start learning a front-end 29:55 framework. Now that you know the 29:56 fundamentals of of JavaScript frameworks 30:00 make building interactive UIs much 30:02 easier and much more organized. 30:04 Framework that you want to use is up to 30:06 you. We'll talk about that next. And uh 30:09 you'll also be getting into like state 30:11 management and all that. 30:13 So if you plan to be a back-end 30:15 developer then you probably skip the 30:16 front-end frameworks and start with 30:19 either a new language. I mean you can 30:21 stick with JavaScript and Node.js or you 30:24 could use PHP, Python, Golang, C and 30:28 many other options. You'll also be 30:30 working with databases like Postgres, 30:32 MongoDB and so on. 30:35 And you have another option to just 30:38 continue to master JavaScript as a 30:40 language by doing things like algorithms 30:43 and building more advanced vanilla 30:45 JavaScript applications. You could get 30:47 into more advanced tools like module 30:50 bundlers, Webpack, Snowack, Parcel. Uh 30:53 these are used to bundle your JavaScript 30:55 and you can create more advanced vanilla 30:58 JavaScript applications. I probably 31:00 wouldn't suggest this if your goal is to 31:02 make money, but if it's if you're coding 31:05 as a hobby, then this might be a route 31:07 to take. All right, so with these 31:09 suggestions, if you plan on being a 31:11 front-end or a full stack developer, I 31:13 would highly recommend that you go with 31:14 the option of learning a front-end 31:16 framework. Most companies are looking 31:18 for people that know a framework. Uh 31:21 it's also, you know, makes things easier 31:23 if you're dealing in the front end. So 31:25 that's what we're going to look at next 31:27 is front-end frameworks. Now when I say 31:29 front end that refers to the client side 31:32 and what are called single page 31:34 applications or spas and this means that 31:37 the browser only loads a single page and 31:39 then everything else is done through 31:41 JavaScript using the framework. Now 31:43 there are ways to run frameworks on the 31:46 server side which I'll talk about soon. 31:48 that's actually becoming really popular. 31:50 But these are inherently client side or 31:52 front-end applications. And we build our 31:55 user interfaces with something called 31:57 components. And components are 32:00 encapsulated pieces of code that usually 32:03 include the output or HTML as well as 32:06 the JavaScript logic and even sometimes 32:08 the styling. So uh these frameworks, 32:11 they all essentially do the same thing 32:13 just in different ways. So first we have 32:16 React which is the most popular 32:17 framework by many metrics. Uh it's 32:20 technically a UI library but it's in 32:22 direct competition with all the other 32:24 frameworks. It was created and 32:26 maintained by Facebook. As far as a 32:28 learning curve, I'd say it's pretty 32:30 moderate. Some of the things that you'll 32:32 be learning along with the core library 32:35 of React is React Router JSX which 32:38 basically allows you to have HTML in 32:40 JavaScript hooks which are used in 32:43 functional components. the context API 32:46 and Redux which are used for managing 32:48 global state. Uh Redux I'd say is is 32:51 becoming a little less popular now that 32:53 we have context and and hooks but it is 32:56 something that is is still widely used. 32:59 And then Vue.js I would say is the 33:01 second most popular framework at least 33:03 from my own research. It doesn't have 33:05 the backing of a huge company like 33:07 Google or Facebook and it still made it 33:09 to where it is. So that shows you that 33:11 it's a pretty damn good framework and 33:14 there's a great community around it. 33:15 It's fairly easy to learn when you 33:17 compare it to React or Angular. The Vue 33:19 CLI is used to scaffold up and manage 33:22 Vue projects. The Vue router um the 33:25 composition API was introduced with 33:27 version 3. So uh these are some things 33:30 you'll be learning with Vue. VueX is a 33:33 state manager similar to Redux. 33:36 So Angular is still pretty popular in 33:39 the enterprise world but not so much 33:41 around startups and smaller companies 33:43 and you know when it in the learning 33:46 community on YouTube and so on. You 33:48 don't really see a lot about Angular. It 33:50 was created by Google. Uh I would 33:52 definitely say that it has the steepest 33:54 learning curve of the four at least in 33:57 my own opinion but it is also a much 33:59 larger framework and includes a lot more 34:01 in the core packages. It has its own 34:04 router. It has an HTTP client and so on. 34:07 It also uses TypeScript by default. So 34:10 you'll be learning that stuff. You'll be 34:12 learning the about the Angular CLI. 34:14 There's a concept of services that 34:17 Angular uses a lot. Observables for 34:19 asynchronous code. And then we have 34:23 spelt which is technically not a 34:24 framework. It's a JavaScript compiler. 34:27 So you build your app in a certain way 34:29 using spelt files and then you run it 34:32 through a compiler and you get pure 34:34 JavaScript. So no framework code 34:36 whatsoever. So it is very lightweight 34:39 and it's very performant. And I actually 34:41 love spelt. Uh, and if I wasn't into 34:44 teaching and I was just building my own 34:47 projects, I would probably switch to 34:49 spelt um from React just because it 34:52 feels it's so it's easy to use and it 34:55 just feels like when you do something, 34:56 it it just works and it's not over 34:58 complicated like some other things in 35:00 other frameworks. But choosing is up to 35:03 you. Don't listen to anyone that says X 35:05 is the best framework. Uh, a lot of it 35:07 is just preference. Of course, 35:09 popularity does matter if you're looking 35:10 for a job. So just look at listings in 35:13 your area, see what's being used, and my 35:16 advice would be to try all of them and 35:18 just see what really clicks with you. 35:20 All right, so the next technology that 35:22 we're going to talk about is Typescript, 35:24 which seems to a lot of people seem to 35:27 either love it or hate it. Um, not 35:29 always. In fact, I don't love it or hate 35:31 it. I do see the value in it, but I'm 35:33 not someone that thinks every project 35:34 should be done in Typescript like a lot 35:36 of other people do. And Typescript it's 35:39 it's a superset of JavaScript meaning 35:41 that it includes everything that 35:42 JavaScript does. So it is it essentially 35:45 is JavaScript but it has some additional 35:48 features. And the main additional 35:51 feature is static type checking hence 35:53 the name TypeScript. And JavaScript is 35:56 not a a typed language by default. 35:59 Meaning that when you define a variable 36:02 or a function, you don't have to say 36:03 that this variable or this function 36:06 returns a string or a number or boolean. 36:09 It's interpreted for you. Well, some 36:11 languages like Java, C, C++, these are 36:15 statically typed, which means you need 36:17 to define the actual type. And even 36:20 though you're you're writing more code, 36:22 there can be a lot of benefits to it. 36:24 So, TypeScript adds the option to add 36:26 types uh to JavaScript and it is 36:29 completely optional to add types. It 36:32 also offers uh class and module support, 36:36 other ES6 plus features. Uh your code is 36:40 less prone to errors when it's 36:41 statically typed and your code is more 36:44 robust and and definitive. So there are 36:46 benefits but again it's up to you to 36:49 weigh the pros and cons and decide if 36:52 you want to learn it. So now that you 36:55 know a front-end framework uh you you 36:58 have a lot of choices for styling and 37:00 design. Of course you can just have a 37:02 global stylesheet you know CSS 37:04 stylesheet but there's other options as 37:07 well. Style components is something I 37:09 would I would uh urge you to look into. 37:12 But you also have these UI kits or 37:15 libraries that you can use that give you 37:17 these pre-made um components, visual 37:21 components, things like uh alerts or 37:23 menus or whatever it might be. You can 37:25 look at all the documentation to see 37:27 what's available. So just to give you an 37:30 idea of some of them. So for React, you 37:32 have material UI, which is um based off 37:36 of material design. And it I would say 37:39 this is the most popular for React, at 37:41 least in my experience. Shakra UI is one 37:45 of my favorites. I think that it's 37:47 pretty easy to use. There's not a ton of 37:49 code that you have to write to to have 37:52 uh you know to create a component and it 37:54 looks really nice. Onsen UI, I believe, 37:57 is available for for everything here, 37:59 but it's geared more toward mobile apps. 38:02 And then React Bootstrap as it implies 38:04 it's a a UI library based on the 38:07 Bootstrap CSS framework. So for Vue, 38:10 Vueify is definitely my favorite. It has 38:12 a ton of professionallooking interactive 38:15 UI elements. I will say I think this is 38:17 the most popular by far. View material 38:20 is another material designbased UI kit. 38:23 You have Buy which is actually based on 38:25 the Bulma CSS framework. And then 38:29 bootstrap view of course is based on 38:31 bootstrap. For angular you have angular 38:34 material again this is material design 38:37 ng bootstrap ng zoro which is an 38:40 enterprise class kit. It's based on the 38:43 ant design. Uh but I've never used this. 38:46 And then md bootstrap as well. And then 38:49 for spelt you have spelt material ui 38:52 smelt which is one I haven't used yet 38:54 but looks interesting. It's based off of 38:56 a combination of spelt and tailwind and 38:59 then spelt material materialify 39:02 and spelt strap. All right. So testing 39:06 is something that I have often said that 39:08 I I don't do enough of. I seem to hear 39:10 this from a lot of developers. I think 39:12 some people feel that the trouble and 39:14 time that it takes to test your 39:16 application isn't worth it. And I do see 39:18 that argument especially for smaller 39:20 applications. However, once you take the 39:22 time to learn how to test, I think 39:24 you'll see that the there are benefits 39:26 that really make it worth it. And 39:28 there's there's a lot of different types 39:30 of testing. Um, I'm not going to get 39:32 into all of them, but three of the most 39:34 popular types. You have unit testing 39:37 where you test specific blocks of code, 39:39 usually functions, modules, classes, 39:42 etc. Um, you have integrate integration 39:45 testing uh is usually done in concert 39:47 with unit testing. Unit testing tests 39:50 blocks of code and integration uh 39:52 testing will test how those how those 39:56 blocks of code work together and then 39:58 end toend testing does just that. It 40:00 tests from beginning to end and ensures 40:03 that the application flow behaves as 40:06 expected. As far as tools, every 40:08 language has testing tools. JavaScript 40:10 has frameworks like Jest and Cypress. 40:13 Oftentimes when you use something like 40:16 um create react app for instance it'll 40:19 have testing tools built in like react 40:22 has the the react testing library. Um 40:25 this is something that you'll need to 40:27 decide if you want to learn or not. If 40:29 you're freelancing and you're building 40:31 relatively small applications and 40:33 websites and don't see a need for 40:35 testing. I personally um you know don't 40:37 think that there's anything wrong with 40:39 that. So server side rendering I think 40:42 is probably my favorite thing about 40:43 modern web development over the past 40:45 couple years and uh we're getting I 40:49 think we're getting away from single 40:51 page applications a little bit uh and 40:54 this is where we render react view and 40:57 these inherently front-end frameworks on 41:00 the server um which gives us quite a few 41:03 benefits. So SEO is a huge benefit. When 41:06 you use a single page application, 41:09 everything is loaded through JavaScript. 41:11 So search engines can't really crawl 41:13 your site, but with serverside 41:14 rendering. It allows Google and other 41:17 search engines to see all of the content 41:20 on the page. We also have performance 41:22 benefits. Routing is much easier. You 41:24 just upload a file or sorry, just add a 41:27 file to a specific folder and your route 41:30 just works. you don't have to manually 41:32 create all your routes. Um, so there's 41:35 there's a lot of benefits to this. As 41:37 far as the actual frameworks, you have 41:38 Nex.js, which would be my pick, but this 41:42 is based on React. So, if you're a Vue 41:44 developer, you're probably not going to 41:46 use Nex.js. You're going to use Next, 41:48 which I'll talk about in a minute. So, 41:50 Nex.js has been around for a while. I 41:52 think it's fantastic. Um, you can render 41:55 your pages on the server and you have 41:57 access to specific data fetching methods 42:00 where you can run server side tasks and 42:03 you have access to um the HTTP request 42:06 data before the page loads. Something 42:08 that you you don't have you can't do in 42:11 a regular you know create react app 42:14 application. You also have extra tools 42:16 like image optimization. So it's Nex.js 42:19 is a great framework. Nux.js JS is very 42:22 similar to Next except it's not for 42:25 React. It's it uses Vue.js. So 42:27 naturally, if you're a Vue developer, 42:29 you're probably going to use Nux, but it 42:30 has a lot of the same benefits that Next 42:33 has. Now, Remix is a very very new um 42:37 framework for React developers, and I've 42:40 been getting into it recently. I just 42:42 did a two-part crash course on it. 42:44 Although it shares some features with 42:46 Nex.js and and does some of the same 42:48 things, it feels very different. And 42:50 they have something called loaders and 42:52 something called actions where you can 42:55 submit data to the server and you can do 42:58 everything within Remix and not have to 43:00 have a completely separate backend. And 43:03 uh I I don't know. I really like it and 43:05 I I like where we're heading with it. So 43:08 spelt kit is your option for spelt. I 43:10 honestly would suggest using speltkit 43:13 for just about any spelt app. uh it 43:16 offers serverside rendering, advanced 43:18 routing, code splitting, and much more. 43:21 Another thing that I don't have listed 43:22 here is Angular Universal, which does do 43:26 serverside rendering for Angular apps as 43:28 well. All right, so the next batch of 43:31 technologies that we have are static 43:33 site generators, which allow you to 43:36 generate your website and content using 43:39 data from various sources. It could be 43:41 markdown files or some kind of API. It 43:44 might be a headless CMS which I'm going 43:46 to talk about next. Static sites are 43:49 very performant because they get all the 43:51 data ahead of time and then preload it. 43:54 So when the user comes to the page, 43:56 everything loads very very fast. So we 43:59 have a few options for this. React has a 44:02 framework called Gatsby uh or I should 44:04 say there's a framework called Gatsby 44:06 that uses React and you create pages 44:09 that are simply React components. So you 44:12 can uh still structure everything as you 44:14 would in a regular React app. You just 44:16 have some extra capabilities. And Gatsby 44:19 has uh an extra GraphQL data layer that 44:22 you can work with. And I know I haven't 44:24 gone over GraphQL yet, but I will in a 44:27 bit. Gatsby has all kinds of features 44:29 such as image optimization, code 44:31 splitting, and so on. Now, we already 44:34 talked about Nex.js rendering React on 44:37 the server. However, it can also be used 44:39 as a static site generator. Um, there 44:42 are some specific rules that you have to 44:44 follow in your code in order to do this. 44:47 Uh, but you do have an export command to 44:50 export your project as a static site and 44:53 it has data fetching functions for 44:55 fetching uh whatever you want as well as 44:58 creating dynamic URLs for your static 45:01 files. So, I I would use Nex.js JS over 45:04 Gatsby, but that's just because I I work 45:07 with it more than I do Gatsby. So, 45:10 Gridsum is very similar to Gatsby, but 45:12 instead of React, it's it uses Vue.js. 45:15 So, naturally, you know, if you're a Vue 45:17 developer, you'll probably use Gridsum. 45:19 It has a bunch of features for 45:21 progressive web apps, SEO, and and more. 45:25 Now, Jackal is a static site generator 45:27 that has been around for a long time, 45:29 and it's not associated with any 45:30 JavaScript framework. It's actually a 45:33 Ruby based and uh it uses the liquid 45:37 template engine. So there are a lot more 45:40 stat um static site generators that are 45:42 not you know for react or view or 45:45 whatever. Um there's some PHP based 45:48 ones. There's uh there's some Golang 45:51 ones. I believe Hugo is based on the 45:54 Golang programming language. So just 45:57 some something to look into. 45:59 All right. So, when we think of a 46:01 content management system, a lot of us, 46:03 especially if you've been doing this for 46:05 a while, you think of WordPress or 46:06 Drupal, uh these are systems that allow 46:09 you and your clients to have some kind 46:12 of admin area to log in and and manage 46:14 your content, which is great. And a 46:18 headless CMS is basically has that 46:21 back-end admin functionality where you 46:23 can edit your content, but there's no 46:25 front end like there is traditionally 46:28 with WordPress, Drupal. So, you're free 46:30 to use whatever you want on the front 46:32 end because the content 46:35 um the content management systems just 46:37 spits out a JSON API. So you can use 46:41 React, spelt, no framework at all and 46:45 use your CMS data to create pages, menus 46:48 and so on. Um there's also 46:50 authentication system built into a lot 46:53 of these and you can use tools like 46:55 Ozero. So these are great and I think 46:58 that these are just going to get bigger 47:00 and bigger because it takes it takes 47:02 away a lot of the work when it comes to 47:04 creating your backend and your server. 47:07 So, Strappy is is currently my favorite. 47:10 It's completely open- source and 47:12 self-hosted, meaning that you set it up 47:14 yourself on your own server, unlike some 47:16 other systems where your backend is 47:19 hosted on their servers. Um, you can 47:21 create content types like you would in 47:23 WordPress. There's a plug-in system. 47:25 It's it's just a really powerful and 47:27 it's definitely my favorite and what I 47:29 have the most experience with. Sanity.io 47:32 is a great headless CMS. It's powerful 47:36 and a flexible platform. It's free up to 47:39 a certain point, but there are uh some 47:42 pricing tiers that you can look at. And 47:45 looking at the features of Sanity, it 47:46 seems like a great choice for 47:48 collaboration. The way the content is 47:51 structured, it makes it easy to have 47:53 multiple people working on the same 47:55 project. And there's also a really cool 47:57 toolkit called Sanity Studio that you 48:00 can use as well. Contentful is a 48:02 headless CMS that seems to be really 48:04 popular in the big business world. It 48:07 has features that are great for teams. 48:09 It's optimized for speed and 48:11 performance. And then graph CMS is 48:14 something that uh I recently discovered 48:16 and it allows uh allows you to instantly 48:19 create a GraphQL API and and we'll talk 48:22 about GraphQL soon. So I think that 48:25 we're going to continue to see these 48:27 just grow in popularity like I said. All 48:30 right. So the last few slides we looked 48:32 into can fit into something called the 48:34 Jamstack which is a very broad term for 48:36 an architectural approach of building 48:39 websites and it was originally presented 48:41 with the a capital Jam which stood for 48:45 JavaScript APIs and markup and from what 48:48 I understand they got rid of that 48:50 acronym as it's defined more broadly and 48:52 you can visit 48:55 um jamstack.wtf WTF to really get into 48:58 it and and look at all the technologies, 49:00 but it does include a wide variety of 49:02 tools and technologies, a lot of which 49:05 is like um static site generators along 49:08 with a headless CMS. There's also 49:10 certain platforms that are great for the 49:12 Jamstack like uh Netlefi and Versell. 49:15 Everything is decoupled. Uh the 49:17 front-end tooling is separate from the 49:19 back end. Like I said, the front end is 49:21 typically built with a static site 49:23 generator. Um, you can also use 49:25 serverless functions, which I'll talk 49:27 about in a second. It's static first. 49:29 So, while there are dynamic elements, 49:32 most Jamstack pages are pre-rendered, 49:34 meaning that the front end was compiled 49:36 into HTML, CSS, and JavaScript. So, 49:40 serverless functions are very 49:42 beneficial. It's uh it takes it takes 49:45 away the the knowledge, time, and 49:47 effort, and the cost of deploying and 49:50 and managing a server on your own. So if 49:53 you need something done on the server 49:54 side, you can create a serverless 49:56 function or a lambda function and run it 49:59 on Netlefi or Versel or any other 50:02 platform that supports serverless 50:04 functions. Uh Jamstack is very high 50:07 performance, secure and scalable uh 50:11 since everything is pre-rendered and 50:13 there's not really any SQL injections or 50:15 other database vulnerabilities because 50:17 again it's all pre-rendered. You're not 50:19 dealing directly with a database. Okay, 50:21 so we've talked about a a lot and I 50:24 don't want you guys to get overwhelmed 50:27 and I just want to encourage you to just 50:29 think about this stuff as the options 50:31 that are out there. You're not expected 50:33 to know or to learn all of this. So by 50:36 now you should be able to build user 50:38 interfaces with a front-end framework. 50:40 You may also learn something like style 50:43 components or UI library. You should 50:46 understand how to work with local and 50:48 global state. This could be using the 50:50 context API for React Redux or ViewX 50:53 with Vue or whatever else. So, you 50:56 should understand uh quite a bit about 50:59 HTTP when it comes to making requests to 51:02 a server from the front end and getting 51:04 a response back. You should know how to 51:06 work with REST APIs. You may even work 51:09 with GraphQL. I save that for later 51:11 because in addition to the front-end 51:13 part, you have the GraphQL server as 51:16 well. And then as for added skills, you 51:19 may know how to use TypeScript. Uh this 51:22 is optional but is getting more popular 51:24 every year. So I think working with 51:26 serverside rendered pages is going to 51:28 become more and more popular as well as 51:31 uh frameworks like Next and Remix. Also 51:34 creating fast websites with static um 51:36 you know static site generators and 51:39 maybe headless content management 51:41 system. I think that stuff is on the 51:44 rise as well. You may do some testing 51:46 with a framework like just people seem 51:48 to to learn testing at their own pace. 51:51 All right, so now that we've gone over 51:52 all the front-end technologies, let's 51:54 start looking at some server side or 51:57 back-end technologies. So first we have 51:59 languages. JavaScript is the language of 52:01 the browser. That's why we talk so much 52:03 about it in the front end. Uh but the 52:06 server can be any language you want. So 52:08 let's just take a look at some options. 52:10 So Node.js is a JavaScript runtime. So 52:13 it's essentially JavaScript on the 52:15 server. Node is fast. It's asynchronous. 52:18 It's it uses event-based programming. It 52:21 has a rich ecosystem. Uh it's great for 52:23 APIs, microservices, real-time 52:25 applications. Where it falls short is 52:28 CPUheavy tasks. That's not something 52:30 that I really deal with. So Node.js is 52:33 perfect for me. That's what I prefer. 52:35 But again, you don't have to, you know, 52:37 use what I use. And then there's another 52:39 option if you want to use JavaScript on 52:41 the server and that's Dino. Uh it it had 52:44 a lot of hype uh like a year or a year 52:46 and a half ago, but um I don't know, it 52:49 hasn't lived up to that hype. I do think 52:51 there is a place for it in the future 52:53 because it has some great features, but 52:55 it's not something I would recommend 52:57 getting into right now. Python is great 53:00 for a lot of things. I've used Python 53:01 quite a bit and I love it. It's it's 53:03 number one for things like data science, 53:05 machine learning, and AI. Uh, it is also 53:08 great for web development. There's some 53:10 awesome frameworks that I'll go over, 53:12 but Python is definitely a great choice 53:15 for web development. PHP gets a bad rap. 53:18 I think that um, its reputation is 53:21 getting better, but I would suggest that 53:23 you don't listen to listen to the stupid 53:25 memes about PHP. It is a great scripting 53:28 language. It's not the prettiest, but 53:30 it's very efficient. It's it's still 53:32 widely used and it's great for like 53:35 freelancing and small business. C is a 53:38 general purpose language. It it feels 53:40 very clean and it it uses the net 53:43 framework. Um you have some you you know 53:46 ASP.NET 53:47 which is very popular. Um I don't use C 53:51 that much especially for web development 53:53 but it is a good option. Golang is 53:56 extremely powerful. Uh it's it was 53:58 created by Google. I've built a few 54:00 simple APIs with it, but I don't have a 54:02 lot of experience with it, so I can't 54:04 give you too much of an opinion. I know 54:06 it's used on largecale servers and big 54:09 uh distributed systems. It can also be 54:12 used for just basic web development as 54:14 well. Ruby is a language that I've I 54:16 worked with for a few years and really 54:18 like it. I think the syntax is very very 54:20 clean. It's almost like writing English. 54:23 Um, when we talk about Ruby for web 54:25 development, we're usually talking about 54:27 Ruby on Rails, which is a framework, and 54:30 I'll talk about that soon. So, Java is 54:33 another language that uh is used in a 54:35 lot of ways. It's also used for web 54:38 development. The Spring Boot framework 54:40 is pretty popular. I personally think 54:43 Java is a great language to to learn 54:46 like basic programming principles on, 54:48 but I I haven't really used it for web 54:50 development. um but it is used 54:52 especially in like the enterprise world. 54:55 Cotlin is a relatively new language that 54:57 was designed for the Java virtual 54:59 machine or the JVM. So in many cases 55:02 Cotlin is replacing Java. It's it's 55:05 widely used for Android apps but it can 55:08 also be used for web development. Um and 55:11 then you have Rust. So Rust has sort of 55:14 a special purpose and that is that it's 55:17 popular with web assembly which I'll go 55:19 over later. However, Rust is a viable 55:22 option for back-end web development. It 55:24 uses Hyper as a core HTTP server and can 55:29 be great for things like microservices. 55:32 Scala is another option for back-end web 55:34 development. Like other languages, it 55:36 combines object-oriented and functional 55:39 programming. It powers the data 55:42 engineering infrastructure of many 55:43 companies, but can also be used for 55:46 building APIs and microservices. 55:48 So, R or Arlang is not a language that I 55:51 have any experience with at all. Uh, 55:53 I've done a little bit of research on it 55:55 and it seems like it's fantastic for uh 55:58 statistical computing, data analytics, 56:01 scientific research. It's very powerful 56:03 for that stuff. It does a lot of what 56:05 Python does. For web development, you 56:07 could use R with Markdown and the Nitter 56:10 engine. Um, there's also a package 56:13 called Shiny that lets you create web 56:15 pages, but that's about all I know for 56:17 our programming. And then Swift is a a 56:20 popular generalpurpose language, but 56:22 it's mostly known for developing mobile 56:24 apps, in particular, native iOS apps 56:27 along with Objective C. Swift can be 56:30 used for web development. So, I did add 56:32 it here. However, there aren't many 56:34 tools available, at least from what I 56:35 could find. So that's not something I 56:38 would suggest for for web development at 56:40 least for your first language. All 56:42 right. So as with the front end, we also 56:44 have web frameworks for the back end and 56:47 every language has them. So web 56:49 frameworks are designed to handle HTTP 56:52 requests and send a response. Um they 56:55 also give you a bunch of extra tools. 56:56 Some frameworks are more they have more 56:59 to them than others. Some are very 57:01 minimalistic. So let's go over some for 57:03 some some of these different languages. 57:05 So for Node.js, uh Express is definitely 57:08 the most popular framework. Um there are 57:11 there's a lot of other frameworks built 57:13 on top of express as well because it is 57:16 very minimalistic which means that you 57:18 have complete freedom to build and 57:20 structure your code and your uh and your 57:23 files however you want and companies 57:25 like Twitter, Uber, I IBM have all 57:28 deployed apps built on Express. Fastify 57:31 is a newer framework for building web 57:34 apps and APIs. It's something that I 57:36 started working with in 2021 and really 57:39 liked and I could see myself using 57:42 Fastify in production. Like like its 57:45 name implies, it is super fast. Uh it 57:48 also has a powerful plug-in architecture 57:50 with documentation tools and much more. 57:53 COA is another minimalistic option. In 57:56 fact, I would say that it's very similar 57:58 to Express and what it offers and and 58:00 its syntax. And then Nest.js is a fairly 58:03 opinionated framework, but it does offer 58:05 a lot. It's it's built for enterprise. 58:08 Uh it includes TypeScript by default, 58:10 and it actually reminds me of Angular, 58:12 the way that um the way that everything 58:15 is structured. So if you're an Angular 58:17 developer, NestJS might be a good option 58:20 for your backend. Adonis, I don't have 58:22 that here, but it's another really 58:24 highlevel opinionated framework for 58:26 Node.js that kind of reminds me of 58:29 Laravel. So for Python, there's two 58:32 really really great frameworks and 58:35 that's Django. So Django is is probably 58:38 one of the best frameworks uh in my 58:40 opinion period out of any language. It's 58:43 very high level. It allows you to um 58:46 build pretty complex apps and APIs in a 58:49 short amount of time. And it even 58:51 generates an entire admin area with 58:53 almost no written code. And uh it's very 58:56 specific meaning you have to build 58:58 things the Django way but you do get a 59:00 lot for it. It's also very fast and 59:03 scalable. Um and I barely knew Python 59:06 when I learned Django. That's that's how 59:08 much it gives you out of the box. And 59:10 then Flask I also think is a great 59:12 framework but completely different from 59:14 Django. Where Django is very high level 59:16 Flask is closer to Express. It's very 59:18 minimalistic and gives you the freedom 59:21 to do things however you want. So both 59:24 frameworks are great, but there's a big, 59:27 you know, a big difference in them. Fast 59:30 API is a framework for building fast 59:32 APIs, which isn't very surprising. It's 59:36 uh high performance and it's it's on par 59:38 with Node.js and Golang, fairly easy to 59:41 use. I do plan on doing a crash course 59:43 on BAST API soon. So PHP is a bit 59:47 different than some other languages 59:48 because it's basically a template 59:51 language itself. You can run a PHP page 59:54 directly in the browser. Uh it does have 59:57 some nice frameworks though. Laravel is 59:59 extremely popular and I would say on the 60:01 top on my top five favorite frameworks 60:04 out of any language. Um PHP sometimes 60:07 gets a bad rap like I said but Laravel 60:10 gets a lot of respect in the developer 60:11 community. PHP can be a messy language, 60:14 but Laravel is actually really elegant 60:16 and offers just about as much as any 60:20 framework could offer. It has the 60:22 Artisan CLI, uh, which is a tool for 60:25 doing a lot of different things, 60:26 migrations, it has authentication, 60:30 uh, templates, validation. So, if you're 60:32 a PHP developer, I would definitely 60:34 suggest Laravel. Symfony is a set of 60:37 reusable PHP components and Laravel is 60:40 actually built on Symfony components. So 60:43 you can use Symfony by itself, but in my 60:46 opinion it's a it's more difficult than 60:48 it is to use something like Laravel. And 60:51 then I wanted to throw Slim PHP in there 60:53 because um unlike you know Laravel and 60:58 some of these others for PHP, it's very 61:00 minimalistic. It's kind of like Express 61:02 but for PHP and it's great for building 61:05 APIs. So for C um you're probably going 61:08 to be looking at ASP.NET which is a web 61:11 platform and ASP.NET MVC which is a 61:14 model view controller framework 61:16 specifically for building web 61:18 applications. Um and I do know C a 61:23 little bit but I haven't really done 61:24 much web development with it. I've done 61:26 some some desktop uh some Windows app 61:29 development with it. So like I said 61:31 earlier, I don't have much experience 61:33 with Golang, but from what I've what 61:35 I've used and research, Golang has uh 61:38 just a great library where it doesn't 61:40 really need additional frameworks. But 61:42 it does have some including Jyn which is 61:45 I believe the most popular Go framework. 61:48 Very straightforward, easy to use. BGO 61:51 is used for rapid development of 61:53 enterprise applications and Go. All 61:56 right. So, for Ruby, you're probably 61:58 going to be using Ruby on Rails, which 62:00 which used to be really, really popular, 62:03 and it has fell off quite a bit um in 62:06 popularity, but I still think it's a 62:08 fantastic framework. It's great for 62:10 rapid development. You can uh you can 62:12 scaffold up a REST API in in minutes. 62:16 Um, and there's just a lot of tools 62:18 included with it. I just think it's a 62:20 great overall framework. Sinatra is the 62:24 second most popular framework for Ruby. 62:26 Uh it's a much smaller framework and 62:28 it's sometimes referred to as a micro 62:30 framework. So for Java, Spring is uh 62:34 really popular and it's actually a 62:36 programming model and ecosystem that's 62:39 built on Java and has several parts such 62:42 as Spring Boot which makes it easy to 62:45 create standalone applications, Spring 62:48 Cloud, which is a combination of 62:49 components that allows um developers to 62:52 build cloudnative apps. So I don't have 62:55 much experience with Java. Uh it was the 62:58 first language I I learned, but I didn't 63:00 stick with it. So I haven't used it in a 63:02 long long time. And then you also have 63:05 Struts which is another Java framework 63:07 for building apps. Cotlin can also use 63:10 Spring. So Spring 5.0 started supporting 63:14 Cotlin. Um and then you have Vert.ex 63:17 which is a framework for Cotlin that is 63:19 very flexible and resource efficient for 63:23 Scala. Scola uses the play framework 63:25 which can also be used with Java. Play 63:28 includes uh powerful console and build 63:30 tools, testing tools. It scales 63:32 predictably. Uh Lyft, I've never used is 63:35 a Scala framework that claims to be the 63:38 the most secure web framework available. 63:40 I'm not sure how true that is, but 63:42 that's the claim. And then for Rust, you 63:45 have Rocket, which allows you to write 63:47 fast, secure web apps. It's a type- safe 63:50 framework that's easy to use. And then 63:53 actix uh is another framework that looks 63:56 pretty interesting. Again, I think the 63:58 way you build with this framework is 64:00 similar to express. Uh it seems like the 64:03 code is pretty straightforward and 64:04 minimalistic. 64:06 All right. So backend and full stack 64:08 developers need to work with databases 64:11 to store data. There's different types 64:13 of databases. I would say the most 64:14 popular are relational databases. 64:18 There's also NoSQL databases that are 64:20 pretty popular as well. Um, basically 64:23 relational databases store data in 64:26 tables and rows and typically use the 64:28 SQL or structured query language to deal 64:31 with the data. So SQL is probably 64:33 something you're going to learn as a 64:35 backend or full stack developer. And 64:37 then NoSQL databases typically store 64:40 data in something called collections, 64:42 which are usually formatted like JSON 64:44 objects and are very flexible. So like 64:47 with everything else, it's going to be 64:49 preference, but here are some of the 64:51 most common um database systems used in 64:54 web development. So Postgres is is my 64:57 favorite relational debate database. The 65:00 database, it's actually an 65:02 objectoriented 65:03 um or I should say object relational 65:06 database as opposed to MySQL which is 65:09 purely relational. And Postgrez has some 65:12 great features like table inheritance 65:14 and function overloading. Postgres also 65:16 adheres uh more closely to the SQL 65:20 standards because even though a lot of 65:22 these databases use SQL they can 65:24 implement it in in ways that vary from 65:27 each other. So MySQL is another popular 65:30 relational database. Uh in many web apps 65:33 you won't see much of a difference 65:35 between Postgres and MySQL especially 65:37 small small ones. Um so it's completely 65:40 up to you. MySQL seems to be really 65:43 popular in the PHP world. 65:45 So, Microsoft SQL Server is another 65:48 implementation of an SQL relational 65:52 database. I personally have never used 65:54 it, so there's not too much I can 65:55 elaborate on. So, SQL Lite is a much 65:59 lighter filebased database that isn't 66:01 really used in production as as far as I 66:04 know. I've always used it for just uh 66:06 development and it's great for that 66:08 because you don't have to go through any 66:10 crazy install process. you just have a 66:12 something DB file and you can create, 66:16 read, update, delete data and uh I think 66:18 it's great for development. So MongoDB 66:21 is is a completely different type of 66:24 database. It's what's called a NoSQL 66:26 database, but within NoSQL there's 66:29 subcategories and MongoDB is is known as 66:31 a document database. So it holds 66:34 collections of documents rather than 66:36 tables of records. So each document is 66:39 basically like a JSON object. Uh MongoDB 66:43 is really popular in the NodeJS world. 66:45 You've probably heard of the MER stack, 66:48 which is MongoDB, Express, React, and 66:50 Node. You also have the mean stack or 66:52 the Mevan stack if you want to use 66:54 Angular or Vue. And since MongoDB 66:57 formats the data like a JavaScript 66:59 object, it's easy for JavaScript um 67:02 developers to understand, and it's just 67:04 really popular within that community. 67:07 All right. Now, Firebase is different 67:09 from the databases that we've already 67:11 talked about because it's it's basically 67:13 an entire hosted platform by Google. It 67:17 does offer a NoSQL database, but it also 67:19 offers authentication, file storage, um, 67:23 serverless functions. It's it's an 67:25 all-in-one platform and it's great for 67:28 small to medium-siz projects. The 67:31 downside is that you don't have full 67:32 control of the database. It's not 67:35 something that you can install on your 67:36 own server. If Google decides to just 67:38 drop Firebase for some reason, then you 67:41 your project could be in trouble and but 67:43 I think the chances of that happening 67:45 are very very small but it is something 67:47 to factor in. Uh I personally love it. 67:51 So Superbase is an alternative to 67:53 Firebase. It includes a database also 67:56 includes um authentication. 67:59 Now the database instead of uh NoSQL, it 68:02 actually uses Postgres. So um it does 68:06 also have an abstraction layer, so you 68:08 don't have to write tedious SQL queries. 68:11 Um and like I said, it does include 68:14 authentication and some other stuff. It 68:16 is completely open- source and if for 68:18 some reason it did go under, since it 68:21 uses Postgrez, you could simply back up 68:23 your Postgres database and move it to a 68:25 new server. So it gives you a lot of 68:27 what Firebase gives you without that 68:29 Google lock in. So I think it's a 68:32 fantastic platform. It's it's pretty new 68:34 and I think it's going to you know I 68:36 think it's going to be really big. And 68:38 then Reddus is is different from the 68:41 rest. Reddus is an in-memory data 68:43 structure store that is often used for 68:46 caching. It can be used with multiple 68:48 stacks. Uh it has different data 68:51 structures like strings, lists, sets. uh 68:54 it has great com uh great performance 68:56 and it can be used for caching, session 68:58 management, real-time analytics or just 69:01 as a general database. So, it's a great 69:03 tool to to to learn. 69:06 All right. So, with whatever database 69:08 you choose, you you have an ecosystem of 69:11 tools uh for MySQL. You have like MySQL 69:14 workbench, you have PG Admin for 69:16 Postgres, MongoDB Compass. These are all 69:19 tools that you use to access your data 69:22 and manage your data directly. Now, you 69:25 also have something called an OM, which 69:27 is an object relational mapper or an 69:30 EDM, which is an object data mapper for 69:33 document databases. And it's basically a 69:35 layer that sits over your database so 69:37 that you can query and manipulate data 69:40 and you don't have to write SQL 69:42 statements. Um, so I mean different 69:46 different languages have different ODMs 69:48 and some frameworks like Laravel and 69:50 Django have built-in OMS but um some of 69:54 the popular ones you have SQL which you 69:56 can use um I use it with Noode.js and 69:59 Postgres when I use MongoDB with Node.js 70:03 I almost always use Mongoose which is 70:05 great. Prisma is a great OM that I just 70:08 started working with. um uh a 70:10 combination of Prisma and an SSR 70:14 framework like Nex.js or Remix is uh 70:17 really powerful way to build uh some 70:19 powerful apps. You also have SQL Alchemy 70:22 for Python, Doctrine for PHP. So there's 70:25 there's a bunch more for every language. 70:27 Just something you want to think about 70:28 as a backend or full stack developer. 70:32 All right. So understanding and building 70:33 REST APIs is something that you should 70:36 learn early on as a backend or full 70:38 stack developer. REST APIs conform to 70:41 the REST architectural style and allow 70:44 the interaction of restful services. And 70:47 REST stands for representational state 70:50 transfer and we typically make HTTP 70:52 requests to work with data or resources. 70:56 It's typically stored in a database like 70:58 blog posts, users, events, whatever. And 71:02 then from your application or from some 71:04 kind of HTTP client, you would make a 71:06 request to that API. This is typically 71:08 how you would structure your REST API 71:11 endpoint. So this is something that you 71:13 definitely need to understand as a 71:16 backend or full stack developer or even 71:18 as a front-end developer because you're 71:20 making the requests from the front end. 71:22 All right. So GraphQL is something that 71:24 both front-end and back-end developers 71:27 can use. It's a data query and 71:29 manipulation language for APIs. So you 71:32 you create a GraphQL server on the back 71:35 end to work with existing data and it 71:38 can be used with multiple languages. 71:40 It's just really popular in the 71:41 JavaScript Node.js world. I will say 71:44 that in my own opinion, GraphQL isn't 71:47 seeming to really take off the way that 71:49 many people thought it would. Um, I'm 71:52 not saying it's not popular and and 71:54 don't use it, but there was a point 71:56 where developers were talking like REST 71:58 APIs were going to go in extinct and and 72:01 this was going to take over. But anyway, 72:03 it's used in a similar way to a REST 72:05 API, but it does have some advantages. 72:08 So, you can request specific data from a 72:10 single endpoint rather than getting all 72:13 of it like you would with a REST API. 72:15 You have much more control as to what 72:17 you get back. Um, GraphQL is strongly 72:20 typed and has strict document 72:22 requirements. REST APIs can be kind of 72:25 tough to maintain if um, your data is 72:28 constantly changing. GraphQL can adapt 72:31 to those changes. So, there are some 72:33 benefits. Um, and then Apollo is a 72:36 GraphQL client that you can use to 72:38 request data. There's all types of 72:40 packages um, and different clients you 72:43 can use with GraphQL. Apollo just seems 72:46 to be the most popular. All right. So, 72:49 authentication is the process of 72:52 identifying an individual in uh you know 72:55 a web app or any any kind of app and 72:57 authorization pertains to the 72:59 permissions that that individual has. So 73:02 that's the difference between 73:03 authentication and authorization. 73:06 And as a a web developer, you need to 73:09 really understand how to implement both 73:12 of these. And there's a few different 73:14 ways you can do it. So JSON web token 73:17 tokens is uh is a popular way to do this 73:21 with single page applications. So 73:23 basically you have you know your your 73:26 your SPA and then you have your backend 73:29 and the user validates their username or 73:32 email and password. They send a request 73:34 to the server and then that's validated 73:38 and then a token is signed on the server 73:40 side and sent back to the client. And 73:42 then that token needs to be saved in the 73:46 front end and then it needs to be sent 73:48 along with any other requests to access 73:51 protected routes on the server. So 73:53 that's JSON web tokens. Uh and I have a 73:56 complete video on that in most of this 73:58 stuff. So cookies and sessions are also 74:01 commonly used. Just like with tokens, 74:03 the the user data is validated and if 74:06 it's successful, the server will create 74:08 a session and uh typically in the 74:10 database and include a set cookie header 74:14 on the response which will have a unique 74:16 session ID in the cookie object. So you 74:19 can validate that way. OOTH is another 74:22 popular way to validate users. It can be 74:25 a bit easier to set up. It's a standard 74:27 for access delegation. So basically what 74:30 you can do is use your Twitter or 74:32 Facebook or Google or GitHub account. 74:35 You can use those to log in to other 74:38 applications. All right? So it delegates 74:41 that that authentication. 74:43 Um you also deal with authentication 74:46 libraries to kind of help you out. So 74:49 things like um uh what is it? 74:52 Passport.js. 74:53 That's something that I've used a lot in 74:55 the past with with Node.js. And then 74:58 password hashing is something that 75:00 you'll need to be familiar with. There's 75:01 different packages like brypt to help 75:04 you do this. Uh protecting endpoints and 75:06 routes in your API. So like I said with 75:09 with JSON web tokens, you send a token 75:12 and that allows you to access your 75:15 protected routes. Without that token, a 75:18 person shouldn't be able to access that 75:20 protected route. So, that's something 75:22 you're going to have to keep in mind 75:23 when you're creating APIs. All right. 75:26 So, this next one might make some people 75:28 make some funny faces, but WordPress is 75:31 is still really popular. It's still 75:33 widely used. It's a complete content 75:35 management system built on PHP, and it 75:38 does have some criticisms. Um, but I 75:41 think a lot of those criticisms are from 75:43 people that work at large companies on 75:45 large teams. It's not from the people 75:47 that have had to build something 75:49 substantial in, you know, two weeks and 75:52 make their clients happy. So WordPress 75:54 is still widely used in the freelancing 75:57 world um or even like a small firm that 76:00 works with small businesses. And uh it 76:04 it's been a while since I freelanced, 76:05 but my clients loved WordPress. I know 76:08 that the friends that I have now that 76:10 are freelancers, a lot of them still use 76:12 WordPress. So I think it's worth 76:14 mentioning here. And it's also worth 76:16 mentioning that WordPress can be used as 76:18 a headless CMS. So you can have your 76:21 admin area, your backend of WordPress 76:23 for your clients and you can build the 76:26 complete front end with some whatever 76:27 you want. If you want to use spelt or 76:29 view or react or whatever it is, you can 76:32 do that. You can have WordPress just 76:34 spit out a JSON API. 76:37 All right. So deploying front-end 76:39 projects is fairly simple. We have 76:41 platforms like Netlefi and Versell make 76:43 things super easy. Um, we can even 76:45 create serverless functions and so on. 76:48 When we're talking about a full-blown 76:49 full stack application, hosting gets a 76:52 bit more complex. So, you might have to 76:55 use a different type of platform. So, 76:57 let's look at some of these. AWS or 77:00 Amazon Web Services is really really 77:03 popular, especially for for really big 77:06 in-depth applications like enterprise 77:08 level apps. AWS is very popular. I think 77:12 that it can be a bit overkill for some 77:14 projects and it's not something that 77:17 I've used uh extensively. The the 77:20 interface is very very complicated. Um 77:23 you need to know exactly which service 77:26 you're using and and where to go to um 77:29 you know to to use it and can be a 77:32 little tricky. Heroku is a platform that 77:35 I like because it's it's relatively easy 77:37 to use and you don't have to set up 77:39 everything from scratch. You simply push 77:41 your code using git and it runs on 77:44 something called a dyno. So you can host 77:47 Node.js apps, Python, Ruby and a bunch 77:50 of other languages. And uh there's an 77:53 ecosystem of plugins as well. So I 77:55 really like Heroku. Um Digital Ocean 77:58 offers cloud servers called droplets. 78:01 These are basically Linux servers that 78:03 you can install whatever you want on. 78:05 You can even choose which version of 78:06 Linux uh which distro. So this does take 78:10 some knowledge in Linux and of course 78:13 using the terminal. There are other 78:16 companies that offer similar services to 78:18 Digital Ocean such as Lenode which is 78:20 another great company that I've worked 78:22 with. Um but yeah, so this is a a good 78:25 option and you can literally deploy 78:28 anything that you want. And if you do 78:30 use something like Digital Ocean or 78:32 Lenode, you're going to need to know how 78:34 to set up some things like a like a web 78:36 server. And two popular web servers are 78:39 Apache and EngineX. I personally prefer 78:42 EngineX. I think it's easier to work 78:44 with. And then containers and 78:46 virtualization are also very popular, 78:48 especially in the big business world. 78:50 And people that plan on getting into 78:53 DevOps develop developer operations 78:56 should really learn um things like 78:58 Docker. So Docker is a really popular 79:02 container software. Docker uses 79:04 operating system level virtualization to 79:07 deliver software packages called 79:09 containers. And containers are isolated 79:12 from one another and they bundle their 79:14 own software including operating 79:16 systems, web servers, databases and 79:18 more. So you could you can install 79:20 anything in a Docker container and it 79:22 runs as its own process on your machine. 79:24 And and this is really helpful for teams 79:27 that work in different environments 79:29 because the container has the same 79:30 software and the same versions. So it'll 79:33 run the same on essentially any machine 79:36 whether it's Windows, Mac, Linux, no 79:37 matter what version, uh anything. So 79:40 Kubernetes is a container orchestration 79:43 system for automating development, 79:46 scaling, and uh management. It's popular 79:49 to use Docker and Kubernetes together. 79:52 And unless you're in DevOps, I really 79:53 don't think it's mandatory for you to 79:55 learn this stuff. It is very powerful 79:57 and can be very useful for large teams, 79:59 but I don't think it's essential for for 80:02 web developers. All right. So, when it 80:04 comes to image and video upload, there 80:07 are a lot of services that you can use. 80:09 One of my favorites is Cloudinary, which 80:11 doesn't just store your images, but it 80:13 also optimizes them and gives you an API 80:16 with different image sizes and so on. 80:19 And it can be used with just about 80:20 anything. Many front-end developers um 80:23 use this type of service as well. And 80:25 then Amazon S3 is a storage service. 80:28 It's actually part of AWS. Um it's one 80:32 of many parts and it provides object 80:35 storage through a web interface or web 80:38 service interface and is extremely 80:40 scalable as well. All right. So here are 80:44 some things that you'll need to be able 80:45 to do to be a backend or full stack web 80:48 developer. So you should be very 80:50 comfortable with some kind of 80:51 programming language now that runs on 80:53 the server. uh we talked about nine or 80:56 10 of them. So it's up to you on what 80:58 you want to use. You should be pretty 81:00 fluent with SQL and uh uh some kind of 81:03 database. I guess if you're not using a 81:05 relational database, SQL isn't 81:07 mandatory, but you should know a 81:10 database and its ecosystem, including 81:12 tools to connect as well as any OMS or 81:16 ODMs. As a backend or full stack 81:18 developer, you should definitely know 81:20 how to create REST APIs from the ground 81:22 up, including authentication and 81:24 protecting your routes. You should also 81:27 be very familiar with the terminal and 81:29 understand basic Unix commands. You 81:31 should know how to navigate your system 81:33 as well as log into remote servers. You 81:36 should also know how to deploy 81:37 applications and APIs to some kind of 81:40 platform. Of course, you don't have to 81:42 master them all. Just have some kind of 81:43 process you're familiar with. And uh, of 81:46 course, if you're a full stack dev, you 81:47 should be able to do this as well as 81:50 creating user interfaces and the stuff 81:52 we talked about earlier. All right, so 81:54 let's talk about some things that kind 81:56 of go beyond the the scope of just basic 81:59 web development. So mobile app 82:01 development can be done in quite a few 82:03 ways with different technologies. You 82:05 can build native iOS apps by learning 82:08 Swift or Objective C. You can build 82:10 native Android with Cotlin or Java. 82:13 However, there are some webfriendly 82:14 tools that you can use to build 82:17 cross-platform apps. So, React Native is 82:20 a framework that uses React to build 82:22 apps for iOS and Android among other 82:25 platforms. And it has native 82:27 capabilities. So, if you're already a 82:29 React developer, this is probably going 82:31 to be your choice. And uh that's why 82:33 it's my choice. It uses React and it 82:36 uses the React Native bridge which 82:39 invokes the native APIs for iOS and 82:42 Android. All right. Now, Flutter is uh a 82:45 very popular mobile app framework by 82:48 Google that is used to compile native 82:51 apps and Flutter actually uses the Dart 82:53 programming language which is pretty 82:55 similar to JavaScript. Um a lot of web 82:58 developers are very comfortable with 83:00 Flutter. Flutter is extremely fast. It's 83:02 actually faster than React Native 83:04 because React Native leverages 83:07 JavaScript to connect uh connect to 83:10 native components via the bridge and 83:12 Flutter doesn't need that bridge which 83:14 makes it faster and Flutter does have 83:17 great documentation as well. So, Ionic 83:20 is a hybrid framework that is great for 83:23 progressive web apps or web apps 83:25 optimized for mobile devices. Uh it's a 83:28 little slower than the previous two, but 83:31 you're also not bound to any single 83:33 framework. If you want to use Angular or 83:35 Vue or vanilla JavaScript, you can with 83:38 Ionic. And then I wanted to include uh 83:40 Xammer in here as well, uh which isn't 83:43 something that I've used, but it's a 83:45 framework for building mobile apps with 83:47 C andNET. So it's high performance, 83:50 crossplatform, and uh if you're if 83:53 you're a C developer, this is probably 83:54 something you're going to want to look 83:56 into. All right. So, what would a 2022 83:59 guide be without talking about web 3? 84:02 So, I think web 3 is going to be huge. 84:05 However, I do think that there's uh a 84:08 little bit too much hype about it right 84:10 now. If you go on Twitter, if you're on 84:12 tech Twitter, it's literally like every 84:15 other post. So, with that said, it is a 84:17 it's a good idea to get a leg up on new 84:20 technologies. My goal here isn't to 84:23 explain in depth what web 3 is. I don't 84:26 even I don't have the potential to do 84:27 that. I'm not a master of web 3. But I 84:30 do want to just give a brief overview so 84:32 you have at least some idea and you know 84:36 what you're you know what you have to 84:38 start learning to just get your foot in 84:40 the door. So real quick explanation web 84:43 1.0 was basically theformational web. We 84:46 went to websites and it was mostly just 84:48 readonly content right and then web 2.0 84:51 you know, is the interactive web where 84:53 the public creates content. However, 84:56 everything is centralized. Whether 84:58 you're on Twitter, Amazon, whatever the 85:02 website is, all the data and the control 85:04 is all centralized. Web 3 is about 85:07 decentralized apps or DAPs that run on 85:10 the blockchain. Now, the blockchain is a 85:13 little bit difficult to understand when 85:15 you're first getting into this. So it's 85:16 it's basically a decentralized 85:18 distributed public ledger that is 85:21 immutable, meaning that it can't be 85:23 changed. So you can actually picture a a 85:26 chain of blocks containing data and each 85:29 block in the chain contains a number of 85:32 transactions and every time that there's 85:34 a new transaction, it gets added to the 85:37 ledger and each transaction points to 85:39 the transaction before it. So nobody can 85:42 go in and change the data and it's 85:45 completely decentralized. And unlike 85:47 centralized servers that can go down, 85:50 blockchain runs on thousands of nodes. 85:54 So I mean that's a a benefit right there 85:56 is just reliability. And the first major 85:59 use of blockchain technology was Bitcoin 86:02 which is a form of cryptocurrency. So it 86:05 it's essentially a digital asset. So 86:07 blockchain is a huge part of web 3. Now, 86:10 Ethereum came out a few years ago and is 86:14 extremely popular because in addition to 86:16 just being a digital asset um you know 86:19 like Bitcoin and and maintaining a 86:21 decentralized payment network, it's also 86:25 used for storing code that can be used 86:27 to power highly secure and transparent 86:31 decentralized contracts and 86:33 applications. So smart contracts are the 86:36 fundamental building blocks of Ethereum 86:39 applications. So if you want to start 86:41 getting into web 3 and blockchain, 86:43 starting to learn how to create Ethereum 86:45 smart contracts is definitely uh a way 86:48 that you want to go. Now, one of the 86:50 ways you get into creating Ethereum 86:52 smart contracts is by learning Solidity. 86:55 So, Solidity is a statically typed 86:58 programming language that was actually 87:00 designed to develop smart contracts that 87:03 run on what's called the Athereum 87:05 virtual machine or the EVM. And Solidity 87:08 is uh a pretty high level language. And 87:11 if you already know JavaScript or 87:13 Python, you should be able to pick it up 87:16 pretty quickly. All right. So, if you 87:18 want to get into web 3, you want to 87:20 learn about blockchain, Ethereum, smart 87:22 contracts, and solidity. And I should 87:25 also mention NFTTS or nonfgeable tokens. 87:28 Um, this is a pretty big craze on 87:31 Twitter and other online spaces. These 87:34 are basically uh just one-of-a-kind 87:36 digital assets that are stored on the 87:38 blockchain. So, they can be verified and 87:41 they can't be reproduced or copied. And 87:44 the NFT can be it could be artwork, 87:47 music or anything else uh any any kind 87:50 of digital asset. So that will be 87:52 another part of web 3. Um what I don't 87:55 like is that there does seem to be a lot 87:57 of scamming going on in the crypto and 87:59 NFT world. There's all kinds of pump and 88:01 dump schemes and hopefully we can really 88:04 get that under control. But I do expect 88:07 at one point web 3 is going to be huge 88:10 um in the future. But right now it's 88:12 it's a little like the wild west but um 88:15 yeah I think it will be will be big and 88:17 it's beneficial to start learning about 88:19 it now. All right so web assembly is 88:22 another powerful technology that I think 88:24 we'll see more of in 2022. It's a 88:26 low-level assembly language for the web. 88:29 So its purpose is to create really high 88:32 performance web applications and you can 88:34 write these programs in very fast 88:36 languages like Rust. So, Rust is very 88:39 popular when it comes to web assembly. 88:41 You can also use C and C++ 88:45 and then it compiles down to web 88:47 assembly to run in the browser. And this 88:50 allows us to create web apps that are 88:52 much more performant than JavaScript or 88:54 what JavaScript can give us. Um, for 88:57 instance, programs that are CPUheavy. If 89:00 you're a JavaScript developer, there's 89:01 there's also a language called assembly 89:03 script that is a variant of Typescript 89:06 that you can use to compile to web 89:08 assembly or WOM. Um, I should also 89:11 mention that web assembly is is not a 89:14 replacement for JavaScript. It's made to 89:17 work alongside it. So, I think machine 89:20 learning and artificial intelligence, 89:21 they have a role in web development, a 89:24 pretty big role. We saw GitHub Copilot 89:27 in 2021 and I use it all the time and it 89:30 still amazes me how well it works. Uh I 89:33 I know a lot of people think that it's 89:34 going to take our jobs or whatever, but 89:36 I don't think that's going to happen for 89:38 a long time. But the the suggestions 89:41 that um Copilot gives me uh it's just 89:45 incredible of what it can come up with. 89:47 Um and it really does help me. So, I 89:50 mean, some things I have to change 89:51 around or whatever, but I've actually 89:53 learned from GitHub Copilot. So, I think 89:56 we'll be seeing a lot of AI when it 89:59 comes to tools that that we use as 90:02 programmers, things things that are 90:04 going to help us. I also think that it's 90:06 going to be big in testing and tools for 90:09 testing. There's also machine learning 90:12 APIs. Amazon has a variety of machine 90:15 learning solutions. You have translate, 90:17 poly, and so on. We'll see AI being used 90:20 in things like chat bots, spam filters, 90:24 product suggestions on websites. Machine 90:27 learning is also heavily used in user 90:29 engagement and analytics. So, I think 90:32 it's something that we're going to 90:33 continue to see progress. All right, 90:35 guys. So, I apologize that this video 90:37 was so faking long. Uh, I really tried 90:40 to cut it down. I just wanted to speak 90:41 on each topic and not just show you a 90:44 bunch of slides. So, I really hope you 90:45 enjoyed it and learned from it. So 90:48 again, thank you so much for watching 90:50 and I will see you next
1:38:36
1:40
7:18
43:53