Web Development In 2022 – A Practical Guide

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:

1. Front-end (the user-facing side) and
2. Back-end (the server side).

Front-end vs. back-end development comparison

Front End: A front-end developer uses HTML, CSS, and JavaScript to handle the layout, design, and interactivity. They transform a concept from the drawing board into reality.

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:

1. 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.
2. 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.
3. 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.
4. 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.
5. 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?

1. Understand HTML, CSS, and Javascript Fundamentals

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.
• Javascript will make it work, and,
• CSS will make it seem nice.

Let’s talk about each of these in detail and how you may learn them.

HTML:

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.

CSS:

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.

Javascript:

Using the programming language Javascript, you can add elements to web pages. It fuels features like 2D/3D graphics, interactive maps, and other things.

Here You Will Get Some HTML, CSS & JavaScript Projects.

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.

used for different  parts of a website or a web app so a  front-end developer typically works on  the client side or with the browser and  that’s called the front end so they  build user interfaces which is obviously  the part of the application that the  user deals with  some typical tools that front-end  developers need to know are html css  javascript.

working with the browsers  document object model and they’ll most  likely be working with some kind of  front-end javascript framework  so back-end developers work with the  server side and could that could be any  kind of programming language so you can  use javascript with node.js but on the  server you can also use php python.

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 

 just compile it with a sas compiler down  to css and you include it in your  projects  also if you really want to customize any  css framework like bootstrap a lot of  the times you’ll use sas for that so  that’s another reason to learn it as  well and you could literally learn it in  a weekend  so you might also have heard of post css  which is a different thing post css is a  tool for transforming css with  javascript it’s used in a lot of  bundlers like parcel some others which  i’ll talk about later but you can  you can do a lot of the same stuff that  sas does by installing specific plugins  i personally don’t use post css that 

 much and i wouldn’t suggest learning it  at this point but it might be beneficial  to learn in the future  all right so before you go on to learn  javascript you have the option to learn  a css framework and these frameworks  give you basically give you pre-defined  classes to style elements now one thing  i really want to stress here is that  it’s extremely important at least in my  opinion to learn css  before jumping into a framework  

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  

much use any framework at least at its  core by just remembering or looking up  specific classes and bootstrap also  gives you a bunch of cool javascript  widgets like  drop downs and  collapsible menus and things like that  hamburger menus so i think it is worth  learning i think that it can really help  you speed up projects  now tailwind is a bit different than the  rest of these tailwind is a low-level  utility-based framework so let me kind  of explain what that means so bootstrap  is a high-level framework meaning that  it has classes like button or alert and  that one class will contain a lot of  

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  

this a lot with bootstrap and other  frameworks so i mean there’s pros and  cons to both i usually suggest bootstrap  first because it’s easier to learn and  think that it’s it’s more popular you’re  going to end up seeing it more in the  industry  so at least at this time so materialize  is another framework similar to  bootstrap it has as classes as well as  javascript widgets it’s based on the  material design pattern by google i’ve  i’ve always liked materialize i like the  look of it more than i like the  bootstrap stuff  but i do think that again bootstrap is  much more popular so that’s probably  what i would recommend first  

bulma is another nice looking framework  with css components it’s really modular  it’s also mobile first like most of  these other ones i don’t think it has  any javascript tools though and then  foundation is a well established  full-featured ui framework that’s been  around for quite a while but it is still  being used even by some pretty large  companies and it can be a bit more  advanced in its tooling but it’s very  customizable and it is a a nice  framework 

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 

but  really important things to pay attention  to if you’re doing any kind of design  all right so up to this point we’re  creating basic websites and making  things look nice now it’s time to get  into a programming language and if  you’re a web developer you should know  javascript it may not be the main  language that you work with if you’re  going to be a back end or a full stack  developer  you can build websites using server  

rendered pages and a template language  with you know php or python but if you  want any kind of dynamic functionality  within the browser and you want to have  interactivity and just mod a modern  web app then you’ll need to know at  least some javascript because that is  the language of the browser so  javascript front-end frameworks are  extremely popular but i think in some  cases people move to them too quickly  

so here’s some important parts of  javascript that i recommend learning  before moving to a framework  so the basics of javascript are the  things that you use in just about every  project so it’s important to understand  them things like data types data  structures like arrays objects  you have functions loops things like  that  things that aren’t just relative to  javascript but these are in  basically every programming language  they’re just basic principles  and once you learn them it makes it  easier to learn new programming  

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  

