Steps to Becoming a Web Developer

By this point you should have a basic understanding of what a website is and how it is delivered.

The next step is to learn the more detailed information you need to know to become a web developer.

First, review the two primary focuses of web development and think about which one interests you the most.

You won’t necessarily have to be a “front-end” or “back-end” developer, but many jobs are segmented into those roles so it is good to think about which role you’d prefer.

Your second step to becoming a web developer is to Build Your First Website.

Become a Front-End Web Developer

Front-end developer is the most popular term for a web developer who focuses on code which is run by the web browser.

Front-end developers are also referred to as client-side developers.Positions seeking the general job title of Web Developer are often looking for front-end developers who have a basic understanding of one server-side language.

People who make good front-end web developers usually have one or more these traits:

  • Thorough
  • Empathetic
  • Strong communication skills
  • Good at working with diverse groups of people
  • Interested in design and aesthetics
  • The ability to visualize structure in a concept

Here are some benefits which being a front-end web developer has over being a back-end developer:

  • More jobs available than back-end developers.
  • You can be ready to pursue a career faster than a back-end developer, and your portfolio is easier to build.
  • The ability to work with and learn from different skilled personnel on a daily basis, such as designers and copywriters.
  • You get to work on the finished product which the end users will see.

If you decide to focus on front-end web development you need to include these steps in your plan to becoming a web developer.

Step 1: Learn HTML and CSS in Detail

The average front-end web developer spends their day working in those two languages.

We suggest you use a free resource for initial HTML training, and then learn and work with every HTML element available in a test environment.

One of the best resources is the HTML developer guide from Mozilla Developer Network. Go through each page of the tutorial. More resources for initial HTML training are available on our HTML page.

After you finish the HTML tutorial,  test every existing HTML element on a local HTML test page to get an understanding of what each element does.

Follow the same pattern for learning CSS. We suggest using the Getting Started with CSS Guide by Mozilla Developer Network to learn CSS. More resources for initial CSS training are available on our CSS page.

After you finish the CSS tutorial, test the available CSS properties by targeting a few HTML tags on your test page and applying a variety of CSS properties to each.

Step 2: Learn How to Build and Structure a Webpage

Once you know HTML and CSS you need to know how to combine them to create the webpage layout you desire.

A great way to do this is to get a good introductory book on webpage construction and follow along with the first few chapters.

The book will walk you through basic page layouts, how HTML elements affect each other, and how CSS can be used to move and shape the elements of the page.

Here are some good books on the subject:

If a book is not your favorite way to learn, here are some other resources for learning to build you first webpage:

Step 3: Learn Basic JavaScript

Most front-end development positions will require you to know a basic level of JavaScript.

As you progress in your career you will be expected to become an expert in JavaScript, but to get your first job you only need to be able to create simple JavaScript functions.

Again, the best way to do this is to get a good introductory book on JavaScript and follow along with the first few chapters.

Once you learn how JavaScript works and how to build simple JavaScript functions you will be ready for your first job.

Some good books on JavaScript include:

Videos for learning JavaScript:

Become a Back-End Web Developer

Back-end developer is the most popular term for a web developer who focuses on server-side scripting, databases, and the architecture of a website’s files and pages.

People who make good back-end web developers usually have one or more these traits:

  • Analytical
  • Detail oriented
  • Strong math skills
  • Good at working alone or in very small groups
  • Self-motivated
  • Good at long term planning
  • The ability to visualize concepts

Here are some benefits which being a back-end web developer has over being a front-end developer:

  • Better pay than front-end developers.
  • Other people at work are less likely to understand what you do. That gives you more freedom to do your job as you see fit.
  • You can move your career into operating system based software development in the future. It is a very similar field which may offer you different challenges.

If you decide to focus on back-end web development you need to include these steps on your plan to becoming a web developer.

Step 1: Choose One Server-side Language and Learn it Well

To start, we suggest you choose between PHP and Ruby on Rails for these reasons:

  • Both languages are not usually taught at universities, so you have less competition.
  • Both languages are free to install and use on your server. That is not true with every server-side language.
  • PHP is a simpler language to learn than Ruby on Rails, and there are more PHP positions available than there are for Ruby on Rails.
  • Ruby on Rails is more complex than PHP, but positions for Ruby on Rails pay better. It is also a newer language, so you will have less competition than you would for PHP jobs.

