Brandon Himpfen

Brandon Himpfen

Sign in Subscribe

LinkTree using Bootstrap

LinkTree using Bootstrap

In this tutorial, I'm going to show you how-to create your own LinkTree page using Bootstrap and a bit of custom HTML and CSS.

Reddit Button for Bootstrap using Sass and Font Awesome

Reddit Button for Bootstrap using Sass and Font Awesome

Learn how-to create a Reddit social sharing button for the Bootstrap front-end framework using Sass and Font Awesome.

Display Back to Top Link Only on Small Devices

Display Back to Top Link Only on Small Devices

In this tutorial I’m going to show you how-to display a “back to top” link only on small devices.

Add Fathom Analytics to Jekyll

Add Fathom Analytics to Jekyll

Learn how-to add self-hosted Fathom Analytics to your Jekyll theme. Add the following code snippet in between the head HTML tags in your Jekyll theme's default.html file.

Add Google Analytics to Jekyll

Add Google Analytics to Jekyll

Learn how-to add Google Analytics to your Jekyll theme. Add the following code snippet to your themes default.html file in-between the head HTML tags.

LinkedIn Button for Bootstrap using Sass and Font Awesome

LinkedIn Button for Bootstrap using Sass and Font Awesome

Learn how-to create a LinkedIn social sharing button for the Bootstrap front-end framework using Sass and Font Awesome.

Add Plausible Analytics to Jekyll

Learning Centre

Add Plausible Analytics to Jekyll

Learn how-to add Plausible Analytics to your Jekyll’s theme. Add the following code snippet to your theme’s default.html file in between the head HTML tags.

Facebook Button for Bootstrap using Sass and Font Awesome

Facebook Button for Bootstrap using Sass and Font Awesome

Learn how-to create a Facebook button for the Bootstrap front-end framework using Sass and Font Awesome.

Sponsor Project Badges for GitHub

Sponsor Project Badges for GitHub

Learn how-to quickly and easily create sponsor badges for your GitHub project. You can link these badges to your preferred donation platform or to a GitHub repo that lists multiple donation platforms.

Linear Gradient Background Sass Mixins

Learning Centre

Linear Gradient Background Sass Mixins

In this tutorial, I’m going to show you how-to create Sass mixins for linear gradient backgrounds. Top to Bottom // Background Gradient: Top to Bottom @mixin bg-gradient-t2b($start-colour, $end-colour) { background-color: $start-colour; background-image: -webkit-gradient(linear, left top, left bottom, from($start-colour), to($end-colour)); background-image: -webkit-linear-gradient(top, $start-colour, $end-colour); background-image: -moz-linear-gradient(top,

Bootstrap Jumbotron Background Cover Image

Learning Centre

Bootstrap Jumbotron Background Cover Image

In Bootstrap, a jumbotron is a lightweight and flexible component to showcase key content on your website, web app or blog. By default, a jumbotron is light grey. You can change the colours but what if you wanted to use a background image. The background image should expand the full

Add an SSL Trust Seal on Easy Digital Downloads Checkout

Learning Centre

Add an SSL Trust Seal on Easy Digital Downloads Checkout

Adding an SSL trust seal can increase trust from someone wanting to purchase from you and therefore increase the likelihood of them completing the order.

Minimum Required PHP Version for Plugins

Learning Centre

Minimum Required PHP Version for Plugins

WordPress has introduced a way for developers to set a minimum required PHP version for their plugins. If you are a WordPress plugin developer and want to set a minimum required PHP version for your WordPress plugin, simply add Requires PHP: to your WordPress plugin's readme.txt file. === Better WP

Center a Website using CSS

Learning Centre

Center a Website using CSS

The following tutorial is simple and will show you how to center your website using CSS.

Linting HTML using CSS

Linting HTML using CSS

You can use the following CSS to lint your HTML. Avoid inline styling: Check to see if a link has no or meaningless href value, and check for empty interactive elements:

How-to Install HHVM on Ubuntu 14.04

Learning Centre

How-to Install HHVM on Ubuntu 14.04

HHVM is an open source virtual machine designed for executing programs written in Hack and PHP. The advantage of HHVM is an increase in web request throughput and reduction in memory consumption compared to traditional PHP hosting. It was developed and open sourced by Facebook.

Allow SVG through WordPress Media Uploader

Learning Centre

Allow SVG through WordPress Media Uploader

Add the following to your theme’s functions.php file to allow .svg files to be uploaded through the WordPress media uploader: function svg_mime_type( $mimes ){ $mimes['svg'] = 'image/svg+xml'; return $mimes; } add_filter( 'upload_mimes', 'svg_mime_type' );

Material Design Bootstrap Buttons using Sass

Learning Centre

Material Design Bootstrap Buttons using Sass

In this tutorial, I’m going to show you how-to create Bootstrap buttons based on Material Design’s colour palette using Sass stylesheet language. Example of what we will create: HTML To add a Material Design Bootstrap button to your website, web app or blog use the following HTML code:

Social Sharing Buttons using Pure.css and Font Awesome

Social Sharing Buttons using Pure.css and Font Awesome

Pure.css or Pure, is a free and open source project by Yahoo. Pure consists of a set of small, responsive CSS modules that you can use in every website or web app.In this tutorial, I’m going to show you how-to create social sharing buttons using Pure.css and Font Awesome.

Custom Pure.css Button

Custom Pure.css Button

Pure.css or just Pure, is a set of small, responsive CSS modules for creating websites and web apps. Pure was created and still is maintained by Yahoo. In this tutorial, I’m going to show you how to easily create custom Pure button.

Twitter Bootstrap Button using Sass and Font Awesome

Twitter Bootstrap Button using Sass and Font Awesome

In this tutorial I’m going to show you how-to create a Twitter button for the Bootstrap front-end framework using Sass and Font Awesome.

Create a List of IP Addresses Attacking Your WordPress Login

Learning Centre

Create a List of IP Addresses Attacking Your WordPress Login

These are the steps I use to create a list of IP addresses that are trying to login to my WordPress installations that did not have permission to do so. The following steps assumes that only you (or certain IP addresses) have access to your WordPress login, wp-login.php.

How-to Center Align Bootstrap Nav Pills

Learning Centre

How-to Center Align Bootstrap Nav Pills

In Twitter Bootstrap there are navigation (nav) pills and by default, it is left aligned. But, what if you wanted to center align the nav pills? We can wrap the navigation with a HTML div element and add a bit of CSS. This is what we’re going to achieve: