The Mega Full-Stack Web Development Resource Guide

A human-readable guide with ~600 links on topics covering everything from HTML to React to The Cloud.

Hawk Ticehurst

Follow

Published in

codeburst

46 min readSep 30, 2020

--

Prelude

Why Is This Guide A Thing?

I have a meticulously organized digital life.

My computer’s file system allows me to track down any photo, video, or document I’ve created during any month over the past 13 years.

My Google Drive is similarly organized to keep track of documents such as the high school resume I used to get my first job or the documents I made for every single class during my 5 years of college.

And, importantly for this post, I have a Chrome bookmark system that allowed me to stay organized and learn computer science/software engineering after a sudden change of direction in my last 2 years of college.

Contained in these bookmark folders are links to hundreds of resources ranging from artificial intelligence to development tooling. This catalog of resources allowed me to organize my thinking as I learned new topics and to ultimately collect some incredible content that was instrumental to my learning during college.

Now, as a recent graduate, I want to pass on some of those resources that were so helpful to me. My hope is that those in their own process of learning might find something useful in all of this just as I did.

About This (Long) Guide

As hinted via the title above, this guide is focused on full-stack web development resources.

This is due in part to an effort to limit the scope of this guide, but also because I’m really passionate about the internet and what it has to offer — it’s quite a festive place.

In addition to simply providing an organized list of links, I’ve included high-level explanations of each topic and how it fits into the world of full-stack web dev. I’ve also included some of my own thoughts and personal recommendations (denoted by 🔥) for some of the resources.

It’s my way of highlighting those resources which have been invaluable to me and an opportunity to give some plain-English insights/information that might be helpful to those learning about these topics.

I hope you enjoy it!

Development Resources

I start this guide with development tools because even with all the knowledge of full-stack development in the world you need tooling to put it to action.

For those new to the world of software tooling, it encompasses a huge variety of subtopics. Because of this, you can get lost down some pretty deep and overwhelming rabbit holes, but at it’s most basic it usually means choosing a good text editor and terminal that is suited to the work you’ll be doing.

Text Editors / IDEs

Text editors and IDEs (Integrated Development Environments) are desktop applications, command-line applications, or web applications where you write code — basically think Microsoft Word but specialized for writing code.

There is an almost endless number of text editors and IDEs available that offer various benefits and drawbacks, so don’t be afraid to try out different options until you find something that feels comfortable.

My current favorite is the very popular Visual Studio Code made by Microsoft (which is not to be confused with Microsoft’s IDE — Visual Studio). VS Code is a flexible text editor with a huge number of settings and third-party extensions that can customize the editor’s look and functionality to fit and improve your workflow.

In addition to that, VS Code comes with some incredible built-in extensions for JavaScript and TypeScript that make it a very useful editor for web development.

🔥 What Is The Difference Between An IDE And An Editor?
🔥 VS Code Website
🔥 VS Code Documentation
🔥 VS Code Setup
🔥 VS Code Top Ten Pro Tips
🔥 Interactive Vim Tutorial –– Vim is a very powerful command-line text editor.
Vim Tutorial
Atom Website –– Atom is another great desktop text editor made by Github.
Atom Documentation
Code Sandbox IDE –– Code Sandbox is an online editor that is great for prototyping JavaScript-based web apps.

Text Editor Extension Resources

Below are some text editor extension resources that are worth a peek.

Emmet makes the job of writing HTML a breeze by defining a succinct syntax that can be expanded into full HTML. A cheat sheet of the syntax can be found below.

Kite and TabNine are AI-powered coding assistants that provide some very impressive code autocompletion features.

Terminals / Shells

Terminals, sometimes casually referred to as “command lines” or “consoles”, are desktop applications that allow you to interact with a shell.

A shell is a text-based user interface that allows you to control your computer. Instead of using a mouse to click UI elements and icons, you type commands into the shell that allow you to do things like open desktop applications, run code, navigate your computer’s file system, automate tedious or repetitive tasks, and so much more.

Becoming proficient with a terminal/shell combo is a massively valuable skill in the world of not only full-stack development but of software engineering at large.

Finally, just like text editors and IDEs, there are many terminals and shells with benefits and drawbacks. So once again have fun and try different options until you find something that works for you.

My current terminal/shell combination is iTerm2 and zsh. iTerm2 is a great terminal with a rich set of features and customization options but is, unfortunately, macOS only. Zsh is the default shell for macOS.

🔥 iTerm2
🔥 Hyper –– Hyper is another really clean cross-platform terminal created using web technologies.
🔥 Mastering Zsh
🔥 Ohmyzsh Website –– Ohmyzsh is a fantastic framework for generally improving the experience of using zsh.
Terminal Setup: iTerm2 + Zsh
Moving to Zsh
Switching to Zsh
Ohmyzsh GitHub

Browser Resources

In the world of full-stack web development, the next thing to consider is browsers. These are the applications that allow you to access the internet and execute/render the frontend code (i.e. websites) you will create.

These browsers also offer tools for debugging and analyzing your website’s code. Learning how to work with these tools early on (and especially once you start learning JavaScript) is something I can’t recommend enough.

Finally, it is very important to know that the frontend code you write will not always work or look the same across different browsers (the reason for this can be better understood in the ‘How Browsers Work’ and ‘Browser Engines’ sections below). As a result, it’s highly recommended to have many of the popular browsers downloaded so you can test your website on each browser.

Pro Tip: An amazing tool for determining whether or not your frontend code will work on a particular browser is Can I Use?.

🔥 Browser Development Tools

Understanding how to debug your code is one of the most important aspects of learning how to develop for a platform like the web. Browsers like Chrome and Firefox offer some absolutely incredible debugging and development tools. LEARN HOW TO USE THESE TOOLS.

🔥 Chrome DevTools Guide
Google LightHouse Guide –– Google Lighthouse is a great tool that can automatically audit the performance, accessibility, SEO, and more of your website.
Firefox Developer Tools Guide
Safari Web Development Tools
Microsoft Edge Developer Tools

How Browsers Work

Understanding how browsers work under the hood will give context to the code you write and fundamentally change how you think about full-stack web development… or at least it did for me 😁.