A great way to learn a programming language is to get a good introductory book on the language and follow along with the first few chapters.

The book will walk you through setting up your system and building a small and a medium sized site using the language you choose.

Here are some good PHP books:

And some good Ruby on Rails introductory books:

Another great learning tool for getting started learning a programing language is a video or video course.

Here are some good introductory videos on PHP:

And some Ruby on Rails introductory videos:

Step 2: Learn About Website Architecture

Being able to create a website with a good structure is as important as being able to write code.

You will need to learn from a few resources to get a good understanding of the principles and best practices of website architecture. We’ve listed out a mix of resources below.

Books:

Videos & Video Courses:

Step 3: Learn About Databases

Databases are usually under the control of back-end developers.

You will need to know what the popular database formats are and have some experience working with at least 2 of them before you should start seeking out a job. MySQL is probably the most popular database management software in use. We suggest you learn and work with MySQL along with at least one other database type.

You will need to seek out a few sources to really understand how databases work and what systems are popular. We’ve pick some resources below to get you started.

Books:

Videos & Video Courses:

Build Your First Website

This is focused on building a simple website. When you are able to complete this section you will be a basic level web developer.

This section provides you with general steps and resources to help you finish those steps. It is not a step by step process. The idea is for you to learn the details as you complete each step.

For a truly detailed guide to building your first website take a look at this guide from Shay Howe.

Step 1: Setup a Web Host and a Web Domain

You need to establish an account with a low cost web host and purchase your first web domain.

We suggest you make your first domain a URL you can use for your portfolio later. Something like your full name or the potential name of your web development freelance business.

Examples:

  • kevinthomas.com
  • southsidedevelopment.com
  • thewebcowboy.com

If you go ahead and set up your domain and URL now, you will be ready for the future step of setting up your portfolio for finding your first job.

Here are some low cost web hosting companies you can use to host your first site. The hosting companies have all the information you need to setup your first server and domain:

Step 2: Upload a Test File

Do not use any website building tool from the web host you choose. Web Developers hand write their code and upload it themselves.

After you set up your web server through your host, you should only interact with up by upload files via FTP. Use the help section of your hosting company’s website to determine the FTP settings for your site.

After you determine those settings, download the free FTP program FileZilla so you can upload files to your server on your webhost.

Use the existing application Notepad in Windows or TextEdit on Mac to create a simple file named index.html. Inside that file type and save the text: Hello World.

Use FileZilla to upload index.html to the root folder of your web server. You can use the help section of your web host to determine where to find the root folder.

You will know you are successful when you can go to your URL in a web browser and see Hello World.

Step 3: Build and Upload Your First Site

Now you have a web server set up and you know how to upload files to it.

The next step is to build a small website and upload it to your server. There are some simple things your site must have for you to consider this task done:

  • It must have at least three webpages.
  • There must be a navigation menu which is on every page.
    • You could use PHP includes to have the same menu on every page.
  • Each page must use HTML & CSS.
  • One page must use JavaScript.

When building your first site use the resources found in Learn the Details to guide you.

The book HTML and CSS: Design and Build Websites is a great all-in-one book for starting website development.

The W3C Community Pages are some of the best online resources for many areas of web development.

And always remember that Google is your friend. There are numerous forums dedicated to web development, so simply putting a question you have in Google will often result in a direct answer.

The content of the site is not important. One technique people use when building example sites is to use Lorem Ipsum in place of real text.

Lorem Ipsum is Latin text which is meaningless to most people, but can easily be copy and pasted to your site to take up space. It means you do not have to spend time writing text.

Lorem Ipsum text can be found here: http://www.lipsum.com/feed/html

After you have built and uploaded your first website you are officially a basic web developer. You are not quite ready to jump in the job market yet, but you are past the halfway mark to your new career.

The next big step is to build your portfolio. The task of building your first site exposed you to all aspects of web development and in the next section we will help you hone your skills and get ready to make money.