web development in 2021
WHAT IS THE GUIDE?
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
FRONTEND VS BACKEND VS FULL STACK
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.
WHAT IS YOUR GOAL?
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.
UI DESIGN PRACTICES
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.
SOME OTHER TOOLS
BASIC FRONTEND DEVELOPMENT
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.
DOMAIN NAMES, SSL, ETC
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.
FOUNDATIONAL FRONTEND DEVELOPER SUMMARY
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.
FRONTEND SUPERSTAR SUMMARY
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.
SOCKET.IO & REAL-TIME APPS
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.
FULL STACK DEVELOPER SUMMARY
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.
PROGRESSIVE WEB APPS
DESKTOP APPS WITH WEB TECH
AI / MACHINE LEARNING
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.
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.
SOFTWARE DESIGN PATTERNS
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.