Make a Static Website with Jekyll

Make a Static Website with Jekyll

Jekyll is a static site generator that runs on the Ruby programming language. You may have heard of Jekyll or static site generators, but don’t know how or where to get started. This guide is intended to be a complete tutorial, and require no additional…

Full Screen Navigation Overlay

Full Screen Navigation Overlay

One current trend in navigation styles that you may have seen is the full screen navigation overlay. With this type of navigation, toggling the navigation will overlay the menu across the entire screen. Codrops did a really nice set of demos with full screen overlay…

Google Maps APIs for Multiple Locations

Google Maps APIs for Multiple Locations

I was working on making a locations page for a multi-location restaurant concept. The overwhelming trend currently is to include a Google map with a marker for each location. Huge companies that have locations all over the globe have massive map databases and much different…

What is Bootstrap and How Do I Use It?

What is Bootstrap and How Do I Use It?

If you have any sort of interest in web development, you’ve likely heard of Bootstrap. According to the official website, Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web. Sounds great! Now how do I…

From Cooking to Coding

From Cooking to Coding

It’s difficult to think of two careers more contrasting than chef and web developer. I would venture to put myself into a fairly unique category of people who have done both. Factor in my gender, with females making up an average of 39% of web…

Off Canvas Navigation

Off Canvas Navigation

One of the more minimalist approaches to responsive navigation is the off canvas navigation method. This method utilizes the ubiquitous three-line hamburger menu, which prompts a sidebar to slide out when toggled. Lanyon theme for Poole is a popular, simple example of the slide-out off…

RSS Feeds

RSS Feeds

I’ve always seen RSS feed buttons all over the web, but I didn’t understand what they were for or how to use them until now. You might think a simple Google search would clear it up, but most of the hits are woefully out of…

Migrating a WordPress Site to a Live Server

Migrating a WordPress Site to a Live Server

If you already know how to set up a local server and get WordPress up and running, migrating to a live server is extremely simple. We’ll avoid the dreaded “Error establishing a database connection” once and for all. Prerequisites A local WordPress install A web…

Getting Started with Grunt and Sass

Getting Started with Grunt and Sass

You’ve probably heard of Grunt, the JavaScript task runner that runs on Node.js. Maybe you’ve tried to get it up and running, but got lost or confused during setup. Maybe you know of it, but aren’t sure how it can be useful or if it’s…

Developing a WordPress Theme from Scratch

Developing a WordPress Theme from Scratch

You know HTML, CSS, and JavaScript. You can make beautiful websites. Maybe you’ve heard about WordPress, but aren’t entirely sure how to implement it, or why you might need it. Maybe a client asked for WordPress, but you’re not really familiar with it. Maybe you’ve…

Setting Up Virtual Hosts

Setting Up Virtual Hosts

Did you read about how to set up a local server environment, or do you already know how to do that? The next step is setting up virtual hosts. I’ve found most – if not all – of the resources and tutorials about setting up…

Setting Up a Local Server Environment

Setting Up a Local Server Environment

My early experiences with web design and development only involved the front end – HTML, CSS and some JavaScript. As long as I had a browser, I was set. Eventually as a web developer, you get to a point where you need to implement PHP…

Easiest Flex Grid Ever

Easiest Flex Grid Ever

The Flexbox layout module is good news for web developers everywhere. The part where all major browsers now support it is even better news. A lot of fantastic resources, documentation and tutorials have sprung up lately. Solved by Flexbox is one of my favorites. In…

Responsive Dropdown Navigation Bar

Responsive Dropdown Navigation Bar

Bootstrap and Foundation have fantastic navbars that you can use if you choose to base your layout on their framework. For my own projects, I chose to make a customizable responsive dropdown navbar with an animated hamburger menu. The navigation is built on Sass, adaptable,…

Basic HTML5 Skeleton File

Basic HTML5 Skeleton File

I often like to start my projects from scratch and stray away from using frameworks. HTML5 Boilerplate is a really great resource for creating a style-agnostic web project foundation; all your bases will be covered. However, it’s much more than I need for a standard…

Getting Started with Git

Getting Started with Git

Git is a difficult subject to tackle for self-taught web developers who didn’t learn to code with a team. If you’ve always worked alone and want an explanation of how to get started with Git, this tutorial is for you. I’m an egotistical bastard, and…