Learn web development as an absolute beginner (2019)

Are you trying to learn web development, but not sure where to start?

Right now, all you need is the basics of web development– a general explanation with some direction on where to go next.

First, here are the basic steps you will follow in order to become a web developer.

Steps to learning web development:

  1. Basics: Understand how a website works
  2. Basics: HTML, CSS, and JavaScript
  3. Intermediate front-end skills: responsive design, build tools, Git
  4. Front-end frameworks: React, Vue, or Angular
  5. Back-end skills (if you want to be full-stack)
  6. Basic server and deployment skills

Now, let’s move on to what each section of this article will cover:

Table of Contents

*Jump links included, so you can skip around if you want!

Part 1: We’ll start out with the basics:

  • What web development is: explaining what’s actually happening when you load a website in your browser.
  • HTML, CSS, and JavaScript: the foundation of every website.
  • Helpful tools: using code editors and Git
  • What’s front-end and back-end?

Part 2: Then we’ll get into more intermediate front-end skills:

  • Responsive design: making sure your website looks good on computers, tablets, and phones.
  • Grunt, Gulp, and WebPack: using build tools to do some work for you!
  • An introduction to JavaScript front-end frameworks: React, Vue, and Angular

Part 3: Followed by back-end skills:

  • An overview of the most commonly used back-end languages and how they stack up.
  • A quick intro to databases and what database languages you should learn.
  • The basics of setting up a website on a server.

Epilogue: Learning resources

  • A short list of recommended online courses, tutorials, and books.

A note on affiliate linking— some of the links below are affiliate links, which means that if you purchase through them, I may get a commission from the company. As an Amazon Associate I earn from qualifying purchases. It’s a great way that you can support Coder Coder at no extra cost to yourself. You can read more on my disclaimer page.

Now, before we go through everything about websites… let’s start with you!

What’s your ultimate goal in learning to code?

In his book The 7 Habits of Highly Effective People, Stephen R. Covey asserts that in order to be successful, you have to “begin with the end in mind.”

Consider your own reasons for getting into coding… What end are you aiming for?

What is your ultimate goal?

Are you looking for a fun hobby, a career change, a flexible job where you can be closer to your family?

Your entire approach to web development should be centered around achieving this one dream.

You can even try writing down your goal, and putting it someplace where you will see it everyday, like your bathroom mirror or next to your computer.

As you go through this article, keep your goal in mind, and let that determine what decisions you make: which languages to learn, even how you choose to learn.

With that said, let’s get started with the basics!


Part 1: The basics

This might seem obvious, but I’m going to say it anyway:

At its core, web development is all about building websites.

A website may be a simple one page site, or it could be an incredibly complex web application.

If you can view it on the web in a browser, it has to do with web development.

Here is a simple explanation of how websites on the internet work:

  1. Websites are basically a bunch of files stored on computers called servers.
  2. Servers are computers that are used to host websites, meaning that they store the website files. These servers are connected to the giant network called the World Wide Web (to use 90’s lingo), or the Internet.
  3. Browsers are programs that you run on your computer. They load the website files via your internet connection. Your computer is also known as the client, which connects to the server.

Further reading

The 3 components that make up every website

As mentioned above, websites are made up of files, mainly HTML, CSS, and JavaScript files.

Let’s take a closer look at each of them:

HTML or HyperText Markup Language

HTML is the foundation of all websites. It’s the main file type that is loaded in your browser when you look at a website.

You can actually make a very very basic website just using HTML and no other types of files.

It won’t look very interesting, but that’s the minimum that you need for a website to be a website.

(If you’re interested in the basics of HTML, you can check out a video/blog tutorial I have about that.)

CSS or Cascading Style Sheets

Without CSS, a website will look as aesthetically pleasing as a Word document.

With CSS, you can add colors of all kinds, compelling fonts, and layout the website in pretty much any way you please.

You can even add animations and draw shapes using more advanced CSS.


JavaScript is a programming language that allows you to interact with elements on the website and to manipulate them.

While CSS adds style to HTML, JavaScript adds interactivity and makes a website more dynamic.

For example, you can use JavaScript to scroll to the top of the page when you click a button, or to build a slideshow with buttons to navigate through the images.

To work with HTML, CSS and JavaScript files, you’ll need to use a program on your computer called a code editor.

Which brings us to the next point:

Which code editor should you use?

This is a very common question, especially if you’re just starting out.

The best code editor for you will be highly dependent on what kind of code you’re writing.

If you’re doing mainly HTML, CSS, and JavaScript, you could code in Windows Notepad or TextEdit for Macs if you wanted to.

But what would the fun be in that?

Code editor programs like Sublime or VS Code come with a lot of features that just make coding easier.

They allow you to indent multiple lines of text right or left, and can highlight the text in different ways depending on what language the file is in.

For back-end languages (we’ll get into those in a later section) you’ll need a more powerful code editor called an IDE (Integrated Development Environment). IDEs have features that allow you to debug and compile (process) your code.

Here are some popular code editors:

VS Code: This lightweight version of Visual Studio, Microsoft’s main IDE, is only a few years old but it’s gotten incredibly popular, due to its speed, ease of use, and powerful features. VS Code is my personal editor of choice, so I may be rather biased 🙂

AtomCreated by GitHub and advertised as a “hackable text editor,” Atom is a well-loved editor. One of its main strengths is its customizability. You can install packages and themes that will add features to the program.

Sublime: A hugely popular program that has been around for a while. Like Atom, you can install packages and themes, and it also has quick performance. Unlike the other two editors, a Sublime license costs $70 (but it is free to try).

I’d recommend trying some or all of these editors out, for comparison’s sake. Then pick one and stick to it, learning its features and shortcut keys.

Version control

Now you have your code editor, and you’re starting to write code. However what happens if you make a mistake in your code, and you have to undo all your code changes to before that mistake?

And pressing Ctrl-Z to undo a million times isn’t working for you. What do you do?

The answer, is version control!

Version control is like having save points for your code files.

If you think you might be about to make some code changes that could break everything, you can create a new save point (called a commit).

Then if you do break your website, you can revert your code back to the state it was in before.

It can be a lifesaver if you ever make a mistake that you desperately need to undo.

Version control sounds great! How does it work?

Using a version control system (VCS) involves storing your code files and the entire history of changes in what’s called a repository.

Usually you will use one repository per website or project.

