Frontend Hero Web Development Catalog

Host Your Website for Free with Kinsta: A Comprehensive Step-by-Step Guide

A few weeks ago, Kinsta, a major player in the cloud hosting industry, announced that they are now offering free static site hosting. This is…

How to Display Dynamic Content With the Litespeed Cache Plugin

Would You Like to Display Dynamic Content (via a shortcode) In Your Cached WordPress Website? Read on if You Are Using the Lightspeed Server.

Add a Scrolling Progress Bar to Your Article That Visualises How Much Has Been Read

A nice and easy one today to show you how to add a progress bar to your website – or article, that visualises how much of an article has been read (or how much a user has scrolled down the page).

How to Create a Scrolling Call to Action Marquee Button

In This Week’s Frontend Hero Tutorial, We’ll Be Creating a ‘Call to Action’ Animating Marquee Button, That Is Sure to Grab Your User’s Attention.

Creating a Pomodoro Timer From Scratch With HTML, CSS & JavaScript

I’m a Big Fan of the Pomodoro Technique and in This Week’s Tutorial, We Will Be Creating a Pomodoro Timer, With HTML, CSS, & JavaScript.

How I FTP Commits to My Host via Github

How I’ve changed my workflow from FTP’ing directly, to using Git, Github, and Github actions to FTP on Commit.

Building a Slick Navigation Menu With Animated Indicator

Here I build my own version of the famous ‘Menu With Animated Indicator’ with HTML, CSS & JavaScript.

Menu With Animated Indicator

Build a Creative Animated Hero Header

Here’s a tutorial on how to grab your user’s attention by building an animated hero header that animates the background, and content Into view, upon page load.

The Ultimate Guide on How to Build a Custom Google Map

In this tutorial, we go through the steps of creating a stylish custom Google map with bespoke icons and colour scheme, using the Google Maps API.

Create a Gutenberg Block with Advanced Custom Fields

This tutorial requires the Pro version of Advanced Custom Fields. If you know me I tend to bang on about my love for Advanced Custom…

Create an A-Z Filter For WordPress Posts

You’ve most likely seen these A-Z filter areas on your travels. They’re pretty useful if have a site that contains a lot of index type…

Exclude Specific Posts From WordPress Website

When you create your hide_from_loop custom field, You will have to re-save your posts to update the custom field value in the database for this…

Create a Blurred Paywall Area

You’ve most likely seen one of these paywall sections on your travels to some media websites that give you a few free articles to read,…

WooCommerce Template Overrides Not Working

This is a quick one that I recently spent a few minutes scratching my head over. I am working on a WooCommerce store and copied…

How To Create Your Own Strava Stats Widget

Strava is one of the world’s most loved social networks for tracking all things fitness. You can track your runs, rides, swims and many other…

Change Email Recipient Based On Subject in Contact Form 7

I have been using Contact Form 7 on a lot of my personal sites, as well as client sites for over a decade now and…

Create a Variable Item Navigation Menu With Flexbox

This is a handy one for making a navigation menu with equal nav item widths regardless of how many items you have. The old methods…

Create multicolored borders with CSS

A nice easy one today. We are going to create a little non standard border that includes a few different colors to spruce things up….

Detect if User Is Using Dark Mode

As I use dark mode on all of my devices, all of the time, I wanted to find out how easily I can detect if…

Create a Slick Rollover Effect For Text Links

I stumbled upon this neat little text effect browsing – nay drooling over the Blue Stag website on my internet travels. It’s subtle, adds to…

Create a staggered animated menu with CSS

A nice and simple web development tutorial for you today. We are going to create a vertical navigation block, that could be used for such…

Mask text with an image in CSS

Sometimes default text just won’t cut it. If you are designing a site or landing page that needs high impact imagery inside of your text…

Adding an Animated SVG Border To Links

I tried something a bit different today and outside of my comfort zone and experimented with animating SVGs. The idea I had was to animate…

Adding Dropdown Arrow Indicators With Font Awesome

I am using the 4.7 version for this tutorial, not the latest 5.0+ version as it works fine for my needs. If you want to…