Learn to Code from scratch

A Web Development Roadmap for Beginners

As the internet has become a vital part of people's daily lives, web development has become one of the most in-demand skills. Companies today are looking for web developers to build and maintain websites to meet the wants and needs of their online customers.

You can learn how to code for the web without going through the traditional college degree route. There are great free resources online. We've gathered the best ones to guide you on your journey.


The Best Mindset for Learning

The best way to learn web development is by building something that interests you. As you develop coding skills, you will understand what is possible and that will inspire you to create your own project. By applying your skills on an interesting project, you will enjoy the learning process more and learn at a faster pace. So start working on your own project as soon as possible while continuing to gain more skills by following this roadmap.

Immerse Yourself

Learning how to code is similar to learning a new language. The best language students don't just take courses, they also immerse themselves in the new culture by spending a lot of time with native speakers.


Make It Personal

In the same way, we encourage you to immerse yourself in web development by building a site that showcases your creativity and personality. Remember, if it's interesting to you, it will be easier and faster to learn.

html5 and css3

Chapter 1: HTML and CSS

HTML and CSS are the foundational languages of the internet. Every web page is written in HTML. It tells the web browser how to organize and structure the web page. CSS controls the visual layout of websites. These resources cover the basics of HTML and CSS so you can build your first web page.

Interactive HTML and CSS Tutorials  »»»

These interactive tutorials from Codecademy cover the basic building blocks of web development. You'll use HTML to create a social networking profile and CSS to design buttons and a resume.

A Beginner's Guide to HTML & CSS  »»»

Shay Howe's guide to HTML and CSS is one of the best because of his clear writing style. Also, he uses great examples to help you understand the common terms, syntax, and principles.

30 Days to Learn HTML & CSS  »»»

If you like to learn with video, you will enjoy these screencasts by Tuts+ Premium. Taught by veteran web developer Jeffrey Way, the video course includes a section about finding a code editor, a very important tool for writing code.

Quick HTML Tutorials  »»»

HTML Dog is a favorite site of many beginning web developers because it teaches you the best practices. These tutorials use HTML5, the latest version of HTML with new, exciting features.

Easy-To-Follow CSS Tutorials  »»»

Here are the CSS Tutorials of HTML Dog. Along with the fundamentals, they cover new aspects of CSS3, the latest standard for CSS.

HTML5 & CSS3 Fundamentals: Development for Absolute Beginners  »»»

This video course is sponsored by the Microsoft Developer Network. You can download the entire source code to follow along with the videos.


Chapter 2: PHP

To manipulate data on your website, you need to learn a programming language. HTML and CSS are not programming languages so they are insufficient for the task. We recommend starting with PHP. For beginners, PHP is a good language to start with because it has a low learning curve and it is easy to setup. These resources will help you learn the fundamentals so you can add more functionality to your website.

Learn PHP Step by Step  »»»

This PHP course from W3Schools teaches you the PHP syntax of common programming activities. We recommend just going through the basic chapters. You can complete the advanced chapters later after you gain a few more weeks of experience. Also, skip the installation section because you'll learn how to do that in a video course below. Installation can be tricky and it's easier to learn with video.

Interactive PHP Tutorials  »»»

Codecademy's PHP tutorials are great resources for learning PHP because of their interactive nature. Note that if a tutorial is unresponsive when you submit your answer, you may have to reload the page. Occasionally the site gets stuck in an infinite loop.

PHP Basics Video Course  »»»

This series of screencasts by phpacademy covers many useful PHP concepts. One clarification: the order to do the videos is by rows not columns. So the first video is "Setting Up a Web Server," the second video is "Echo/Print" (not "If Statements"), the third video is "Variables," and then the fourth video is "If Statements."

PHP 101: PHP For the Absolute Beginner  »»»

Zend Developer Zone has helped many web developers get started with this PHP guide for beginners. You'll learn importance concepts such as dealing with external files, keeping track of visitors, and securing your website.

25 Short Video Tutorials about PHP  »»»

To close this chapter, here are some more video tutorials. They will mostly be review because you've already learned most of the syntax and principles in the videos. But that's okay because repetition helps you remember what you learned.


Chapter 3: MySQL

MySQL is a free, popular database used by sites such as Wikipedia and YouTube. A database stores data like usernames and email addresses for future use. Here are some great resources for learning how to code in MySQL.

MySQL for Absolute Beginners  »»»

In this tutorial, you'll learn how to install, set up, and use MySQL on your computer. Also, you'll learn more about databases and why they are useful for building websites.

MySQL by Examples for Beginners  »»»

Created by Chua Hock Chuan, an associate professor at Nanyang Technological University, this guide contains many examples that illustrate the features of MySQL. At the end of the guide, you'll apply what you learned in a real-life situation, building a database system for a small car rental company.

SQLZOO: Interactive MySQL Tutorials  »»»

These tutorials from SQLZOO will help you internalize the syntax and concepts from the above links. You'll tackle problems that are solved by writing MySQL queries.

