So before we get started, I want to talk a bit about what this guide is and what it’s meant to be used for, so this is a roadmap for web developers in 2021 that focuses mainly on technologies from the front end to the back end as well as some trends and guidance and the most important thing to keep in mind when watching this video or looking at these slides is that everyone has a different path and different goals there’s no one size fits all and that’s why these guides are so long because they’re full of choices depending on which direction you plan to take which language and so on um it doesn’t choose your way for you I do let you know some of my personal choices when it comes to technologies. However, it’s just that they’re my choices they’re my opinions, so take those with a grain of salt.

You might be interested in What is WebP and why it is better than PNG, JPG and GIF


Before talking about any specific technologies, you need to figure out what type of web developer you want to be. There are three main types, and this is just web development; specifically, we’re not talking about other types of programming careers or DevOps specific roles or anything like that so, first of all, we have a front end developer who is someone that deals with the front-facing website or user interface we’ll talk about all these technologies, but you’re going to be working with HTML CSS SASS java web development script maybe typescript most likely a front-end framework like react or VUE working with the document object model and so on you’ll probably need to know at least some design depending on where you work now a backend developer is someone that works server-side and usually works with databases creating rest APIs web services, etc.

There’s a whole bunch of languages to choose from when you’re dealing with the back end javascript is an option with node.js or ardino python php c-sharp and many more you usually have to have some knowledge of setting up and working with servers as well and then you have a whole stack dev which does both front end and back end and it’s usually able to create some pretty powerful web applications now depending on what you do and where you work you may focus more on one side than the other but a full stack developer generally knows front end and back end technologies now through this guide you’ll see these little logos here so f e b e and fs when i’m talking about a specific technology if you see one of these it means in my opinion you should learn that technology at some point if you visit one of these with a white check mark then that means it’s pretty much required of you to know that to be either a front end back end or full stack developer so something new that i added this year to kind of give you some more guidance. You migh be interested in Web Design Companies in Dubai.


Now another thing you want to do is is have an idea of where you want to take this. Why are you learning to code? Why do you want to be a web developer? Do you want to work for a large corporation or a smaller firm to freelance run your business work at a startup? Maybe you want to build your applications or software as a service to make money that way, perhaps you want to create content code as a hobby. There are so many different routes that you can.


take when you’re learning to code so figure out what really drives you because the decisions you make really depend on that all right so I like to start the absolute beginning in these guides so we’ll start with some essential tools obviously you need a computer and an operating system you’ll see i have mac os underline that’s what i prefer remember these are just my choices for most web development you can use any operating system you want windows is fine linux is fine i actually use mac and windows and I also use linux for my servers so text editors or integrated development environments are used to write and compile code for most web development you’re not going to need to compile your code like you would let’s say for you know writing desktop tools my suggestion is visual studio code I can say with a good amount of certainty that vs code is the most popular in the industry you also have sublime text which is pretty popular it’s a little more difficult to use in my opinion atom brackets vim is actually used by a lot of developers as well it’s it’s really not for me but the people that use it seem to absolutely love it so you also obviously need a web browser and i would suggest either chrome or firefox i use chrome myself but i’m actually thinking of switching to firefox for a couple reasons but both have really great front-end dev tools and plug-ins or extensions to work with so the terminal or the command line is something you’ll need to eventually work with maybe not right at first i i prefer the default mac os or linux terminal using z shell but you could use a third-party terminal like hyper or item if you wanted more customization and plugins and things like that if you’re on windows you could use powershell there’s also a windows subsystem for linux i wouldn’t recommend that for beginners though what i usually use on windows is a program called git bash which gives you a unix-based terminal you just install it you can get it from i believe it’s get dash scm.com and it gives you the get version control system as well as the git bash terminal now as far as design software this is something that isn’t required for most web developer positions however i would suggest that front-end developers learn the basics of at least one of these just to create quick mock-ups and ui elements etc i prefer adobe xd you could also use photoshop which i use for many many years sketch is pretty popular but i believe it’s only available for mac and then figma is actually a web-based utility that’s really powerful as well and pretty popular so if you plan on freelancing and you’re not outsourcing your design stuff then you’re probably going to need to learn one of these to provide things like client mockups. The Digital IO is the company who run their business in Karachi Pakistan.


