10 Project: Creating a Landing Page

 

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 importantly) 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 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

In its most general sense, a landing page is the page visitors first see when they navigate to (land on) your website. That's often your home page, but it could also be any page that the person comes across via a Google search or a link that someone else posts to social media.

Sketching the Layout

Choosing Typefaces

Choosing a Color Scheme

Building the Page

From Here

Summary