This is an admittedly advanced topic since there is a very different skillset at play when creating a web browser versus making a website, but I still think it’s worth reviewing at some point during your full-stack education and then continuing to revisit the topic as you learn more.

🔥🔥🔥 How Browsers Work Under The Hood — Aaron Gustofson Series

Browser Engine Resources

Another really cool topic that is an even more focused look into how browsers work is learning about browser engines. This topic is not necessary to learn web development, but can once again be a nice way to gain a deeper insight into what is happening inside your browser. Also, be warned, this an advanced topic.

Browser engines, in short, are the core pieces of software built into web browsers like Chrome and Firefox that do the work of executing and rendering the website code that you write. Typically, browser engines are comprised of two primary types of engines:

Rendering Engines — Responsible for rendering the pixel-by-pixel layout of a website
JavaScript Engines — Responsible for interpreting/compiling and executing JS code (as well as WebAssembly code in some cases)

These engines are the primary reason that the frontend code you write may not work or look the same across browsers. Browsers will often use different engines that have unique implementation details which can cause differences in how a website is laid out or interpreted.

A Quick Note: It is also common for the term “browser engine” to only refer to the part of a browser that is in charge of rendering a webpage. This is because it’s very common for JavaScript engines to be built in a way that they can function independently from a browser, whereas the rendering engine is a fundamental and baked in part of browsers. So keep that all in mind as you learn more about these engines in the wild.

Chrome Engines

Firefox Engines

Safari Engines

WebKit Website

Miscellaneous Resources

Let’s Build A Browser Engine!

Client-Side / Frontend Programming

Client-side or frontend programming is the area of web development dedicated to creating everything a user of a website will see (i.e. the UI).

In its simplest form, all you need to make a website is HTML. Unfortunately, an HTML-only website will look and feel quite bland which is why CSS is also used to change the style of a website, and JavaScript is used to add more complex behavior to a website.

From that point other languages, libraries, and tools like TypeScript or React are additives that make the job of creating and maintaining websites easier.

There are many comprehensive web development guides available out there today but I’ll take a moment to call out the Mozilla Developer Network.

Very few resources match the quality and robustness of the Mozilla Developer Network (MDN). It is a resource that is linked to many times in this guide and is probably one of the single most helpful resources I used to grapple with many of the web development topics I’ve learned in the last two years.

It’s a website that I highly recommend you take the time to peruse and see what kind of content is available.

🔥🔥🔥 MDN Learn Web Development –– MDN’s structured full-stack web development course.
🔥 Dave Stearns Web Development Tutorials –– These amazing tutorials were used for a server-side programming course I took in college, but it also includes some incredible client-side tutorials that are worth reading as well.
🔥 INFO 340 Client-Side Web Development Book –– This is a fantastic client-side development book for a class I took in college. It’s written in a very human-readable way.
Frontend Developer Handbook
The Relationship Between HTML, CSS, and JavaScript Explained

HTML Resources

As I stated above, HTML (Hyper-Text Markup Language) is the absolute baseline for what you need to make a website. It is the place where you include the content of your website and define the structure of your webpages.

An analogy that I’m fond of is that if the content (i.e. text, images, etc.) of your website is a pile of bones, then HTML is what you use to structure those bones into a skeleton (i.e. a webpage).

You can use a thing called HTML tags to, for example, define a piece of text as being a paragraph or a title. Then by ordering these tags one after another you can define how all the pieces fit together.

Getting Started

These are some more comprehensive tutorials that cover all the major aspects of HTML. The HTML Dog resource is one that I’ve found to be particularly helpful with its simple intuitive explanations.

HTML Tags References

Tag Reference resources can be thought of as a sort of HTML tag dictionary. It’s a place where you can browse all the different tags that are available to use inside an HTML file with included explanations and examples of how to use them. Here are a few of my favorites.

HTML Attribute References

HTML attributes are special words that you can use inside an HTML tag to modify or define behaviors in those tags. For example, by using the “class” attribute in a tag you can associate some CSS styles with that tag.

These references below are once again a sort of dictionary with definitions of all the attributes you can use in an HTML file.

HTML Character Codes References

Character code references are another type of dictionary that defines all the possible characters you can use in an HTML document and their associated code that you type.

Say, for example, you wanted to include the division symbol on a webpage you can type “÷” and it will be converted into ÷.

HTML Meta Tags

Meta tags are HTML tags that contain information about a particular webpage. These tags can define things such as the title or description of a webpage.

Notably, these meta tags can also define the information that is crucial for website SEO (search engine optimization). Below is a favorite resource of mine for automatically generating SEO related meta tags and also provides some great educational material if you scroll down below the tool.

🔥🔥🔥 Meta Tag Generator

Accessibility

Website accessibility is an incredibly important topic when making websites that can cater to all users. Accessibility can take many forms — everything from blindness to having a broken arm to even having a slow internet connection. They all affect a user’s ability to access a website and its content.

Being able to design websites that accommodate the gamut of accessibility issues will not only lead to a better experience for those with disabilities but very often leads to great experiences for those without disabilities too.

Miscellaneous Resources

CSS Resources

After HTML, the next thing you would typically use is CSS (Cascading Style Sheets). CSS gives you the ability to add style to an HTML file (read: make your website look festive and fancy).

Following the same skeleton analogy from above, CSS would be like adding clothes to your HTML skeleton.

CSS is incredibly powerful and lets you define everything from the color of text to complex animations. CSS Zen Garden is a fantastic introductory website that shows off this power by using different CSS styles on the same HTML to create totally unique looking websites.

Getting Started

Once again, here are some more comprehensive tutorials for those looking for a structured walkthrough of CSS.

CSS Syntax & Terms

A part of learning CSS includes learning some special vocabulary for the syntax you’re looking at. Knowing what a “property” is, or what a “selector” is, or what the difference between a “rule set” and “declaration block” is will make your process of learning CSS much easier.

CSS References

Similar to HTML, these resources are effectively dictionaries for CSS properties.

🔥 CSS Reference IO
🔥 MDN — CSS Reference

CSS Layout / Box Model

