How to Build a Responsive Image Gallery with Flexbox

How to Build a Responsive Image Gallery with Flexbox

You may have noticed I’ve updated the site to include a front page with a grid listing all the tutorials. As you resize the screen, it goes from three columns, to two columns, to a single column on mobile. Another great example of that is…

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…

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…

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…

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,…