So now that you know HTML and CSS, SASS is something you may want to learn, especially as a front-end dev SASS stands for syntactically awesome style sheets, and it’s a CSS pre-processor. It allows you to use special features in your styling that you can’t usually use in CSS now; CSS has custom properties similar to variables. However, you have variables functions nesting and a whole bunch of other features that you can use with SASS, and even if you don’t use it yourself, there’s a good chance that you’ll run into it, and it’s easy enough to learn you can probably pick it up you know in a week or so if you already know CSS maybe even less than that, so it is something that I recommend for both front end and full-stack developers. You may also be interested in learning about Local SEO.


All right, so for front-end developers, I do suggest learning some basic user interface design principles and practices things like color and contrast white space scaling visual hierarchy typography. I mean, if you want to work for a company, someone else will probably be doing the design stuff; however, it’s important to have an eye for it and know you know what amount of margin looks good what makes it look cramped is the text readable and so on and I just think every developer should have just a basic eye for design and Gary Simon actually did a really good video on the channel called UI design for developers, and he talks about all of this, so I think that is something to look at as especially as a front-end developer. You might be interested to knowing about SEO services in Karachi.


all right so up to this point we’re dealing with you know visual elements you should be able to create a static website not necessarily create designs but take a mockup or a design and create a web page from it now you want to get started on javascript which is the language of the browser and if you’ve done any kind of programming with any other languages you’ll pick up the basics pretty quick and the amount of javascript that you’ll need to learn really depends on what you want to do if you plan on being a back-end python developer then just learn the very basics just so you have an idea of how things work in the front end if you’re going to do front end or full stack you’re going to want to learn a lot more especially if you’re doing full stack and you choose you know node.js as your server-side technology you’re basically going to be working with just javascript so you want to get a really good grasp on it so the basics like variables arrays loops that’s you know all the first steps to learning any language the document object model or the dom is extremely important the browser treats an html page as a structured document and you can use javascript to manipulate things in that document and make it dynamic for instance if you want to click a button you can have an event that will remove some other node in the dom you could have a div or any element in manipulated styling by adding and removing classes and changing the css itself without having to reload the page so the dom is something that is really important to understand when you’re doing front end web development array methods are also something that you’ll be using a lot methods like for each which just loops through an array of items map which can manipulate an array into some other type of array filtering items uh reduce and many other array methods are really really useful in you know you’re going to want to learn these so json or javascript object notation is also important it’s a way to store and send data it’s structured similar to a javascript object literal when you’re working with third-party data apis json is what will be used I would say like 95 percent of the time not many apis use xml anymore as far as i know you also need to understand http requests and the fetch api which is built into the browser it’s basically a way to send a request to either your own back end or some third party api and get data back or post data and it’s it’s a big improvement from what we used to do which was xhr xml http requests which were much harder to write and deal with so the fetch api is something you’re definitely going to want to learn in javascript.


now along the way there’s going to be some other tools that you’ll probably pick up and these are some of them i wouldn’t say that these are required except for version control with git that’s something that just about every type of developer is going to need to learn so version control is really important specifically get just about every company you’ll work for will use get it’s a way to save track and version your code, as well as work on code bases with other developers you’ll need a place to store your git repositories github, is the most popular but there’s others like bitbucket and get lab package managers are also used to install packages or modules different languages have different package managers npm is the node package manager which is used for javascript packages yarn is kind of an alternative to npm and then when you get into the back end other languages have package managers as well for instance python has pip ruby has gems rubygems what else you have php has composer so almost every language has its own package manager so you can easily install things now module bundlers like a parcel and webpack these allow you to bundle your javascript and use separate files as modules i wouldn’t say it’s it’s required to master something like webpack because if you move on to a front-end framework most of that stuff is done behind the scenes anyway so i’d i’d wait on that for now I wouldn’t say you have to dive into webpack before you get into react or anything like that i just wanted to put it here because it’s something you may run into now browser dev tools are really important you should know how to use the console how to read and log errors the network tab shows the requests and responses that are made to and from any servers the application tab is used to work with local storage in the browser something else you’ll need to learn with vanilla javascript you also may want to look at some helpful text editor extensions things like linting to help you find errors prettier to format your code live server is a vs code extension that’s really really handy when working with static files Emmett is used in a lot of different text editors for writing fast html and css and maybe some kind of snippet extension there’s a lot of things that can really help your whole overall workflow that i would suggest looking into and these are just some of them.