Then you store your repository online in what’s known as a central repository, and also keep a version on your computer in a local repository.

As you make changes on your computer, you can create commits and then push them up to the central repository.

This process allows you to have multiple people working on the same set of code, even changing the same files.

Git is the most popular VCS right now

The main version control system nowadays is Git. Its main competitor is Subversion (SVN), an older system.

But the vast majority of coding bootcamps and tutorials will use Git, so that’s what I’d recommend that you learn.

Further reading

Now, as we move into explaining the actual languages and frameworks that are used, we’ll be using terms that you’ve probably come across already: front end and back end.

The front end is all about how the website looks, visually.

The front end (or client-side) refers to what is loaded by the user’s browser, also called the client.

This would be the HTML and CSS that we started out talking about. JavaScript was originally just a front-end language, but nowadays you can use JavaScript as your server-side, or back-end, language also.

Front-end work deals heavily with making the website look good.

In addition, it also involves making the site behave in a way that makes sense to the user (also called UX or user experience).

If you enjoy tweaking your CSS to make sure the site is pixel perfect, and adding subtle JavaScript animations that help the user along, then you will likely enjoy front-end development.

The back end is all about functionality and making sure everything works.

While the front end is about the appearance and visual behavior of the website, the back end is about getting everything to work behind the scenes.

If you’re working in back-end development, you’ll be doing tasks like handling requests to the server and database.

Some examples of back-end work would be saving the data when someone fills out a form on the contact page, or retrieving data to display blog posts in a specific category that the user has requested.

Back-end work also may involve setting up the website on a server, handling deployment, and setting up SQL databases.

If the idea of setting up all the functional parts of a website sounds fun to you, you may enjoy back-end work!

Putting both sides together

The names front-end and back-end came about because the front-end is what you can see in your browser.

And the back-end is the part that you can’t see, but it handles a lot of the heavy lifting and functionality that helps the front-end.

You can think about the front-end as the storefront of a business, the only part that most customers will see. The back-end is like the manufacturing, distribution, and operation centers that help the store run.

Both serve separate functions that are equally important.

Front end, back end, or full stack?

In web development, you can focus on just the front end, or just the back end. Or you can deal in both, which is called full stack development.

What you choose to focus on should mainly depend on two things:

  • Your personal preference: Not everyone likes both front and back end.
  • Job availability: Browse your local job listings and get involved with local coding meetups to get a feel for what types of jobs there are.

It’s worth mentioning that if you enjoy both front and back end, being a full stack developer will make you more marketable.

It makes sense– the more technologies you can work with, the more tasks you will be able to perform.

Stack Overflow reported in their 2017 survey of users that 63.7% identified as full-stack, 24.4% as back-end, and 11.9% as front-end developers:

Stack Overflow Developer Survey 2017 - types of developers

However again, this will be heavily dependent on the company. Some companies may utilize full stack developers, where others split the back and front ends.

Some also have their front-end developers spill over into design, where the developers will design and build the front end of the application.


Part 2: Making your front-end skills shine

Once you’ve gotten the basics of HTML, CSS, and JavaScript down, you can start getting into more advanced skills in the front-end.

This section will go through practices and tools that will help you build more marketable skills as a web developer.

Responsive design is a must in this mobile-friendly world

When websites were first around, there was only one way to view them– on your computer.

Smartphones and mobile data didn’t really exist yet. When making a website you only had to worry about how it looked on your computer.

Now, according to, more people are using their phones than their desktop computers to browse the internet.


So we need to make sure that all our websites work and look good on everything from the biggest monitor to the smallest phone.

This practice is what’s known as responsive design. It’s called that because the design can “respond” to any device that is viewing it.

You can test how responsive a website is by manually changing the width of your browser window and seeing how the design looks at large and small widths.

Building a truly responsive website involves a lot of planning in the design phase to consider how everything will look on all devices.

And in the web development stage, it involves using media queries to control which CSS properties are being used at specific widths.

Frameworks can help you build a responsive website quickly

As you might imagine, coding all the CSS of a responsive website takes a lot of work.

If you can’t spare a lot of extra time, you might try using a responsive framework like Bootstrap or Zurb Foundation.

The beauty of these frameworks is that they come pre-packaged with custom CSS and JavaScript. They’ve done a lot of work for you by pre-styling elements like headlines and buttons.

They also come with JavaScript components (essentially little plugins) like modal pop-up windows and navigation bars.

Since you’re using something that’s already been tested, it will make building your website a lot easier.

The only caveat is that you shouldn’t become too dependent on frameworks.

There’s no substitute for knowing how to build a responsive website from scratch.

Further reading

Sass will save you time and headaches when writing CSS

Once you’ve gotten the basics of CSS down, I would start to learn Sass, because it is simply awesome.

It’s even in the name! Sass stands for “Syntactically Awesome Style Sheets.”

And it’s described on its website as “an extension of CSS.”

It makes writing your CSS styles much easier, more intuitive, and faster.

Don’t get me wrong, CSS is great. But as you get into it, you’ll realize that regular vanilla CSS can get quite tedious.

And, if you aren’t super organized in how you write your styles, your CSS styles can quickly become frustratingly tangled.

What Sass does is give you more power and control.

Here are a couple examples of how Sass will make your life easier:

  • Mixins: Instead of copying and pasting the CSS code for certain elements a million times, you can use mixins. They allow you to write a set of styles for an element just once, and reuse as many times as you want.
  • Nesting: Instead of writing all the parent classes of a specific style, you can nest all the children inside the parent’s styles. This also cuts down on a lot of duplicate work.

Here’s an example of using nesting in Sass:

