This guide provides a structured roadmap for beginners to learn web development, covering essential concepts, front-end and back-end technologies, and recommended tools to build a foundational understanding.
Mind Map
Click to expand
Click to explore the full interactive mind map • Zoom, pan, and navigate
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
Click on any text or timestamp to jump to that moment in the video
Share:
Most transcripts ready in under 5 seconds
One-Click Copy125+ LanguagesSearch ContentJump to Timestamps
Paste YouTube URL
Enter any YouTube video link to get the full transcript
Transcript Extraction Form
Most transcripts ready in under 5 seconds
Get Our Chrome Extension
Get transcripts instantly without leaving YouTube. Install our Chrome extension for one-click access to any video's transcript directly on the watch page.
