So I want to learn web development. Now what?
You might want to grab a cup of coffee
My last article about the importance of getting started on your programming education is my most-read article on Medium so far. Like anything in my life, my writing is an experiment. When I see as many people getting excited about programming as I have because of this, it excites me too, and tells me I’ve hit a nerve.
I think there’s a little more to the story that I didn’t fully flush out. So here, I want to set you on the path to writing your first line of code as quickly as possible. I don’t want to delude you: there is no getting over the fact that programming is an iterative process. I love this article, describing the process of programming through the allegory of cooking. The author describes the frustration of “just getting started” when there isn’t a clear picture of what “getting started” means. I can’t just yell at you to “GO FORTH AND CODE” without at least helping you understand what you need in order to do that.
There is a vast gulf of knowledge between a pro and a novice programmer. It’s not all just Googling it. But there is never a point at which you get to kick off your shoes and say, “Fuck you, Google. I know everything.” There will always be a curveball. Your strength as a programmer (and really, a human being) lies in being able to adopt productive habits & tools, and adapt them when you learn to do things a better way.
I’m not entirely sure where to start on this journey, but I’m going to do my best. I’m going to describe the first steps of web development, since I think that’s what most people without a programming background can relate to. Some will tell you that this isn’t “real” programming. Some will tell you that using a Linux terminal with vim is the only way to program. I’m not saying that their way is wrong, only that it is more complicated than what most people would need to build what they were interested in building.
Once you get the bug and know you want to learn more, I highly encourage you to go far beyond my simplistic first steps laid out here. Ideally, this article will prepare you to go out and start trying something like Codecademy. I’m going to sweep a lot of things under the rug for the sake of getting you to the first step quickly. My fellow programmers might cringe at some of my analogies and examples. If you think of a way to explain this that makes it clearer and more realistic, reach out to me!
What do I need to “write code”?
You need to be able to write plain text without any formatting. That means no Microsoft Word or Google Docs. Start with something simple like Notepad on Windows. That’s it. All the examples you find online, etc. will be entered in plain text approximating (to varying degrees) natural human language. Later, depending on your needs, you may want to look into editors that are specifically made for programming, like SublimeText, NotePad++, vim, Coda, or a million others, but don’t get too hung up on this part.
How do I make my code actually do something?
You will need something that turns your human-readable code into machine code. There are two ways of doing this: compiling and interpreting. Compiling means taking what you wrote, translating it to machine code with a compiler, and writing that to a file that your machine’s operating system and processor can understand. Interpreting means using a program called an interpreter to parse the human-readable code you’ve written into machine commands on the fly every time you ask for it.
So I need a compiler or interpreter?
Luckily, you all have a browser. This allows you to write HTML and JavaScript, and execute it within that browser, negating the need for any extra installations or configuration. Your browser acts as an interpreter, translating this into what you see. If you want to see the HTML of this page, right click and choose “View Source” or something similar (varies by browser).
Not all code is the same
I don’t want to get into this too much, except to make the following distinction between “programming” and using markup languages like HTML. If programming was an F-1 car, with anti-lock breaking and monitoring systems, HTML (and CSS) would be the design and the paint. Programming involves logic, and HTML involves presentation. Your browser (Chrome, Internet Explorer, Safari, etc.) interprets the structure of the HTML, and generates the visual content you see before you using its internal logic. It is possible (and often necessary) to write HTML on its own in a text editor, but it is also often automatically generated by an underlying script or program.
What does “client-side” and “server-side” mean?
In web development, we often talk about client-side and server-side code. Server-side code is read on the server and interpreted there, then it generates output for the client, including HTML and/or JavaScript. Client-side code is the content your browser downloads and interprets on its own. For client-side code, it’s sufficient to write it into a .html file and open it up in your preferred browser.
Why does this matter? If your application needs persistent storage, intense computation, or the ability to communicate with other users of the application, you will need server-side code. Once your browser downloads a page sent by the server, the server’s job is done until the client asks for more information. Client-side code is more geared towards the real-time individual user experience, like changing the appearance of a page when you click a link, or quietly asking your server for a new piece of information and updating the screen automatically when it gets it.
How do I show other people what I’m doing?
You won’t be able to serve your files on the web without something to processes requests from users, run the server-side scripts to retrieve or modify data on your server, then send the user back the result in a format that the browser can interpret. This is where a webserver comes in. A webserver is just a way of sending files to a browser when it asks for them. It can also call an interpreter on those files first, and return the output. There are also frameworks with built-in functionality to serve web content without an external webserver.
Rather than running it on your home machine (although this is perfectly fine for testing things out locally), you’ll usually want to get a webhosting provider. There are two kinds of webhosting: shared and dedicated hosting. Shared hosting means someone else takes care of your server, dedicated hosting means it’s mostly all up to you. When starting out, shared hosting provides lots of benefits like automated installation scripts, pre-configured administration tools and services, and (hopefully) lots of good customer support. Dedicated hosting is like renting a computer in a datacenter from the host. You get to set it up pretty much however you want, but there is very little hand-holding. I don’t recommend buying dedicated hosting until you’re really ready to spend some time on it.
Shared hosting can be obtained for free from many sites (Google it). If you choose shared hosting, you won’t have to set up a webserver or any of the other necessary moving parts, except the code itself. Just make sure you choose a plan that allows you to use the language you want to learn, and has enough bandwidth to reasonably accommodate the traffic you’ll be getting. If you want to serve a lot of large videos, you’ll need more bandwidth than if you’re just serving static pages. If you do decide to buy dedicated hosting, DigitalOcean (my host) is $5 a month for a very reasonable VPS (Virtual Private Server) that I haven’t had any complaints about since I started using them.
What should I learn first, second, third…?
First and foremost, you’ll want to learn HTML. It is the publishing language of the web, and it is inescapable as a language today. Next, you’ll want to learn CSS (Cascading Stylesheets), which allows you to add styling information to the HTML you’re writing. I recommend learning JavaScript next, which will allow you to add interactive functionality to your HTML pages. Once you’ve mastered all that, you’ve officially reached the end of what you can do with just a browser. You’ll either need to set up a local webserver (nginx, Apache…), or find webhosting of some kind.
From there, you can move on to server-side languages and frameworks (PHP, Python, Ruby…). This will also involve learning about databases (MySQL, PostgreSQL, MongoDB…). You may also want to look into other programming languages and web frameworks like Django, Flask, Node.js, and Ruby on Rails. Next, you might be interested in looking into JavaScript application frameworks, or MVC frameworks (see links at end). Then, you’ll probably want to start learning about Linux server administration, and how to set up your own webserver, email server, etc.
If you’re trying to set up your own site or app locally or on a VPS, here’s a tutorial for creating a LEMP (Linux, Nginx, MySQL, PHP) setup.
So now I have a vague picture of what I want to learn. Where do I go next?
I highly recommend checking out the huge list of learn-to-code programs I included in my last post, and going through the other links I recommended there. Try to think of something simple you’d like to build, then Google it with a language and “tutorial” included. EX: “PHP todo list tutorial.” Again, 10% learning, 90% doing. Don’t feel bad if you’re copying and pasting at the beginning, as long as you take the time to understand what the code is doing, and modify it to learn how to do what you want.
Conclusion
I hope I haven’t confused you too much, or made things seem needlessly complicated. In reality, there is very little that you need in order to start writing code. But producing more and more meaningful applications will require greater and greater complexity. What I want to emphasize is this: coding hasn’t been made trivial, but it has certainly been made easier today than it has ever been at any other time in history. The vast, free online resources, the learn-to-code bootcamps – these things didn’t exist even 10 years ago. Even the programming languages we use in web development are much easier to adopt than the programming languages of yore, and some we still use, like C/C++.
Epilogue
Below is a huge meta-list of tutorials and resources that might be of use to you along your journey. Bookmark this and come back to it along your way. As you get more familiar with the various concepts of web development, this list will come in handy at providing the knowledge and tools you need to expand your horizons and become a better developer.
General resources
Huge list of learn-to-code programs – this is a huge list of programs from all around the world that might be right for you
Course Report – a service to help you locate the right learn-to-code program in your area
Bootcamper.io – another list of learn-to-code bootcamps from all around the world
Thinkful Bootcamp Finder – a site that helps you search for coding bootcamps, with pricing information, student feedback, and more.
Supacoderz – teacher-led lessons, in-person in London and online
bentobox.io – general educational resource for all kinds of web programming languages and frameworks
List of free programming books – huge list of free books on almost every concept and niche of programming
Front-end development resources compiled by dypsilon – collection of all kinds of resources to make front-end development easier and sexier
Compare CSS Front-end Frameworks – shows the responsiveness features and browser compatibility of a bunch of front-end frameworks
TodoMVC – resources to learn MVC (Model-view-controller) frameworks
Mixu’s single page app book – book describing the process of creating a single-page app using a variety of JavaScript frameworks
Framework-specific resources
These are tutorials that might be useful once you’ve grasped the fundamentals of programming in HTML and JavaScript.
The Flask Mega-Tutorial [Flask]
How to Node [Node]
Stack Overflow: How do I get started with Node.js [Node]
Develop a RESTful API using Node.js with Express and Mongoose [Node, Express, MongoDB]
Developing Backbone.js Applications [Backbone.js]
Getting started with Django [Python/Django]