4.1 Wrapping Up

Hey, welcome to the final video in build a one-page website with Froont, no coding required. Let's just quickly recap everything that we covered so you can come back to this video anytime you need to have your memory jogged. All right, looking at the Froont interface, on the left side, we've got all the things that you can add to your site. You've got ready made components. You've got more generic basic elements. You've got icons that are all SVTs and you've got a search engine for the free Unsplash image site, which is excellent. On the right side, this is where you have the settings for any element that you have selected, so you can change everything about that element here. Then you've got widget tree that you can use to navigate everything you've added to your site. And if you just need to change the page properties, go to the page tab here. Most things you want to add, We'll need to start with container that you'll use to control your layouts. When you need to add text, use this component here. And for easy grids, use any of the components that you see here. You also have some very simple to use drag and drop things like forms and some pre-laid out content. When you need to float something left or right, you'll have to go into the advanced section. And there's a whole bunch of extra stuff you can do in the Event section here as well. All the styling for each of the elements can be done throughout the Background sections, the Shadowed sections, the Border sections. When you want to make edits to text that you don't want to have influencing default text throughout, make sure that you create a style here with a unique name. Elements can be copied and pasted throughout the site once you have them all set up the way that you want. When working with grids, if you need to adjust the spacing, then you can do so in the grid section here. Try to keep your spacing, all throughout your site, relatively even and balanced. And when you're choosing colors, a tip is to use a color picker and select from images that you have already working in with your site well. When you need to start adding in responsive functionality to your layout, then you can use this bar with its break points up here to both preview how things look and to change how things look at different sizes. But don't forget to use your, Developer tools to also check all of the spots in between the break points and make sure that those are good as well. And finally, if you want to add a little bit of extra polish, then you can use the Behavior section here to add animations. And if you wanna stagger your animations, then you can add in a delay that will make each of your animations come in one at a time. So that is a summary of everything that we covered in this course. Hopefully, you're feeling good and familiar with working with Froont now, and you feel like you can go and create your own designs using this software as well. So I hope you really enjoyed building your one-page website, and that you learned a lot. Thank you so much for taking this course, and I will see you in the next one.