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 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.
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.
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.
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.
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.
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.
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.
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.
Here are the CSS Tutorials of HTML Dog. Along with the fundamentals, they cover new aspects of CSS3, the latest standard for CSS.
This video course is sponsored by the Microsoft Developer Network. You can download the entire source code to follow along with the videos.
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.
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.
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.
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."
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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 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.
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.
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.
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.
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.
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.
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.
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.
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.
Atlassian's Git tutorials are beneficial to web developers because they include diagrams that show the flow of information within Git.
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 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.
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 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.
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.
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 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.
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.
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.
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.
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.
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.
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.
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.
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 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.
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.
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.
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.