All right so creating an excellent website or a minor front end app is perfect but you should also know how to make it live on the web so there are different routes to take static hosting with something like netlify is really easy to do and you can actually do a lot with the free tier so you don’t even have to pay for like personal projects netlify uses git so all you really have to do is set up git and push to your repository and then you can have continuous deployment through netlify cpanel is another way to go that’s been around forever the excellent thing about cpanel hosting is that there’s a lot included by default like email hosting sql databases if you need them ftp accounts etc I would suggest at least a vps which is a virtual private server if you do go this routes and not using shared hosting you’re going to get a lot more permissions to do certain things with a vps and better performance as well with either a vps or a dedicated server but a dedicated server is you know can be over 300 400 a month i recommend in motion hosting for this type of hosting with cpanel there are multiple ways of getting your files onto the server git is used with specific platforms you can also use ftp which is the file transfer protocol or secure ftp there’s other ways to deploy through ssh which is a secure shell it really depends on what kind of platform you’re using and what they offer and there are many many other ways to host your applications especially your complete stack applications i didn’t mention those here because that’s really beyond the scope of where we’re at right now like using aws or digitalocean we’ll talk about those platforms later okay.


So along with hosting, you have to learn how to register and set up a pretty easy domain name, I suggest Namecheap, and again none of these companies are sponsoring me or anything. These are just services that I use myself. They’re also great for email hosting. If you use something like notify, you can point your domain to declare your central part and then set up your email hosting at somewhere like Namecheap SSL is secure sockets layer so that everything is encrypted uh through HTTPS I wouldn’t suggest deploying anything that isn’t HTTPS these days Netlify comes with a free SSL um, and so, do some other services. However, if you use some hosting account like a Cpanel account usually doesn’t come with an SSL, so let’s encrypt is suitable for free SSL certificates. You have Cloudflare Namecheap and many other services, so you want to know how to host a website and connect a domain name to set up an SSL.


And now you’re basically a foundational front-end developer so you don’t you haven’t learned any front-end frameworks or anything like that yet but I would still say your front-end developer and you can even start to apply for jobs even though a lot of jobs are going to require you to learn a front-end framework so you should be able to set up a productive develop environment you should be able to write HTML CSS javascript use SASS and the CSS framework which are kind of optional those two uh create good-looking responsive layouts be able to take some sort of mock-up maybe a PSD file or something and recreate it as a web page build websites with some dynamic functionality working with the dom perhaps some modals or slide shows things like that connect to a third party API using fetch use git with Github or some other repository manager and deploy and manage basic front-end websites or web apps so to me, in my opinion, knowing how to do all that makes you a foundational front-end developer.


All right, so what now so it’s it this depends on the path you want to take you could keep sharpening your javascript skills and start doing algorithms or more advanced javascript, which we’ll talk about later if you’re going to stick to front end move to a front end framework like react or you could start to learn the backend.


so we’re going to go ahead and go with the front end because this is kind of the most popular path people take is going from what we’ve already talked about to then learning something like reacting so as a front-end developer like i said you’ll most likely need to learn some kind of javascript framework these allow you to build what are called single page web apps or spas and the page loads with pre-built javascript from the framework that is then inserted into a single page framework allow you to have really intricate user interfaces that you technically could create with vanilla javascript however it would be a lot harder and it would be a lot more time consuming also working with a framework and a team makes it much easier because you have a lot of standards that every developer is going to follow rather than this jumbled javascript that you created that no one else understands and it’s important to mention that you can use any framework in the front end with any language on the server so react can be used for the user interface and then you can have your api or your back end written in java python c sharp whatever it might be now as far as which to choose it’s this is completely up to you this is a question that’s asked a lot and there’s no single answer you want to look at what’s being used by jobs in your area and also test drive them all out so you can see what you really click click with um react is what i enjoy I think that it has an intermediate learning curve it’s the most popular in the industry right now it was created by facebook i prefer it over the rest but vue is uh as a close second for me I think vue.js is a bit easier to learn than react and vue also has an amazing community it’s not backed by any large company like react or angular is it’s just a bunch of really passionate developers angular in my opinion is the hardest to learn of all it does use something called typescript which i’ll talk about soon angular is backed by google and it’s still used quite a bit in the enterprise business world and i’m not like you know on angular or anything i think it’s a great framework it’s a it’s a it’s a full-fledged framework where react is more of a library where you can add other packages to make it function like a framework but angular is you know full featured but like i said i think it is a little harder to learn svelt became pretty popular over the past i don’t know year or two it’s it’s not branded as a framework it’s what’s called a compiler but it allows you to write javascript in a clean and effective way just like any other framework I’d say it has a pretty easy learning curve but you may run into some barriers for larger applications and also if you’re looking for jobs so i’d really only use felt for a small to me medium-sized personal projects or freelancing now.


