Learn Svelte - How to Create a Basic Landing Page

[00:00 - 00:07] All right. In this lesson, we're going to work on a landing page.

[00:08 - 00:22] A landing page is usually deployed to the root of a website and shows the purpose of the site. In the case of a SAS application, the landing page will explain the features of the site and have a large call to action.

[00:23 - 00:32] The call to action is the main thing that you want a prospective customer to do when they visit your landing page. I pulled up a couple of examples here.

[00:33 - 00:40] So here's a look at Stripe.com. So they've got a real clear description of what they do and then a call to action.

[00:41 - 00:49] So start now, which basically means they want you to register and give the app a try. Here's WordPress.com.

[00:50 - 00:54] Welcome to the world's most popular website builder. Start your website.

[00:55 - 00:59] Real clear what they want you to do. And then another example, Basecamp.

[01:00 - 01:14] The all-in-one toolkit for working remotely and give Basecamp a try. And then this is kind of an interesting little bit of psychology as well, showing that other companies have signed up recently.

[01:15 - 01:24] So companies spend a lot of time thinking about their landing pages, testing different configurations and seeing what performs the best. But I think you get the picture.

[01:25 - 01:37] You want something simple that has a button or a call to action for users to sign up for the app. So ours is going to be much more simpler than those examples.

[01:38 - 01:45] We're going to create one that looks like this. So on the left-hand side, it will say easily publish your school lunch menus.

[01:46 - 01:58] And then on the right-hand side, it will say register now and have a few inputs for a registration feature. In the last lesson, we added Bulma to the project.

[01:59 - 02:10] And Bulma provides a layout system that's based on columns. So I'm going to copy this example over and just to show you a simple example of how it works.

[02:11 - 02:24] So we've got a wrapper class of columns and then two classes within that of a column. So this one would be the left-hand column because it's the first one listed.

[02:25 - 02:36] And then this one would be the right-hand column because it's the second one listed. And Bulma will automatically lay those out and then resize them if the window changes size.

[02:37 - 02:50] So taking this simple example here, let's go over to home.spelt and paste that in. And then look at the app.

[02:51 - 02:59] So going to home.spelt. So we can see our information is laid out on a left-hand column and a right- hand column.

[03:00 - 03:08] And if you've got dev tools open, this is a nice way to test different resolutions. So you can actually just pull this over.

[03:09 - 03:24] And eventually you'll see that Bulma responsibly wraps those columns at a certain break point. And you can even click this button here to test different mobile layouts and tablet layouts.

[03:25 - 03:37] So another neat feature with Chrome dev tools that helps you developing websites. So that's a basic two-column layout.

[03:38 - 03:48] And what we're going to do is add a little more information. We're going to use a notification wrapper class and that'll give it a background color.

[03:49 - 04:10] And then we're going to use the two-column layout and then put text inside one under a content div. And then on the right-hand side, we're going to have a couple of fields that will capture registration information.

[04:11 - 04:28] And so this second part right here is the field side of the registration form. And so each field has a div class field and then a label and then a div class control with the input underneath it.

[04:29 - 04:45] And then lastly, we'll have a little button underneath the main section that will have a already registered button. And so if a user lands there that's already registered, they'll have a way to log in directly.

[04:46 - 05:03] So let's copy this over and paste that into home.spelt. And then give that a look.

[05:04 - 05:16] So now that we've got some HTML on the page, we can use our dev tools and we can inspect it. And so we'll see the same markup that we put in our smelt file over here.

[05:17 - 05:24] And we can do some neat things here from dev tools. For example, we can edit the styles.

[05:25 - 05:33] So I've clicked on section. So I could say background color black.

[05:34 - 05:39] And so this is a good, quick way to test styles. Now these changes are not permanent.

[05:40 - 05:46] They're just for this session in memory in the browser. So as soon as I hit refresh, that change will go away.

[05:47 - 05:59] But this is a great way to troubleshoot, inspect, and even test out different changes on the fly. And once you've got them figured out, then you can put them back into the source code.

[06:00 - 06:12] You can see our login button down here. But if you click this button, nothing happens, and nothing happens when you click the go button, and then nothing happens when you add values to these inputs.

[06:13 - 06:22] In the next lesson, we're going to look at spelt event handlers. And that'll allow us to attach functions to the click events for these buttons.

[06:23 - 06:34] And then we'll also look at input binding, which will allow us to access these values and use JavaScript to interact with them. So that's it for this lesson.

[06:35 - 06:45] Look forward to seeing you next time. [Silence]