.post {
    display: block;
    margin: 20px;
    .header {
        padding: 20px;
        .headline {
            font-size: 24px;

In short, using Sass will save you time and annoyance. Well worth the effort it takes to learn it!

Further reading

One note: since the browser can’t read Sass files itself, you have to compile your Sass files into CSS.

In order to do this, you’ll have to use something called a build tool and run it on your computer.

Which brings us to the next section….

What are all these build tools about, anyway?

You’ve probably heard one or several of the following terms: npm, Webpack, Grunt, Gulp, Bower, Yarn… the list gets pretty long!

These tools are often described as build tools, task runners, task managers, or “NOW what do I have to install?!”

Some tools do your grunt work (pun intended!) for you

Build tools like Grunt, Gulp, and Webpack are commonly used to do some of the following tasks:

  • Processing Sass files into CSS
  • Concatenating (combining) multiple CSS files or multiple JavaScript files into one big CSS or JavaScript file.
  • Minifying (compressing) CSS, JavaScript, and even image files
  • Automatically refreshing your browser with the updated CSS or JavaScript code

Sure, many of these tasks you could do yourself by hand.

But having to do it over and over again every time you make a small CSS or JavaScript change gets tiring.

Which build tool should you use?

At the moment, Webpack is taking over the field, but Grunt and Gulp are still in use.

I would definitely learn Webpack, but it couldn’t hurt to learn either Grunt or Gulp (Gulp is faster and seems a bit easier to get up and running).

Other tools install packages (plugins) for you

In addition, in order to accomplish all those tasks, you generally need to download and install plugins or packages.

This is where a tool like npm (Node Package Manager or Yarn come in handy. These are tools that allow you to quickly install packages to your computer by typing commands into your computer’s command line.

They’re tools to get you more tools, basically!

As npm is the dominant package manager right now, you should definitely learn how to use it.

Yarn is a very npm-like tool created by Google, Facebook, and others that promises to fix some of the issues that npm has.

While Yarn is in the minority, I’d still recommend checking it out, as it seems to be gaining in popularity.

Further reading

Everyone loves JavaScript frameworks

You’ve probably noticed a lot of JavaScript frameworks, libraries, toolkits, etc. being thrown around… you know, those names that all end in “.JS?”

Let’s first take a step back and define just what a JavaScript framework is.

Depending on who you talk to, the terms framework, library, and/or toolkit may or may not be interchangeable. (It’s still under debate.)

But they’re all essentially tools that, surprise surprise, do some of the work for you.

A framework is a pre-built structure that you build upon.

Generally speaking, a framework is a system of working parts created by someone else.

To use the framework, you install it to your own website files. Then you work off of that existing structure, adding onto it to accomplish what you want to do.

Using a framework is like buying a bare bones house that comes with all the structural components (foundation, frame, roof), but isn’t totally complete.

You still need to go in and attach the water and electricity, as well as install cabinets, paint the walls, and decorate.

Some examples of JavaScript front-end frameworks are React, Vue, and Angular.

A library is a set of pre-made tools that you add to your own structure.

In comparison, a library is a collection of individual components that you can take and plug in to your own system.

This is the main difference between frameworks and libraries:

While frameworks are pre-made structures, libraries aren’t a structure in themselves. They provide additional functionality for existing systems.

To continue the home building analogy, you can think of libraries like appliances that you choose to add to your house.

Machines like ovens, showers, and air conditioners all perform a distinct function, but you have to install them into an existing home in order for them to be useful.

One example of a library, using the above categorization, is jQuery.

jQuery is a JavaScript library that doesn’t have any kind of structure in itself, but has over 300 different functions that you can use.

Again, these definitions are not agreed upon by everyone.

React and jQuery categorize themselves as libraries, and Angular and Vue call themselves frameworks.

However for my own personal understanding, it helps to separate the tools into these two general buckets of frameworks (systems) and libraries (tools).

Which brings us to our next point…

The big three in JavaScript frameworks: Angular, React, and Vue

In the early 2010’s there was an explosion of frameworks ending in “.js,” almost a new one every month.

However as we approach 2020, the field has cleared and we’re left with the three big winners: Angular, React, and Vue.

JavaScript frameworks may have started out as a trend, but they’re definitely here to stay.

Angular, React, and Vue are all growing, and JavaScript itself is extremely popular right now– it’s the most used technology for the fifth year running in Stack Overflow’s annual survey.

In addition, Stack Overflow publishes trends of technologies based on how many questions are asked per month.

You can see that Angular has the most volume, and both Angular and React have had pretty steep growth over the past year.

Stack Overflow Trends - JavaScript Frameworks
Source: Stack Overflow – JavaScript Framework Trends

The State of JavaScript survey shows that React leads in the number of developers who have used it and loved it, while Angular doesn’t seem to be quite as interesting or hold as much desire for reuse.

Vue has a lower amount of actual usage, but is leading the pack in terms of being a technology that developers want to try in the future.

So it’s feasible that Vue could become a bigger player in the next couple of years.

However I think all three are sticking around, at least for the next several years.

TL,DR: Which framework should I learn right now?

It depends– if you’re seeking to land a full-time web developer job, I would browse your local job listings to see which framework seems to get mentioned the most.

If you’re just learning right now without that specific end in mind, Vue is a good place to start for beginners. It’s lightweight and documented quite well.

However, I personally wouldn’t only learn Vue. It would be a good idea to eventually add either React or Angular to your toolbelt, depending on your liking.

Further reading


Part 3: Let’s get into the back-end

Which language should you learn first?

There are a ton of back-end languages. Many of them have been around for quite a while, some even before the internet existed!

This can make it difficult to choose which language to start out with. To narrow down your choices, I’d recommend applying the following principles to your decision:

  • Choose a language that is learnable: it has a reasonable learning curve, is well-documented, and/or has a good online support system.
  • Choose a language that is relevant to your eventual career goals.
  • Choose a language that is enjoyable. Learning web development is hard enough– there’s no point in forcing yourself to learn a language that you really don’t like.

One important thing to keep in mind is that you don’t have to learn every language.

In fact, if you’re a beginner I would strongly recommend that you focus on one language first.

All programming languages share some common principles. For example, you can write a “for” loop in JavaScript, PHP, C# and Python.

Once you’ve picked up the fundamental principles of programming in your first language, it will be easier to transfer those concepts into other languages.

I hope this takes off a little pressure from choosing your first back-end language to learn 🙂

Let’s take a look at some of the most popular back-end languages.


Java is a stable language that is very widely used and has been around a long time. It has held the top spot on the TIOBE index since 2001. (TIOBE is a ranking of programming languages by number of searches.)

Source: Ben Putano on

In addition, Java ranked third in Stack Overflow’s rankings of the most commonly used languages and has the second-highest tagged questions on Stack Overflow.

Stack Overflow Developer Survey 2017 - Programming Languages
Source: Most Common Programming Languages, Stack Overflow Developer Survey 2017

Many big tech companies use Java in their websites: Google, YouTube, Facebook, Amazon, and Twitter, among others.

One reason for this is that Java is fast, and can scale up to handle large websites. It’s also a consistent language that allows for easier maintenance for long-term projects.

Twitter was originally built with Ruby on Rails. But in 2015 they needed to be able to support their huge growth, so they switched to Scala, a language that runs on the Java Virtual Machine.

C# (C Sharp)

C# was created by Microsoft to be a competitor to Java. You can see that C# peaked on Stack Overflow’s Trends in 2009 and has been on the decline ever since.

Stack Overflow Back End Language Trends
Source: Stack Overflow trends for back-end languages

But I wouldn’t count C# out just yet.

It’s a powerful, object-oriented language that has the third highest number of Stack Overflow tags. It also came in third in Stackify’s research into the most in-demand languages in Indeed job listings in December of 2017.

C# is used in a wide variety of applications, such as Windows desktop apps and Android programming.

It’s also used a lot in game development, through the Unity game engine. So if you’re interested in Android or game development, C# would be a great option to learn.


As mentioned earlier, JavaScript has been the most commonly used language reported by Stack Overflow users for the past five years.

A lot of this has to do with Node.js, which topped their list of frameworks and libraries used the most in 2017.

Node.js, self-described as a “JavaScript runtime,” is basically JavaScript that runs on the back end.

It was originally meant to serve as a more efficient alternative to the Apache HTTP server.

Since its release in 2009, Node.js has steadily increased in usage, due to its fast, lightweight nature.

Node developers often use the Express framework when building web apps. Express.js is a “minimalist web framework” for Node.js.

By using Node and Express on the back end, and Angular or React on the front end, this means that you can be a full stack JavaScript developer.

This stack, or combination of technologies, is very popular at the moment, especially with startups.


Python first came onto the scene in 1991 and is a frequent “first language” for many programming students.

Due to its readability and use of English keywords, it’s generally considered an easy language to learn.

There are a couple of Python frameworks that you can use:

  • Django (pre-built features, more bells and whistles), and
  • Flask (more minimal and flexible).

Python’s popularity has soared in recent years. As of this writing, it is ranked #4 on the TIOBE index. And in 2017 it was ranked second in the number of pull requests on GitHub, according to their 2017 Year in Review report.

Stack Overflow reported last September that data science, machine learning and academic research are largely the reason for this fast growth.

Even if you’re not a data scientist, being able to work with and manipulate data is becoming a useful skill.

As Alexus Strong of Code Academy writes:

“Python is appealing to those of us in non-technical fields because it puts data analysis […] within arm’s reach.”

If you’re curious about data science or machine learning, Python may be a very good bet for you, as these fields will likely expand in the coming years.


Ruby was first released in 1995. It started getting a lot of attention in the early 2000s when the startup Basecamp invented the framework Ruby on Rails.

Combined with Ruby’s beginner-friendly syntax and readability, Rails made building web apps very quick and easy.

Ruby on Rails grew in popularity and became the framework of choice for startups. (, GitHub, and Shopify all use Ruby on Rails.)

However, Ruby was never one of the heavy hitters. Last year it came in tenth place both in Stack Overflow’s most commonly used language rankings, and the TIOBE index.

In addition, Ruby doesn’t scale very well, leading to those startups eventually switching to other languages when they get really big (like Twitter switching to Java, as we mentioned above).

It may not be topping the rankings, but Ruby could still be a good choice for your first language to learn.

If you’re interested in the startup world or your geographic area has a lot of Ruby jobs, I would consider learning Ruby and Ruby on Rails.


PHP is a language that a lot of people love to hate.

However, despite the number of Quora questions asking if PHP is dead, the fact remains that PHP is the most widely used back-end language today.

Research done by shows that 83% of all websites use PHP. (The next highest language , ASP.NET, comprises only 14%.)

Content management systems (CMSs) are a major reason for the large market share of PHP. The top three CMSs— WordPress, Joomla, and Drupal — are all built with PHP.

WordPress itself has the lion’s share of the CMS market, making up 29.5% of all websites.

If you like working with it, WordPress development may be a good area of focus for customizing websites and building plugins or themes.

In addition to content management systems, PHP has some frameworks that make development easier and quicker. Laravel, a framework that came out in 2011, is currently the most popular one.

Further reading on back-end development

Working with data and databases

Databases can seem intimidating if you’re not familiar with them.

However, if you think about it, you’ve probably worked with and used data in your own life at some point.

If you’ve ever used Excel to organize data, or created a chart to track your goals, then you’ve done a similar (albeit much simpler) function that databases do.

What do I need to learn to use databases?

Fortunately, you don’t need to learn a ton of different languages. The main database language is SQL (pronounced sequel).

SQL (Structured Query Language) was created in the 1970s by IBM, and is used in relational databases.

The relational model is a way of structuring data into rows and columns (think like an Excel spreadsheet).

Each column is designated for a certain kind of data, and it may require that the data is formatted correctly. And each row, or record, contains a unique ID or key in addition to the column, or field, values.

You can see this below:

A simple spreadsheet similar to how data is stored in a table. The Rent column would require numeric values.

The records are then stored in multiple collections called tables. And a collection of tables (among other things) makes up the entire database schema, or structure.

The main types of SQL database systems are:


Even though SQL is the dominant type of database, there is another type: NoSQL (i.e. non-SQL). As the name implies, NoSQL databases are in some ways opposite of traditional SQL ones.

NoSQL is not relational, and doesn’t enforce the same type of structure that SQL does. Instead, you can store any kind of data in a freer, more flexible type of system.

This creates much faster processes and is much better at scaling up for large, complex applications. The downside is that you sacrifice data consistency.

As Craig Buckler of Sitepoint writes:

NoSQL is more flexible and forgiving, but being able to store any data anywhere can lead to consistency issues.

NoSQL rose in popularity in the 2000s due to large tech companies like Facebook and Amazon needing a fast way to manipulate and store data.

MongoDB is the most commonly used NoSQL system. The other top types are Cassandra, Elasticsearch, and Couchbase, according to Hackernoon.


You may run across discussions on whether NoSQL is replacing SQL, or which one is better.

The truth is that both types of databases have their strengths and weaknesses.

Like anything else, the right choice will change depending on the project, and the job.

Personally, I would recommend learning the basics of both SQL and NoSQL.

Further reading

Creating websites on servers

As we mentioned at the beginning, servers are simply computers that store website files and other resources like databases.

In order to have a website be accessible publicly on the internet, it needs to be installed on a server.

Here are some of the things that you’ll have to work with in order to create a live website:

Domain name and SSL certificate

Domain names are the address of the website, like, or

In order to get one, you’ll have to choose one that is available, then purchase it from a domain name registrar like or Google Domains.

These companies register the domains with ICANN (Internet Corporation for Assigned Names and Numbers).

ICANN is a centralized organization that oversees and manages the DNS (domain name system) and IP (internet protocol) areas of the global internet.

In addition to the domain name, you should also get an SSL (Secure Sockets Layer) certificate for your domain. SSL will encrypt the traffic on your website, which will help protect it from cyber attacks.

Web host server space

Once you have your domain name to, you’ll need to purchase server space.

There are a few different levels of web hosting plans:

  • Shared servers: The cheapest option, can range from a few dollars to $12-20 per month. Like it sounds, you share your server space with other website “neighbors.” Upside is the affordability, and downside is slower speeds and possible downtime if you exceed your usage for the month. Popular hosts are SiteGround, Bluehost, and WP Engine.
  • Cloud servers: Cloud hosting is a relatively new option. It consists of a system of a large number of physical servers whose resources are all shared. Each individual “tenant” is then given a virtual server that pulls resources from the collective pool. This setup allows for more flexibility for bandwidth and can scale up very quickly. One company, Digital Ocean, deals exclusively with cloud servers. Pricing depends on your server specs, and can range from a few dollars a month all the way up to almost $1000.
  • VPS (Virtual Private Servers): VPSs are similar to cloud hosting in that each tenant has their own virtual server, and all tenants share one physical server. It’s better than shared hosting because you are allocated your own slice of the server resources. This option is a bit more expensive, between $20-60 per month (according to BlueHost).
  • Dedicated servers: These servers give you one complete physical server all to yourself. As you might imagine, this option is the most powerful but also the most expensive. They often also are managed servers, meaning the company will run maintenance and do other tasks for you. Dedicated hosting will generally run you a couple to a few hundred dollars per month, according to SiteGround pricing.

Server setup and maintenance

Once you have your domain name and server space, you’ll have to set up your site on the server.

This involves directing your domain name to your server’s unique IP address, setting up your website files and database (if necessary), and other configurations.

How much work you have to do will depend on type of server plan you purchased from your web host. The simplest shared plans often come with one-click features that will automatically install WordPress, Drupal, or other site for you.

Other servers, like Digital Ocean, are very minimal and require you to set everything up manually.

Deploying files to your server

You might be wondering how you get files from your own computer up to your server. You can accomplish this by using a protocol, which is basically a method of transporting files or other data to and from a server.

HTTP, the way that your browser loads websites, is also a protocol– HTTP stands for Hypertext Transfer Protocol.

The most simple way is by using a protocol called FTP (File Transfer Protocol). However it’s not recommended to use FTP anymore, because it is not secure (encrypted).

Nowadays most people use more secure protocols FTPS (FTP over SSL) or SFTP (Secure SHell FTP).

To get FTP/SFTP working, you need to create an account on your server. You’ll then connect to the server using the IP address of the server, and a username and password login for authentication.

In order to transfer files over FTP/SFTP you can use programs like Filezilla or CyberDuck. These have a GUI (graphical user interface) that makes it relatively easy to upload and download files to and from your computer and your server.

Deployment tools

As you might image, having to manually upload files to your server every time you make one little code change can get tedious.

In addition, things can get confusing if multiple people are working on the same file and uploading simultaneously.

Fortunately, you can set up deployments that link into your Git repository.

The deployment tool stores your FTP/SFTP settings, and when you push a change in Git to your master branch, for example, the tool will transfer the files for you. That way you don’t need to remember which files you changed, reducing the number of mistakes you make.

For more complex websites that have a team with several people, there are more advanced deployment tools and systems that you can use to make your deployments more structured.

These systems are beyond the scope of this article, but they include practices such as continuous integration.

Further reading


You’ve made it through.

Now before we continue– please note that the following section contains some affiliate links. This means I will receive a small commission from the company if you purchase through the link.

It’s an easy way that you can support this site, at no extra cost to yourself. (I’ve also included non-affiliate links as well, if you’d prefer to use that.)

Epilogue: Recommended learning resources

As I’m sure you know, there are a ton of resources that you can use to learn code.

I’ve included some of the most popular and recommended online tutorials, books, and other resources here.

Complete web development courses

There are a few online courses that cover all or very close to all of the areas of web development.

If you don’t want to jump around and just want to focus on one place to learn everything, I’d recommend one or more of the following:

freeCodeCamp is a non-profit that offers completely free education for aspiring web developers.

Their curriculum is a comprehensive set of courses ranging from front to back end (using Node and Express) and more!

Many people have landed full-time jobs after taking freeCodeCamp. You can also contribute to open source projects via GitHub.

One of the main perks of freeCodeCamp is that it’s very community-centered, with message boards and Facebook groups, so you’re able to get a lot of support as you learn.

You can read some reviews of freeCodeCamp on Quora and Reddit.


Colt Steele’s Web Developer Bootcamp

Colt is a former coding bootcamp instructor who wanted to offer a complete bootcamp for a fraction of the price.

He ended up creating one of the most popular and well-rated web developer courses on Udemy, and with good reason.

His course takes you from the basics through full-stack development (using Node and Express as the back-end), with a lot of content and is updated frequently.

You can read reviews of his course on the Udemy page, as well as on a freeCodeCamp forum post.


Udacity offers both free courses and paid programs called Nanodegrees.

The Nanodegrees build off of the free courses– they are intensive (12 hrs/week) programs where you build portfolio projects and have more community interaction and support.

They’re not cheap, currently $199/mth and it may take you between 6 to 10 hours to complete one.

If you’re interested, here are some reviews of Udacity’s Nanodegree programs on Quora and Hacker News, and Quora answers about the difference between Udacity’s free courses vs Nanodegree.

Other resources

Team Treehouse is a very popular website for learning coding. They don’t have free content, but they use a subscription model.

Treehouse offers tiered monthly plans ($25 or $55/mth currently) and you can take unlimited courses.

You can even pause your membership if you want to take a break for a few months, and resume it later when you’re ready.

Aside from individual courses, they also have structured tracks like Java Web Development or Front End Web Development which guide you through a series of selected courses.



Udemy is one of the largest online learning platforms, and has courses not only in coding, but other professional and hobbyist areas.

You pay for each course individually, and they have frequent sales where course are anywhere from $10-20 each.

Of course, due to the large number of courses and instructors, they vary in quality, so you should do research before buying.

I’d recommend checking ratings and reviews both on the Udemy course page and elsewhere online.

Wes Bos


Wes Bos is a web development instructor who has created quite a few very popular courses.

One course I’d definitely check out is JavaScript30This is his free 30-day vanilla (meaning no frameworks or libraries) JavaScript coding challenge.

He also has premium courses on React, Node, and more advanced JavaScript on his website.

If you’re curious, here are some reviews of his courses on Reddit and the freeCodeCamp forum.

Microsoft Virtual Academy

Microsoft Virtual Academy (MVA) has a collection of free online courses ranging from C# and Python to SQL Server and other areas like game development.

Some of their popular courses are Introduction to Programming with PythonC# Fundamentals and SQL Database Fundamentals courses.

Here are a couple reviews of MVA courses on Reddit and LinkedIn.


SoloLearn has a unique approach to learning coding– you can learn not only from their website, but on their free mobile apps.

Some of their most popular courses are Python, C++, and Java.

They also have a StackOverflow type of message board that is quite active with questions and discussions.

If you’re curious, you can check out some reviews of SoloLearn on Reddit and Quora.


If you enjoy learning from books, or want some on hand as references, here is a short list of books that I thought would be good for beginners.

Some of them are free and available online for you to read, others are traditional paper books.


HTML and CSS by Jon Duckett 

JavaScript and JQuery by Jon Duckett 

Jon Duckett’s books are quite possibly the most popular books for beginner web developers.

They aren’t just plain textbooks, but are beautifully-designed books that use photos and illustrations to teach coding concepts.


The Front-End Developer Handbook by Cody Lindley

The Front-End Developer Handbook is a free online book from Frontend Masters and written by Cody Lindley.

It’s updated yearly and you can think of it as a “state of front-end web development” guide with new information, resources, trends, and tools related to the field.


Eloquent JavaScript by Marijn Haverbeke

Eloquent JavaScript is a beginner’s book about programming that focuses on JavaScript.

You can read it for free online on the website, which has a console tool where you can write and test the code as you read.

If you want a physical copy, the book is also available on Amazon.

Closing thoughts

Is it possible to teach yourself web development with online resources? I believe the answer is yes.

However it will not be easy at all. Learning and mastering anything is difficult, and learning to code is no different.

With that in mind, if you do want to go down that path, here is some advice:

Stay focused.

When you’re learning on your own, it can be very tempting to jump around from one tutorial to another. Especially when you start hitting roadblocks.

But this can result in learning very superficially, when you actually need to develop a deeper knowledge of skills.

Try to stick with the course/book that you’re working on, unless you really don’t like it.

Fighting through the roadblocks and seemingly impossible problems will help you develop a fuller understanding.

Any course is simply the first step in your learning journey.

Just taking a tutorial or course doesn’t mean that you’ll be a master by the time you finish.

You’ll have to learn and practice many times before you really truly “get” it.

Try going through a tutorial a second time, or even learning the same material with a different course or book.

You’ll see how different people explain the same concept, and it may help the knowledge to stick in your brain better.

And, of course, there is no substitute for practical experience.

As you learn, try to practice the skills you’re learning about on your own.

Build random projects, make a website for free for a friend or a non-profit. The more times you solve a problem, the more you will understand it.

Thanks for reading!

I hope you found this article helpful– please leave a comment with your thoughts, and any feedback is welcome.

If you’re learning web development right now, I’d also love to know what your ultimate goal is, or any problems you’ve encountered while learning.

Lastly, if you liked this article please share it on Facebook or Twitter so others can find it too!

Want to learn how to build a website?

I'm making a course that will teach you how to build a real-world responsive website from scratch!

Learn more


Apr 8, 2018 at 12:52 pm


Dec 31, 2019 at 9:33 pm

Wonderful site. Lots of helpful information here. I am sending it
to some friends ans additionally sharing in delicious. And of course,
thanks to your effort!

May 2, 2018 at 3:31 am

a very nice advice to becoming a full stack web developer. Thumb up for you!

Jessica Chan
May 2, 2018 at 8:17 am

Awesome, hope this helps you out!

May 2, 2018 at 5:06 am

/* clear…concise…logical…informative…thank you*/

Jessica Chan
May 2, 2018 at 8:17 am

haha thanks for reading!

May 3, 2018 at 9:40 pm

Brilliant write-up I’m new to coding(just started a month ago) and I followed up until the layout part 😪..hasn’t been easy wrapping my head around that one..great review on job ducketts book also, I’m deeply in love with it.

Jessica Chan
May 3, 2018 at 9:50 pm

Hey Laurent, glad you enjoyed the article! The Jon Duckett book is a huge favorite :) Good luck in your coding journey!

May 17, 2018 at 4:05 am

I only wish I had found this article sooner.. Great job, keep it up!

Jessica Chan
May 17, 2018 at 8:56 am

Hey Alexander, thanks for reading!

May 18, 2018 at 12:01 pm

I've been thinking and looking for beginner’s guide everywhere. I think I've found the right way where and how to start. Thanks a lot !!!!!!!!!

Jessica Chan
May 28, 2018 at 4:13 pm

Great, I'm glad you found this guide helpful!

Grand Code
May 22, 2018 at 12:16 am

I understand very well. that's a great article.thank you very much!

Jessica Chan
May 28, 2018 at 4:14 pm

Glad you liked it, thanks for reading!

Ravindra Desai
May 22, 2018 at 3:47 am

This was a great guide for beginners like me..but there is a told to make free websites for a friend for practice but , how can i do that? in short how can i build free websites and practice my learnt code?

Jessica Chan
May 28, 2018 at 4:15 pm

Hey, thanks for reading. You can check out my other post about how to layout and design a website for information on how you can create a simple website for your portfolio.

Abbas Akkasi
Jul 6, 2018 at 3:49 am

Thank you for the nice explanation. I only wonder if the learning process must be in parallel or sequential? (i.e. Back-End after Front-End or simultaneously)

Jessica Chan
Jul 6, 2018 at 10:36 am

Hi Abbas, thanks for reading! Personally I would start with front-end first. Then once you have the basics of that down, you can go into back-end development. It is certainly possible to learn both at the same time, but if you're starting out I think it's better to keep it sequential.

Shubham rajoriya
Jul 9, 2018 at 11:35 am

Very helpful....i want to make career in web designing and developing suggest me some ideas

Jessica Chan
Jul 9, 2018 at 12:33 pm

It depends on where you are starting from. One place I recommend to learn for free is -- they are a non-profit that runs an online bootcamp!

Jul 21, 2018 at 4:59 am

Jessica, I am thankful that there are people willing to share their knowledge with us. You've put up an amazing tutorial, simple and concise but which provides a good skeleton on the infinite world of Web Development; the resources are well selected and updated...

Good luck in everything you do!

Jessica Chan
Jul 21, 2018 at 12:52 pm

Hi Faalen, thanks so much for your nice note! I'm very happy that you found the guide helpful. Good luck to you in your learning!

Hanna Frenk
Jul 24, 2018 at 5:09 am

Hi Jessica, I really appreciate your work on this article for beginners who wants to build their career in web development. You have put up a very useful article with tiny details. Thank you for sharing your knowledge.

Jessica Chan
Jul 25, 2018 at 9:17 am

Thanks Hanna, glad that you enjoyed reading this article!

Teerapat Prommarak
Aug 16, 2018 at 10:56 pm

This is really great article. Cheers!

Jessica Chan
Sep 7, 2018 at 11:35 pm

Thank you!

kyujeong lee
Aug 19, 2018 at 9:46 pm

Wow!!! perfect through covering of current Web development and trends, I have background in 4GL(PowerBuilder) programming with database. it was a long time back and have been in accounting field. I have interested in going back to programming world however it has been so hard to find material to get the feel of current programming environment and trend. This material covers so precise and trend in current programming. Will start catching up to speed to the place I would like to me.
Thanks again.

Jessica Chan
Sep 7, 2018 at 11:35 pm

Awesome, good luck getting back into programming!

Ravi Anand
Aug 21, 2018 at 4:51 pm

You banged right on the target! Kudos for that. Before reading this article, i was perplexed as to which frameworks, libraries to know and so on. But i feel i got my answer, and in a very helpful and concise way. Would love to read more of your articles..
Thank you.

Jessica Chan
Sep 7, 2018 at 11:35 pm

Thank you so much for your kind words.

Daniel Adeoye Adeodu
Aug 25, 2018 at 2:19 pm

Highly informative and educative....

Jessica Chan
Sep 7, 2018 at 11:34 pm


Aug 26, 2018 at 2:26 pm

I read a lot online, but never comment. Coming from a different CS background wanting to start a side web development project I have to say that the article was very well written, simple and elegant. Well done Jessica.

Jessica Chan
Sep 7, 2018 at 11:34 pm

Thanks so much! I'm glad you liked it :)

mohammed ismail
Sep 19, 2018 at 11:40 am

It was a great great pleasure in reading your guide for the website development. I was curious for web development and dont know where to start, really spent huge amount of time more than a month at least 4 hours a day to learn website development. Unfortunately didnt worked out. But your guide is of great help for me. Wish you good luck.

Jessica Chan
Sep 21, 2018 at 10:57 am

Hi Mohammed, thanks so much for your comment! I'm glad you found the guide helpful. Good luck in your learning process!

Curtly Critchlow
Oct 1, 2018 at 2:50 pm

Lovely article, Where can I find a one-stop shop to learn Vue.Js, Django and MySQL. There's bits and pieces all over the internet but I want a path that's teaching me all of the above. Thanks in advance for a favourable reply.

Jessica Chan
Oct 1, 2018 at 2:55 pm

Thanks for reading! You can find full-stack Django courses on Udemy, which will include MySQL as well. Vue.js is a front-end JS framework that can really be bolted on to any back-end, so you will have to take a separate Vue.js course. (There isn't one single course that combined Django with Vue) Check out they have great tutorials. Hope this helps!

Dipanshu Sabharwal
Oct 3, 2018 at 9:57 pm

If only I had found this article sooner. Great insights.

Jessica Chan
Oct 3, 2018 at 11:27 pm

Thank you for reading! I'm glad you liked it.

Oct 31, 2018 at 2:16 am

Jessica, thank you so much for this great job. This is splendid. I had started learning to code sometime back and even programming in Java but I abandoned it later. I have l learnt a lot from this book you have written for a beginner like me.

Thank you. God will bless you in all your endeavours.

Jessica Chan
Oct 31, 2018 at 7:17 pm

Thanks for reading! And good luck in your learning 😊

Nov 4, 2018 at 8:54 am

Loved it. Thanks..😀👍👍

Saeed Talib
Nov 7, 2018 at 3:23 am

Great work. i appreciate that and giving you rewards by daily visiting your site and commenting on it. this is little contribution to your account. Please motivate others as well.

Jogi Vyas
Nov 12, 2018 at 9:38 pm

It has been an engaging article for newbies like myself, Jessica! I like your honesty as well as hints on encouragement. Many thanks!

Nov 14, 2018 at 1:31 pm

Thank you very much, I learned a lot from your article :)

Nov 16, 2018 at 2:34 am

thank you very much, it was very helpfull article

Jessica Chan
Nov 29, 2018 at 5:50 pm

Thanks for reading!

Gurpreet Singh
Nov 18, 2018 at 4:57 pm

Really impressive detailed content.
I was so confused with these stuffs.
All the doubts are now very well cleared in my mind.
Thanks alot 😊

Jessica Chan
Nov 29, 2018 at 5:50 pm

Awesome! Glad to hear that :)

Nov 20, 2018 at 6:38 am

What a great, non-tchnical summary for beginners.

Jessica Chan
Nov 29, 2018 at 5:46 pm

Thanks for reading!

Nov 22, 2018 at 10:18 am

Thank you so much for this amazing resource! It's exactly what I was looking for and enables me to set up a realistic plan to move forward.

Jessica Chan
Nov 29, 2018 at 5:45 pm

You're welcome! Good luck with your learning process!

Nov 26, 2018 at 10:32 am

hit the nail on head, very informative. self studying and working on being a front-end developer.

Jessica Chan
Nov 29, 2018 at 5:45 pm

Thanks for reading! Glad you found it helpful!

Dec 1, 2018 at 12:08 pm

Very nice article, thumbs up. You summarised web development world in very easy to understand language, including both back end and front end. It will help people and further reading are also going to make a difference. Thanks. Keep it up.

Jessica Chan
Dec 12, 2018 at 12:15 pm

Glad you found this useful! Thanks for reading :)

Dec 7, 2018 at 8:43 am

It has been an engaging article for newbies like myself, Jessica! I like your honesty as well as hints on encouragement. Many thanks!

Jessica Chan
Dec 12, 2018 at 12:12 pm

Awesome, thanks for reading!

Dec 8, 2018 at 10:59 am

Great Article...Very useful. Thanks a ton !!!

Jessica Chan
Dec 12, 2018 at 12:11 pm

Glad you liked it!

Dec 25, 2018 at 2:52 pm

Keep the good work up!

Jessica Chan
Jan 9, 2019 at 12:00 pm


Dec 28, 2018 at 5:01 pm

Thanks for the article... Really do enjoy it...pls i will like to know website that i can learn web development very fast am a learner.....thanks

Jan 13, 2019 at 11:34 am

thank you so much for creating this article and for making it freely available to us!

Jessica Chan
Jan 29, 2019 at 1:15 pm

You're welcome! Best of luck :)

Jan 27, 2019 at 7:38 pm

Great article!! These tips will help me a lot!!! Thanks

Jessica Chan
Jan 29, 2019 at 1:12 pm

I'm so glad to hear that!

Jan 27, 2019 at 7:42 pm

Thanks for the article!!!

Jessica Chan
Jan 29, 2019 at 1:12 pm

Thank you for reading!

Jan 30, 2019 at 6:45 am

I cold not find any article as useful as yours. well researched, well written, well presented. you managed to answer all questions this noob had.

Thank You.

Jessica Chan
Jan 31, 2019 at 5:07 pm

I'm so glad you found this helpful!

Jan 31, 2019 at 7:30 am

I wanted an in-depth beginners guide - and I found it here. Brilliant writing!

Jessica Chan
Jan 31, 2019 at 5:06 pm

I'm glad you found this helpful!

Feb 2, 2019 at 11:25 am

It was a 2019 guide for me.
Thank you!!!

Jessica Chan
Feb 4, 2019 at 10:12 pm

I'm so glad you found it helpful!

Raven Blackstone
Apr 12, 2019 at 6:44 pm

Hi Jessica! I cannot thank you enough. This is an amazingly comprehensive and truly encouraging document. The links to additional resources are also extremely helpful. Your range of knowledge and your generosity in sharing it with us astounds me. Truly appreciate it. Stay well.

Jessica Chan
Apr 24, 2019 at 2:16 pm

Thanks so much Raven!

Shubham Rajoriya
Apr 18, 2019 at 2:29 am

Thanks for the article , Well Written, Well researched

May 28, 2019 at 4:19 am

Hey , Thanks for this, article was helpful,
i just want to ask that I recently start coding after Html css bootstrap , I want to seek Vue js directly , can i do that?
please guide

Jessica Chan
May 28, 2019 at 10:14 am

I would learn some basic JavaScript before starting on one of the JavaScript frameworks like Vue. Best of luck!

Aisha sharma
May 28, 2019 at 5:01 am

Wonderful work

May 29, 2019 at 2:52 am

Very nice and brief explanation. I love it, Thank you.😊

May 29, 2019 at 7:48 pm

Hi Jessica, I would like you to know that this article is incredibly helpful. Thank you for taking the time out to write this so that new developers can learn how to learn:) God bless and wishing you great success in everything;)

