How to get into web development

If you’re like me, you’ve probably procrastinated learning anything web-related because of how unordered and even ‘artsy’ it all seems - HTML isn’t even a programming language! Why would a coder waste their time on it?

But whether we like it or not, the web is definitely the future. All of us use it on a daily basis and so it has transformed into a huge industry. We’re going to have to learn it at some point, and at the speed at which things are unrolling at the moment, I think the sooner the better.

Something that many don’t often realize is that the web development world is actually dominated not by HTML/CSS but by Javascript. Especially with the emergence of many Javascript frameworks, almost any complicated website is probably entirely written inside of a JS program and has almost no actual HTML/CSS. Furthermore, with the help of frameworks like Electron and React Native many cross-platform apps and desktop applications are also beginning to be written with JS. In short, if you need a place to focus your efforts, let that be JS.

I’m a big believer in teaching yourself things, and this is a guide that can help you with that.


SOME QUICK DEFINITIONS:

FRONTEND GUIDE

BARE ESSENTIALS

  1. Learn HTML/CSS with any online course like CodeAcademy. By the end, you should have a solid understanding of not only the syntax but how the web actually works. Be careful not to spend too much time on this step, as HTML/CSS is really the easy part of web development. Also note - when researching various concepts, almost always priorities using on Mozilla Developer Network (MDN) articles over w3schools articles.

  2. There are a bunch of alternate languages that compile into HTML/CSS/JS, mainly Sass and Pug. These used to be very popular but now with the rise of ES6 and web frameworks they are fairly obsolete.

  3. Learn Acknowledge the existence of CSS frameworks* like Bootstrap that claim to simplify writing CSS. These too used to be extremely popular but I consider them fairly redundant.

  4. Learn good design principles. There are many books available online, but I especially love this one. This article also has a good section on web design. This video is also useful. Finally, Appendix 1 of this article has some links to useful web design resources and Appendix 2 has my favorite fonts.

  5. If you don’t know how Git/Github works, make an account and learn it through this book or this interactive tutorial. Essentially Git is a way to synchronize your coding projects with the web and it is used everywhere in coding.

  6. Practice! Github Pages provides a great way to host static websites for free.

THE REIGN OF JAVASCRIPT

  1. Learn Javascript (the newest version is ES7, but ES6 is acceptable) with this book. Chapter 2 is critical — make sure you install and familiarize yourself with all of the necessary environment software. It is critical that you understand Node and NPM, so research these even if you don’t use the book.

  2. Make sure that you know what the DOM is and how to manipulate it. Don’t learn jQuery, which claims to simplify this. It used to be popular but the truth is that it doesn’t add anything useful and vanilla JS works just as well.

  3. Many say that Javascript is a terrible language and so solutions like Coffeescript have come around, but the truth is that ES6 actually fixed a lot of the broken parts of the language. Make sure that you understand the difference between ‘old Javascript’ and ES6*. Babel is the tool that lets you transpile the new, sexy Javascript into old Javascript so that it works on old browsers.

  4. This is the hard part: in order to make truly complex websites with many moving parts, you’re going to have to learn a javascript framework. These frameworks simplify the role of altering the DOM and making your websites truly dynamic. The most common ones are React, VueJS, and Angular. From my experience React has been the clear winner due to many factors - in fact, I love it so much that I even wrote a whole article about why you should use it and how to learn it. React is changing web development forever, so I really recommend learning it.

  5. (optional) Learn a content management system, which is a software that eliminates the repetitive task of creating similar pages (like blog posts in a blog). Jekyll is ideal because it is directly integrated with Github Pages, which means that there is no extra work required on the developer side.

BACKEND GUIDE

BARE ESSENTIALS

  1. Backend frameworks simplify the process of writing a server. I’ve personally found that Node is the best choice when writing a server because 1. many web developers already know it, 2. ES6 is a great language, and 3. the size of the community is unparalleled. The most common Node framework is ExpressJS. You can learn it with a book such as this, or through their website.

  2. Practice by building a simple REST API, which is essentially a collection of endpoints that send back data to the frontend. Here is a good tutorial.

  3. (optional) Learn Gulp, which is the easiest way to write a Node server that uses Babel. This is a good article, and this is my Node server boilerplate that has an example of a basic gulp setup.

  4. Learn about websockets, which are a quick way for a server to communicate with a client. SocketIO is by far the best Node websocket library.

  5. Learn about how to use databases. There are two types: SQL and no-SQL. SQL is the classic, tested type that only supports very flat data types but is used almost anywhere - the best SQL database is PostgreSQL. No-SQL is the new kid on the block, but as such it is often criticized for not being as secure or mature. The advantage of No-SQL is that it supposedly allows you to represent more complex data types through nested structures. MongoDB is the most common No-SQL database - but I would recommend going with PostgreSQL. You don’t actually need to learn the SQL language, because Object-Relational Mappings or ORMs allow you to control databases from a programming language, like Node. Sequalize is the most common Node ORM, and the best way to learn it is the Sequalize getting starting guide.

  6. Learn GraphQL, which is an alternate system of front-to-backend communication invented by Facebook - many consider it to be the next generation of REST. There are two parts to making GraphQL work - a frontend and a backend. How To Graphql is an awesome website for learning it, and I recommend taking the Graph.cool route for the backend and the Apollo route for the frontend. Graphcool is a tool that essentially uses GraphQL to handle the backend for you, thus abstracting a lot of the hard work that often goes into writing a backend server. Apollo is a frontend tool that simplifies the job of communicating with the backend GraphQL server - and it also works wonderfully with React!

LINUX SERVERS, OH MY

  1. Learn how to use the command line, such as with this tutorial from LifeHacker.

  2. In order to write any real server, you need to learn how to create and manage servers, usually called VPS’s (virtual private server). Linux is objectively the best OS for a server, and Ubuntu (versions 16 and higher) is a good choice for beginners. While you can go ahead and buy a server and set it up yourself, many services do that for you. Digital Ocean and Linode are the two best options. Linode offers a bit more bang for your buck, but I’ve found Digital Ocean to be more user-friendly. If you are serious about backend development, I’d recommend buying the lowest-tier server from either of these.

  3. Before doing anything elsehttps://facebook.github.io/react-native/, you need to be able to connect to your server from the command line. This tutorial offers an overview of that.

  4. Learn how to use VIM, as it comes preinstalled on all Linux servers and is very good at editing files. If you already have access to a server you can just type in vimtutor, but this tutorial also works.

  5. Learn the basic of NGINX, which is a software that controls the flow of request in and out of your server. This is a good time to install it too, and this tutorial offers a good overview of that.

  6. Learn about PM2, which is a software that manages running Node applications on the server. This is also a good time to install Node on your server, and this tutorial covers all of this.


*If at this point you’re confused by the difference between a library and a framework, I don’t blame you. Here’s an article that clarifies this.

*ES6’s relationship to Node is somewhat strange. Essentially, Node is currently being updated to look more like ES6, but in reality it is still most similar to ‘old javascript’. As such you still have to use tools like Babel to transpile your ES6 code.

Appendix 2: my favorite fonts

Note: Google Fonts is a famous collection of fonts that Google made available for free. I like to use it because 1) it limits the choice (somewhat), 2) the fonts tend to be higher quality, and 3) Google offers a very easy way to include them in any website.

Serif:

Sans-serif:

Monospace:

Montserrat for titles and Lato for body paragraphs is usually a great combo.

If you’re still not satisfied, this and this are good lists.