Web Design

Nuts and Bolts Web Design

Pricing Table

Pricing Table

Introduction In this guide, we will be building a basic pricing table. Pricing tables are commonly used for conveying the prices and features of subscription plans. Clean looking product tables are a great way to help your users subscribe to your services. Getting...

read more
A Nibble of HTML

A Nibble of HTML

Hello! This guide is meant to be a tiny introduction to the markup language, HTML. HTML stands for Hypertext Markup Language. This is the language the defines the structure of the websites you visit. Before we begin writing our own HTML page, create a folder wherever...

read more
Image Filters

Image Filters

In this tutorial, we will be taking a look at some of the common image filters that are available with CSS. Note, the syntax used in this tutorial may be outdated in the future. The specification seems to still be a working draft as of June 11, 2019. It is my hope...

read more
Simple Dropdown

Simple Dropdown

Hello everyone! Let's dive right into creating our own very simple dropdown menu (or any container.) We won't be doing anything fancy with this, other than what is shown in the following preview: To create this dropdown menu, create an HTML file somewhere and name it...

read more

Creating Buttons with CSS: Volume 1

In this tutorial, you will learn how to create buttons via styling them with CSS. If you don't have a solid foundation with HTML and CSS, I would highly recommended checking out our free Beginners Blocks courses in our store. The buttons below are what I will help you...

read more
Creating Full Width Sections

Creating Full Width Sections

In this tutorial, you will learn how to create sections on a website than span the width of the screen. The cool thing about it is the margins are maintained. It is recommended you have solid knowledge of HTML and CSS before continuing. We Here is an example of what...

read more
Feature Boxes

Feature Boxes

In this tutorial we will show you how to create feature boxes with HTML and CSS. Feature boxes are common on many websites and help summarize services or products a business offers, etc. The final result will look like the following: Before jumping into the code, it...

read more
Simple Navigation Bar

Simple Navigation Bar

In this tutorial we will be creating a simple, modern navigation bar. It's nothing fancy, it just works, and it looks modern. I'm deriving the basis of this tutorial from my full screen landing page tutorial. It's not required, but feel free to clone the repository...

read more
Full Screen Landing Page

Full Screen Landing Page

Hello everyone! This will be the start of my web design tutorials. In this little tutorial, we will be creating a full screen landing page. Here's a preview of what we'll be making: To start, let's head over to Unsplash so we can pick out a picture we want. I really...

read more

WordPress

Build a Basic WordPress Plugin

Build a Basic WordPress Plugin

There may be many times when designing a website where the client wants some custom functionality. How do you approach this with WordPress? Plugins. Plugins allow you to extend WordPress beyond the core software. The heavy customization that WordPress allows is one of...

read more
Gutenberg: A Visual Guide

Gutenberg: A Visual Guide

The rise of the Gutenberg editor is in full swing, for better or worse. Gutenberg was introduced by Matt Mullenweg at WordCamp Europe in 2017. The editor was created to simplify website layouts, while attempting to make the task more user-friendly. While...

read more

Game Development

Build a Space Shooter with Phaser 3

Phaser 3 Basics

Phaser 3 Basics: Changing Positions

Phaser 3 Basics: Changing Positions

In this guide, we will be taking a look at how to manipulate the position of images and sprites in Phaser 3. Being able to change the x and y positions of objects in your game is very useful and will allow you to add some awesome mechanics. Before we begin, I will...

read more
Phaser 3 Basics: Adding Sprites

Phaser 3 Basics: Adding Sprites

In the game development world, sprites are the 2D images in your game. Since this is the case, being able to add sprites is a very important skill to know. To begin, I will assume you have a scene already setup. If you don't, feel free to check out this guide of mine...

read more
Phaser 3 Basics: Custom Fonts

Phaser 3 Basics: Custom Fonts

In this guide, we will be covering how to load custom fonts, specifically TrueType fonts, with Phaser 3. To begin, you will need a scene setup for this guide. If you don’t have a scene made already, you can learn how to create one here. Essentially, you need to define...

read more
Phaser 3 Basics: Loading Sounds

Phaser 3 Basics: Loading Sounds

In this guide, we will be learning how to load sounds with Phaser 3. At this point it would be useful if you had a scene already setup. If you don't, you can take a look at my boilerplate code guide in this series. In your scene, define a preload method if you haven't...

read more
Phaser 3 Basics: Loading Images

Phaser 3 Basics: Loading Images

In this guide, we will be taking a look at how to load images with Phaser 3. Hopefully you have a scene already setup. If you don't have a scene setup already, please visit my tutorial on writing boilerplate code. In your scene, define a preload function if you...

read more
Phaser 3 Basics: Boilerplate Code

Phaser 3 Basics: Boilerplate Code

In this part we will be adding the boilerplate code for our Phaser game. There are a few steps we need to do: add code to our index.html file, add some code to an index.html file, defining a game configuration, creating a boot scene, adding a main scene, and creating...

