10 Project: Creating a Landing Page

 

The one key feature of the online marketing landscape is the landing page—that (hopefully welcoming) doorway to your online storefront, which you present to your Web site visitors. —Martin Harwood

This chapter covers

  • Planning and sketching your landing page
  • Choosing fonts and colors for the page
  • Understanding and implementing banded content
  • Adding the images and text

Okay, you're nine chapters into this adventure, and you've come a long way. Here in Part 2 alone, you've mastered using images and media; making style sheets; using classes; floating elements; using absolute and relative positioning; and manipulating sizes, borders, and margins. That's a lot, and (most important) it's enough know-how to start building some amazing pages. As proof, in this project you'll be putting all those HTML and CSS skills to good use to create a professional-looking landing page for a marketing campaign for a product or service. If that project sounds out of your depth, not to worry: You know more than enough to ace this assignment, and I'll be building my own (rather silly, as you'll see) landing page right alongside you. If you get stuck, I (or, at least, my code) will be right there with you to help or give you a nudge in the right direction. Let's get started!

What You’ll Be Building

Sketching the Layout

Choosing Typefaces

Choosing a Color Scheme

Building the Page

The Initial Structure

Try This

Web Page

HTML

The Header

The Hero Background Image

Try This

Web Page

CSS

HTML

The Product Image

Try This

Web Page

CSS

HTML

The Product Info

Try This

Web Page

CSS

HTML

The Call-to-Action Button

Try This

Web Page

CSS

HTML

The Product Description

Try This

Web Page

CSS

HTML

Setting Up the Content Bands

Try This