Video Tutorials about Combining MySQL with PHP  »»»

It's time to combine MySQL with PHP! These videos show you how to connect to a MySQL database with PHP. Also, you'll learn how to install and use phpMyAdmin, a program for managing your database tables. Skip the fifth video because it is out of date.

Basic Database Theory and MySQL Tutorials  »»»

KillerPHP has practical articles and videos to help you to learn database theory and MySQL. They also go over using MySQL with PHP and phpMyAdmin.

Fundamentals of MySQL + PHP  »»»

To review, we recommend going through this short MySQL/PHP tutorial by W3Schools. You'll review the common MySQL statements and their proper integration in PHP.

PHP Frameworks

Chapter 4: PHP Frameworks

A framework is a tool that helps you to build complex web applications faster by automating common tasks. Also, it provides an organized structure for your code to make it easier to maintain. Frameworks are built using object-oriented programming. Understanding this type of programming is essential to fully leverage the power of frameworks. This chapter has links to object-oriented programming resources and top PHP frameworks.

Object-Oriented PHP for Beginners  »»»

This long article from Nettuts+ is a great intro for learning the benefits of object-oriented programming. It has a lot of code examples to help you comprehend the basic principles.

Learn Object-Oriented PHP Step by Step  »»»

KillerPHP's object-oriented programming tutorial for beginners includes supplementary videos and a zip file with the source code. You'll learn how to use object-oriented programming to write less code and make your website easier to maintain.

CodeIgniter: Lightweight, Easy-To-Learn Framework  »»»

If you have no experience with frameworks, CodeIgniter is a good one to start with. It may not have all the features of more powerful frameworks but it is easier to learn. CodeIgniter has great documentation and a simple installation process.

Yii: Structured, Feature-Rich Framework  »»»

Yii has a steeper learning curve than CodeIgniter but it has more features. Also, Yii imposes a rigid structure, which some developers find helpful because it keeps your code very organized. However, others find the structure too stifling.

Laravel: The New Framework on the Block  »»»

Lavarel is a new framework but it has already attracted many fans. It is arguably the most cutting edge PHP framework. Laravel has a wide range of features that web developers find useful including authentication and testing. It takes advantage of newer versions of PHP, has good documentation and a fast growing user base, and is relatively easy to install and set up.

JavaScript and jQuery

Chapter 5: JavaScript and jQuery

JavaScript adds interactivity to your website and jQuery is a JavaScript library with shortcut commands of useful JavaScript tasks. These tutorials and guides will help you understand how to use JavaScript and jQuery to improve your website.

Interactive JavaScript Tutorials  »»»

Get a good start with JavaScript by going through these Codecademy tutorials. JavaScript uses similar programming syntax as PHP so you should be able to complete these tutorials quickly.

Easy-To-Follow JavaScript Tutorials  »»»

Along with HTML and CSS, HTML Dog also has guides for JavaScript. You'll learn about basic JavaScript commands and get introduced to jQuery.

JavaScript Fundamentals: Development for Absolute Beginners  »»»

These video tutorials from the Microsoft Developer Network will give you a great foundation for understanding how to use JavaScript. You'll also learn some jQuery. There are over seven hours of video training so the series covers a lot of material.

Try jQuery: Learn the Basic Building Blocks  »»»

Code School's Try jQuery course is a fun, interactive way to learn jQuery. You'll watch videos to learn particular concepts and then apply what you learn by writing code in the browser.

30 Days to Learn jQuery  »»»

This video course from Tuts+ Premium is an excellent introduction to jQuery. The course even has a section about using jQuery and PHP together to improve the usability of your website.

Interactive jQuery Tutorials  »»»

Here is Codecademy's jQuery course. It teaches you how to use jQuery to move HTML elements around, create animations, and increase the interactivity of your site with visitor actions like mouse clicks.


Chapter 6: Git

By now, you've probably realized that building a website with many useful features requires a lot of code. It's easy to get lost in the complexity of all those lines of code and do something that causes your website to malfunction. Git is free software that allows you to create regular backups of your code. If you change something and your website doesn't work anymore, Git can go back to a version of your code that did work. Learn how to use this great software by going through the links below.

Easy Version Control with Git  »»»

Learn the fundamentals of Git with this article from Nettuts+. It goes over the Git commands for backing up your code as well as other useful commands for activities like merging code and configuring settings.

Try Git: Quick Intro Tutorial  »»»

This interactive tutorial from Code School lets you try out Git commands on your browser to see how they work. You'll also learn basic commands for storing your code remotely on GitHub.

Understanding Git Conceptually  »»»

This tutorial looks at Git from a conceptual perspective. You'll get a deeper understanding of what actually happens "under the hood" when you use Git commands.

Git Tutorials with Helpful Diagrams  »»»

Atlassian's Git tutorials are beneficial to web developers because they include diagrams that show the flow of information within Git.

Visual Git Reference Guide  »»»

Here is another tutorial with diagrams. It takes a different visual approach from Atlassian's tutorials above. You may find it more helpful, or at the very least, it should be a good resource for reviewing what you learned.