read more
Phaser 3 Basics: Setup

Phaser 3 Basics: Setup

In this part, we will be setup a basic environment for tinkering with Phaser 3. First, we need a web server of some sort in order to run our game. This is necessary because we don’t want any malicious JavaScript to read our file system from within the browser....

read more
Phaser 3 Basics: An Introduction

Phaser 3 Basics: An Introduction

Phaser is one of the most popular HTML5 game frameworks. It uses modern web technologies that allow for creating epic cross-browser games. In this tutorial series, we will be covering the basics of Phaser 3! This series will cover everything needed to make a basic...

read more

Build a Space Shooter with MonoGame

PyGame Basics

PyGame Basics: Grouping Game Objects

PyGame Basics: Grouping Game Objects

In this guide, we will be taking a look at grouping game objects with PyGame. This is useful because most likely you will want to add or remove objects of the same type. Simply using variables to reference objects with won't cut it. You might use a variable for...

read more
PyGame Basics: An Improved Game Loop

PyGame Basics: An Improved Game Loop

In this guide, we will be creating a PyGame game loop with delta time. Using delta time can be very useful in keeping the movement of your game smoother. Essentially with a delta time based game loop, game objects will appear to move at a constant speed even when the...

read more
PyGame Basics: Keyboard Input

PyGame Basics: Keyboard Input

In this guide, we will take a look at a couple ways to gather keyboard input with PyGame. There are a few ways of grabbing keyboard input. The first way to gather keyboard input is via capturing PyGame events. To check if any arrow keys are pressed down on the current...

read more
PyGame Basics: Mouse Input

PyGame Basics: Mouse Input

In this guide, we will be taking a look at how to utilize mouse input with PyGame. Mouse Position To retrieve the position of the mouse, you can use the following line: mousex, mousey = pygame.mouse.get_pos() Of course, with the above line, you can access the x...

read more
PyGame Basics: Image Effects

PyGame Basics: Image Effects

In this guide, we will be taking a look at some different image effects you can use within your PyGame. In the examples below, I will be drawing sample images at x: 480 and y: 128. To learn how to position images, you can take a look at this guide of ours. Scaling...

read more
PyGame Basics: Drawing Images

PyGame Basics: Drawing Images

In this tutorial, we will be walking through how to draw images with PyGame. Let's dive right in. In your game file, you should see the set_mode method being called. This method call returns a Surface, which is pretty much just the canvas that we're drawing to. Make...

read more
PyGame Basics: Game Loop

PyGame Basics: Game Loop

In this tutorial, we will be creating the game loop of our PyGame game. By adding the game loop, we can keep our game window from disappearing. If by chance you don't have a game window yet, you can check out this part of our PyGame Basics series. To create our game...

read more
PyGame Basics: Game Window

PyGame Basics: Game Window

In this guide, we will be creating the PyGame game window. If you don't have a PyGame project setup yet, you can learn how to set one up here. In your main game file, you can add the following two lines to create our game window: display =...

read more
PyGame Basics: Setting Up

PyGame Basics: Setting Up

Before we jump into building a game, we will need to setup PyGame. Since PyGame requires Python, we will need to ensure it's installed first. This tutorial series assumes you will be using Python 3. You can download and install Python 3 from the official website....

read more
PyGame Basics: Introduction

PyGame Basics: Introduction

We all know Python is highly flexible. What many don't know is that you can create awesome games with a library called, PyGame. PyGame is a cross-platform set of game development modules for Python. This series is meant to help you learn the basics of PyGame, and is...

read more

Tech Basics

Microsoft Windows

Which Version of Windows Am I Using?

Which Version of Windows Am I Using?

Chances are, at some point you have come across a situation where an application requires a certain version of Microsoft Windows. If that’s you, read on! In this guide, I will walkthrough how to check which version of Windows is installed on your computer. Windows XP...

iOS

How to Update iOS

How to Update iOS

If you own an iOS device, chances are you will want to keep it updated. Apple includes tends to include performance improvements and security patches in each update. When you update iOS, you can be sure your device is in tip-top shape. No matter if you have an iPhone,...

Android

How to Remove Android Apps

How to Remove Android Apps

Have you ever downloaded an app, just for it to be filled with ads or just not what you're looking for? Learn how to remove Android apps with this guide. Finding the App to Remove In this example, I will be removing Google Earth (labeled "Earth"). Find the app you...

How to Install Android Apps

How to Install Android Apps

Perhaps you have an Android phone or tablet, but you want to add some functionality. In this guide, I will walk through installing apps on Android. Without further ado, let's jump in! First, let's find the icon labeled, "Google Play" on the home screen. Next, tap the...

How to Update Android

How to Update Android

In this guide, we will walk through how to update Android. If you own an Android device, you will want keep your device up-to-date. In the screenshots I show, I'm using Android 9. The instructions should be relatively similar from version to version. First, we will...

Share This