2.4 Building a Simple Page From Scratch
Welcome to the final lesson of this course, where we’ll take all that we’ve learned so far and put it to good use. So in this lesson we’ll build a simple landing page from scratch using the visual editor we covered in the previous lesson. We’ll also go right ahead and publish it.
2.4 Building a Simple Page From Scratch
Welcome to the final lesson of this short course, where we'll take everything that we've learned so far and put it to good use. So, in this lesson, we'll build a simple page from scratch using the visual editor we covered in the previous lesson. And we'll also go ahead and publish that page, let's go. To get a head start, I went ahead and marked up a very simple landing page in sketch. Right, we have this big hero area with two headlines. A call to action, a little media, some features, testimonials, and a simple flare. So the next step is to just quickly get some of these images from Sketch. So let's make that exportable, preferably as an SVG, and we'll go ahead and export it. We'll also export this bit as a PNG. These three also export as SVGs and that's pretty much it. That's all we need from Sketch. So now, let's jump back into Mason, let's create a new feature. We'll select the canvas option, where it says blank, let's called this demo page, and here we go. This is the main canvas, by default it comes with a little bit of padding. But we don't want that. So we'll just remove it, and we'll start by creating a container and actually let's put the container in first. And then we'll select the canvas and remove this final padding, okay? Now the container, we'll select it and where it says Background, we'll add a color. Let's quickly grab this from Sketch. Let's see what kinda padding we have here. We have 60 on the top, and let's also add maybe 60 on the sides. Next, let's put our image in here. So we'll grab an image and we make sure it's placed inside the container. We can go in here under Layers to make sure that's correct, so there it is image and then container. So image, we'll hit Upload and then navigate to our folder where it says Logo. Next, we'll select the container and will choose what kind of alignment we want. So horizontal, let's go with the center, and vertical top will do just fine. A quick note here, Mason is actually using flex box. So the alignment options you see here are the alignment options you can find them flex box, that's very, very handy. Under the logo, we get these two headings. So let's go ahead and create those and let's also add a little bit of margin to this image, so margin bottom. Let's do 90, the text here is going to be white and here's another tip here. If you select the container, the parent element, any property that you set here will be inherited by the items, or the children that are inside that container. So if you work to set the typeface here for example to, I don't know Mary Weather, all the elements that are children of that container will inherit that style. Of course, you can go in select any of the elements and you'll see here in the inherited typeface. But you can change it to whatever you want. So let's actually select this here select circular standard book. In the Sketch file I'm using a different font, that's actually not available here in Mason for some reason. But we'll go with it. We'll do bold, size 60 and we'll say get powered up and here you can actually see some paragraph styles you can use. Lets go ahead and clone this and put in our second heading. Let's align this to the center, and let's change the font size to 32. Color, it's gonna be white with a little bit of transparency maybe like 65%. Next, we're gonna create a for, but before we do that, let's add a margin bottom of 60 here. So let's grab a form the width on this element should not be 100%. Let's change that to maybe 60%. And let's do a horizontal layout. Let's align the elements to the middle. Let's select this again, maybe add a little bit of margin. And let's go ahead and remove the border there, and also do a 3 pixel radius. The submit button, should actually use this color here, align the this to the center. Let's use the same font, bold and let's do 30 pixels padding, and maybe decrease this little bit to 40%. Next, we have a small text. Let's add a 3 pixel margin bottom and actually we're gonna add it to this form like that. Let's grab a piece of text and this is going to be white again about 65%. And then, we have this laptop image that's sitting at a distance of 60 pixels from this last text. So, let's also add that, and let's add our image Upload, laptop. Now probably the one thing that we cannot do right here is getting this offset that you see so the distance. That's currently, I guess not possible in Mason, but what we'll do is simply add a little bit of padding bottom so everything fits in here nicely. So that finishes the first part. Let's go ahead and add these features. So we'll create another container right down here, and we'll use 150 pixels as padding top and bottom. And actually I selected the wrong container, please excuse me. We need to select this one, container two. And of course, at any point you can go into layers and you can rename these. For example, features and you can rename this to hero maybe. So now select features and set 150 and 150 padding, okay. Now in here, we need to create these three columns. So we're gonna grab the Columns elements and we're gonna find a number of columns, I want three. I can also define the gutters. So currently I'm at 90 pixels and the gutter is basically the distance between each column. And I can also define the width. If I want different widths for each column, I can use this very handy slider, or I can keep them all at equal widths, just like that. Let's also create a little bit of margin left, maybe 60 here, and a margin right of 60. So, these are my three columns. Now inside, we're gonna add an icon, a piece of text as a heading, and a piece of text as body text, or as a paragraph. So let's grab our image. Upload, let's get, what was the first? The bubble dots, okay, let's grab a heading, and let's grab a piece of text. So the heading and the piece of text. These will be using the circular standard. I can just copy the text from here and lower the opacity on that text, to a little bit 60% and I'm gonna add a margin 30 top, 30 bottom, there we go. And now we'll do the same for the other two columns. Now would you have a little bit of a situation here because the margin that we added on these columns, this one. It's kind of interfering with the whole width. So let's go ahead and I'll remove that, and we'll use a padding instead. Okay, and that will give us the proper distance we need from the sides. Next, We have this testimonial and button and also this container here. So let's grab another container. We'll set a different background color for this, and let's set the proper padding which is 90 pixels, right? So 90, let's actually do 90 all around. And then inside, we have this piece of text which will act as a quote, a block quote. Select this, align everything in the center and we'll set the typeface to circular, the same one, and for the size we'll set 32. And for the width, we'll set this to 75% and make sure horizontal alignment is set to center. Then we'll add a little bit of margin bottom. Maybe like 30, we'll grab another piece of text, this will be the quote. So let's change its font size to maybe 18 or 16 depending on what you have in the document. And finally, below that, let's add a 60 pixel spacing margin. Let's add a button, and for the button, let's actually use the proper color. Let's get rid of the border, let's add maybe 30 padding left and right and, 18 pixel font size. And the button should say, Start Free Trial and also the button here should say the same thing, cool. And finally, we just have this footer text, so let's have another container right here at the bottom. Let's do a padding of 150 on the top, and maybe 60 on the bottom. And we will grab a piece of text, and then we will edit the characteristics of the parent container, horizontal, aligned to center, Top here is fine, font, that's fine, alignment center, and maybe change the color of the text a little bit, Right? So that's a quick replica of the page that we saw in Sketch. It's not as refined as it is in Sketch, because we just kind of rushed through it. Let's go ahead and see a preview, right? Here's our form, and here's our page, seems to be small issues with the fonts here. I'm seeing different fonts compared to the ones I used here, I'm not sure why that is happening. Maybe it's just a temporary glitch, but yeah, you saw how it is to build a page with Mason. I wouldn't say it's the most straightforward experience. But some things are actually quite simple to do, and if you spend a little bit more time fine-tuning things and making sure you have the right colors, the right spacing between elements, and also making this responsive, right? You can get a really, really nice product. And you can see how this behaves on smaller screens. And once you're done, you can hit share and a link was copied and you can then send that to other people so they can see it. All right, and that's it for this short course. Thank you very much for watching, and make sure you follow us on social media, and stay tuned for more content like this. I am Adi Purdila and until next time, take care.