Before we move on each of these frameworks has its own ecosystem and part of that ecosystem is state management now I’m not going to go into depth on what state is but you can basically think of it as just the state of your application the state that it’s in is the is a menu open or closed you have data to display this is your state which can be either local to a specific component or element or it can be global to share across your entire app or user interface so we have global state managers that can help handle international state because it can get pretty messy without using something like a state manager so react has the built-in context api to handle state which is excellent for smaller apps or medium-sized apps however if you plan on having a lot of different types of data you know authentication whatever it might be whatever types of data your application holds you probably want to look into redux which is a really popular state manager for react I prefer it over the context api but a lot of people you know don’t want to add something if they don’t have to you have others like mobx but I’ve honestly never used them redux is by far the most popular third-party state manager for reacting for vue you basically have ux there are some others as well but I’m not too familiar with them so vue x works really really well for state management angular is a bit different like i said before it’s it’s a more extensive framework it’s more full-featured it has built-in services that you can use to spread state or spread data across your components however there are also third-party state managers like um ngrx and then for svelt has a built-in context api as well I’m not really too sure on third-party state managers first felt.


All right so another language that you may have heard about is typescript and this is entirely optional and not something you really have to learn right away but it is it is pretty popular in the industry so javascript is dynamically typed which means that we don’t have to define you know our variables and our functions as strings or numbers or Booleans and so on however using a typed language has a lot of benefits and typescript is what’s called the superset of javascript meaning it has everything that javascript has it basically is javascript but it has some additional features such as static types for me i do mostly smaller to medium-sized projects primarily for teaching so i personally don’t really use typescript that much i have used it on a large production project and i can definitely see the benefits it helps you find errors before they occur it makes your code more robust on the other hand it is something else to learn and it is more code to type so it’s really preference some people love it some people hate it it seems to me that once someone starts using it it’s kind of annoying but then they find themselves not being able to write javascript without it and they love it so i mean you can take it or leave it it’s is really popular and it is something that you might want to look into learning and i also want to mention that typescript can be used with a front-end framework such as react it can also be used on the back end if you’re using node.js i believe it’s even included with dino which is a newer javascript server-side technology which we’ll talk a bit of later.


All right, so another thing that you might want to learn is testing, and again this is the front end and back end now I’ll be the first to admit that I slack in the testing department I think that it should be learned; however, many developers skip it until they need it it can feel kind of like a waste of time when you start learning testing but ultimately it’s going to save you time once you know how to utilize it there’s different types of testing there are unit tests which will test individual units like functions or classes integration tests will try modules as a group. Hence, multiple functions, etc., and then end-to-end testing for your entire workflow from start to finish. I know these are pretty vague descriptions of these types of tests, but the point of this isn’t to teach you this stuff. It’s just to let you know what it is, and you can decide what you want to learn from it, and testing is done in just about every language, so it’s not just a javascript thing.


now the last few slides the last few technologies that we’ve talked about can fit into what’s called the jam stack okay it’s a web architecture with high performance security and scalability at low cost and it stands for javascript APIs and markup which aren’t new concepts but what is new is the way that we use them and James quick actually did a really good video on the channel called what is the jam stack and he goes into depth on this but unlike say the mern stack which is you know MongoDB express react and node the jam stack has a plethora of technologies to choose from including static site generators and headless content management systems serverless is another big trend which basically means that you don’t have to manage your own server your cloud provider runs a server and allocates machine resources on-demand hosting services like netlify offer serverless architectures like AWS and many others and you can create specific functions to run specific server-based tasks on demand James also has a video called what is serverless on the channel if you’re interested in learning more about that.