making something show or disappear or  making a request to some kind of server  and then showing some data things like  that so i would suggest learning how to  work with the dom using vanilla  javascript before moving to a framework  asynchronous programming is important in  javascript many times  instead of waiting for a task to finish  such as getting data from a server we  want things to keep moving on so we use  asynchronous 

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 you  should also fully understand json or  json which is javascript object notation  because this is the most common format  for apis or api data there is  xml but you don’t see that much these  days with uh with modern apis  so array methods are also something that  you’ll use quite a bit when dealing with  arrays of data so for each map filter  reduce  there’s a lot more but i would say that  you should be comfortable with the the  most common ones  and algorithms are a great way to kind  of practice these  

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 

the most popular of  those  and then markdown i don’t have it here  but it is something that you’ll want to  start to learn as well  because  you use it in git to display your your  documentation or your readme files and  markdown is really easy to learn you  could learn markdown in like two hours  um i have a crash course on it if you’re  interested uh just learn it or create a  cheat sheet just to  just so you can look up the formatting  characters but it’s very easy  so npm stands for node package manager  and it’s the official javascript package  manager  

packages being code that does a specific  thing it could be a framework library  plug-in  or some kind of helper just about every  language has some kind of package  manager but since javascript is what  runs in the browser many front-end  developers need to know npm now there is  another package manager called yarn  

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  

so browse around see what you see what  you think will help you out emmett i  just want to mention because that’s an  incredible tool for  writing html and css with quick snippets  and it’s available with vs code by  default but you do have to install it as  a plug-in on many other text editors  and then live server pritier eslint  github copilot these are some of the the  extensions that i use all the time and  i’ll talk more about github co-pilot  later  alright so now that you know html css  javascript and some tools you’ll need to  know how to deploy your projects to the  internet not just your local machine so  you have quite 

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  

don’t have to be a designer but you  should be able to create or take a  mock-up and create a website from it now  even though you’re not a designer if you  plan on being a front-end developer you  should know at least some basic design  principles and know what looks good and  what doesn’t you should know javascript  pretty well and be able to work with the  dom and do things like create a dynamic  uh navigation or create a modal  something like you know things like that  you should be able to create basic  front-end applications using javascript  so you know just very simple apps with  vanilla javascript you should be able to  use the fetch api to make requests to  either a back end or a third-party api  fetching data bringing it into your  application and so on  you should also be able 

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 

online  this is if you really want to get into  the visual design part of web  development and learn how to create  great layouts so you’re going to learn a  lot more advanced css probably get into  animation and transitions this could be  a viable option especially if you plan  to freelance there’s a lot that you can  build and do with just html css and  javascript  you can create beautiful brochure sites  with some dynamic modals and pop-ups and  all that you might even get into  wordpress or some no code tools like web  flow i know a lot of freelancers that  went this route and are actually very  successful  you also have the option to start  learning a front-end framework now that  you know the fundamentals 

of of  javascript frameworks make building  interactive uis much easier and much  more organized framework that you want  to use is up to you we’ll talk about  that next and you’ll also be getting  into like state management and all that  so if you plan to be a back-end  developer then you probably skip the  front-end frameworks and start with  either a new language i mean you can  stick with javascript and node.js or you  could use php python  golang c sharp and many other options  you’ll also be working with databases  like postgres mongodb and so on  and you have another option  to just continue to master javascript as  a language by doing things like  algorithms and building more advanced  

vanilla javascript applications you  could get into  more advanced tools like module bundlers  webpack snowpack parcel  these are used to bundle your javascript  and you can create more advanced vanilla  javascript applications i probably  wouldn’t suggest this if your goal is to  make money but if it’s if you’re coding  as a hobby then this might be a route to  take  all right so with these suggestions if  you plan on being a front end or

 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

 or spas and this means  that the browser only loads a single  page and then everything else is done  through javascript using the framework  now there are ways to run frameworks on  the server side which i’ll talk about  soon that’s actually becoming really  popular but these are inherently  client-side or front-end applications  and we build our user interfaces with  something called components and  components are encapsulated 

pieces of  code  that usually include the output or html  as well as the javascript logic and even  sometimes the styling so  these frameworks they all essentially do  the same thing just in different ways  so first we have react which is the most  popular framework by many metrics  it’s technically a ui library but it’s  in direct competition with all the other  frameworks it was created and maintained  by facebook as far as a learning curve  i’d say it’s pretty moderate some of the  things that you’ll be learning along  with the core library of 

