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.
I’m a big believer in teaching yourself things, and this is a guide that can help you with that.
SOME QUICK DEFINITIONS:
- stack: developers refer to the ‘stack’ as all of the bits they use for web development. For example, a stack might include a frontend framework, a database framework, and a server framework.
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.
LearnAcknowledge 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.
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.
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.
Practice! Github Pages provides a great way to host static websites for free.
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.
(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 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.
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.
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.
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.
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
Learn how to use the command line, such as with this tutorial from LifeHacker.
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.
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.
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.
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.
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.
Appendix 1: some links I use
- An online HTML/CSS/JS editor
- An online HTML/CSS/JS editor that lets you save your website to a domain
- An online React editor
- Google Fonts
- Cool cheatsheets
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.
- Playfair Display
- Abril Fatface
- Montserrat (my favorite font - great for titles)
- Big John
- Josefin Sans
Montserrat for titles and Lato for body paragraphs is usually a great combo.