2.1 The Froont Interface

Hey, welcome to build a one page website with Froont, no coding required. My name's Kezz and I'm gonna be your instructor for this course. Froont is a really cool visual design tool. It's really handy if you're new to web designing, you don't know how to code yet. Or if you're looking for something to help you with the visual mockup stage of web development. So even if you're quite experienced, it can help you to make your entire work flow a lot faster. What we're gonna be doing in this course is using Froont to make a one page website. You're not gonna need to get a paid account to do this, you can have one free project in the free tier. So to get the ball rolling head to Froont, which is F-R-O-O-N-T.com, and sign up for a free account and login. And when you log in, you're gonna see this interface here. And one of the cool things about Froont, just as a passing note, is there are a whole bunch of projects that are available for you to clone and then modify and turn into your own project. We're gonna be working from scratch here though. So before we actually get into the site production, go ahead and create a new project and we just gonna have a quick over view of what you find in the Froont interface and we're gonna have a high level look at some of the most key functionality. So we're gonna create a new project, give it a title, One Page Website with Froont. And then we hit Create. And this is their interface. Most of what you're gonna be using is in the left and right sidebar. So on the left here, you've got a whole bunch of components that you can add in. And these are ready-made components, so if you're really in a rush, these can be super helpful. These are just drag-and-drop components, so you might wanna put in a navbar, for example, and there you go, just like that, that's ready for you. Or if you want to do something more custom, then you can choose this basic element selection here. And this will give you all of the types of components that you would need to build the typical website. And this is what we're gonna be using predominantly throughout this course. On the right side, this is where you're gonna have all the different settings and properties that are going to allow you to customize your design. And the first thing you're wanna do here is hit this switch along the top that says Expert mode. With that expert mode you can then do mode modifications and we're gonna dig in a bit deeper than just more modifications. So the way these all works is you just click to select an element of your design and then the settings that control that element will show up on the right here. And you've also got something that's a little bit like a layers panel on the right here. This will show you everything that's included in your site design and then you can directly select various items from here as well as just selecting them on the canvas. So on top of these two sidebar areas, I just wanna give you a quick look also at the preview functionality and the break points functionality via a look at the site that we're gonna be creating. All right, so here's the one page website that we're gonna be creating. Now if you want to check out what you're working on without all of the tools and everything around it, then all you need to do is hit this preview button up at the top here. That takes away those side bars and gives you a preview of how our viewers are gonna see the site when they land on it. You've still got these things across the top here, but it still gives you a much clearer view. So what we're gonna be building is gonna have a Header section, it's gonna have a Features section, it's gonna have a space for more information a sign up box and a footer. So this along the bottom here is just part of the interface. The actual footer for our design only goes this far. And then, when you wanna go back into edit mode, you just click the same spot again and now you're back into edit mode. And you'll notice along the top here that we have this bar. And this bar shows all the different breakpoints. So if you need to Web Design a breakpoint is a certain width at which you're gonna change the layout of a website so that it will suit different sizes of viewports and screens. So for example, here, you can see we have this number 1024. So if I click 1024, it simulates a viewport that's 1024 pixels wide, and then that shows us how the site is gonna look at that width. And then the same thing for 768, 480, and 320. So what this system is going to allow us to do is click a breakpoint, and then make adjustments to our layout so that it looks corrected to that size. And then repeat the process for each of the smaller breakpoints. And those breakpoints are also available when you are in preview mode, which can be very helpful. Because you can get a much clearer look at exactly how your site is gonna look at each of these widths. All right, so a quick recap, everything that you want to add to your website is available from this area here. All the settings for all the components that you've already added are available on the right here. Preview your site with this button and add responsive functionality with the breakpoint bar along the top. All right, so now we're ready to dig in to actually building our website. In your blank project, hit the undo button to remove anything that you might have added just playing around and then we're ready to get started. The first thing that I'm gonna do is add in this header section with this title text. The image on the right, the background color, and we're gonna set up the basic settings for the overall page. So we're gonna go through that in the next lesson. I'll see you there.