DAY 03 | EPISODE 02 | QUICK CLIP 29

INTERMEDIATE WRAP

Paul Davenport

  Paul Davenport  |    02:17

Well, that's a Wrap! Now you've learned the main features and techniques required to build website Layouts from scratch, you're ready to learn some more of the advised technique of frontend development, here we finish with a quick summary of what you're about tho learn.

   AI Website Transcript 

"That is the intermediate masterclass. We've learned many things there, but particularly we've been through the entire editor as I've just described. Now, we're going to move on to the advanced masterclass, and we're going to look at those key things. Front-end developers know that website designers wish they know, and we can do all of this without code. We're going to now explore the relationships between a parent and child. And once we've done this advanced masterclass, then we can go on and build some really, really advanced layouts.

We're going to look at a couple of advanced layouts on the Alio homepage, and we're going to learn how to do banners with shift in there. We've got other tools and functionality in the effects like move right on scroll, and we've got reveal on scroll. I mean, it's not rocket science. You could probably work this out for yourself right now in that if I wanted to reveal this on scroll, I would use reveal on scroll. And then, I do want it to reveal slowly. Do I want it to be delayed? A little break, yeah, and then, do I want it to reset? So, that will reset to its original position. When you've got cool effects like this, it's resetting. It's slow, delayed, and resetting to its original position.

I'm going to give you a tip here. If you want on scroll, to reveal on scroll, use these three settings to begin with. Slow, delayed, reset. Just works really nice. It's probably what you're looking for. Again, we're making those key decisions for you. But again, with the text, if I wanted to move this text right on scroll, then I can just simply click on scroll and move it right? You can probably see now with this rotating logo, it doesn't take a genius now to work out what we're actually doing. Well, are we rotating that? That's exactly what we're doing.

I think this is really completes the editor. All, but these last little pieces, where I'm going to show you three website design techniques that front-end developers know how to do encode that web designers wish they knew to do without code, and this is how we do it right here. We are going to be looking at the relationship between the parent height and the child height, right? Really essential stuff. And we're going to introduce how you go and think about troubleshooting so that when anyone asks you a question, you will be able to answer their question as well in no time. Of course, they could just click the help video icon and learn it for themselves, which is help all the way through on every feature so that people can learn on demand. You don't even have to watch back this video, you can just simply click those as you wish.

Then, we're going to look at equal-height columns. When we've got those columns with different content, we're going to decide do we want to align them all up neatly? And then, we're going to have a look, finally, at some of these advanced positional tools. And we're going to be focusing on absolute and relative, so we can position Frames in cool ways. You’ll learn that at MOBLE we say ‘position my Child Frame absolute bottom left relative to the Parent Frame’. And this is essential lingo for beginners to learn absolute and relative relationships, a staple of Frontend development. 

Okay, all this will all make sense shortly, and we will also look at other tricks like sticky. Do I want to make a bar stick as people scroll? Or do I want the right-hand side to stick as people scroll? Okay are you ready? 

So, that wraps the intermediate session. Now, we're going to step it up and move on to some more of the advanced features of the Visual Editor, soI'm going to pause here, and I will see you in the Advanced Masterclass."

More Quick Clips