One of the most powerful aspects of CSS is the fact that it lets you define the layout of your website and the spacing between elements. These are a few resources that cover this topic.

CSS Flexbox

Flexbox is, from my experience, an absolute-must-learn topic when picking up CSS. It is a much easier and more powerful way of defining the layout of elements on a webpage.

🔥 CSS Flexbox In 100 Seconds
🔥 A Complete Guide to CSS Flexbox –– Make sure to read “Background” and “Terminology” sections of this guide.
🔥 Flexbox Froggy
Internetting Is Hard — Flexbox Tutorial
Flexplorer

CSS Grid

Grid is another incredibly powerful way to layout elements on a webpage. As the name suggests it allows you to orient elements on a webpage in a grid.

🔥 CSS Grid In 100 Seconds
🔥 A Complete Guide to CSS Grid –– Make sure to read all the collapsed sections at the beginning such as the “Introduction”.
🔥 Grid Garden
The Joy Of CSS Grid — Build 3 Beautifully Simple Responsive Layouts
Learn CSS Grid

CSS Responsive Design

A massive concern when creating websites is the fact that it can be viewed on everything from a massive desktop screen to a tiny mobile phone.

Responsive design is the area of CSS and website design that is concerned with this issue. By using CSS Media Queries you can define how your website should look on those devices and change the styles of each element so that they look good on every screen size.

CSS Animations

CSS defines some incredibly powerful (yet simple) syntax for creating animations. With this syntax, you can create everything from simple transitions to complex multistep animations.

Below are a couple of learning resources, as well as some tools and libraries that make the job of creating complex CSS animations a lot easier.

🔥 CSS Animations In 100 Seconds
🔥 CSS Animations For Beginners
CSS Animations
Introduction to CSS Transitions
Animista –– A tool for generating CSS animations.
Keyframes App –– A tool for prototyping CSS animations.
Animate.css –– A general purpose CSS animation library.
Animate On Scroll (AOS) –– A CSS animation scroll library.
Easing Functions Cheatsheet

Color & Gradients Resources

As I hinted in the CSS introduction paragraphs above, the ability to define colors and also gradients is a power granted by CSS. Below are some of my favorite tools I’ve come across for helping pick color codes, color palettes, accessible colors, and gradients when creating a website.

🔥 HTML Color Codes
🔥 Khroma –– An AI-powered color generator.
Accessible Colors
Coolors Color Generator
Web Gradients
CSS Gradients

Typography & Font Resources

Defining a website font is also a power granted by CSS.

I’ll also take this opportunity to sing my praises to Google Fonts as a resource that you should absolutely try out. They have a decently sized catalog of high-quality free to use fonts that can drastically improve the look of your website.

Icon & Graphic Resources

The title says it all. Below are some great resources for finding website icons and graphics. Each one is a little different in what it offers so check them all out and see which you prefer.

CSS Preprocessors

Preprocessors simplify the process of writing complex CSS by defining a simpler/more powerful CSS syntax you can use and then converts that to regular CSS which can be run by a browser.

CSS Frameworks

CSS Frameworks are another way to make the job of writing CSS easier. They offer predefined styles that you can use on your HTML elements and make the job of creating a website with a cohesive design a breeze.

Miscellaneous Resources

JavaScript Resources

With JavaScript comes the power to start creating truly complex and robust websites.

In the skeleton analogy, JavaScript is what brings the skeleton to life (read: gives the webpage interactive behavior).

You can define behaviors like what happens when you click a button. You can dynamically create, manipulate, or delete elements on a webpage based on user interaction. You can make HTTP requests to get data from a server and so much more.

Getting Started

Nowadays there seems to be an almost endless number of JavaScript tutorials out there. Below are my top picks.

I’ll also take a moment to say that The Modern JavaScript Tutorial has consistently stood out as an absolutely incredible resource for gaining a comprehensive understanding of JavaScript.

🔥🔥🔥 The Modern JavaScript Tutorial
🔥🔥 That Weird JavaScript Course — Fireship.io
🔥🔥 MDN — JavaScript Guide
MDN — JavaScript Basics
MDN — A Re-Introduction to JavaScript

JavaScript Basics

Below are some nice resources that cover various JavaScript basics.

The DOM

Understanding the DOM (Document Object Model) is one of the most important parts of learning client-side JavaScript.

At a high-level, the DOM is a representation (specifically a tree data structure) of every element on a webpage that browsers use to keep track of page changes and rendering. The reason we care about this is that browsers expose the ability to read and manipulate the DOM using JavaScript.

This is how JavaScript has the power to dynamically create, manipulate, or delete elements on a webpage. The DOM is also the reason that single-page applications or UI libraries like React are possible.

JavaScript Events

Events are another very important topic to understand when learning about client-side JavaScript.

They enable your website to have dynamic interactivity with a user. There are many events that you can set up your JavaScript to “listen” for such as a mouse click, keyboard input, or even if the user has access to the internet. When one of those events occurs you can define a piece of code that will be executed as a result.

The combination of listening for events and then executing code, as a result, enables some truly complex behavior in your websites.

JSON

JSON (JavaScript Object Notation) maintains a special importance in the world of web development because a majority of the data sent across the internet is formatted as JSON.

Most modern programming languages have methods for writing/reading (often referred to as “serializing/deserializing”) JSON which means that you can have a frontend website written in JavaScript sending data and communicating with backend server written in something like Go without any issues.

Below you will find some links for learning more about JSON and its syntax.

AJAX & Fetch

On the note of sending data and communicating with servers, AJAX (Asynchronous JavaScipt and XML) and Fetch are the way that JavaScript is able to communicate with servers by sending HTTP requests.

In particular, Fetch offers a very clean way of requesting and receiving data from a server using promises.

Promises & Async/Await

In short, promises and async/await allow JavaScript developers to do asynchronous programming. I’ll let the resources below explain the benefit of asynchronous programming in more detail, but it’s basically a way of achieving faster programs using concurrency.

As an example, a regular synchronous HTTP request will “block” your JavaScript from running other code until the results of that request are returned. However, by using promises/async/await your JavaScript can execute other code while it waits on the HTTP request to be returned. The ultimate result is that more code is run in the same amount of time when using promises and async/await.

Additionally, to be even more clear, promises are JavaScript’s way of handling asynchronous values, while async/await is a cleaner syntax for working with promises.

Testing & Debugging Resources

Testing your code is a ridiculously important part of maintaining healthy codebases and projects. It forces you to think critically about the edge cases of your programs and also ensures that new features/updates don’t break something you’ve previously implemented.

Testing frameworks make the job of testing your code much easier and streamlined and are well worth checking out.

Below are a few resources for diving deeper into the world of JavaScript testing frameworks, as well as some debugging resources.

JavaScript Modules

Modules are simply JavaScript files/functions that can be imported into another JavaScript file/project.

JavaScript ES6

Fun fact, “ECMAScript” is actually the official name of JavaScript. This is because the committee that defines the language specification of JavaScript is part of the European Computer Manufacturers Association (ECMA).

In 2015, the ECMA released a new specification for JavaScript that brought a ton of new features and improvements to the language. The name of this release was “ECMAScript 2015,” but since it is considered the sixth version of the language to be released it is commonly referred to as simply “ES6.”

Below are a number of resources that cover those changes and improvements.

Regular Expressions

Regular expressions (regex for short) are a way of performing complex pattern matching and are incredibly helpful for validating user input.

As an example, you can use regex to ensure that a user has written a valid email address in a sign-up form.

🔥 JavaScript Libraries

JavaScript has become quite famous at this point for its massive ecosystem of third-party packages/libraries.

Below you will find some of my favorite libraries that I’ve come across.

JavaScript Libraries –– This reading gives a nice introduction to libraries and how to use them.
Lodash –– Lodash is an amazing utility library that makes it easier to work with arrays, numbers, objects, strings, and so on.
Immutable.js –– Immutable is another utility library for immutable data structures.
Blotter.js –– Blotter is a library that provides some super cool and unconventional text effects.
Anime.js –– Anime is an incredible JavaScript animation library.
Matter.js –– Matter is a 2D physics engine for the web.
Pts.js –– Pts is a really cool visualization library.
Rellax –– Rellax is a lightweight parallax library.
Textures.js –– Textures provides SVG patterns for data visualizations.

JavaScript 3D Graphics

That’s right! You can create 3D graphics using JavaScript. It’s pretty neat.

Miscellaneous Resources

🔥 Whatthefuck.is –– A series of articles written by the creator of Redux (Dan Abramov) explaining various JavaScript topics/concepts.
🔥 State of JavaScript Report
🔥 JavaScript Cheat Sheet
🔥 Functional Programming In JS
🔥 Discover JavaScript Timers
The Model-View-Controller (MVC) Architecture
MDN — Strict Mode
MDN — Client-Side Form Validation
MDN — Inheritance And The Prototype Chain
A Crash Course In Memory Management
MDN — Memory Management

TypeScript Resources

Moving on from JavaScript we start to enter the territory of languages, libraries, and tools that are not strictly necessary for creating frontend websites but sure do make the job of creating them easier.

One such language is TypeScript. Created by Microsoft, TypeScript is a “superset of JavaScript” meaning it’s JavaScript with extra features. Those extra features are namely a type system.

Instead of letting JavaScript determine what types of data (i.e. numbers, strings, etc.) your variables contain or your functions return, you explicitly define the data types yourself like you would in a language such as Java or C.

The benefit of doing this is that you and larger teams can catch a ton of small mistakes that could lead to runtime errors. Accidentally passed a number into a function that should accept a string? No problem, TypeScript has got your back and will let you know.

Getting Started

Miscellaneous Resources

Frontend JavaScript Frameworks

Another massive topic of frontend web development that is not strictly needed but is very often used these days is frontend JavaScript libraries and frameworks.

These libraries and frameworks make the job of creating and maintaining complex user interfaces/websites much easier.

Below are some resources focused on general frontend framework information, as well as the most popular front-end framework in 2020 — React.

Getting Started

Getting Started With React

🔥🔥🔥 React In 100 Seconds
🔥🔥🔥 Official React Tutorial
🔥 Introduction To React
🔥 React How To
🔥 React ‘Aha’ Moments
React Website
9 Things Every React Beginner Should Know
React Tutorial: An Overview and Walkthrough
Simple React Development In 2019

React State Management

React + TypeScript

Why not combine two great technologies? Well, you can!

Miscellaneous Resources

🔥 React Router –– The go-to library for implementing client-side routing in React.
🔥 Create React App –– The go-to tool for creating new React applications.
🔥 Framer Motion –– A library for implementing super clean UI animations.
Next.js –– A great library for server-side rendering using React.
React Drag and Drop –– A library for implementing drag and drop functionality in your React app.
Formik –– A library for creating and using forms in React.
How To Use React Profiler Component To Measure Render Performance
WTF Is JSX?
Build Your Own React
Build A Frontend Framework From Scratch To Understand How It Works

Client-Side APIs

Application Programming Interfaces (APIs) are the way that different pieces of software are able to interact with each other.

As the “What Is An API?” article below describes, an API is like a menu at a restaurant. When thinking of APIs from a client-side perspective you are the customer who is ordering food, while comparatively, when thinking of APIs from a server-side perspective you are the restaurant making/delivering the food.

As a client/customer, you don’t have to worry about how the food is sourced or made. You simply just have to know the phone number of the restaurant, order a dish that’s on the menu, and it will be delivered to you.

Translated to the world of programming, it means you can request (read: order) data or resources such as pictures of dogs or horrible dad jokes from an API (read: menu) that lives on a server (read: restaurant) somewhere on the internet — it could even be your own server. When that data is delivered to your website you can then use it however you please.

One final note is that client-side APIs can take three primary forms in web development: 1) Your Own API, 2) Third-Party APIs, and 3) Browser APIs.

Getting Started

Your Own API

Creating your own APIs is essentially what server-side development is/can be boiled down to. Thus resources and discussion on the topic can be found in the sections below.

Third-Party API Resources

Third-Party APIs are APIs created by someone else (usually a company). The relationship to those APIs is exactly as described above where you are the customer ordering data or resources that will be delivered to your website.

MDN — Third-Party APIs
API List –– A public list of free third-party APIs
API Marketplace –– Another public list of free third-party APIs

Browser API Resources

Browser APIs are a little bit different (and a little bit cooler in my opinion). The same customer-restaurant relationship can be used, but the restaurant location has changed. Rather than being located at some far-away server, the restaurant is the web browser itself (i.e. Chrome or Firefox).

This new type of restaurant also serves slightly different and slightly cooler menu items. There are browser APIs for using Bluetooth, checking ambient light levels, connecting game controllers, capturing photos or videos, and many more options.

WebAssembly Resources

At the absolute cutting edge of frontend web technologies is one of my favorite topics to get lost in during the last year or so — WebAssembly.

WebAssembly is a low-level binary format/assembly-like language that runs in the browser — in fact as of December 2019 it is the 4th official language of the web.

By writing programs in languages like C/C++, Rust, Go, and others that can compile to WebAssembly the internet could eventually be capable of running photo/video editing software, AAA video games, and much more right inside a browser.

Note: Even though WebAssembly is the 4th official language of the web it is not supposed to be a language that will replace JavaScript but will rather work alongside it.

Getting Started

Read a Cartoon Intro To WebAssembly. Just read it.

🔥🔥🔥 A Cartoon Intro To WebAssembly [Article Series]
🔥 A Cartoon Intro To WebAssembly [YouTube]
🔥 MDN Guide To WebAssembly
WebAssembly Website
WebAssembly GitHub
Flavio Copes: An Introduction To WebAssembly
Introduction To WebAssembly –– This introduction to WebAssembly is more technical than the others.
Google Codelabs: An Introduction To WebAssembly

How WebAssembly Is Being Used

Since WebAssembly is still in its infancy, the use cases for when to use it are actively being explored. Watching and reading about what other companies are doing with WebAssembly can be a great way to start envisioning what’s possible.

Diving Deeper Into WebAssembly

These are all fantastic articles and videos that explore the various facets and histories of WebAssembly.

WebAssembly + Rust

During the last few years, Rust has positioned itself to be one of the primary languages to use for developing WebAssembly modules.

Some incredible tools and libraries have been created to support the Rust/WebAssembly ecosystem. There is even a WebAssembly working group that is actively working to make Rust’s support of WebAssembly even better.

As a final note, a great place to start is the Rust and WebAssembly book that covers all the major aspects of Rust/WebAssembly development.

WebAssembly + TypeScript

For those who don’t want to go off and learn Rust, you can still take advantage of WebAssembly by using TypeScript! Kind of.

AssemblyScript is a strict variant of TypeScript that can be used to write WebAssembly modules. It means you can use your knowledge of JavaScript to gain some of the powers of WebAssembly.

And just like Rust, there is a great guide/documentation that covers how to get up and running.

WebAssembly Runtimes

Even though WebAssembly is predominantly discussed in the context of the web it does not mean it is restricted to it. In the same way that JavaScript was able to move off the web with JavaScript runtimes like Node.js and Deno, so to can WebAssembly.

Currently, there is active and evolving development on two primary WebAssembly runtimes called Wasmtime and Wasmer.

WebAssembly System Interface (WASI)

Taken from WASI’s introductory document, it is:

“An API designed by the Wasmtime project that provides access to several operating-system-like features, including files and filesystems, Berkeley sockets, clocks, and random numbers.”

The goal is for this API to be standardized and designed to work independently of browsers and JavaScript.

Miscellaneous Resources

Server-Side / Backend Programming

In a sense, server-side programming could be described as the job of designing and implementing APIs.

As stated earlier, Application Programming Interfaces (APIs) are the way that different pieces of software are able to interact with each other.

Continuing the earlier customer-restaurant analogy, as a restaurant you are exclusively preoccupied with taking customer orders, sourcing and making food, and delivering it back to the customer. Another really important component of this job is designing a menu (read: API) that is clear and best serves the customer.

Translated to the world of programming, it means at its core server-side programming is comprised of:

Accepting HTTP requests (read: accept orders)
Processing the requests and finding/creating the data or resources that were requested (read: make the food)
Sending the data/resources back to the client (read: deliver the order)

With all this being said, this analogy breaks down in a couple of ways because for starters a client does not always ask for data/resources to be returned to them. Rather, they might also make a request to add, update, or delete data stored on the server-side (such as adding a profile picture, updating a credit card number, or deleting a user account).

In addition to that, the model I’ve described above (that of getting, adding, updating, and deleting data/resources) is based on a form of internet communication called HTTP (more details below). HTTP is the predominant method of communication on the internet but it does not mean it’s the only one.

Getting Started

These are some great resources to get a better understanding of what server-side programming is and what it entails.

🔥🔥🔥 Dave Stearns Server-Side Web Development Tutorials
🔥 MDN — What Is A Web Server
🔥 MDN — Introduction To The Serverside
🔥 MDN — Client-Server Overview

How To Communicate On The Internet

Thus far when describing how APIs work we’ve focused on how the API is a menu that one piece of software can use to determine what another piece of software offers/provides.

What we haven’t focused on is how these two pieces of software communicate with each other. To reference the analogy from client-side APIs, I said the frontend would use a phone number to call/message the restaurant to tell them its order. But this does not mean that calling/messaging is the only way to communicate with the restaurant — the same holds true for the internet.

The defacto way of communicating on the internet is HTTP/HTTPS (Hyper-Text Transfer Protocol [Secure]). Understanding this communication protocol and how to work with it is crucial for server-side development. In particular, learning about the meaning of HTTP functions like GET, POST, PUT, and DELETE will be very helpful as you dive into learning and using server-side languages/frameworks.

For the majority of web development use cases, you only need to worry about HTTP, but as you continue your backend journey you’ll discover other communication protocols like WebSockets, MQTT, SMTP, XMPP, and more.

🔥🔥🔥 The Hyper-Text Transfer Protocol
🔥🔥 MDN — HTTP
🔥 Communicating Securely With HTTPS
🔥 Real-Time Messaging Concepts/Protocols
MDN — WebSockets APIs

Testing / Debugging Your APIs

Testing and debugging your APIs is a critical part of the server-side development process and lucky for you (and I) there are some great tools created for doing just that.

API Design

As I stated earlier the design of an API (read: menu) is also a critically important job as it can help the client (read: customer) be confident that they are requesting the correct data/resources/actions.

The predominant way of designing APIs in 2020 is to follow the REST pattern and is well worth learning.

Server-Side Architectures

As the size and complexity of your server-side applications grow (as well as how many users your application has), how you organize or architect the various components will become a greater and greater concern.

In 2020, a hugely popular architecture is that of microservices. The idea of microservices is to break up your server-side application into small connected logical units using technologies like Docker (resources can be found in the Cloud section) so that your application is easier to maintain and can scale to many more users.

Miscellaneous Resources

Server-Side Programming Languages

The next couple of sections will be dedicated to a handful of programming languages you can use on the server-side. Over time you will discover the same high-level ideas, goals, and strategies of server-side programming are generally used no matter what language and server-side framework you choose.

As a result, picking a server-side language just comes down to a matter of the language/framework itself and what kinds of benefits and drawbacks they offer.

JavaScript Runtimes

Starting off with what I think is a natural transition from frontend to backend programming is using JavaScript on the server!

From its origins as a scripting language for Netscape Navigator (a very old web browser), JavaScript could only be interpreted and run in a browser.

However, when creating server-side programs you need code that can run on a computer (a server is essentially just a specialized computer for handling network requests). Lucky for you, there are pieces of software called JavaScript runtimes to do just that.

These runtimes allow you to run JavaScript on a computer like a regular Java or Python program, while also giving extra functionality such as accessing a computer’s file system and responding to network requests — creating the foundation for writing JavaScript that runs on a server.

The most famous and widely used JavaScript runtime is Node.js. However, a new runtime called Deno (created by the same person who invented Node.js) is also starting to pick up steam and capture attention.

Node.js Resources

As stated above, Node.js (also sometimes referred to as “Node”) is easily the most famous and widely used JavaScript runtime for executing JS code outside a browser.

Getting Started

These are some great resources to get oriented with Node.js and dive deeper into its core topics. The Introduction to Node.js tutorials are one of the primary sources I used to learn Node and are well worth a read.

Node.js Development Environment

Setting up a Node.js development environment is actually fairly straightforward since all the primary tools you need (i.e. the Node.js runtime and the Node Package Manager) are both downloaded when you install Node.

The only other useful piece of a Node developer environment would be to use an IDE or a text editor extension for working with Node. My recommendation is to use VS Code as it already comes with an incredible JavaScript / TypeScript / Node extension built-in.

Node.js Package Management

A huge benefit to using Node.js is its insanely large ecosystem of third-party packages you can use (i.e. pieces of Node software written by someone else that you can use in your own Node projects).

A piece of software called the Node Package Manager (NPM) is installed when you install the Node.js runtime and is the mechanism for including and tracking the packages your Node projects use.

Note: Another popular Node.js package management tool that you’ll often see is called Yarn.

Node.js Web Frameworks

Just as you can use frameworks in client-side development to make the job of creating websites easier, so to can you use server-side frameworks to make the job of creating server-side applications easier.

There are many Node.js frameworks to choose from, but easily one of the most well known and well-used frameworks is Express.

Miscellaneous Resources

Deno Resources

Deno is a new JavaScript runtime, created by the same person who made Node (Ryan Dahl). The runtime builds on the learning/takeaways Ryan had from building Node and as a result, includes some pretty great features when compared to Node.

Some of these features include:

Deno has much better security built into it
It supports both JavaScript and TypeScript
It has a pretty incredible set of built-in tools inspired by the Go language
It has a high-quality audited standard library also inspired by the Go language

As a final note, don’t worry about needing to learn Deno right now in 2020. Node is not going anywhere and will likely remain the dominant JavaScript runtime for many years to come. I’d rather suggest casual exploration when approaching Deno — it has some seriously cool features that can be fun to play around with. Plus, if/when it reaches industry dominance you’ll already be slightly ahead of everyone else 😉.

Getting Started

When diving into Deno I highly recommend watching Ryan Dahl’s talk on the 10 things he regrets about Node.js. It gives some great insight and context for the goals and design choices of Deno.

Beyond that, the Deno Manual is a wonderfully written resource for getting started with Deno.

🔥🔥🔥 The Deno Manual
🔥🔥 10 Things I Regret About Node.js — Ryan Dahl Talk
🔥🔥 Deno In 100 Seconds
🔥🔥 Deno Website
🔥 Deno 1.0: What You Need To Know
Write A Small API Using Deno

Deno Development Environment

This is the official setup guide found in the Deno Manual. It covers all the bases in a well written and clear way. It’s all you should need.

🔥 Set Up Your Deno Environment

Deno Package Management

Deno takes a very different approach to package management compared to Node. Rather than using NPM to install and track dependencies, you import URLs pointing to the third-party modules you want to use right within any given JavaScript/TypeScript file you’re creating. When your code is executed, the modules located at the given URLs will be automatically fetched and installed.

Note: These modules are only downloaded and installed the first time your code is run. After that, the modules are cached (read: saved locally on your computer) so that the code can be re-executed many times without the worry of having to fetch and install the modules every single time — which could take forever on slow networks.

Modules can be hosted anywhere on the web such as GitHub, a personal web server, or a CDN (content distribution network). Below are some links to Deno’s own third-party module hosting service and other popular CDNs where Deno modules can be found.

As an additional aside, this way of approaching package management is once again a design decision inspired by the Go language and is, in my opinion, a very welcome and super clean solution.

Deno Web Frameworks

Since Deno is such a new runtime the landscape of popular frameworks and libraries is still evolving. Oak seems to be gathering some popularity since it takes a lot of design inspiration from Express and could be worth checking out.

That being said, I also left a link to the “Modules” section of the Awesome Deno GitHub where you can find links to other web frameworks as well.

Miscellaneous Resources

Awesome Deno
Deno GitHub
Deno News
Deno Standard Library
Deno Runtime API
Deno Doc
Deno Style Guide
Denon GitHub –– This is analogous to Node’s nodemon package.

Python Resources

For those who are not as familiar with Python, it is a very high-level general-purpose programming language.

A huge goal of Python is readability and results in a language that can accomplish a lot with very little code.

Like Node, Python also has a massive ecosystem of third-party modules. When combined with the fact that Python is a general-purpose language it means that you can write high-quality code for many areas of computer science such as data science, machine learning, scientific computing, IoT, and (importantly for this guide) web development.

Getting Started

The official Python tutorial was my primary method of learning the syntax and ideas behind Python and is worth reading through (even if casually).

Beyond that, I’ve included some other great resources I’ve used to pick up bits and pieces of Python info.

Python Development Environment

One of the downsides of Python, in my opinion, is that setting up a development environment is not as trivial as one might hope. There are a lot of ways that a development environment can be set up and truth be told I’m not even completely confident in the one I have — it’s still a work in progress.

That being said the resources below are some of the most helpful ones I’ve come across for learning about the various ways that one can approach a Python development environment for web development.

Python Package Management

Another big downside of Python is its disjointed package management ecosystem. There are a lot of tools trying to solve the same problem with no community consensus on what is best.

The result, at least for me, has been a lot of reading, testing, and general uncertainty about what fits my workflow the best. My current favorite is called Poetry and is very similar to NPM.

Python Web Frameworks

From my knowledge and experience, the two big web frameworks for Python are Flask and Django. Flask is a more lightweight framework that gives you the flexibility to implement whatever you might need but at the cost of writing more code.

Comparatively, Django is a heavier framework that gives you a lot of prebuilt software for things such as user authentication. This means you can write less code but at the cost of less flexibility if you need to create something non-traditional or more customized to your needs.

I’ve only worked with Flask at this point, so those are the resources that will be linked below.

Miscellaneous Resources

Go Resources

Go is another general-purpose programming language that can be casually put in the same category as C/C++ and Rust.

It does not run quite as fast as C++ or Rust (although it is still much faster than Node or Python). However, what it loses (slightly) in speed it makes up for in convenience, readability, and all the comforts of a modern language. For example, Go’s built-in tooling is easily the best I’ve ever seen in a language and has led to an incredibly enjoyable developer experience anytime I’ve had to use it.

Along with some of its other features, it makes Go an amazing language to work with for server-side development.

Pro-Tip: If you’re just starting out with Go always type “Golang” instead of “Go” into Google searches — the results will be far more relevant.

Getting Started

These are a few great resources for getting started with Go, however, the server-side tutorials by Dave Stearns discussed below were my primary method for learning Go.

🔥🔥🔥 Dave Stearns Server-Side Tutorials

During college, I took a class on server-side development that used Go as the primary language. The creator of the course (Dave Stearns) wrote a series of tutorials to parallel the curriculum.

The tutorials on Go are some of the most clearly written and informational readings I’ve ever come across and were the primary mechanism that I used to learn the language. They are all worth reading.

Go Development Environment

Setting up a development environment for Go is pretty straightforward. All you need is to download the language (and thus the command line tools for working with Go) and a Go language extension for your text editor of choice.

Go Package Management

As I hinted at in the Deno section above, Go has a pretty unique (and cool) way of approaching package management when compared to other languages like Node or Python.

As part of Go’s command-line tool that is installed with the language, there is a command called go get that can be used to download a package at a given URL. The package is installed locally to your computer and from there you can import it into any Go file you might be writing.

Go Web Frameworks

There are some web frameworks out there for Go, but in most cases, the built-in packages mean you don’t need any third-party libraries for server-side development!

Miscellaneous Resources

Rust Resources

Rust is a language I’m only starting to get familiar with but one that I’m pretty excited about. It is a low-level systems language that can be thought of as a C/C++ competitor with some very nice benefits and features.

Notably, it can run really fast (as fast as C/C++) while at the same time providing memory safety and an incredible(-y strict) compiler/type system that together can catch a ton of bugs and output very helpful/descriptive errors messages and hints.

On the downside, Rust has some fairly complicated syntax and idioms compared to other languages, so it comes with a pretty steep learning curve. It’s definitely not a server-side language you should start out with.

With all that being said, Rust’s position sat squarely in the world of WebAssembly and server-side use cases that have caught my attention in a big way.

Getting Started

When it comes to learning Rust you will find that the primary method of conferring information is through books. In fact, the official method for learning Rust is often called “The Book” in the Rust community and it’s well worth reading.

There is also a counter-part to the book that teaches Rust using a more hands-on example-based approach which I’ve personally found very helpful.

Rust Development Environment

This is the official getting started page found on the Rust website. It covers installing the language and provides links to developer tools for popular text editors and IDEs. It’s all you should need to get up and running.

🔥 Getting Started With Rust

Rust Package Management

Rust has a fantastic package management ecosystem that is very similar to NPM. Rust provides a command-line tool called Cargo that operates very similar to NPMs command-line tool. Also instead of calling third-party code “packages”, the term “crates” is used.

Rust Web Frameworks

Similar to Deno, the ecosystem of Rust web frameworks seems to be evolving still. However, it is much further along than Deno with Rust being nearly 5 years older.

The first link below does a great job analyzing some of the popular options in the ecosystem and providing recommendations.

🔥 Choosing A Rust Web Framework, 2020 Edition
Actix Framework –– Similar to Flask or Express
Rocket Framework –– Similar to Django

Miscellaneous Resources

Database Resources

Continuing the customer-restaurant analogy, databases can be thought of as the fridge or cold room in a restaurant. It’s the place where food and ingredients (read: your application data) can be stored before they’re ready to be cooked and delivered to a customer.

Just as fridges come in many different shapes and sizes, there are a variety of database types that solve different problems. The link below is an amazing video that discusses the various database types you might use.

For the purposes of this guide (and my own limited knowledge of the entire database ecosystem), we will mainly focus on the most popular type of database — relational databases. The most simple analogy I can think of is that relational databases are like spreadsheets that can be connected together. They use SQL (Structured Query Language) to create and maintain these spreadsheets. Below you will find resources for a popular dialect of SQL called MySQL.