react is react  router jsx which basically allows you to  have html in javascript hooks which are  used in functional components the  context api and redux which are used for  managing global state  redux i’d say is is becoming a little  less popular now that we have context  and and hooks but it is something that  is is still widely used  and then vue.js i would say is the  second most popular framework at least  from my own research it doesn’t have the  backing of a huge company like google or  facebook and 

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 

services that  angular uses a lot observables for  asynchronous code  and then we have svelt which is  technically not a framework it’s a  javascript compiler so you build your  app in a certain way using spell files  and then you run it through a compiler  and you get pure javascript  so no framework code whatsoever so it is  very lightweight and it’s very  performant and i actually love svelt and  if i wasn’t into teaching and i was  just building my own projects i would  probably switch to svelt  

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 

advice would be to try all  of them and just see what really clicks  with you  all right so the next technology that  we’re going to talk about is typescript  which seems to  a lot of people seem to either love it  or hate it  not always in fact i don’t love it or  hate it i do see the value in it but i’m  not someone that thinks every project  should be done in typescript like a lot  of other people do and typescript it’s  it’s a superset of javascript meaning  that it includes everything that  javascript does so it is it essentially  is 

javascript but it has some additional  features  and the main  additional feature is static type  checking hence the name typescript and  javascript is not a a typed language by  default meaning that when you define a  variable or a function you don’t have to  say that this variable or this function  returns a string or a number or boolean  it’s interpreted for you well some  languages like java  c c plus plus these are statically typed  

which means you need to define the  actual type  and even though you’re you’re writing  more code there can be a lot of benefits  to it so typescript adds the option to  add types  to javascript and it is completely  optional to add types it also offers  class and module support other es6 plus  features  your code is less prone to errors when  it’s statically typed and your code is  more robust and and definitive so there  are benefits but again it’s up to you to  weigh the pros and cons and decide if  you want to learn it so now that you  know front-end framework  you you have a lot of choices for  styling and design of 

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 

usually done in concert with unit  testing unit testing tests blocks of  code and integration  testing will  test how those how those blocks of code  work together and then end-to-end  testing does just that it tests from  beginning to end  and ensures that the application flow  behaves as expected as far as tools  every language has testing tools  javascript has frameworks like jest and  cypress oftentimes  when you use something like create react  app for instance it’ll have testing  tools built in like react has the the  react testing library  this is something that you’ll need to  decide if you want to learn or not if  you’re freelancing and 

you’re building  relatively small applications and  websites and don’t see a need for  testing i personally  you know don’t think that there’s  anything wrong with that  so server-side rendering i think is  probably my favorite thing about modern  web development over the past couple  years and uh  we’re getting i think we’re getting away  from single page applications a little  bit  and this is where we render react view  and these inherently front-end  frameworks on the server  which gives us quite a few benefits  so seo is a huge benefit when you use a  single page application  everything is loaded through javascript  so search engines can’t really crawl  your site but with server side rendering  it allows google and other search  engines to see all of the content on the  page  we also have performance benefits 

 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  

progressive web apps  seo and more  now jekyll is a static site generator  that has been around for a long time and  it’s not associated with any javascript  framework it’s actually a ruby based  and it uses the liquid template engine  so there are a lot more sta  static site generators that are not you  know for react or view or whatever  there’s some php based ones  there’s  there’s some golang ones i believe hugo  is based on the golang programming  language so just some something to look  into  all right so when we think of a content  management system a lot of us especially  if you’ve been doing this for a 

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 

term for an architectural approach  of building websites and it was  originally presented with the capital  jam which stood for javascript apis and  markup and from what i understand they  got rid of that acronym as it’s defined  more broadly and you can visit japs  jamstack.wtf to really get into it and  look at all the technologies but it does  include a wide variety of tools and  technologies a lot of which is like  static site generators along with the  headless cms there’s also certain  platforms that are great for the jam  stack like netlify and versailles  everything is decoupled the front end  tooling is separate from the back 

end  like i said the front end is typically  built with a static sight generator  you can also use serverless functions  which i’ll talk about in a second it’s  static first so while there are dynamic  elements most jam stack pages are  pre-rendered meaning that the front end  was compiled into html css and  javascript  so serverless functions are very  beneficial it’s uh it takes a it takes  away the the knowledge time and effort  and the cost of deploying and managing a  server on your own so if you need  something done on the server side you  can create a serverless function or a  lambda function and run it on netlify or  verscell or any other platform that  supports serverless functions  jam stack is very high performance  secure and scalable  since everything is pre-rendered and  there’s not really any sql injections or  other database vulnerabilities because  again it’s all pre-rendered you’re 

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 

