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?
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?
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…?
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.
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++.
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.
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
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]