2.1 The Base: Spot Landing Page
Hello and welcome to the first lesson of this course, where we’ll download and take a closer look at the base of our landing page: a pre-made template called “Spot”. Let’s start by downloading it from Envato Elements.
1.Introduction1 lesson, 00:40
2.Building a Landing Page6 lessons, 42:18
2.1 The Base: Spot Landing Page
Hello and welcome to the first lesson of this course, where we'll download and take a closer look at the foundation of our landing page. Which is a pre-made template from Envato Element called SPOT. So let's see what it's all about. This is SPOT it's app service landing page you can find the link to this in the lesson notes. And if we take a look at the live preview we can see it has several demos available. Let's just open the default one, there we go. It's a very good looking template, that has all the elements that we would need in a landing page. And it also has a fully functional contact form, which is a big plus. On top of this, there is a light and a dark theme, and also several accent colors that we can use, as you can see here. We can get a live preview of the color schemes available. So what will this landing page of ours be used for? Well, to demonstrate this entire process of building a landing page, I started from a very simple briefing. We have a fictional app called Project and it's a project management software or app that works on both Windows and Mac OS. It cost about $16 and the purpose of the page of that we're gonna build is to present the key information about the software, as well as client testimonials, some screen shots, and some main features. As well as links to purchase that app from the Mac Store and the Windows Store. That's all there is to it. So let's go ahead and download this landing page. You can add this to an existing project if you have one, or create a new project, that's for proper licensing with Envato Elements. In my case, I'm gonna download Load this without a license because I'm just demoing it. So once you download it you'll end up with something like this. You also get the PSD files which is a nice bonus, you get a nice documentation and you get the template files. These are the files that we'll be working on, so I'm gonna copy all of them. I'm gonna paste them in a directory that I just created for this project. And to make development easier for us I'm gonna use CodeKit to be able to preview changes live in the browser. So I'm gonna open up CodeKit, I'm gonna add a project. I'm gonna select the folder where I just copied all those files, hit Add, and now I can preview this in the browser. So as you can see we have files ranging from Index 1 to Index 14. These are all variations or demos of the same landing page. So if we take a look at Index 1, we see a certain structure. And if we take a look at the Index 10 for example, we'll see a slightly different structure. Now, one thing that I want to mention here, all of these demos feature the exact same content. But the only thing that's different about them is the Hero area, which is this one that you see right here. From demo to demo, it's gonna be different. One of them is gonna present, like, an image. And I can see different style of image here. Others will present an image with an overlay on top of it. Others will present- A video and the background. So it's a very versatile landing page. You can use it for a lot of different projects. And couple that with both a light and dark color scheme. We have a lot of options in terms of customize ability. So this is the template that we're gonna use. Now, that it's downloaded it's time to start customizing it. And we'll do that in the next lesson where we'll pick the layout that we want as well as the color scheme and the color pallet. So see you in the next lesson.