UI/UX

Using Content Editable Elements in JavaScript (React)

Any element can be made editable with the addition of the attribute. This attribute is used all over the web, such as in Google Sheets. I…

Build a CRUD App in React with Hooks

In the latest release of React, a new concept was introduced - Hooks . Hooks are being added to React as an alternative to classes. If you…

Getting Started with React - An Overview and Walkthrough

I've been hearing about React since I first started learning JavaScript, but I'll admit I took one look at it and it scared me. I saw what…

How to Create a Snippet in Visual Studio Code

Here's how you make a custom, global snippet in VSCode. Press COMMAND + SHIFT + P to open the command palette. Find "Preferences…

How to Create a Memory Game (ala Super Mario 3) with Plain JavaScript

I was presented with a coding exercise to make a memory game using any language. I decided such a task really doesn't require any libraries…

How to Connect to an API with JavaScript

A big part of working with JavaScript is knowing how to connect to APIs. As a fledgling developer, you may have been told at some point to…

Design for Developers: Specific Steps to Improve Your Website Design

I've noticed a lot of web developers struggle with design; they think they don't have a natural talent for design and knowing what looks…

Prevent Mouse Scroll from Zooming on Embedded Google Maps

If you embed a Google Map into a website, they'll give you some HTML that looks like this: And the embedded result will look like this. You…

Background Position Fixed and Cover with CSS

I wanted to make a section of a website have a div featuring a background image that had both and , regardless of the image's size. This…

Crossfade Between Two Images with CSS Animations

A website I worked on wanted an animated, flashing neon sign. A gif is the first thing that comes to mind in such a situation, but…

Simple jQuery Examples with Code and Demos

Recently, I wrote a beginner's guide to using and understanding jQuery for Digital Ocean . I found the official jQuery documentation…

My Complete Front End Web Development Setup

I'm a self-taught web developer who has been working professionally in the field since June, 2015. I'm going to write about the setup…

Styling UI Components from Scratch: Buttons & Forms

It's hard to style basic web components if you've never done it before. You want your buttons and forms to look good and also be cross…

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…

Adding Syntax Highlighting to Code Snippets in a Blog or Website

I've received a few requests on how to highlight the syntax of snippets of in a blog like I have. Here is an example snippet of SCSS code…

Parallax Scroll Effect

Parallax scrolling, an effect that allows sections of a website to scroll at different speeds, is an effect that has gone through various…

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…

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…

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…

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…

Off Canvas Navigation

One of the more minimalist approaches to responsive navigation is the off canvas navigation method. This method utilizes the ubiquitous…

You Don't Need a Framework: Understanding the Fundamentals of Responsive Design

Responsive web design is an approach to creating websites in which the layout adapts to fit the device's screen - whether it's a phone…

How to Create a Flexbox Grid

The flexbox layout module is good news for web developers everywhere. The part where all major browsers now support it is even better news…

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…

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…