How to Visually See What Your jQuery Selection is Selecting

I was recently working on form validation and wanted to mark a.form-group as successful if it contained a particular icon inside the label. The icon was set using PHP depending if the data existed in the database. I was writing .prev() and .parent() to try and select the wrapping .form-group but it wasn’t working and… Read more »

Continue Reading

Category: Code Snippets / Tutorials

How to Migrate a HubSpot Blog to WordPress

If you are looking for a way to migrate your HubSpot blog to WordPress there isn’t a one click option unfortunately. However, by following the steps below you can create a CSV file of the data to import into your WordPress site. Export HubSpot blog data to import into WordPress

Follow these steps: Create… Read more »

Continue Reading

Category: Tutorials

How to Create a List of Urls and Meta Titles from a Domain

I was working on a site migration and I needed to create an excel spreadsheet of all of the urls, page titles, and meta description. This document would then be shared with the copywriters to work on editing the page copy. I found some nice online tools to make this process easy. Step 1: Generate… Read more »

Continue Reading

Category: Tutorials

How to Edit the HubSpot Follow Me Module

The video below demonstrates the steps to update a HubSpot follow me module. Basically, it pulls from your Account Settings > Marketing > Social > Follow Me tab

Continue Reading

Category: Tutorials

How to Add a Featured Tag with Text Over an Image

In this tutorial I will show you how to place a featured tag over an image using CSS3 ::before pseudo elements. A common use case for this is eCommerce where you might want to visually show a product is featured, on sale, or out of stock. Since your products are displayed dynamically using a database,… Read more »

Continue Reading

Category: Tutorials

Take Command of CSS Flexbox

As a kid I loved playing with toy plastic army men. I would line them up and pretend to be in command giving orders to my soldiers in order to defeat the enemy. Since I was in full command, the soldiers would look to me for their orders. Sometimes a hot shot recruit would overstep… Read more »

Continue Reading

Category: Tutorials

How to Detect and Run JavaScript When Bootstrap Media Query Breakpoints Change

Update: I created a small jQuery plugin that adds media query detection for Bootstrap 3 and 4 projects. You can learn more about IfBreakpoint.js here. Have you ever wanted to trigger some javascript at a certain media query value? Relying on document.width() has problems because it includes browser scrollbars. A simpler and more accurate solution… Read more »

Continue Reading

Category: Tutorials

How to Reorder Columns with Bootstrap 4 Order Classes

With Bootstrap 4 column ordering it is best to start out understanding how the natural or default column ordering works. When your browser reads your HTML code it reads from the top and works its way down reading left to right. So in a two column grid, the first column will be the first one… Read more »

Continue Reading

Category: Tutorials

How to Create a Full Width Bootstrap 4 Responsive Carousel

Do you want your Bootstrap 4 carousel to extend the full width of the browser window? Do your images look cut off or have unwanted padding on the left and right? In this tutorial we will take a closer look at the Bootstrap 4 carousel and determine the best approach in making it full width… Read more »

Continue Reading

Category: Tutorials

Bootstrap 4 Grid Flexbox Tutorial with Layout Examples

The most important element of any CSS framework is the grid system. The Bootstrap 4 grid system has been used on many websites worldwide which makes it extremely stable. This cross-browser support is why you probably are considering using Bootstrap for your website (it was for me). In this post I will provide an overview… Read more »

Continue Reading

Category: Tutorials