Additionally, relational databases and SQL are so dominant that you will sometimes see non-relational database options casually referred to as “NoSQL databases.” That being said, I would once again highly recommend watching the video linked below to get a better understanding of what else is out there.

🔥🔥🔥 7 Database Paradigms

MySQL Resources

MySQL is one of many flavors of SQL and just happens to be the version of SQL I learned. It can do all the core operations of any other SQL language but with minor syntax and feature differences.

Getting Started

Advanced SQL Concepts

Using MySQL With Backend Languages

NoSQL Resources

A big name in the NoSQL space that often comes up is MongoDB which uses JSON as it’s storage medium (compared to the spreadsheet-like format of SQL databases).

Cloud Resources

Finally, we get to the cloud.

Physically speaking, the cloud is just a network of servers spread across the entire world that is owned and operated by a variety of companies (notably Amazon, Microsoft, and Google).

For the purposes of full-stack software engineering, the benefit of the cloud is that you can rent the computing power and storage capacity of this network to run your web applications at any scale — whether your app has tens of users or billions of users.

One of the big tasks of using the cloud is determining what services and technologies to use.

There are a mind-boggling number of these services available to use (Amazon’s AWS has over 150+ options alone). Notably, for web development, there are tons of options for web application deployment and options for database deployment. Some of these options lean towards automating the process of deployment while others are more flexible and let you use technologies like Docker and Kubernetes to set up your own custom environment.

Take your time to research these various services along with there drawbacks and benefits and you’ll be golden. Additionally, the first link below offers a great introduction to some of these services and what’s possible in the cloud.

Getting Started

Docker / Kubernetes (K8s) Resources

At a high-level (that leaves out a lot of details), Docker is a way of packaging your web applications into what are called “containers” so that they can be deployed basically anywhere. This is very powerful because it means you as a developer don’t have to worry about getting your application to run on different servers with different operating systems.

Kubernetes (sometimes called K8s for short) is essentially a piece of software for organizing and managing Docker containers in the Cloud.

Heroku Resources

Heroku is another Cloud service (just like Amazon AWS or Microsoft Azure), but notably, it is my go-to service for deploying smaller applications and websites.

Plus when combined with the tips from the third link you can effectively get 24/7 uptime for free.

🔥🔥🔥 Tips For Running Free Dynos On Heroku In 2020
🔥 What Is Heroku?
Heroku Getting Started
Heroku Documentation

Miscellaneous Resources

Finally, here are all the resources that didn’t neatly fit into the other categories but are still well worth a look 👀.

Sources For Inspiration

General Education Resources

🔥🔥🔥 Developer Roadmaps
🔥 Sideways Dictionary
🔥 Choose An Open Source License
🔥 FreeCodeCamp
🔥 Crash Course Computer Science Series
🔥 The Missing Semester of Your CS Education
HackerRank Developer Skills Report
Web.dev
Google Developers — Web
TutorialsPoint

Great Blogs / Books / Articles

🔥🔥🔥 Anything Written By Lin Clark
🔥 Tania Rascia Blog
🔥 Flavio Copes Blog
🔥 The Impostor’s Advantage
🔥 How To Do Code Reviews Like A Human (Part 1)
🔥 How To Do Code Reviews Like A Human (Part 2)
FreeCodeCamp News
Free UX Ebooks
MVC For Noobs
Design Patterns For Humans
The 12 Factor App
Cooperative Software Development Book

Stock Image Resources

🔥 Pexels –– Free/copyright free stock images.
Unsplash –– Free/copyright free stock images.
AI-Generated Human Photos

Wrapping Up

Congratulations! You’ve officially made it through the mega full-stack web development resource guide. It was definitely not a short read.

I hope you picked up some new knowledge along the way. Learning the many domains of full-stack web development can be a lot to grapple with at times but if you take your time and pace it out the results are more than worth the effort.

If you would like more useful resources, thoughts, and information on web development topics, you can follow me on Twitter.

Best of luck on your own web development journeys! You got this.

Want the Chrome bookmarks from this article for your own computer? Follow this link.

Originally published at hawkticehurst.com on September 10, 2020.

codeburst

The Mega Full-Stack Web Development Resource Guide

A human-readable guide with ~600 links on topics covering everything from HTML to React to The Cloud.

Table of Contents

Prelude

Development Resources

Client-Side / Frontend Resources

Server-Side / Backend Resources

Miscellaneous Resources

Prelude

Why Is This Guide A Thing?

About This (Long) Guide

Development Resources

Text Editors / IDEs

Text Editor Extension Resources

Terminals / Shells

Browser Resources

🔥 Browser Development Tools

How Browsers Work

Browser Engine Resources

Chrome Engines

Firefox Engines

Safari Engines

Miscellaneous Resources

Client-Side / Frontend Programming

HTML Resources

Getting Started

HTML Tags References

HTML Attribute References

HTML Character Codes References

HTML Meta Tags

Accessibility

Miscellaneous Resources

CSS Resources

Getting Started

CSS Syntax & Terms

CSS References

CSS Layout / Box Model

CSS Flexbox

CSS Grid

CSS Responsive Design

CSS Animations

Color & Gradients Resources

Typography & Font Resources

Icon & Graphic Resources

CSS Preprocessors

CSS Frameworks

Miscellaneous Resources

JavaScript Resources

Getting Started

JavaScript Basics

The DOM

JavaScript Events

JSON

AJAX & Fetch

Promises & Async/Await

Testing & Debugging Resources

JavaScript Modules

JavaScript ES6

Regular Expressions

🔥 JavaScript Libraries

JavaScript 3D Graphics

Miscellaneous Resources

TypeScript Resources

Getting Started

Miscellaneous Resources

Frontend JavaScript Frameworks

Getting Started

Getting Started With React

React State Management

React + TypeScript

Miscellaneous Resources

Client-Side APIs

Getting Started

Your Own API

Third-Party API Resources

Browser API Resources

WebAssembly Resources

Getting Started

How WebAssembly Is Being Used