fbpx

Web Design Tutorials

A Nibble of HTML

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 you wish to store the web page. Feel free

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 that this guide

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 however you like. Inside this HTML file, let’s add

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 learn how to create: Let’s dive

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 we should see by the

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 will be useful for you to download the

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 for that tutorial and that can be the basis

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 like the sunset picture