We're live-coding on Twitch! Join us!

welcome to scotch.io

fun and practical web development tutorials

Top 11 Static Site Generators in 2020

With the growth of the JAMstack and its community, Static Site Generators are becoming more and more popular. In this article, let's take a look at the top Static Site Generators of 2020! Why Static Site Generators First off, let's quickly talk ...

Read more

Install Strapi on DigitalOcean with 1-Click

Strapi is a tool that allows us to build a self-hosted backend quickly. You can host your Strapi installation and quickly build out your backend and database schema. Strapi will als...

Read more

Scotch.io Runs on DigitalOcean (and always has!)

About Scotch.io Scotch.io is a web development tutorial blog that started out as a writing journey for me. We specialize in tutorials that are easy to understand, practical, and focus on real-world applications. Scotch.io #RunsOnDO! Biggest Chal...

Read more

Install WordPress on DigitalOcean with 1-Click

WordPress powers 36% of the web and has been a staple in the blogging and website industry for a while now. The first versions of Scotch.io were built on WordPress! ...

Read more

Handling Images in Gatsby with High Performance

Gatsby, an open-source tool for building high-performance JAMstack apps, boasts numerous plugins that extend its capabilities. For example, by leveraging source plugins in Gatsby, you can source data from multiple services, APIs, and even Excel spreadsheets. ...

Read more

Exploring the New GitHub CLI

GitHub recently announced their new CLI offering. cli.github.com It allows us to do GitHub work directly from the command line. This is more than just push or pull and is not tied directly to the Git command line tools. It is ...

Read more

Get Started with Tailwind CSS in 15 Minutes

Tailwind CSS is a CSS framework that gives you utility classes instead of pre-built components. One of my favorite things I've found after using Tailwind: You'll never need to override CSS framework classes again. ...

Read more

Create a CSS/JS Countdown Timer

I was watching Disney+ the other day (Mandalorian rocks!) and I saw a neat UI for auto advancing a user to the next episode. It was a button with a countdown. I thought "Can we make that in CSS?!" Let's go ahead and make it! What We'll Build Here is our countdown timer. You...

Read more

Accurate Forward & Reverse Batch Geocoding REST API Geocoding is the ability to provide geographical coordinates based on a known address. This is also known as forward-geocoding. Reverse-geocoding is the ability to input geographial coordinates and get an address back from those coord...

Read more

Flight Tracking with aviationstack Real-Time Flight Tracking API

aviationstack is a suite of API used in tracking flight data. This is useful for individuals who are interested in building a flight booking or tracking system. Features It’s free to get started, so you can evaluate if this is suitab...

Read more

Recreate the Spotify Album Page with Tailwind CSS

Tailwind CSS is an awesome tool that changes the way we write our HTML and CSS. Tailwind is a "utility-first CSS framework" that I initially wasn't sure about. Our HTML gets pretty busy when using Tailwind, but I've found it's not that bad of a tradeoff....

Read more

Recreate Google.com with Tailwind CSS

Tailwind CSS is an awesome tool that changes the way we write our HTML and CSS. Tailwind is a "utility-first CSS framework" that I initially wasn't sure about. Our HTML gets pretty busy when using Tailwind, but I've found it's not that bad of a tradeoff....

Read more

Recreate the Tweet Creation Modal with Tailwind CSS

Tailwind CSS is an awesome tool that changes the way we write our HTML and CSS. Tailwind is a "utility-first CSS framework" that I initially wasn't sure about. Our HTML gets pretty busy when using Tailwind, but I've found it's not that bad of a tradeoff....

Read more

Build a Weight Tracker App with Node.js and PostgreSQL

Did you make any resolutions this year? One resolution I seem to make every year is to lose weight and exercise. Sometimes I even stick to it. A good way I have found to keep on track with any resolution is to record progress. There's something about visualizing progress that help...

Read more

5 Things I Love About My Website Built with Next.js

This site is home to certain tech and web dev goodies that make me very happy. This post is about what they are, and how they work. 1. It follows light/dark mode based on your preference While most websites these days come with some type of dark/light mode toggle switch, I serve ...

Read more

Host websites with a $100 credit