Web Development Tutorials by Christopher Spicer

August 2, 2019

How to Create a Responsive Website Footer

The beginning and the end of your web page are both important elements that serve to frame the main content in between. Most... web developers put a great deal of thought into to designing the header and banner that appear at the beginning of the page. But the end of the page, though equally important, is often overlooked...

July 12, 2019

How to Create a Responsive Website Banner

Vision is the strongest of our human senses. Though words may be the most effective tool to communicate information. It is... the expressive nature of images that holds the ultimate power to capture a person's attention.

And no element in web design combines words and images more successfully than a good banner...

June 8, 2019

How to Create a Responsive Website Header - Part 5

This article, which is part 5 of a 5-part series of web development tutorials, will guide you through the process of creating a website... header. We'll use HTML, CSS, and JavaScript to construct a header layout with an icon bar featuring site, search, and share menus that open and close as needed. In this example, we'll examine a complete web page demonstration before taking a detailed look at the concepts and code that...

May 31, 2019

How to Create a Responsive Website Header - Part 4

This article, which is part 4 of a 5-part series of web development tutorials, will guide you through the process of creating a website... header. We'll use HTML, CSS, and JavaScript to construct a header layout with search and share bars that open and close as needed. In this example, we'll examine a complete web page demonstration before taking a detailed look at the concepts and code that bring it to life...

May 4, 2019

How to Create a Responsive Website Header - Part 3

This article, which is part 3 of a 5-part series of web development tutorials, will guide you through the process of creating a website... header. We'll use HTML, CSS, and JavaScript to construct a header layout with two subnavigation menus that open and close as needed. In this example, we'll examine a complete web page demonstration before taking a detailed look at the concepts and code that bring it to life...

April 20, 2019

How to Create a Responsive Website Header - Part 2

This article, which is part 2 of a 5-part series of web development tutorials, will guide you through the process of creating a website... header. We'll use HTML, CSS, and JavaScript to construct a header layout with two styles of navigation menu that open and close as needed - a modal navigation menu and an accordion navigation menu. With each example, we'll examine a complete web page demonstration before taking a...

March 30, 2019

How to Create a Responsive Website Header - Part 1

Your header is one of the most valuable parts of your website. It occupies the single most important piece of real estate on every page... that you publish. It is the element that visitors encounter first. And it is the element that visitors interact with most.

That's a pretty strong incentive to make your header a good one...

March 12, 2019

How to Create a Responsive Website Layout

Excellent content is what draws visitors to your website. But excellent page layout is what ensures that your visitors are... able to find and engage with that content.

Let's face it. We live in a high-speed world. You may have spent days poring over every word and every image that appears on your site. But visitors will...

March 12, 2019

HTML Document Structure and CSS Naming Convention

In web development, as in all creative projects, it's important to stay organized. To that end, let's take a moment to discuss some... of the design standards that we'll use throughout this series of web development tutorials...