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 right into the code. Create a folder somewhere on your computer and name it whatever you want. This folder will be the home of our project. In that folder, create Continue reading →

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 end of this tutorial: Without further ado, let’s jump into the code! Find a home for this tutorial, and create a folder in that location. This folder will serve as Continue reading →

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 images folder containing the icons shown above for our feature boxes. You can download the ZIP file with the images folder and associated icons here. The first thing we’re going Continue reading →

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 for our purposes here. It would be helpful to know HTML and CSS, but it’s not necessarily required, though highly recommended. If you wish to get up to speed with Continue reading →

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 you see in the preview by Samuel Zeller (available here). When you find the picture you want to use, just click the large green “Download” button on the image preview. Continue reading →