Bitbucket: Unlimited Private Code Repositories  »»»

Bitbucket is a great site because it allows you to store your code repositories from Git remotely and privately. Also, it's free whereas GitHub charges you.


Chapter 7: Ruby

Ruby is the programming language behind one of the best frameworks, Ruby on Rails. However, the learning curve for Ruby and Ruby on Rails is pretty steep. By going through the previous chapters first, you gained a strong foundation for overcoming the learning curve. Here are some links to get you started programming in Ruby.

TryRuby: Quick Intro Tutorial  »»»

TryRuby is a fun, little tutorial from Code School that shows you basic Ruby syntax. You'll learn how Ruby deals with strings, numbers, and arrays. Also, you'll become familiar with useful methods.

Learn to Program in Ruby  »»»

Chris Pine's Ruby guide goes over basic programming concepts step by step as it applies to Ruby. It covers variables and flow control as well as interesting Ruby features, blocks and procs.

Interactive Ruby Tutorials  »»»

Practice coding in Ruby with these interactive tutorials from Codecademy. You'll learn how to create loops and arrays. Also, Ruby is an object-oriented language so you'll see how the language uses objects and classes to organize information.

RubyMonk: Courses Recommended by the Creator of Ruby  »»»

RubyMonk is a set of Ruby courses for programmers of different levels of skills. It uses an interactive platform to deliver information and assess your knowledge so you can write code in your browser and quickly get feedback.

Learn Ruby the Hard Way  »»»

This guide contains 52 exercises to train your mind to think like a competent Ruby developer. It may take you a while to go through every exercise but when you finish the guide, you will have a strong understanding of Ruby and be prepared to tackle Ruby on Rails in the next chapter below.

Ruby on Rails

Chapter 8: Ruby on Rails

Pound for pound, Ruby on Rails is arguably the best framework for web developers. However, it's not easy to learn for beginners. But if you've made it this far, you should be prepared to deal with the difficulties of learning the framework. Here is a list of resources to begin learning Ruby on Rails.

Rails for Zombies: Interactive Tutorials  »»»

With a name like Rails for Zombies, you can expect this Code School course to be pretty different from your average course. Using Zombies to keep things interesting, Rails for Zombies consists of five videos and exercises where you'll program in your browser.

RailsInstaller: Install Rails with Ease  »»»

Installing and setting up a new development environment on your computer can be a pain. Fortunately, there's an installation package called RailsInstaller that makes installing Rails and other necessary components a breeze. There are Windows or Mac versions depending on your computer.

Get Started with Rails by Building a Simple Blog System  »»»

In Jumpstart Lab's tutorial for beginning Rails developers, you'll learn basic Rails concepts while building a simple blog platform. The tutorial covers the MVC pattern, routing, migrations, and RESTful design.

Online Course about Databases and Rails  »»»

The content of this course comes from a University of Texas for-credit course. Created by Richard Schneeman, an adjunct professor, it includes class lectures, exercises, and quizzes to give you a solid knowledge base for building web applications with Rails and databases.

Ruby on Rails Tutorial Book: Create a Twitter Clone  »»»

This is a pretty big tutorial book. The print version is 600 pages. As you can imagine, it covers a lot of principles and concepts. At the end, you'll end up building a functional Twitter clone.


Chapter 9: Where to Go from Here

Congratulations for making it this far! You're definitely not a beginner anymore. You've become an intermediate level web developer. With your experience, you should have a good idea of how to proceed with your website. But if you need more inspiration, here are some more resources to propel your web development journey forward.

Meetup: Meet Other Web Developers in Real Life  »»»

Meetup is a social networking website that facilitates group meetings in real life. We recommend finding a web developer group in your area with Meetup. You can learn a lot from other web developers. They can teach, inspire, and motivate you. Also, building websites is more enjoyable when you share your ideas with like-minded people.

How to Collaborate on GitHub  »»»

Git is not just good for backing up your code. It is also an effective tool for collaborating with other coders. GitHub uses Git to host code of open source projects. You can practice your skills and give back to the web development community by contributing to these projects. This tutorial from Nettuts+ gives you practical tips for getting started.

Official Ruby on Rails Guides  »»»

These are the official guides for Ruby on Rails. They teach you how to implement common tasks required by web applications. Go through the guides to discover the potential of Rails to upgrade your website.

jQuery UI 101: The Essentials  »»»

If you want to go deeper with jQuery, check out this video course about jQuery UI. This jQuery library contains user interface interactions, widgets, and effects to increase the usability and interactivity on your website. For example, once you learn how to use it, jQuery UI allows you to quickly add a slider, draggable element, or autocomplete feature to your site.

Build Apps with APIs  »»»

APIs, or Application Programming Interfaces, allow you to use the data of other sites. Many popular sites like Twitter and Evernote have APIs and Codecademy has tutorials to show you how to use them. They have tutorials about searching for top YouTube videos with Javascript and sending text messages with Ruby using Twilio.