creating fast  websites with static you know static  site generators and maybe headless  content management system i think that  stuff is on the rise as well you may do  some testing with a framework like just  people seem to to learn testing at their  own pace  all right so now that we’ve gone over  all the front-end technologies let’s  start looking at some server-side or  back-end technologies so first we have  languages javascript is the language of  the browser that’s why we talk so much  about it in the front end  but the server can be any language you  want so let’s just take a look at some  options so node.js is a javascript  runtime so it’s essentially javascript  on the server node is fast it’s  asynchronous it’s it uses event-based  programming it has a rich ecosystem it’s  

great for apis microservices real-time  applications where it falls short is cpu  heavy tasks that’s not something that i  really deal with so node.js is perfect  for me that’s what i prefer but again  you don’t have to you know use what i  use and then there’s another option if  you want to use javascript on the server  and that’s dino uh it had a lot of hype  uh like a year or a year and a half ago  but  i don’t know hasn’t lived up to that  hype i do think there is a place for it  in the future because it has some great  features but it’s not something i would  recommend getting into right now  python is great for a lot of things i’ve  used python quite a bit and i love it  it’s it’s number one for things like  data science machine 

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

 rather than  tables of records so each document is  basically like a json object  mongodb is really popular in the node.js  world you’ve probably heard of the mern  stack which is mongodb express react and  node you also have the mean stack or the  mevin stack if you want to use angular  or vue  and since mongodb formats the data like  a javascript object it’s easy for  javascript  developers to understand and it’s just  really 

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

 graphql server on the back  end to work with existing data and it  can be used with multiple languages it’s  just really popular in the javascript  node.js world i will say that in my own  opinion graphql isn’t seeming to really  take off the way that many people  thought it would  i’m not saying it’s not popular and  don’t use it but there was a point where  developers were talking like rest apis  were going to go ins extinct and this  was going to take over  but anyway it’s used in a similar way to  a rest api but it does have some  advantages so you can request specific  data from a single endpoint rather than  

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 

which is pretty  similar to javascript  a lot of web developers are very  comfortable with flutter flutter is  extremely fast it’s actually faster than  react native because react native  leverages javascript to connect uh  connect to native components via the  bridge and flutter doesn’t need that  bridge which makes it faster and flutter  does have great documentation as well  so ionic is a hybrid framework that is  great for progressive web apps or web  apps

 optimized for mobile devices  it’s a little slower than the previous  two but you’re also not bound to any  single framework if you want to use  angular or vu or vanilla javascript you  can with ionic and then i wanted to  include  xamarin here as well  which isn’t something that i’ve used but  it’s a framework for building mobile  apps with c c-sharp and net so it’s high  performance cross-platform  and if you’re

 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 

decentralized payment network  it’s also used for storing code that can  be used to power highly secure and  transparent decentralized contracts and  applications  so smart contracts are the fundamental  building blocks of ethereum applications  so if you want to start getting into web  3 and blockchain starting to learn how  to create ethereum smart contracts is  definitely  a way that you want to go  now one of the ways you get into  creating ethereum smart contracts is by  learning solidity so solidity is a  statically typed programming language  that was actually designed to develop  smart contracts that run on what’s  called the ethereum virtual machine or  the evm and solidity is  a pretty high level language and if you  already know javascript or python you  should be able to pick it up pretty  quickly 

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 

and you can  write these programs in very fast  languages like rus so rust is very  popular when it comes to web assembly  you can also use c  and c plus plus  and then it compiles down to webassembly  to run in the browser and this allows us  to create web apps that are much more  performant than javascript or what  javascript can give us  for instance programs that are cpu heavy  if you’re a javascript developer there’s  there’s also a language called  assemblyscript that is a variant of  typescript that you can use to compile  to 

webassembly or wasm i should also  mention that webassembly is is not a  replace for replacement for javascript  it’s made to work alongside it so i  think machine learning and artificial  intelligence they have a role in web  development a pretty big role  we saw a github co-pilot in 2021 and i  use it all the time and it still amazes  me how well it works i i know a lot of  people think that it’s going to take our  jobs or whatever but i don’t think  that’s going to happen for a long time  but the the suggestions that  co-pilot gives me  it’s just incredible of what it can come  up with  and it really does 

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.

Your Queries:

• 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.

• Only Two | Html CSS Glowing Smiley Face Effects
• web developer roadmap 2021
• full stack developer roadmap 2022
• front-end developer roadmap 2022
• full-stack web development roadmap 2021