If you want to learn web development, where
do you even start? It's hard to find the right advice without suffering from information overload.
That's why I've created this beginner's roadmap! it lays out all the basics you need to learn
web development we're going to go through each step so by the end of this guide you'll have an
understanding of the basics of web development and what skills you need to learn I recommend doing
steps 1 2 & 3 in order then depending on whether you want to focus on more front-end or back-end
you can do steps 4A or 4B.
I personally think it's a good idea for front-end web developers to
learn at least a little bit of back-end and vice versa knowing the basics of both will help
you know if you like front-end or back-end web development better sound good let's dig deeper
into the roadmap before you get into actual coding you'll need to understand some general concepts
as you start your journey into web development how websites work the difference between front-end and
back-end and using a code editor all websites at the most basic are just a bunch of files that are
stored on a computer called a server this server is connected to the Internet you can then load
that website through a browser like Chrome Firefox or Safari on your computer or on your phone
your browser is also called the client in this situation so every time you're on the Internet
you the client are loading data from the server as well as submitting data back to the server this
back and forth between the client and the server is the basis of the internet web developer roles
typically fall into three categories front end back end and full stack the terms front end back
end and full stack web developer describe what part of the client-server relationship that you're
working with fernand means that you're dealing mainly with the client-side it's called the front
end because it's what you can see in the browser conversely the back end is the part of the website
that you can't really see but it handles a lot of the logic and functionality that is necessary for
everything to work one way you can think about this is that front-end web development is like
the front-of-house part of a restaurant it's a section where customers come to see and experience
the restaurant the interior decor seating and of course eating the food on the other hand back-end
web development is like the back of house part of the restaurant it's where deliveries and inventory
are managed and the process to create the food all happens there's a lot of things behind the scenes
that the customers won't see they will experience and hopefully enjoy the end product a delicious
meal fun illustrations aside both front-end and back-end web development serve different but very
important functions when you build a website the most essential tool that you'll use is your code
editor or IDE integrated development environment this tool allows you to write the markup and code
that will make up the website there are quite a few good options out there but currently the most
popular code editor is vs code vs code is a more lightweight version of Visual Studio Microsoft's
main IDE it's fast free easy to use and you can customize it with themes and extensions other
code editors are sublime text Adam and vim if you're just getting started though I'd recommend
checking out vs code which you can download from their website now that we've covered some of the
broader concepts of what web development is let's get into more of the details starting with the
front end the front end of a website is made up of three types of files HTML CSS and JavaScript
these files are what is loaded in the browser on a client-side HTML or hypertext markup language
is the foundation of all websites it's the main file type that is loaded in your browser when you
look at a web site the HTML file contains all the content on the page and it uses tags to denote
different types of content for example you can use tags to create headline titles paragraphs bulleted
lists images and so on HTML tags by themselves do have some Styles attached but they're pretty basic
kind of like what you would see in a Word document CSS or cascading style sheets lets you style that
HTML content so it looks nice and fancy you can add colors custom fonts and lay out the elements
of your website however you want them to look you can even create animations and shapes with
CSS there's a lot of depth to CSS and sometimes people tend to gloss over it so they can move
on to things like JavaScript however it's really important to be able to convert a design into
a front-end website layout using CSS javascript is a programming language that was designed to
run in the browser using JavaScript you can make your website respond to different inputs from the
user or other sources for example you can build a back to top button that when the user clicks it
they'll scroll back up to the top of the page as we mentioned HTML CSS and JavaScript are the
basic building blocks of front-end web development in addition to them there are a few other tools
that you'll want to learn at this point package managers are online collections of software much
of it open source each piece of software called a package is available for you to install and
use in your own projects you can think about them like plugins instead of writing everything
from scratch you can use helpful utilities that other people have written already for instance
you can simply use a slider plug-in instead of having to code it all yourself which could take
days to figure out why reinvent the wheel if you don't have to the most popular package manager is
called NPM or node package manager you can also use another manager called yarn both are good
options to know and use although it's probably best to start out with NPM in addition to package
manager is you'll want to become familiar with build tools module bundlers and build tools are
another essential part of the front-end workflow on a basic level these tools run tasks and process
files you can use them to compile your sass files to CSS transpile your es6 javascript files down
the es5 for better browser support run a local web server and many other helpful tasks saving
you a ton of hassle if you were to try to do all these essential steps by yourself three tools
that you'll continue to come across a lot are gulp web pack and parcel personally I like using
gulp for my own front-end workflows where I just want to compile my sass and JavaScript files and
not do too much else the last tool you'll need to learn about in this stage is version control
version control also called source control is a system that keeps track of every code change
that you make in your project files you can even revert to a previous chain if you make a mistake
it's almost like having infinite save points for your projects and let me tell you it can be a huge
lifesaver the most popular version control system is an open source system called git using git you
can store all your files and then change history in collections called repositories you may also
have heard of github which is an online hosting company owned by Microsoft where you can store
all your git repositories at this point you've learned the basics of friend development and
have a choice to either delve into additional friends skills or learn about basic backend web
development with additional front-end there are some more intermediate skills that you will
want to learn I recommend that you look at the following SAS responsive design and a JavaScript
framework SAS is an extension of CSS that makes writing styles more intuitive and modular it's
a really powerful tool with sass you can split up your styles into multiple files for better
organization create variables to store colors and fonts and use mix-ins and placeholders to easily
reuse styles even if you utilize just some of the basic features like nesting you'll be able to
write your Styles quicker and with less headache responsive design ensures that your sales will
look good on all devices desktops tablets and mobile phones the core practices of responsive
design include using flexible sizing for elements as well as utilizing media queries to target
styles for specific devices and widths for example instead of setting your contents to be a static
400 pixels wide you can use a media query and set the content to be 50% width on desktop and 100%
on mobile building a website with responsive CSS is a must these days especially as mobile traffic
is outpacing desktop traffic in many cases once you have the basics of vanilla JavaScript down you
may want to learn one of the JavaScript frameworks especially if you want to be a full-stack
JavaScript developer these frameworks come with pre-built structures and components that allow
you to build apps quicker than if you started from scratch currently you have three main choices
react angular and view react which is technically a library was created by Facebook and is the most
popular framework right now angular was the first big framework and it was created by Google it's
still very popular even though it's been surpassed by react recently and views a newer framework
created by Evan you a former angular developer well it is smaller news and react and angular is
growing quickly and is also considered easy and fun to use you might be wondering now okay well
which framework is the best the truth is they are all good and web development there's almost never
a single choice that is 100% the best choice for every person in every situation your choice will
most likely be determined by your job or it simply by which one you enjoy using the most if your end
goal is to land a job at a company try researching which framework seems to be the most common in
potential job listings don't worry too much about which framework to choose it's more important that
you learn and understand the concepts behind them and once you learn one framework it'll be much
easier to learn other ones after that let's move on now to our last section backend web development
the backend or server side of web development is made up of three main components the server
a server-side programming language and the database as we mentioned at the very beginning
the server is the computer where all website files the database and other components are stored
traditional servers run on operating systems such as Linux or Windows they're considered centralized
because everything the website files back-end code and data are stored all together on the server
nowadays there are also serverless architectures which is a more decentralized type of setup this
type of application splits up those components and leverages third-party vendors to handle each
of them despite the name though you still do need some kind of webserver to at least store
your website files some examples of service providers are AWS Amazon Web Services or nullify
Cir furless set ups are popular because they are fast cheap and you don't need to worry about
server maintenance they're great for simple static websites that don't require a traditional
server-side language however for very complex applications the traditional server setup might
be a better option on the server you need to use a programming language to write the functions
and logic for your application the server then compiles your code and conveys the result back
to the client popular programming languages for the web include PHP Python Ruby c-sharp and Java
there is also a form of server-side JavaScript node.js which is a runtime environment that
can run JavaScript code on the server finally you'll need to learn about databases databases as
a name implies are where you store information on your server for your website most databases use a
language called SQL pronounced sequel which stands for structured query language in the database
data is stored in tables sort of like complex Excel documents then you can write queries in SQL
in order to create read update and delete data the database is run on the server meeting servers
like Microsoft sequel server on Windows servers and my sequel for Linux there are also no sequel
databases which store the data in JSON files as opposed to the traditional tables one type of no
sequel database is MongoDB which is often used with react angular and view applications some
examples of how data is utilized on websites are if you have a contact form on your website
you could build the form so that every time someone submits the form their data is saved on
to your database you can also store user logins on the database and write logic in the server-side
language to handle checking and authenticating the logins and that's how I would recommend you start
your journey into web development I've compiled a list of resources to help you get started
learning at any of these stages linked below