Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m

Next lesson playing in 5 seconds

Cancel

Free Preview: Building a Landing Page That Converts

Introduction

00:35
  • Overview
  • Transcript

Landing pages can be effective tools for steering your users towards a desired action. In this course, you will learn how to build a landing page with HTML and CSS, using a Photoshop file as your starting point and building the page with the help of the Bootstrap framework.

1. Introduction

1.1 Introduction

Hello and welcome to Building a Landing Page that Converts. My name is Craig Campbell and I will be your instructor for this course. In this course, we are going to take a Photoshop design for a product landing page, and build it out using HTML, CSS and Bootstrap, as we discuss strategies and decisions that are necessary for the process. This course assumes a basic knowledge of HTML and CSS, and a little familiarity with Bootstrap also wouldn't hurt. So I wanna thank you so much for watching, and in the next lesson we'll get started.

1.2 What You Will Build

Hello and welcome back. In this course we're going to build a landing page, starting from a Photoshop file. And I don't have the ability to share this Photoshop file with you in the project files folder. But that shouldn't be a problem because we're not actually going to be pulling any elements directly out of the Photoshop file. Instead we're going to be using some of our own elements, but the Photoshop file, if you want it, can be found at Envato Elements. And I'll include a link to the Elements website in the course notes for this particular lesson. Now if you're not familiar with Elements, it's basically a subscription-based assets library. So it's got a lot of website templates, product mockups, things like that. In this particular instance, we've got a Photoshop file that we're going to be using to build a landing page in HTML and CSS. And the great thing about Elements is, since it's subscription based, once you subscribe, you have access to the entire library. You don't have to buy just one element at a time. And so in this lesson I wanna take a look at the Photoshop file that we're gonna be using in this course. So the Photoshop file is very straightforward. One thing you'll notice right away is that it doesn't actually include the image assets that we see when we look on the website itself. You'll see these pictures of these cell phones and things like that. Those don't actually exist in this Photoshop file. And that's okay because we really wanna use our own assets for that anyways. The website we're building is obviously going to have different text and different images than what we see on the sample page anyways. So again, we're not gonna be pulling any elements directly out of this Photoshop file, but I wanna take a quick look at it. So it's a very clean design that we're gonna be working with. Any of these graphic elements you'll see here, you'll see there's icons down here. We're actually gonna be using a different set of icons. We're gonna use Font Awesome icons. The icons that we actually see here in this Photoshop file come from an icon font. And it's a free icon font called IcoFont, I-C-O-F-O-N-T, and you can look that up online. It's free to download for yourself if you want to use those, instead we're gonna be substituting these with some Font Awesome icons. And the reason we're doing that is because we're gonna be building the site using Bootstrap. And we're gonna be using Bootstrap as a front end framework to give us a good head start on our HTML and CSS. And Font Awesome works really well with Bootstrap. So again, at the top, we have a very simple menu bar and then we have a few different major sections. Now you'll notice there are a couple of fonts that we probably don't have on our computer by default. We've got this main font that we see in all the headers. And if we go down to our Text tool and click inside this heading, we can see that it's using the Roboto font. And you can actually find that for free in the Google Fonts library at fonts.google.com. And you can either download that, or as we'll see in a moment in a future video, we can actually just point to that font from our website. So we don't actually need to download that onto our computer, but the main font that's being used here, everywhere, is Roboto. We've got Roboto Light here, and then for the paragraph here, we've got Roboto Regular. There's also medium and bold and italic that are used, but for the most part it's all using that font. And so that's the only one we'll really need to worry about. We'll worry about a few different weights of that Roboto font, but that's the one we'll be using. So we've also got this wave in the background here. We'll get to that later on, but I actually created my own asset for this that's more of just a kind of an arch that goes across, instead of this wave. I like the arch better so, it just keeps it a little simpler. So we'll be using that, but again we just see a lot of different sections that kind of highlight the kind of things you might see on a landing page. Now we're not gonna get into a lot of detail on what constitutes a really powerful landing page. As we work through this file, we will kind of point out as we go along, some of these different sections and how they can contribute to the success of your landing pages. So that's the basic Photoshop file that we'll be working with. Again, as we move forward and start building this out, we'll talk about how to take a high-level approach at first as we're building out the main structure of our site. And then we'll start drilling into some of the details. So thank you for watching and we'll get started in the next lesson.