Jun 12, 2019 at 6:51 am

Hey Jesica, I have been looking for an article like this for so long and I can not tell you how much your's has helped me. I now have a roadmap on what I need to do to become a web developer.

Thank you so much and good luck with everything.

Jessica Chan
Jun 17, 2019 at 9:07 pm

Hi Nonnie, you're very welcome! Glad that this was helpful for you :)

Jun 17, 2019 at 3:28 am

Thank you, your words are truly inspiring. I'm now on Angular

Web Development London
Jun 28, 2019 at 5:47 am

Thanks for sharing this.

Jul 19, 2019 at 3:27 pm

You are the inspiring in Web Development 2019 World Wide.

Jessica Chan
Aug 20, 2019 at 9:37 am

Thank you :)

Jul 25, 2019 at 11:35 pm

I have never indulged myself in a long read as this ever since I started browsing for information on web development.... I guess I was able to give up my night sleep up to this wee hours simply because your article was very captivating, insightful and concise and your choice of words were superb.
I just understood that Webdev. is voluminous and will take long hours or years of steadfast learning to master the full stack. My question is how best can one learn? having a physical tutor? or taking online courses?

thanks for the super article and knowing that this work was put together by a SHE made it all the more thrilling.... this is the best I have ever seen... way go girl.

Jessica Chan
Aug 20, 2019 at 9:37 am

