On /r/learnprogramming, I see a lot of frustration on what to do after a basic language tutorial. There’s a lot of information on the web, but it’s still hard to know what to do next for a beginner. I’ve found that there’s not really an example of how to bridge the gap between knowing the basics and actually building something – there’s no good overview of what you should be trying to learn and why. So here’s my attempt at trying to fill in some of the gaps and developing a good roadmap for a web developer in any language.
1. Learn HTML and CSS
The most basic thing you need to understand is what HTML is and what CSS is. It’s pretty much the foundation of any web development project that you’re going to do. Without HTML and CSS you don’t have pretty pages on the internet. Find a course that will teach you the basics of HTML and CSS. Try NOT to find a course that mixes HTML and CSS with a language like javascript/python/php. Just learn HTML and CSS and build a very simple HTML and CSS project. (check out Shay Howe’s tutorials)
2. Learn how to use a versioning system, preferably (Git)
Find a very simple tutorial that covers the basics of Git. Git will essentially save you a ton of pain in the future if you learn it at this point before you start really writing a lot of code. A versioning system is like a save point in a video game –when you’ve gotten pretty far in a game, you don’t want to lose everything you’ve done if you mess up the next challenge. A versioning system allows you to keep a history of the changes you made and it allows you to go back to any of those changes in case you really fuck something up.
3. Learn Javascript
To make a webpage interactive (responding to things you do on the screen), you’ll need to use Javascript to manipulate the HTML/CSS that you just learned how to create. With Javascript, you’ll start to learn the basic syntax that all languages use – variables, if and while loops, functions, and objects. Aside from the javascript language syntax, you’ll also want to understand and learn the Document Object Model (DOM) and how Javascript communicates to a backend (aka server) to send and receive data. I’ve think CodeAcademy’s Javascript course is pretty good (don’t worry it’s free) – no need to sign up for the Pro version.
4. Learn Python, Ruby, or PHP
My personal opinion is that these languages are much easier to learn for web development than C/C++/Java/Scala/C#. Pick Python, Ruby or PHP and find a tutorial on the web for it by googling ‘Python tutorial’, or whatever language you want. Pick one of the tutorials and start learning. Most of the tutorials cover the basics that you’ll need.
You’ll notice that there are a lot of similarities of the language you picked and the Javascript language you learned earlier – both languages will have functions, variables, loops, and objects. You’ll also notice that some the language you chose might be missing some features that Javascript had or might have some additional features that Javascript is missing. Find some simple programming problems to solve with your new language.
5. Understand Object Oriented Programming (OOP)
Most modern languages use OOP in some way or another to divide and break up their code into logical units. OOP is the foundation for other programming patterns that you’ll learn throughout your life as a web engineer. Practice thinking about how to put common concepts into an OOP pattern. A common example is to think about how you would setup the objects for a game. Checkout this quora post for good examples.
6. Learn Model View Controller (MVC) concepts.
This is the first web architectural paradigm that you’ll learn and pretty much how most programming languages setup the code used to deliver HTML/CSS/Javascript on the web. Take a couple of days to look up different explanations of MVC and start to explore different MVC frameworks for your language. Google ‘PHP frameworks’ for example to see the different frameworks that are available. It doesn’t really matter which one you pick, but take a look at what is available.
7. Pick an MVC framework for your language.
Now it’s time to start putting together everything that you’ve learned so far. Pick an MVC framework for your language. The common frameworks are: Django (Python), Rails (Ruby), and Laravel (PHP). Pick one, install it and get your first ‘Hello World’ page loaded locally!
8. Learn the framework through a tutorial
Find a tutorial that goes over the basics of the framework you chose. The framework should cover the basics of loading data to and receiving data from a database. It should also cover the basics of how a user would login/logout of the system. Usually they cover how to create a very simple blog and storing the blog data in a database.
9. Learn SQL – Especially how to normalize data
At this point you should have a very simple system running on your computer that you can connect to and that you can you can develop against. Here, what you want to start doing is thinking about ways to extend whatever system you created. If you created a blog, think about how you can add a rating system, comments, tags, or any other feature you can think of. You want to start thinking about how to model your data in the database.
10. Extend your framework to support your new features
Now you want to extend your code to support those new models that you added in your database! Think about how to use HTML/CSS/Javascript to send your data over to your server to store in your database.
11. Launch your code on Heroku
You’ll notice that your code is just running locally. That’s no fun, you want to share this with the world! Google ‘deploy [enter framework here] on heroku’. So if you were learning PHP and laravel you’d search for ‘deploy laravel on heroku’. You’ll hit a bunch of snags, but try and work through those issues. Some issues you’ll probably run into:
-
- Setting up and loading your code to heroku
- Loading your database to a remote database server
- Dealing with a load balanced environment
- Changing your database model on the remote database server
12. Start an entirely new project, or continue to extend your project with more challenging features.
Now put what you learned into practice! Think of a new project to work on besides whatever the tutorial covered or extend your project further. If the tutorial covered a blog, think about how to do something more interesting, like connecting it to a social network. Look at how to implement authentication through a third party (facebook, linkedin, github, twitter).
At this point, if you were looking to start a career as a web developer, it would be a good time to start getting some experience through part time work or gigs on Upwork or freelancer.com. You always want to practice as much as you can and doing work that pays is a great motivation to continue learning and perfecting your new found skills!