Web development is the process of creating and maintaining websites; it’s the labor done in the background to make a website appear nice, function quickly, and provide a positive user experience.
This is done by web developers, or “devs,” who use a range of coding languages. Their choice of language is influenced by the tasks they are performing and the platforms they are using.
Web development is an excellent career choice because it pays well and is in high demand all over the world. Due to the lack of a standard university degree requirement, it is one of the more easily accessible higher paying occupations.
Web development is typically divided into two categories:
- Front-end (the user-facing side) and
- Back-end (the server side).
Front-end vs. back-end development comparison
The front-end developer builds a sequence of programs to connect and structure the components, make them appear attractive, and add interactivity. This results in what you are seeing and what you are using, such as the visual presentation of the website, the drop-down menus, and the text. A browser is used to launch these programs.
Back End: What takes place in the background is engineered by the backend developer. Without this data, there would be no frontend because this is where the data is saved. The server that hosts the website, an application to run it, and a database to store the data make up the backend of the web.
To make sure that the server, the application, and the database work together seamlessly, the backend developer uses computer programs. This kind of developer must assess the requirements of an organization and offer effective programming solutions. They employ a range of server-side languages, including PHP, Ruby, Python, and Java, to perform all of this incredible work.
Want To Know About Full-Stack Development?
Consider becoming a full-stack developer if you enjoy both frontend and backend programming.
Full-stackers are responsible for both the front-end and the back-end of a website and must understand how the web functions at all levels to understand how the client- and server-sides will interact. Since there is more to learn, achieving this level of expertise will inevitably take longer.
Responsibilities of a web developer:
- Use several markup languages to create web pages.
- Make high-quality prototypes and mockups.
- Create a WordPress website from the bottom up.
- Recognize HTML and CMS.
- Know UI, UX, and usability principles.
- Create beautiful and useful websites and web applications.
- Offer website management and improvements.
These are the most typical criteria, although your duties and tasks will change based on the web development job and your area of expertise.
Why to Choose Your Profession As a Web Development?
The field of web development is one that is not going away anytime soon.
In fact, until 2030, the number of open positions for web development is expected to increase by 13%, according to the US Bureau of Labor Statistics.
Simply put, if you can learn this skill, you won’t have any trouble getting employment in the near future.
Being a web developer has FIVE major advantages:
- Remote work is possible. Have you ever imagined what it might be like to work whenever and wherever you wanted? You’ll have lots of chances to work remotely as a web developer. Perhaps you can finally realize your desire to see the world while also saving money.
- You can create your own websites and web applications using your talents. Do you want to create a successful website or application? You won’t have to spend a lot of money getting this skill built. You can construct it yourself for a far lower cost.
- You are capable of working alone. If you don’t want to, you are no longer required to work for a manager. When you are knowledgeable about web development, it is much simpler to freelance or launch your own company.
- Get hired into the dream tech sector. Basically, web development is your ticket into the IT sector. Web developers are typically needed in tech businesses, so this is a good method to get your foot in the door.
- Awesome things can be built by you! You may be as imaginative as you like, which is the fun part. Instead of thinking, “Wow, that looks amazing,” when browsing websites Now that you can make your very own awesome-looking website, instead of saying, “I wish I could make something like that,”.
How do you feel? Do you feel motivated to pursue a career as a web developer after reading this? If so, you’ve come to the perfect spot, since you’re going to discover how to become one!
How to Begin Web Development?
If you want to construct websites for a living, you will deal with these on a regular basis. They are the nuts and bolts of all website development.
- HTML specifies the organization.
- CSS will make it seem nice.
Let’s talk about each of these in detail and how you may learn them.
Hypertext Markup Language is what HTML stands for. One of the so-called frontend languages, it is one of the essential components of every website.
In other words, it mostly uses a set of tags to provide the fundamental framework of a website.
The HTML code that manages how the content of an HTML document appears is known as a tag.
Cascading Style Sheets is a term that describes CSS.
It places the HTML structure in front of the style. In essence, without CSS, HTML, and as a result, the entire web page would seem dull.
Here is how they come together: You make a reference to a CSS style sheet in your HTML code.
2. Understand WordPress’s Foundations
You must learn WordPress if you want to work as a web developer. After all, this open-source, free software can be installed on virtually any web server and powers 65 percent of all websites.
Even if they don’t have any web programming skills, your clients can add material on their own when you put up a WordPress site for them.
3. Learn about UI and UX
The fundamentals of user experience design are UI (User Interface) and UX (User Experience).
The majority of developers are not web designers; these are two distinct professions.
It’s still crucial to remember that you may better comprehend how a website is supposed to function by knowing the foundations of user experience design. That will encourage more people to stay on the website longer, make it easier for them to find what they need, and eventually encourage more spending there.
We advise mastering the Adobe Creative Suite if you want to learn the fundamentals of design. Since Photoshop is the preferred tool for the majority of professional designers, you should start there. Sketch, a competitor to Adobe, is another option if you don’t like it.
4. Learn SQL and PHP
These two will be grouped together since they are similar to two sides of the same coin.
Information is stored using the database technology known as SQL. The “scripting” language PHP inserts or removes data from databases.
Consider WordPress as an illustration.
Data (blog posts, page content, comments, user data, etc.) is stored and managed in a database “table” using MySQL. WordPress websites are dynamic because of PHP, which interacts with all of these different components and correctly updates the database as you go.
You can master WordPress site development, which probably hundreds (if not thousands of people are seeking for every day on job and project boards), by learning more about how SQL and PHP interact with one another.
5. Learn the Basics of SEO
Search engine optimization, or SEO. This is a reference to the process of improving a website’s search engine ranks, such as Google. One of the most crucial abilities for conducting business online.
You could be asking yourself, “If I’m a developer, why should I care how well a site does in the search engines? Isn’t that the responsibility of the content producers and bloggers?
Yes, content plays a significant role in SEO for a website. But the website’s actual structure and coding also matter.
For instance, heading tags in HTML are crucial for SEO. They communicate to search engines what content is most crucial on a page.
Do you need to be an SEO guru now? Without a doubt. However, you should become familiar with the fundamentals of SEO and keep it in mind while you build each website. By doing this, you’ll greatly increase the website’s chances of success and make your web development client happier overall.
Here are some SEO pointers for website designers:
- Optimize your meta tags. The meta tag on the search results page describes your website to browsers; the better it is, the more likely it is that they will click on to the site.
- A certain arrangement for your heading tags should be adhered to. The primary heading should be H1, and you should then scroll down the page via the lower-level headings (i.e., H2, H3, H4, and so on). Because of this, search engines can more easily explore the website.
- Make sure the web page is accurately described in your title tag. The page’s subject should be made clear in the title.
6. Make Sure Your Site is All Device Responsive
Making websites that can adjust to the size of the visitor’s viewport is known as responsive web design. No matter how a user accesses a website, the content should render differently based on the device or screen size to give them the best possible experience. The main advantage of responsive web design is that users don’t need to manually resize anything to read content because websites load swiftly and without any distortions.
Although the idea has been around for years, it wasn’t until the middle of the 2000s when more consumers started utilizing mobile devices that developers started to understand the advantages of flexible web design. Designers rapidly realized the necessity for adaptable layouts as they battled to make sure that their websites looked good on computers, cellphones, and tablets. Consequently, they started to create websites which will responds to all different size of devices.
Okay, after you complete these 6 stages, you will have a fundamental knowledge of web development. You’ll be able to execute it (at least at a basic level).
Take your time with these procedures; you have time to study because there will always be a need for web developers.
Another article you should read 👇
Some Talk of a Random Developer:
You’re not bound to just these thing; in fact, you could bounce around between a lot of these options, as I do, so I’d say the most common reason that people want to learn to code is to work for a company. Developers make a good living, and many of us are passionate about it, so it’s great to be able to go to work every day and do what you love, which is a dream for many people, and technology provides that opportunity.
isn’t going anywhere anytime soon so you also have a lot of job security so some people including myself like the idea of freelancing and running your own business you can set your own hours be your own boss but it does take a lot of discipline to work for yourself it can also get kind of lonely so it’s not for everybody it has its you know pros and cons just like everything else another option is to build your own products or sasses which are stands for software as a service this could be anything at all some examples.
could be selling your own templates or plugins you could build something let’s say some kind of patient management portal or i don’t know an online photo editor something like that i mean the possibilities are endless to to what you can create and what can help people out so it does take a lot of work and marketing to create successful products you will probably have some failures but that is a path you could take you could get into my wheelhouse of creating educational content although this isn’t really something that.
i would suggest that you start with it’s a little weird to learn how to code and then go right into teaching without any experience unless you’ve done it as a hobby for years which actually brings me to my next option which is to code as a hobby it’s absolutely fine to learn how to code and not use it to you know as you’re living or.
whatever to make any money from it and you might even start as a hobby and find out that you’re able to build something that can help a lot of people out you end up making a lot of money down the road but my point is that there’s a lot of different roads you can take if you decide to take a certain road now doesn’t mean you can’t change it later all right so another thing that you’re going to want to think about is what type of developer do you want to be or do you want to start with certain technologies are.
c sharp golang there’s there’s a lot of different languages you could use and i’m going to go over those later and back end devs usually model data and also work with some kind of database and then a full stack developer works on both the front end and the back end uh it’s also important to mention that these days that line that separates the front end and back end is becoming more blurred and as far as.
my audience and in my viewers i know that most of you guys are into full stack development now these icons are these images on the side here i’m gonna label when something is front end back end and full stack with these icons and a lot of what i’ll be what i’ll be mentioning isn’t mandatory that you learn so if it is i’ll have a check mark along with the icon all right so there’s only a few basic tools that are really required when we.
start doing web development so obviously you need a computer to write code and you need an operating system on that computer as far as the computer you don’t really need a powerful machine for web development you can get just about anything from the last 10 years and it’s fine for just basic web development but i would suggest at least eight gigabytes of memory as far as the operating system everyone has.
their own preference there is no best operating system i personally prefer mac os but i also have a windows machine that i use quite a bit i run linux on any servers that i have and i’ll talk more about servers later you also have the windows subsystem for linux web browser same thing i prefer chrome just because that’s what i’ve used for the past decade or so i do like the integrated developer tools but all.
browsers these days have those to some extent uh firefox is also very popular with developers and and recently i’ve actually heard of a lot of people using brave microsoft edge along with brave they’re based on chromium so i mean any of these will really do for web development so as far as writing code you need a text editor.
or an ide which stands for integrated development environment so visual studio code or vs code is my favorite text editor and seems to kind of dominate the at least the web development world it’s fast it’s intuitive it has great extensions it’s free it has a great community but there are some others sublime text is is pretty popular vim is the successor of vi which is a unix based text editor and it it seems a little difficult to learn.
but people that use vim seem to really love it okay so the terminal is not something that you’ll need to know right away and if you’re a front-end developer you definitely don’t need to master it but you should know the basics when it comes to just navigating between folders and files there are command line tools that you’ll be using no matter what type of developer you are as far as which terminal you use that’s up to you the default terminal is fine that comes with windows mac whatever i like item for mac os windows users have powershell they have wsl i like to use a program
called git bash when i use windows it’s a very simple unix-based terminal and then you also have hyper it’s very customizable you can install extensions and so on all right so a lot of people ask me if they need to know any kind of design software and in my opinion if you’re a front-end developer or a web designer you should learn at least the basics of some kind of design tool and if you’re freelancing you’re most
likely going to have to provide mock-ups to your clients and and you might want to know one of these so some of the big ones we have figma which is great it runs right in the browser it’s powerful it’s free i like adobe xd just because i used to use photoshop and adobe illustrator and photoshop is really geared towards photos so i switched to adobe xd because it’s more geared towards ui design that’s what i prefer but i would probably recommend figma for someone that’s just getting started you also
have sketch which is pretty popular but i believe it it’s only for mac and then there’s some others as well canva is a tool that you can use right in the browser i’m not sure if it’s free or not but that’s something that i see a lot of people using these days as well all right so html and css are always going to be the first web technology that you learn because they’re the building blocks of the web and no matter
how sophisticated your web app no matter what the language on the server you’re using or what front-end framework you’re using in the end it’s going to be html and it’s going to be style with css in the browser so typically you’re going to learn both html and css at the same time but you’re going to focus most of your
time on css just because it’s it’s much more difficult and there’s just a lot more to learn than with html so i think no matter what type of developer you are even if you plan on being a back-end developer you should at least know the basics of html and css so some things you want to learn you know basic paragraph and heading tags
and all that but you also want to learn your html5 semantic tags like header footer section it’s really important to lay your pages out correctly with these semantic tags over just a bunch of divs then you want to get into css fundamentals basic properties that have to do with colors fonts borders margin padding you want to understand the box model and how that works and then alignment of course is really it was really uh important so flexbox and grid both of those are great tools i mean i come from the days
of using floats and tables for for your layout and i can tell you that css grid and flexbox are just they’re they’re godsends for web developers so i would learn both i tend to use css grid for my overall layout but flexbox for aligning inner elements and then media queries and responsive design so so i would say now in 2022 and maybe the past seven or eight years i would say it’s mandatory for everything that you build to look decent on a mobile device before that it was kind of optional but now with the amount
of mobile device use i think that it’s mandatory that all your layouts look good on mobile devices so simple animations and css transitions they’re not really crucial at this time but you might want to just learn the basics of having something fade in and fade out and so on alright so as far as extra tools that you can learn at this point sas is a css preprocessor there are others like less and stylus but sas is definitely the most popular you can basically create sas code which is similar to css but gives you some
extra functionality such as variables functions and mix-ins and nesting i do think that sas is going to get pushed out because native css already has custom properties which are basically variables we’re going to have nesting in css and i think that there’s going to be much less of a need for sas but with that said i think it uh i think you should learn it just because it’s pretty easy to learn there’s just some extra features to learn and then you
once you can create just a decent looking website with html and css then you might want to look into a framework because they can really help you speed up your projects and minimize the amount of css that you write or eliminate the need to write css altogether so let’s take a look at some of these so bootstrap has been around for a long time it’s currently on version 5. i would say that it’s the most popular to date at least in my opinion i think it’s worth learning for the simple fact that you’ll probably run into it at one time or another also if you learn bootstrap and you understand how it works then you you can pretty
different styles like the the background color the border the border radius the margin and all that with tailwind tailwind provides very low level classes that do basically just one single thing or one property so you might have a class of text center which will just add a text align center property or you might have just one single class for to add a little margin so very low level stuff now with tailwind the the negative is that you write a lot more classes in your html so it does really clutter up your html the benefits is that for one you you don’t have to write any css but you can also customize things better where not all your buttons and in your elements look the same as every other website that uses tailwind you do see
so there’s others as well but like i said once you learn how css frameworks work essentially then you can basically use whichever one you want all right so this is something that i think is really important to understand as a front-end web developer or web designer and that’s ui design principles so if you’re
working at a large company they may have designers that create mock-ups and then it’s your job to kind of take that mock-up and make it display and work in a in a browser however there are some companies where front-end developers do have a lot of say in the design and if you’re freelancing of course unless you’re you’re you’re outsourcing all of your design work you’re going to be creating some layouts and doing some design
so i think you should at least have somewhat of an eye for design and understand some general principles all right such as color and contrast you want to make sure the text is readable we’ve all seen the websites where there’s a big hero section and an image where there’s text on top of it and you can barely read the text
because there’s no overlay things like that you don’t want to make those kind of mistakes white space you want to make sure that you don’t have too much or too little space in between elements you want to make sure your elements are sized and they scale correctly relative to each other you want to make sure everything on the page is arranged in order of importance typography so nicely formatted text typeface sizing etc so these are just some really simple
languages later on so in web development the dom or document object model is really important the dom isn’t it’s an interface in the browser that treats html documents as a tree structure of nodes so all the html tags in the document are part of the structure and nodes can be selected manipulated and can have event handlers attached to them this allows you to have dynamic web pages so you can have when you click a button and something happens on the page that’s when you’re working with the dom you’re making things happen whether it’s making something a different color or
coding so it’s important to understand things like promises using the dot then syntax or i should say dot then dot catch syntax also a sync await callbacks things like that and then the fetch api is also something that i would suggest learning because it allows you to make requests asynchronously to a server and you can get data you can post update and delete data a lot of front-end developers a lot of their job but part of their job is to make requests to apis and then use that data in their user interface
so i mean that’s what i suggest that you learn before moving to a framework but obviously everyone’s different everyone has different uh different views on that so let’s talk about some other tools that you’re going to be running into around this time in your in your learning journey so git is one of the tools that every developer of any kind should be using it’s a version control system to track changes in your code there are other systems you have
subversion and some others but git is by far the most popular and it’s used for versioning backup as well as collaboration it’s extremely helpful if you have multiple people working on a single project because it allows you to see who did what and see exactly when they did it and you can roll back if you want things like that create new branches these are some of the things you should be able to do and you should also be able to work with a remote service like github or get lab or bitbucket github is obviously
that’s pretty popular um and and you can use that instead of npm but they both share the same npm rep they both share the same repository of packages all right browser dev tools are extremely valuable when it comes to debugging viewing the page structure or the dom browser storage network activity and so on it gives you a good picture of what’s going on in the browser at that time so
all browsers have some kind of developer tools and i would definitely suggest that you get familiar with those familiar with all the tabs in the dev tools next we have text editor or ide extensions or plugins so most most text editors have the ability to add third-party extensions to kind of increase the functionality most developers find a certain suite of tools that they like to work with helps them code in a more efficient way
a few options for this as far as platforms i really like netlify and versel both of these are simple to use you can just create a github repository and then log in and just select the repository that you want to deploy so they’re great they have very generous free tiers as well and you’ll want to add your own domain name so domains can be 10 to 15 dollars per year so they’re very cheap unless you’re buying an already existing domain off of someone then they can get really expensive and i use namecheap this this video isn’t sponsored by anybody so any companies that i mention are just companies
that i’ve used and then you also have companies that offer like shared hosting and vps’s and dedicated servers companies like hostgator bluehost most of these use cpanel which is a management console for your hosting account where you can set up your email and analytics and things like that um so there’s so many different choices i’m not going to really get into it and i’m not mentioning platforms like aws or heroku or anything like that because i’m going to mention those later on when we get into back end and full stack as far as actually deploying you have a few different ways you have get with most most platforms allow you to use which is great it’s very fast you can set up continuous deployment
ssh is a secure shell you can log in through your terminal you can do things that way ssh is something you should learn a little later on and then ftp which is the file transfer protocol is a is kind of the old school way of doing things and can be very slow and so i would suggest that you do literally anything else other than ftp if possible if your platform allows you all right so we’ve talked about all the basic knowledge that you should know up to this point along with some extra technologies like css frameworks and sas so at this point in your career uh in order to be a basic front-end developer at least in my opinion you should now be able to create websites with html and css you
to work with git create branches push to a remote repository whether it’s github git lab or whatever you should also be able to deploy and manage small production projects so you should have some some kind of process with a specific platform that you’re comfortable with and as far as getting a job i think at this point you can start applying for front-end positions however these days you’ll probably need to learn a front-end framework which we’re going to talk about soon so you’re at kind of a crossroads now and you have a couple of options as far as what you want to learn next and i’m just going to go over those options so the first one i think is web design and i feel like this option is really left out when it comes to like youtube and courses and people that you watch
a full stack developer i would highly recommend that you go with the option of learning a front-end framework most companies are looking for people that know a framework uh it’s also you know makes things easier if you’re dealing in the front end so that’s what we’re going to look at next is front-end frameworks now when i say front-end that refers to the client side in what are called single page applications
it still made it to where it is so that shows you that it’s a pretty damn good framework and there’s a great community around it’s fairly easy to learn when you compare it to react or angular the view cli is used to scaffold up and manage view projects the view router the composition api was introduced with version three so these are some things you’ll be learning with view view x is a state manager similar to redux so angular is still pretty popular in the enterprise world but not so much around startups and smaller companies and you know in the learning community on youtube and so on you don’t really
see a lot about angular it was created by google i would definitely say it that it has the steepest learning curve of the four at least in my own opinion but it is also a much larger framework and includes a lot more in the core packages it has its own router it has an http client and so on it also uses typescript by default so you’ll be learning that stuff you’ll be learning the about the angular cli there’s a concept of
from react just because it feels it’s so it’s easy to use and it just feels like when you do something it just works and it’s not over complicated like some other things in other frameworks but choosing is up to you don’t listen to anyone that says x is the best framework a lot of it is just preference of course popularity does matter if you’re looking for a job so just look at listings in your area see what’s being used and my
course you can just have a global style sheet you know css style sheet but there’s other options as well style components is something i would i would urge you to look into but you also have these ui kits or libraries that you can use that give you these pre-made components visual components things like alerts or menus or whatever it might be you can look at all the documentation to see what’s available so just to give you an idea of some of them so for react you have material ui which is based off of material design
and it i would say this is the most popular for react at least in my experience chakra ui is one of my favorites i think that it’s pretty easy to use there’s not a ton of code that you have to write to to have you know to create a component and it looks really nice onsen ui i believe is available for for everything here but it’s geared more toward mobile apps and then react bootstrap as it implies it’s a ui library
based on the bootstrap css framework so for vue viewtify is definitely my favorite it has a ton of professional looking interactive ui elements i will say i think this is the most popular by far view material is another material design based ui kit you have buffy which is actually based on the bulma css framework and then bootstrap view of course is based on bootstrap for angular you have angular material again this is material design
ng bootstrap ng zorro which is an enterprise class kit it’s based on the ant design but i’ve never used this and then md bootstrap as well and then for felt you have svelte material ui smelt which is one i haven’t used yet but looks interesting it’s based off of a combination of svelt and tailwind and then svelte material materialify and svelte strap all right so testing is something that i have often said that i i don’t do enough of i seem to hear this from a lot of developers i think some people feel that the trouble and
Another article you should read 👇
time that it takes to test your application isn’t worth it i do see that argument especially for smaller applications however once you take the time to learn how to test i think you’ll see that the there are benefits that really make it worth it and there’s there’s a lot of different types of testing i’m not going to get into all of them but three of the most popular types you have unit testing where you test specific blocks of code usually functions modules classes etc you have integrate integration testing is
routing is much easier you just upload a file or sorry just add a file to a specific folder and your route just works you don’t have to manually create all your routes um so there’s there’s a lot of benefits to this as far as the actual frameworks you have next js which would be my pick but this is based on react so if you’re a view developer you’re probably not going to use next js you’re going to use nuxt which i’ll talk about in a
minute so next js has been around for a while i think it’s fantastic you can render your pages on the server and you have access to specific data fetching methods where you can run server-side tasks and you have access to the hdp request data before the page loads something that you don’t have you can’t do in a regular you know create react app application you also have extra tools like image optimization so it’s next js is a great framework nuxjs is very similar to next except it’s not for react it’s it uses vue.js so naturally if you’re a view developer you’re probably going to use nux but it has a lot of the same benefits that next has now remix is a very very new framework for react developers and i’ve been getting into it recently i just did a two-part crash course on it although
it shares some features with next js and does some of the same things it feels very different and they have something called loaders and something called actions where you can submit data to the server and you can do everything within remix and not have to have a completely separate back end and i i don’t know i really like it and i like where we’re heading with it so sveltkit is your option for svelt i honestly would suggest using sveltkit for just about any svelte app it offers server-side rendering advanced routing code splitting and much more another thing that i don’t have listed here is angular universal which does do server-side rendering for angular apps as well alright so the next batch of technologies that we have are static site generators which allow you to generate your website and content using data from various sources it could be markdown files or some kind of api it
might be a headless cms which i’m going to talk about next static sites are very performant because they get all the data ahead of time and then pre-load it so when the user comes to the page everything loads very very fast so we have a few options for this react has a framework called gatsby i should say there’s a framework called gatsby that uses react and you create pages that are simply react components so you can still structure everything as you would in a regular react app you just have some extra capabilities and gatsby has an extra graphql data layer that you can work with and i know i haven’t gone over graphql yet but i will in a bit gatsby has all kinds of features such as image optimization code splitting and so on now we already talked about next js rendering react on
the server however it can also be used as a static site generator there are some specific rules that you have to follow in your code in order to do this but you do have an export command to export your project as a static site and it has data fetching functions for fetching whatever you want as well as creating dynamic urls for your static files so i i would use next js over gatsby but that’s just because i work with it more than i do gatsby so gridson is very similar to gatsby but instead of react it’s it uses vue.js so naturally you know if you’re a view developer you’ll probably use grid some it has a bunch of features for
while you think of wordpress or drupal uh these are systems that allow you and your clients to have some kind of admin area to log in and manage your content which is great and a headless cms is basically has that back end admin functionality where you can edit your content but there’s no front end like there is traditionally with wordpress drupal so you’re free to use whatever you want on the front end because the content the content management systems just spits out a json api so you can use react svelt no framework at all and use your cms data to create pages menus and so on there’s also authentication systems built into a lot of these and you can use tools like auth0 so these are great and i think that these are just going to get bigger and bigger because it takes
it takes away a lot of the work when it comes to creating your backend and your server so strappy is is currently my favorite it’s completely open source and self-hosted meaning that you set it up yourself and your own server unlike some other systems where your back end is hosted on their servers you can create content types like you would in wordpress there’s a plug-in system it’s it’s just a really powerful and it’s definitely my favorite and what i have the most experience with sanity.io is a great headless cms it’s powerful and a flexible platform it’s free up to a certain point but there are some pricing
tiers that you can look at and looking at the features of sanity it seems like a great choice for collaboration the way the content is structured it makes it easy to have multiple people working on the same project and there’s also a really cool toolkit called sanity studio that you can use as well contentful is a headless cms that seems to be really popular in the big business world it has features that are great for teams it’s optimized for speed and performance and then graph cms is something that i recently discovered and it allows allows you to instantly create a graphql api and and we’ll talk about graphql soon so i think that we’re going to continue to see these just grow in popularity like i said all right so the last few slides we looked into can fit into something called the jam stack which is a very broad
not dealing directly with a database okay so we’ve talked about a lot and i don’t want you guys to get overwhelmed and i just want to encourage you to just think about this stuff as the options that are out there you’re not expected to know or to learn all of this so by now you should be able to build user interfaces with a front-end framework you may also learn something like style components or ui library you should understand how to work with local and global state this could be using the context api for react redux or view x with vue or whatever else so you should understand uh quite a bit about http when it comes
to making requests to a server from the front end and getting a response back you should know how to work with rest apis you may even work with graphql i save that for later because in addition to the frontend part you have the graphql server as well and then as for added skills you may know how to use typescript this is optional but is getting more popular every year so i think working with server side rendered pages is going to become more and more popular as well as frameworks like next and remix also
learning and ai uh it is also great for web development there’s some awesome frameworks i’ll go over but python is definitely a great choice for web development php gets a bad rap i think that its reputation is getting better but i would suggest that you don’t listen to listen to the stupid memes about php it is a great scripting language it’s not the prettiest but it’s very efficient it’s it’s still widely used and it’s great for like freelancing and small business c sharp is a general purpose language it feels very clean and it uses the dot net framework you have some you know asp.net which is very popular i don’t use c sharp that much especially for web development but it is a good option golang is
extremely powerful uh it’s it was created by google i built a few simple apis with it but i don’t have a lot of experience with it so i can’t give you too much of an opinion i know it’s used on large scale servers and big distributed systems it can also be used for just basic web development as well ruby is a language that i’ve i worked with for a few years and really like it i think the syntax is very very clean it’s almost like writing english when we talk about ruby for web development we’re usually talking about ruby on rails which is a framework and i’ll talk about that soon so java is another language that is used in a lot of ways it’s also used for web development the spring boot framework is pretty popular
i personally think java is a great language to to learn like basic programming principles on but i i haven’t really used it for web development but it is used especially in like the enterprise world kotlin is a relatively new language that was designed for the java virtual machine or the jvm so in many cases kotlin is replacing java it’s it’s widely used for android apps but it can also be used for web development and then you have rust so rust has sort of a special purpose and that is that it’s popular with web assembly which i’ll go over later however rust is a viable option for back-end web development it uses hyper as a
core http server and can be great for things like microservices scala is another option for back and web development like other languages it combines object oriented and functional programming it powers the data engineering infrastructure of many companies but can also be used for building apis and microservices so r or rlang is not a language that i have any experience with at all i’ve done a little bit of research on it and it seems like it’s fantastic for statistical computing data analytics scientific research it’s very powerful for that stuff it does a lot of what python does for web development you could use r with markdown and the knitter engine there’s also a package called shiny that lets you create web pages but that’s about all i know for our programming and then swift is a
popular general purpose language but it’s mostly known for developing mobile apps in particular native ios apps along with objective c swift can be used for web development so i did add it here however there aren’t many tools available at least from what i could find so that’s not something i would suggest for for web development at least for your first language all right so as with the front end we also have web frameworks for the back end and every language has them so web frameworks are designed to handle http requests and send a response they also give you a bunch of extra tools some frameworks are more they have more to them than others some are very minimalistic
so let’s go over some for some some of these different languages so for node.js express is definitely the most popular framework there are there’s a lot of other frameworks built on top of express as well and because it is very minimalistic which means that you have complete freedom to build and structure your code and your uh in your files however you want and companies like twitter uber ibm have all deployed apps built on express fastify is a newer framework for building web apps and apis it’s something that i started working with in 2021 and really liked and i could see myself using fastify in production like like its name implies it is super fast uh it also has a powerful plugin
architecture with documentation tools and much more koa is another minimalistic option in fact i would say that it’s very similar to express and what it offers in in its syntax and then sjs is a fairly opinionated framework but it does offer a lot it’s it’s built for enterprise it includes typescript by default and it actually reminds me of angular the way that the way that everything is structured so if you’re an angular developer nest js might be a good option for your back end adonis i don’t have that here but it’s another really high level opinionated framework for node.js that kind of reminds me of laravel so for python there’s
two really really great frameworks and that’s django so django is is probably one of the best frameworks in my opinion period out of any language it’s very high level it allows you to build pretty complex apps and apis in a short amount of time and it even generates an entire admin area with almost no written code and it’s very specific meaning you have to build things the django way but you do get a lot for it it’s also very fast and scalable and i barely knew python when i learned django that’s that’s how much it gives you out of the box and then flask i also think is a great framework but completely different from django where django is very high level flask is closer to express it’s very minimalistic and gives you the freedom to do things however you want so both frameworks are great but
there’s a big you know a big difference in them fast api is a framework for building fast apis which isn’t very surprising it’s high performance and it’s it’s on par with nodejs and golang fairly easy to use i do plan on doing a crash course on fast api soon so php is a bit different than some other languages because it’s basically a template language itself you can run a php page directly in the browser it does have some nice frameworks though laravel is extremely popular and i would say on the to on my top five favorite frameworks out of any language php sometimes gets a bad rap like i said but laravel gets a lot of respect in the developer community php can be a messy
language but laravel is actually really elegant and offers just about as much as any framework could offer it has the artisan cli which is a tool for doing a lot of different things migrations it has authentication templates validation so if you’re a php developer i would definitely suggest laravel symphony is a set of reusable php components and laravel is actually built on symphony components so you can use symphony by itself but in my opinion it’s so it’s more difficult than it is to use something like
laravel and then i wanted to throw slim php in there because unlike you know laravel and some of these others for php it’s very minimalistic it’s kind of like express but for php and it’s great for building apis so for c sharp um you’re probably going to be looking at asp.net which is a web platform in asp.net mvc which is a model view controller framework specifically for building web applications and i do know c-sharp a little bit but i haven’t really done much web development with it i’ve done some some desktop uh some windows app development with it so like i said earlier i don’t have much experience with golang but from what
i’ve what i’ve used in research golang has just a great library where it doesn’t really need additional frameworks but it does have some including gin which is i believe the most popular go framework very straightforward easy to use bigo is used for rapid development of enterprise applications and go all right so for ruby you’re probably going to be using ruby on rails which which used to be really really popular and it has fell off quite a bit in popularity but i still think it’s a fantastic framework it’s great for rapid development you can you can scaffold up a rest api in minutes and there’s just a lot of tools
included with it i just think it’s a great overall framework sinatra is the second most popular framework for ruby it’s a much smaller framework and it’s sometimes referred to as a micro framework so for java spring is really popular and it’s actually a programming model and ecosystem that’s built on java and has several parts such as spring boot which makes it easy to create standalone applications spring cloud which is a combination of components that allows developers to build cloud native apps so i don’t have much experience with java it was the first language i i learned but i didn’t stick with it so i haven’t used it in a long long time and then you also have struts which is another java framework for building apps kotlin can also use spring so spring 5 5.0 started supporting kotlin and then you have vertex which is a framework for kotlin that is very flexible and resource
efficient for scala scala uses the play framework which can also be used with java play includes a powerful console and build tools testing tools it scales predictably lyft i’ve never used is a scala framework that claims to be the the most secure web framework available i’m not sure how true that is but that’s the claim and then for rust you have rocket which allows you to write fast secure web apps it’s
a type safe framework that’s easy to use and then actics is another framework that looks pretty interesting again i think the way you build with this framework is similar to express it seems like the code is pretty straightforward and minimalistic all right so backend and full stack developers need to work with databases to store data there’s different types of databases i would say the most popular are relational databases there’s also no sql databases that are pretty popular as well basically relational databases store
data in tables and rows and typically use the sql or structured query language to deal with the data so sql is probably something you’re going to learn as a back end or full stack developer and then no sql databases typically store data in something called collections which are usually formatted like json objects and are very flexible so like with everything else it’s going to be preference but here are some of
the most common database systems used in web development so postgres is is my favorite relational debate database the database it’s actually an object oriented or i should say object relational database as opposed to mysql which is purely relational and postgres has some great features like table inheritance and function overloading postgres also adheres more closely to the sql standards because even though a lot of these databases use sql they can implement it in in ways that vary from each other so mysql is another popular relational database in many web apps you won’t see much of a difference between postgres and mysql especially small small ones so it’s completely
up to you mysql seems to be really popular in the php world so a microsoft sql server is another implementation of an sql relational database i personally have never used it so there’s not too much i can elaborate on so sqlite is a much lighter file based database that isn’t really used in production as as far as i know i’ve always used it for just development and it’s great for that because you don’t have to go through any crazy install process you just have a something.db file and you can create read update delete data and i think it’s great for development so mongodb is that is a completely different type of database it’s what’s called a nosql database but within nosql there’s subcategories and mongodb is is known as a document database so it holds collections of documents
popular within that community all right now firebase is different from the databases that we’ve already talked about because it’s it’s basically an entire hosted platform by google it does offer a nosql database but it also offers authentication file storage serverless functions it’s it’s an all-in-one platform and it’s great for small to medium sized projects the downside is that you don’t have full control of the database it’s not something that you can install in your own server if google decides to just drop firebase for some reason then your project could be in trouble and but i think the chances of that happening are
very very small but it is something to factor in i personally love it so supabase is an alternative to firebase it includes a database also includes authentication now the database instead of nosql it actually uses postgres so it does also have an abstraction layer so you don’t have to write tds sql queries and like i said it does include
authentication and some other stuff it is completely open source and if for some reason it did go under since it uses postgres you could simply backup your postgres database and move it to a new server so it gives you a lot of what firebase gives you without that google lock-in so i think it’s a fantastic platform it’s it’s pretty new and i think it’s gonna you know i think it’s gonna be really big and then redis is is different from the rest redis is an in-memory data structure store that is often used for caching it can be used
with multiple stacks it has different data structures like strings lists sets it has great great performance and it can be used for caching session management real-time analytics or just as a general database so it’s a great tool to to to learn all right so with whatever database you choose you you have an ecosystem of tools for mysql you have like mysql workbench you have pg admin for postgres mongodb compass these are all tools that you use to access your data and manage your data directly now you also have something called an orm which is an object relational mapper or an edm which is an object
data mapper for document databases and it’s basically a layer that sits over your database so that you can query and manipulate data and you don’t have to write sql statements so i mean different different languages have different orms and some frameworks like laravel and django have built-in orms but some of the popular ones you have sqlize which you can use i use it with node.js and postgres when i use mongodb with node.js i almost always use mongoose which is great prisma is a great orm that i just started working with a combination of prisma and an ssr framework like next
js or remix is a really powerful way to build uh some powerful apps you also have sql alchemy for python doctrine for php so there’s there’s a bunch more for every language just something you want to think about as a back end or a full stack developer all right so understanding and building rest apis is something that you should learn early on as a back end or full stack developer rest apis conform to the rest architectural style and allow the interaction of restful services and rest stands for representational state transfer and we typically make http requests to work with data or resources typically stored in a database like blog posts users events whatever and then from
your application or from some kind of http client you would make a request to that api this is typically how you would structure your rest api endpoint so this is something that you definitely need to understand as a back end or full stack developer or even as a front-end developer because you’re making the requests from the front end all right so graphql is something that both front-end and back end developers can use it’s a data query and manipulation language for apis so you you create a
getting all of it like you would with a rest api you have much more control as to what you get back graphql is strongly typed and has strict document requirements rest apis can be kind of tough to maintain if your data is constantly changing graphql can adapt to those changes so there are some benefits and then apollo is a graphql client that you can use to request data there’s all types of packages
um and different clients you can use with graphql apollo just seems to be the most popular all right so authentication is the process of identifying an individual in you know a web app or any any kind of app and authorization pertains to the permissions that that individual has so that’s the difference between authentication and authorization and as a web developer you need to really understand how to implement both of these and there’s a few different ways you can do it so json web token tokens is uh is a popular way to do this
with single page applications so basically you have you know your your spot and then you have your back end and the user validates their username or email and password they send a request to the server and then that’s validated and then a token is signed on the server side and sent back to the client and then that token needs to be saved in the front end and then it needs to be sent along with any other requests to access protected routes on the server so that’s json web tokens uh and i have a complete video on that and most of this stuff so cookies and sessions are also commonly used just like with tokens the the user data is validated and if it’s
successful the server will create a session and typically in the database and include a set cookie header on the response which will have a unique session id in the cookie object so you can validate that way oauth is another popular way to validate users it can be a bit easier to set up it’s a standard for access delegation so basically what you can do is use your twitter or facebook or google or github account you can use those to log in to other applications all right so it delegates that that authentication you also deal with
authentication libraries to kind of help you out so things like what is it passport.js that’s something that i’ve used a lot in the past with node.js and then password hashing is something that you’ll need to be familiar with there’s different packages like bcrypt to help you do this protecting endpoints and routes in your api so like i said with with json web tokens you send a token and that allows
you to access your protected routes without that token a person shouldn’t be able to access that protected route so that’s something you’re going to have to keep in mind when you’re creating apis all right so this next one might make some people make some funny faces but wordpress is is still really popular it’s still widely used it’s a complete content management system built on php and it does have some criticisms um but
i think a lot of those criticisms are from people that work at large companies on large teams it’s not from the people that have had to build something substantial in you know two weeks and make their clients happy so wordpress is still widely used in the freelancing world uh or even like a small firm that works with small businesses and uh it’s been a while since i freelance but my clients loved wordpress i know that the
friends that i have now that are freelancers a lot of them still use wordpress so i think it’s worth mentioning here and it’s also worth mentioning that wordpress can be used as a headless cms so you can have your admin area your back end of wordpress for your clients and you can build the complete front end with some whatever you want if you want to use felt or view or react or whatever it is you can do that you can have wordpress just spit out a json api all right so deploying front-end projects is fairly simple we have platforms like netlify and versel make things super easy we can even create serverless functions and so on when we’re talking about a full-blown full stack application hosting gets a bit more complex so you might have to use a different type of platform
so let’s look at some of these aws or amazon web services is really really popular especially for for really big in-depth applications like enterprise level apps aws is very popular i think that it can be a bit overkill for some projects and it’s not something that i’ve used extensively the interface is very very complicated um you need to know exactly which service you’re using and and where to go to uh you know to to use it and can be a little tricky heroku is a platform that i like because it’s it’s relatively easy to use and you don’t have to set up everything from scratch you simply push your code
using git and it runs on something called a dyno so you can host node.js apps python ruby and a bunch of other languages and there’s an ecosystem of plug-ins as well so i really like heroku digitalocean offers cloud servers called droplets these are basically linux servers that you can install whatever you want on you can even choose which version of linux which distro so this does take some knowledge in linux and of course using the terminal there are other companies that offer similar services to digitalocean such as lenode which is another great company that i’ve
worked with but yeah so this is a good option and you can literally deploy anything that you want and if you do use something like digitalocean or lenode you’re going to need to know how to set up some things like like a web server and two popular web servers are apache and nginx i personally prefer nginx i think it’s easier to work
with and then containers and virtualization are also very popular especially in the big business world and people that plan on getting into devops develop developer operations should really learn things like docker so docker is a really popular container software docker uses operating system level virtualization to deliver software packages called containers and containers are isolated from one another and they bundle their own software including operating systems web servers databases and more so you could you can
install anything in a docker container and it runs as its own process on your machine and and this is really helpful for teams that work in different environments because the container has the same software and the same versions so it’ll run the same on essentially any machine whether it’s windows mac linux no matter what version anything so kubernetes is a container orchestration system for automating development scaling and management it’s popular to use docker and kubernetes together and unless you’re in devops i really don’t think it’s mandatory for you to learn this stuff it is very powerful and can be very
useful for large teams but i don’t think it’s essential for for web developers all right so when it comes to image and video upload there are a lot of services that you can use one of my favorites is cloudnary which doesn’t just store your images but it also optimizes them and gives you an api with different image sizes and so on and it can be used with just about anything many front-end developers um use this type of service as well a
nd then the amazon s3 is a storage service it’s actually part of aws it’s one of many parts and it provides object storage through a web interface or web service interface and is extremely scalable as well all right so here are some things that you’ll need to be able to do to be a back end or full stack web developer so you should be very comfortable with some kind of programming language now that runs on the server we talked about nine or ten of them so it’s up to you on what you
want to use you should be pretty fluent with sql and some kind of database i guess if you’re not using a relational database sql isn’t mandatory but you should know a database and its ecosystem including tools to connect as well as any orms or odms as a backend or full stack developer you should definitely know how to create rest apis from the ground up including authentication and protecting your routes you should also be very familiar with the terminal and understand basic unix commands you should know how to
navigate your system as well as log into remote servers you should also know how to deploy applications and apis to some kind of platform of course you don’t have to master them all just have some kind of process you’re familiar with and of course if you’re a full stack dev you should be able to do this as well as creating user interfaces and the stuff we talked about earlier all right so let’s talk about some things that kind of go beyond the the scope of just basic web development so
mobile app development can be done in quite a few ways with different technologies you can build native ios apps by learning swift or objective c you can build native android with kotlin or java however there are some web friendly tools that you can use to build cross-platform apps so react native is a framework that uses react to build apps for ios and android among other platforms and it has native capabilities so if you’re already a react developer
this is probably going to be your choice and that’s why it’s my choice it uses react and it uses the react native bridge which invokes the native apis for ios and android all right now flutter is a very popular mobile app framework by google that is used to compile native apps and flutter actually uses the dart programming language
if you’re a c-sharp developer this is probably something you’re going to want to look into all right so what would a 2022 guide be without talking about 3. so i think web 3 is going to be huge however i do think that there is a little bit too much hype about it right now if you go on twitter if you’re on tech twitter it’s literally like every other post so with that said it is a it’s a good idea to get a leg up on new technologies my goal here isn’t to
explain in depth what web 3 is i don’t even i don’t have the potential to do that i’m not a master of web 3 but i do want to just give a brief overview so you have at least some idea and you know what you’re you know what you have to start learning to just get your foot in the door so real quick explanation web 1.0 was basically the informational web we went to websites and it was mostly just read only content
right and then web 2.0 is the interactive web where the public creates content however everything is centralized whether you’re on twitter amazon whatever the website is all the data and the control is all centralized web 3 is about decentralized apps or dapps that run on the blockchain now the blockchain is a little bit difficult to understand when you’re first getting into this so it’s it’s basically a decentralized distributed public ledger that is immutable meaning that it can’t be changed so you can actually picture a chain of blocks containing data and each block in the chain contains a number of transactions and every time that there’s a new transaction it gets added to the
ledger and each transaction points to the transaction before it so nobody can go in and change the data and it’s completely decentralized and unlike centralized servers that can go down blockchain runs on thousands of nodes so i mean that’s a benefit right there is just reliability and the first major use of blockchain technology was bitcoin which is a form of cryptocurrency so it’s essentially a digital asset so blockchain is a huge part of web3 now ethereum came out a few years ago and is extremely popular because in addition to just being a digital asset um you know like bitcoin and maintaining a
alright so if you want to get into web3 you want to learn about blockchain ethereum smart contracts and solidity and i should also mention nfts or non-fungible tokens this is a pretty big craze on twitter and other online spaces these are basically just one-of-a-kind digital assets that are stored on the blockchain so they can be verified and they can’t be reproduced or copied and the nft can be it could be artwork music or anything else any any kind of digital asset so that will be another part of web 3. what i don’t like is that there does seem to be a lot of scamming going on in
the crypto and nft world there’s all kinds of pump and dump schemes and hopefully we can really get that under control but i do expect at one point web 3 is going to be huge in the future right now it’s it’s a little like the wild west but yeah i think it will be pro will be big and it’s beneficial to start learning about it now all right so web assembly is another powerful technology that i think we’ll see more of in 2022 it’s a low-level assembly language for the web so its purpose is to create really high performance web applications
help me so i mean some things i have to change around or whatever but i’ve actually learned from github copilot so i think we’ll be seeing a lot of ai when it comes to tools that that we use as programmers things things that are going to help us i also think that it’s going to be big in testing and tools for testing there’s also machine learning apis amazon has a variety of machine learning solutions you have translate poly and so on we’ll see ai being used in things like chat bots spam filters products suggestions on websites machine learning is also heavily used in user engagement and analytics so i think it’s something that we’re going to continue to see progress.
- web development roadmap.
- web development tools.
- web development tutorial.
- web development pdf.
- web development courses.
- learn web development free.
- web development languages.
- how to become a web developer step by step.