All right so up to this point you’re definitely not expected to know everything that i just went over it’s simply the options that you have some things you should know in order to be a front-end superstar is how to build websites web apps and interfaces with a front-end framework work with components in global state connect to a back-end or third-party api using endpoints and if possible learn some testing and then there are some optional things to think about like typescript jam stack technologies static site generators serverless functions all that stuff which i would say optional to be a front-end developer but they are really really cool technologies that definitely deserve a look.


so real-time applications are really popular in a lot of cases you have your client-side and you send http requests to the server where it’s an express server or Django laravel whatever the back end might be and that’s fine but you have to make a separate request for each task with real-time apps using WebSockets in something like socket.io you have a constant open door of bi-directional communication through events and there are all types of apps and services that you can build that utilize WebSockets like instant messaging and chat applications real-time analytics document collaboration uh binary streaming and much more so I think apps with real-time communication are only going to get more popular.


All right so i can actually hear some of you cringing right now but if you are it’s probably because you haven’t done a lot of freelance web development for smaller websites or for for people that are on a budget and wordpress is still used in a decent percentage of websites and it can still be beneficial to learn it depends on your goal though if your goal is to work at google or some big corporation you probably want to pass on wordpress but if you plan on building websites and small apps for you know the mom and pop shop down the street wordpress can be a good choice i’m not saying it’s the best choice or anything like that but it can be used I actually used it quite a bit when i was freelancing and that was a while ago but i do still know quite a few people that are freelancing and using wordpress and i don’t just mean knowing how to install it and you know install some third-party template with some third-party plugins but creating your own templates creating your own plugins really customizing it with php with javascript in the front end you can also use it as a headless cms because it does have its own rest api so you could use react in the front end or view or whatever you’d like but i didn’t want to not mention wordpress in this in this presentation.


All right so I know that that was a lot to go through but keep in mind you don’t have to learn everything even close to everything it’s just options right so but to be a full stack developer you should be comfortable with building front-end interfaces as well as server-side programming you should know a server-side framework be able to work with and structure databases understand HTTP and create restful apis you should be able to at least do a basic full-stack app deployment to some kind of platform or service you should also be very comfortable with the terminal as far as navigating your system using git working with certain CLIS network commands and so on.


All right so now we’re going to move a little past you know basic what you would what you would think of web development but still using the same type of technologies so learning mobile app development can be very beneficial whether you do it for a company or for yourself or your clients flutter is an open-source user interface software development kit or SDK and actually uses a language called dart which if you know javascript is pretty easy to pick up flutter is extremely powerful and it allows you to build native mobile applications this is what i prefer out of the list however if you already know react you may want to get into react native which is a framework for building native mobile apps with react you also have ionic which is javascript based xamarin allows you to build mobile apps with c-sharp all of these technologies allow you to build cross-platform apps so both android and ios and then you of course have kotlin if you want to build native android apps and swift for native ios apps.


Now you also have the option to build progressive web apps which are regular web applications built with HTML css and javascript but run and feel like a native mobile app and not just a responsive website but really feel native and there are a few things that your app needs to be considered a PWA it needs to be built for all screen sizes big and small it should serve offline content if there’s no connection and this can be done through the use of service workers in the browser so you definitely want to look into service workers if you’re looking to learn progressive web apps it needs to be HTTPS it should have a native experience and feel you can even make them installable with splash screens etc progressive web apps are definitely something that we’re going to see a lot of in the future.


Now we also have the ability to create desktop applications with web technologies i’d say electron is the most popular you can use javascript to create desktop apps in fact many of the really popular desktop apps today are based on electrons such as vs code atom which is another text editor slack postman and many others in fact a lot of the desktop apps that i use are electron-based nwjs is an alternative to the electron which it’s also javascript then you have technologies like python Tkinter if you want to build desktop apps with python then, of course, you have native languages like c c plus javac sharp can be used to build desktop apps but that’s going on beyond the scope of a web developer.


