The Mega Full-Stack Web Development Resource Guide
Want the Chrome bookmarks from this article for your own computer? Click the button below.Download Chrome Bookmarks
Table of Contents
The guide is split into five main categories.
Client-Side / Frontend Resources
Server-Side / Backend Resources
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!
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.
- 🔥 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
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
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.
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.
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
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.
- 🔥 Browser Engines: The Crux Of Cross Browser Compatibility
- 🔥 Quantum Up Close: What Is A Browser Engine?
- Which Browser Engines Powers Your Web Browsing––And Why Does It Matter?
- Understanding The Role Of Rendering Engine In Browsers
- Web Browsers And Their Engines: Know Everything
- Wikipedia: Browser Engines
- SpiderMonkey Website
- MDN Gecko Rendering Engine
- Servo––Parallel Browser Engine Project
- Servo Design
- Servo Blog
- Servo: Today & Tomorrow
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).
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
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 I'm fond of is, 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.
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 Dog –– Global Attributes Reference
- MDN –– Attributes Reference
- MDN –– Global Attributes Reference
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.
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.
- 🔥 Introduction To Web Accessibility
- 🔥 MDN –– Accessibility
- How Browsers Interact with Screen Readers & Where ARIA Fits In
- The Accessibility Tree
- I Used The Web For A Day Using A Screen Reader
- 5 Most Annoying Website Features I Face As A Blind Person Every Single Day
- 🔥 A Practical Guide To SVGs On The Web
- Intro To Semantic HTML
- MDN –– Multimedia & Embedding Guides
- MDN –– HTML Tables Guides
- MDN –– HTML Forms Guides
- A Complete Guide To Lazy Loading Images
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.
Once again, here are some more comprehensive tutorials for those looking for a structured walkthrough of CSS.
- HTML Dog –– CSS Tutorial
- MDN –– CSS Basics
- How CSS Works
- Getting To Know CSS
- Good And Bad CSS Practices For Beginners
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.
Similar to HTML, these resources are effectively dictionaries for CSS properties.
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.
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
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.
- 🔥 Internetting Is Hard –– Responsive Design Tutorial
- Responsive CSS
- MDN –– Mobile Web Development
- Internetting Is Hard –– Responsive Images
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
- A tool for generating CSS animations.
- Keyframes App
- A tool for prototyping CSS animations.
- 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.
- 🔥🔥🔥 Google Fonts
- 🔥 Internetting Is Hard –– Web Typography
- Google Font Finder
- Font Squirrel
- Font Spring
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.
- Orion Icon Library
- 700+ CSS Icons
- Font Awesome Icons
- World Vector Logo
- Awwwards Icon Sets Collection
- Fancy Border Radius Generator
- CSS Blobs
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 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.
- 🔥 CSS Variables In 100 Seconds
- 🔥 CSS Psuedo-Classes In 100 Seconds
- 🔥 CSS Psuedo-Elements In 100 Seconds
- Things Nobody Ever Taught Me About CSS
- The Just In Case Mindset In CSS
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.
- 🔥 Beyond Console Log In 100 Seconds
- MDN –– Intro To The DOM
- How To Make Changes To The DOM
- How To Traverse The DOM
- DOM Tree Video Explanation
The combination of listening for events and then executing code as a result enables some truly complex behavior in your websites.
Below you will find some links for learning more about JSON and its syntax.
AJAX & Fetch
In particular, Fetch offers a very clean way of requesting and receiving data from a server using promises.
Promises & Async/Await
- 🔥 The Async Await Episode I Promised
- MDN –– Promises
- Learn Async/Await By Example
- MDN –– Using Promises
- MDN –– Concurrency Model And The Event Loop
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.
- A Comprehensive Guide To Front End Testing
- Testing With Jest
- 🔥 ES Modules: A Cartoon Deep Dive
Below are a number of resources that cover those changes and improvements.
- 🔥 The ES6 Guide
- 🔥 Interactive ES6 Guide
- 🔥 ES6 Features
- 🔥 ECMAScript6 Features
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.
- 🔥 Regular Expressions (Regex) In 100 Seconds
- 🔥 RegexOne –– Interactive Regex Guide
- 🔥 Rubular –– Regular Expression Tester
- MDN –– Regular Expressions
- Regex Crossword
Below you will find some of my favorite libraries that I've come across.
- This reading gives a nice introduction to libraries and how to use them.
- Lodash is an amazing utility library that makes it easier to work with arrays, numbers, objects, strings, and so on.
- Immutable is another utility library for immutable data structures.
- Blotter is a library that provides some super cool and unconvential text effects.
- Matter is a 2D physics engine for the web.
- Pts is a really cool visualization library.
- Rellax is a lightweight parallax library.
- Textures provides SVG patterns for data visualizations.
- 🔥 Whatthefuck.is
- 🔥 Functional Programming In JS
- 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
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.
- 🔥 TypeScript Handbook
- 🔥 All You Need To Know About TypeScript
- TypeScript Website
- TypeScript –– The Basics
- The Magic Of TypeScript Decorators
- TypeScript Deep Dive
- TypeScript Playground
- TypeScript TSConfig Reference
- TypeScript Tools
- Understanding TypeScripts Type Notations
- Helpful TypeScript Coding Guidelines
- Announcing TypeScript 4.0
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.
- 🔥 History of Front-End Frameworks
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
- 🔥 Thinking In React Hooks
- A Visual Guide To State In React
- A Cartoon Guide To Flux
- A Cartoon Intro To Redux
React + TypeScript
Why not combine two great technologies? Well you can!
- 🔥🔥🔥 TypeScript and React Guide
- 🔥 React TypeScript Cheatsheets
- React & TypeScript Series
- Use TypeScript To Develop React Applications
- 🔥 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.
- 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.
- 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
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.
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.
- 🔥 10 Lesser-Known Web APIs You May Want To Use
- MDN –– Introduction To Web APIs
- MDN –– Guide To Web APIs
- MDN –– Web API Reference
- Chrome APIs List
- Chrome Web APIs
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.
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's Post-MVP Future: A Cartoon Skill Tree
- 🔥 WebAssembly: A Game Changer For The Web
- The History Of WebAssembly
- Baby's First WebAssembly Module
- Memory In WebAssembly (And Why It's Safer Than You Think)
- Calls Between JS and WASM Are Finally Fast
- Making WebAssembly Even Faster
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.
- 🔥 Rust and WebAssembly Book
- 🔥 Rust and WebAssembly Website
- 🔥 Making WebAssembly Better For Rust & For All Languages
- The wasm-bindgen Guide
- The wasm-pack Book
- wasm-pack Website
- wasm-pack GitHub
- Web-sys Crate Announcement
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.
And just like Rust, there is a great guide/documentation that covers how to get up and running.
Currently, there is active and evolving development on two primary WebAssembly runtimes called Wasmtime and Wasmer.
- Wasmtime Website
- Wasmtime Guide
- Wasmtime GitHub
- Wasmtime Demos
- Wasmer Website
- Debugging WebAssembly Outside The Browser
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."
- 🔥 WASI Intro Document
- 🔥 WASI Website
- 🔥 WebAssembly Interface Types
- Standardizing WASI
- WASI Background
- WASI Document Guide
- 🔥 Awesome WASM GitHub
- 🔥 WebAssembly Studio
- 🔥 Build Your Own WebAssembly Compiler In TypeScript
- 🔥 Announcing The Bytecode Alliance
- Bytecode Alliance Website
- Bytecode Alliance GitHub
- WebAssembly Debugging In Chrome DevTools
- WebAssembly Specification
- W3C WebAssembly Community
- W3C WebAssembly Working Group
- W3C WebAssembly Core Spec
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.
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.
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.
- 🔥 Designing APIs According To A RESTful Pattern
- REST API Documentation Best Practices
- REST API Tutorial
- API Design Cheat Sheet
- The Original REST Paper
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.
- 🔥🔥 Introduction to Microservices Series
- Another Microservices Series
- Microservice Cheat Sheet
- Platform-Building Cheat Sheet
- Web Architecture 101
- MDN––Server-side Website Programming
- MDN –– Guide To Server-Side Frameworks
- Cross-Origin Resource Sharing Tutorial
- What Is CORS?
- Environment Variables
- Tracking Sessions
- Authenticating Users
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.
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.
- 🔥🔥🔥 Introduction to Node.js
- 🔥🔥 Node.js Ultimate Beginner's Guide In 7 Easy Steps
- 🔥 Nodejs.dev Website
- Nodejs.org Website
- Node Documentation
- The Definitive Node.js Handbook
- Node.js Tutorial
- Why The Hell Would I Use Node.js? A Case By Case Tutorial
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.
- Setup Node.js Development Environment
- Setting Up A Node.js Development Environment
- Node.js Development Environment Setup
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.
- Node.js Microservices
- Debugging Node.js Programs
- Let's Code A Web Server From Scratch With Node.js Streams
- Building A Simple Single Sign On (SSO) Server From Scratch
- Let's Build Express
Some of these features include:
- Deno has much better security built into it
- 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
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.
Deno Package Management
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.
- 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.
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.
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.
- 🔥 The Official Python Tutorial
- Python Wiki Beginner's Guide
- Advanced Python Made Easy
- The Hitchhiker's Guide To Python
- Full Stack Python
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 Development Environment, 2020 Edition
- 🔥 Definitive Guide To Python On MacOS
- 🔥 Getting Started With Python In VS Code
- How To Install Python 3 and Set Up a Local Programming Environment On MacOS
- Python Virtual Environments: A Primer
- Comparing Python Virtual Environment Tools
- Goodbye Virtual Environments?
- Auto Formatters For Python
- Black Formatter
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.
- 🔥🔥 Poetry Website
- 🔥🔥 Python Projects With Poetry Series
- Create and Publish a Python Package With Poetry
- Develop and Publish Your Python Package With Poetry
- Python's New Package Landscape
- Python Application Dependency Management in 2018
- Pipenv and Poetry: Benchmarks and Ergonomics
- Pipenv and Poetry: Benchmarks and Ergonomics II
- Packaging a Python Library
- Why You Should Use pyenv + Pipenv For Your Python Projects
- Faster Docker Builds With Pipenv, Poetry, or pip-tools
- Python3 Virtualenv Setup
- Virtualenv Documentation
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.
- 🔥🔥🔥 Real Python Tutorials
- 🔥🔥🔥 Python Cheat Sheet
- 🔥 Math To Code
- An interactive NumPy tutorial
- What's __init__ For Me?
- What's In Python's __name__?
- Python: Beyond The Basics II
- Python Tricks 101
- Try Out The Walrus Operator In Python 3.8
- A Byte Of Python eBook
- Python Scripts
- Open Sourcing a Python Project The Right Way
- Python Tooling Makes a Project Tick
- Python Libraries To Make Your Code Readable, Reliable, And Maintainable
- Intro To Test Framework Pytest
- Official Pytest Website
- What The Mock? A Cheatsheet for Mocking in Python
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.
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.
- 🔥 Go.dev Website
- 🔥 A Tour Of Go
- Go Website
- How To Write Go Code
- Go Documentation
- An Introduction to Go Book
- Learn Web Programming In Go By Example
- Go By Example
🔥🔥🔥 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.
- Introduction To Go
- The Go Language
- Go Slices And Maps
- Go Structs And JSON
- Go Web Servers
- Tokenizing HTML Streams In Go
- Automated Testing In Go
- Talking To Databases From Go
- Sharing Values With Go Handlers
- Middleware Patterns In Go
- Protecting Data Structures With Mutexes
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!
- Awesome Go
- Go Command Documentation
- Effective Go
- Writing Go Web Applications Tutorial
- Create A Simple Load Balancer With Go
- The Go Wiki
- Go Blog
- Go Playground
- A Curated List Of Go Patterns
- Go Standard Packages
- Go Test Coverage
- How/Why Is Concurrent Code Faster Than Sequential Code?
- Go Concurrency From The Ground Up
- Concurrency Is Not Parallelism Talk
- Go Concurrency Patterns Talk
- The Go Memory Model
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 has caught my attention in a big way.
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.
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
- 🔥 Rust In Production At Figma
- 🔥 Rust 2018 Is Here… But What Is It?
- 🔥 How Rust Helps You Prevent Bugs
- Awesome Rust
- Rust In Detail: Writing A Scalable Chat Service From Scratch
- Rust Nightly Edition Book
- Futures Explained In 200 Lines of Rust
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.
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.
Advanced SQL Concepts
Using MySQL With Backend Languages
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).
- How MongoDB Is Different From A SQL Database
- MongoDB Basics Tutorial
- How To Use MongoDB With Node.js
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.
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.
- 🔥 Docker In 100 Seconds
- 🔥 Learn Docker In 7 Easy Steps - Full Beginner's Tutorial
- 🔥 Containerizing With Docker
- A Comprehensive Intro To Docker, Virtual Machines, and Containers
- Docker Website
- Docker Getting Started
- Docker Overview
- Best Practices For Writing Dockerfiles
- Kubernetes Website
- Kubernetes Basics
- Kubernetes Documentation
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
- AWS Website
- Deploying to AWS
- AWS Educate
- Microsoft Azure Website
- Azure Student Developer Resources
- Google Cloud Website
- Google Cloud Getting Started
- DigitalOcean Website
- Deploying to Digital Ocean
- Cloudflare Workers
- Cloud Run Quick Start––Docker To Serverless
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
- 🔥 Awwwards Collections
- 🔥 Dribbble
- CSS Design Awards
- Best Website Gallery
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
- Google Developers - Web
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.
- Free/copyright free stock images.
- AI-Generated Human Photos
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. 💫