All posts

Video tutorials and written explainations.

hunter

Hunter Becton

May 25, 2023

The ultimate guide to CSS Flexbox

Master CSS Flexbox with this comprehensive guide. Learn to create responsive, flexible, and customizable web layouts with ease.

CSS

hunter

Hunter Becton

January 22, 2023

Boost productivity while programming with Git aliases

Git aliases are abbreviated versions of Git commands that you can use instead of the full command name, which can boost your productivity as a programmer.

Git

Productivity

hunter

Hunter Becton

October 6, 2022

How to create the Holy Grail Layout with CSS Grid

CSS Grid makes building responsive, adaptive grid layouts easy! This tutorial will show you how to use CSS Grid to create a responsive "Holy Grail" layout.

CSS

hunter

Hunter Becton

July 1, 2022

How spacing works on the web: CSS Box Model

The CSS Box Model consists of four areas: content, padding, border, and margin. Knowing how they work together in web development and design is essential.

CSS

hunter

Hunter Becton

April 23, 2022

How to make nav bar styles in React change on scroll

Learn how to change the styles of a navigation bar when a user begins to scroll and improve your user experience with a custom React hook and Tailwind CSS.

JavaScript

hunter

Hunter Becton

September 9, 2021

How to build resizable panels in React with Split.js

Want to build resizable panels like the CodePen editor? Follow this web development tutorial to learn how to build resizable panels in React with Split.js.

React

hunter

Hunter Becton

July 20, 2021

How to build a route progress bar in Next.js

Create a progress bar at the top of a Next.js application to let users know when route changes start and finish or when their requests are being processed.

React

Next.js

hunter

Hunter Becton

June 15, 2021

HTTPS and subdomains on localhost with Caddy Server

Have you ever needed SSL on localhost? In this web development tutorial, you'll learn how to get HTTPS and a subdomain setup on localhost with Caddy Server.

Tools

hunter

Hunter Becton

February 20, 2023

The ultimate guide to web fonts

Learn how to use web fonts for web development! From typography basics to implementation, we've got you covered for creating optimized, user-friendly websites.

Web Fonts

hunter

Hunter Becton

December 16, 2022

15 essential keyboard shortcuts for VS Code

These VS Code keyboard shortcuts are easy to learn, improve your workflow, and help you become a more productive developer.

Productivity

VS Code

hunter

Hunter Becton

July 21, 2022

A quick guide for color contrast and web accessibility

With so much riding on web accessibility, it's crucial to clearly understand the requirements for color contrast and how they might impact your website design.

Accessibility

hunter

Hunter Becton

May 25, 2022

Fix broken images in React with Next.js

Build a fallback image component in Next.js that renders a placeholder image if the original image link is broken and returns an error.

Next.js

React

hunter

Hunter Becton

March 24, 2022

How to format dates with vanilla JavaScript

Learn how to convert long, hard-to-read timestamps and date strings into a readable format using only vanilla JavaScript and the built-in toLocaleString method.

JavaScript

hunter

Hunter Becton

August 6, 2021

How to create a React scroll-to-top button

Learn how to create a simple scroll-to-top button with React to allow your users to quickly jump to the top of a webpage with just a click of a button.

React

hunter

Hunter Becton

June 24, 2021

How to create a React component dynamically with JSON

Need to render React components from a database? In this web development tutorial, you'll learn how to use createElement to render React components without

React