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:

Websites are basically a bunch of files stored on computers called servers.

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.

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.

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

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.

Example of syntax highlighting in VS Code

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 ?

Atom: Created 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 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.

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 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:

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 Statcounter.com, 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.

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.

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

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), Bower, or Yarn comes 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.

Bower was one of the first package manager tools, but it’s officially obsolete– the creators of Bower.io now recommend using Yarn.

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.

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.

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

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

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.

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.

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 Google.com, Wikipedia.org or Dartmouth.edu.

In order to get one, you’ll have to choose one that is available, then purchase it from a domain name registrar like Namecheap.com 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 AwesomeStupendousAmazingSite.com, 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.

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

Side note: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 imagine, 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.

Congrats!!

You’ve made it through!

Now before we continue to the resource list, 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 writing these types of articles, 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:

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 will help you develop a fuller understanding of the material.

And the more seemingly impossible problems you tackle, the more you’ll get used to facing challenges.

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.

Our mission: to help people learn to code for free. We accomplish this by creating thousands of
videos, articles, and interactive coding lessons - all freely available to the public. We also have
thousands of freeCodeCamp study groups around the world.

Donations to freeCodeCamp go toward our education initiatives, and help pay for servers, services,
and staff.