Thanks so much for your kind words! There are many different ways to learn web development-- I recommend trying a few different methods and seeing which works best for you. Best of luck!

Michael Bankole
Jul 29, 2019 at 5:45 am

Thanks for being so generous with your writings. You are such a precious gift.

Jessica Chan
Aug 20, 2019 at 9:35 am

Thanks for your kind words!

Nov 6, 2019 at 12:54 am

Great article , step by step development . Now , I m bit clear how to move ahead . thanks

Jessica Chan
Nov 25, 2019 at 9:47 pm

I'm glad that could help you!

Saumyabrata Bhattacharya
Nov 9, 2019 at 10:04 am

It was a great pleasure reading all the lines of your writings. It helps me a lot. Thank you so much.

Jessica Chan
Nov 25, 2019 at 9:47 pm

I'm so glad to hear it :)

James Kevin
Dec 12, 2019 at 8:02 am

This is a great article. Detailed and easy to follow as a beginner. I love it.

Dec 20, 2019 at 8:09 pm

Very nice article, and mostly open my mind with huge gain about what web developer is.

Thank you very much.

Jan 4, 2020 at 4:23 am

I found the perfect resources to start learning web development. Thank you!

Sami Ahmed
Jan 16, 2020 at 9:06 am

m just here as a new learner. I found a lot of articles to learning skills better but i can't found. Today, Suddenly i open my search engine and again find article and m so so so happy to see this website. Thank you so so much. This website is very helpful for beginners. Thank you so much. Keep it up

Fatima Ezzahra
Jan 17, 2020 at 6:07 am

Thank you so much for sharing this.

Jan 29, 2020 at 2:43 am

Very informative web design tutorial article for the beginners. Keep sharing the knowledge.


Write a Comment