All right so artificial intelligence and machine learning are also a bit beyond the scope of web development however there are certain situations where it can be beneficial to learn it’s only going to get bigger ai is it’s only going to get bigger from here so if you want to create or integrate automation and tools that use ai there’s machine learning APIs you can work with it’s used to understand user behavior of web apps engagement analytics there’s also ai tools that can be used to actually write code just check out gpt got-3 i know this scares a lot of developers however i think i think of it as a tool that we can use in the future i don’t think that ai is going to completely replace human developers at least for a very long time.


All right so the last technology that I want to mention specific technology is web assembly or wasm and wasm is an efficient low-level byte code for the web it’s an improvement to javascript meaning it can do much more powerful things in specific areas however it’s it’s definitely not a replacement for javascript it’s used for things like game video games video and image editing in the browser things that javascript doesn’t do all that well so it actually works alongside javascript you can use languages like rust and c plus to work with and then compile to web assembly for javascript developers there’s assembly script which is actually a variant of typescript and makes it easy to compile wasm without having to learn something like roster c plus or some low-level language so definitely something that we’re going to see more of in the future as the web becomes more powerful.


So before we wrap up i just want to mention a few things that all web developers or all programmers, in general, should look into at some point not just for practical reasons but just to sharpen your skills and make you a better developer now no matter what language you specialize in algorithms can really help your logic your critical thinking skills your ability to solve problems they’re not practical in a sense where you’re going to run into fizzbuzz or palindromes in your daily activities at work but i think of it as a like a football player lifting weights a football player doesn’t lift weights on the field however it really helps them become stronger overall and a better player overall and there’s websites like code wars hacker rank and you know many others to practice algorithms and challenges so it’s definitely something i’d suggest for you know whether your front end back end full stack whatever.


So data structures are also important regardless of language there are ways to organize and manage data effectively so that you can perform specific operations efficiently there are data structures that are primitive to the language that you’re using which i would say is something that you need to understand and then you have other types of data structures that are non-primitive that you can create as a programmer for instance you know linked lists stacks cues being able to create data structures is it’s also really good practice again regardless of language.


Now as you become a more advanced developer and write more intricate code you might want to look into specific software design patterns which are general reusable solutions to commonly occurring problems and design patterns are language agnostic just like algorithms and data structures some examples are the singleton façade bridge strategy and observer pattern and these are actually described in jack Harrington’s video on the channel if you want to look more into these.


All right so we just went through a crapload of information pretty much over an hour’s worth of technology so i know it can be really overwhelming but just know that you’re only going to have to learn a fraction of what we’ve talked about my goal for this is just to put everything on the table and for you to pick up what you want and that really depends on your path you know if you if you’re a front-end developer or want to be a front-end developer in let’s say the miami florida area look at specific job listings and see what they’re looking for and then go through this video or these slides and and pick out um you know the fundamentals and the necessary technologies for that path if you’re going to freelance you might have a different path if you’re going to build your own applications and try to sell them or license them out you might have a different path but just be sure to have a plan and i know plans change i’ve went from freelancing to working for a company back to freelancing and you know starting my own business hiring people and then ultimately ended up doing content creation so uh your path might change in a big way at some point but at least have that initial plan now as far as learning methods i mean everyone’s different everyone learns in different ways i prefer watching tutorials and courses but some people might want to read books written tutorials or even something like podcasts just be sure to create your own projects in addition to anything that you create from course content or learning material you want to have a a portfolio of your most impressive projects and this is going to help you find a job or get clients if that’s you know if you’re doing the freelance thing if you’re self-taught like i am this is even more important because that’s really how you can show what you’re capable of and i think a good portfolio is important whether you’re you’re going to get a job at a company or you’re looking for clients because you need to prove yourself especially if you’re self-taught as i am and you don’t have a degree so i think a portfolio is really important also networking is really important online you know create social media accounts that are specific specifically for professional reasons linkedin really important twitter twitter has a fantastic developer community and even creating youtube tutorials if if you can i mean i’m not saying go into content creation as a living but it’s something that it’s something else you can show so that you have so you can prove that you have a passion for what you’re doing and you actually know what you’re doing once you have a decent portfolio you can start applying for jobs or looking for clients whatever it is that you want to do all right so that’s it guys i know this was a long video with a lot of information again try not to get overwhelmed you’re not meant to learn everything here i don’t even think that’s possible so take your time start with the necessities and work your way through your learning path thanks.