FREELessons: 15Length: 1.7 hours

Next lesson playing in 5 seconds

  • Overview
  • Transcript

2.1 What Are We Building?

In this lesson, I will show you a demo of the website you will be building throughout this course. I’ll explain at a high level how we’ll accomplish the desired results.

2.1 What Are We Building?

Hello and welcome back. In this lesson, I want to walk you through very quickly what we're trying to accomplish in this course, and the basic technologies and processes that we're gonna go through to make that happen. Now we're gonna be using jQuery and CSS to animate from one page to another, so that when we click, for example, here on the Join page, we're gonna see the Home page animate out, and then the Join page animate in. Now we're doing the actual animations in CSS, but JavaScript and jQuery are gonna play a large part in completing this functionality and getting us where we want to go. So basically, what's happening here is when we click from the Home page to the Join page, we're not actually changing pages. We've still got the original page loaded. What we're doing is we're hijacking the click on the Join page, and instead of navigating to that page, we are triggering the animation, where everything animates out, and then once that animation is over, we're actually pulling in content from the joined .HTML page, but we're not actually navigating to it. However, you'll notice that when we look in our title bar and when we look at our URL, that when we click on the Join page, it's gonna look like we are navigating to the Join .HTML page, because we see that in the title and we see that in the URL. But what we're gonna do is we're gonna use the HTML5 history API to manipulate the URL, and make our browser think that we're on this new page, and when we do that, we can even use the back button to take us back to the index page, even though the index page is still the page that we're actually on. And you'll notice down here at the bottom right, that we have this date or this time date stamp here. And if I were to, you'll notice right now it says 22/11/06. So we'll notice now that if I just refresh this page, and hit Enter here, you'll notice that that timestamp changes, and now it says, 15:15. However, you'll notice now that if I click on the Join page, that value doesn't change because, and this is just a way to prove to you that we're not loading a whole new page here, we're just staying on the same page and we're pulling in content from another page to display on the current page. So everything you see up here at the top, this menu bar, this is still the content from the original index page, and we are gonna be using progressive enhancement here. In other words, we're gonna set this up so that even if the JavaScript doesn't work, even if JavaScript is completely turned off, or if you're using a browser that doesn't support the HTML5 history API, the links will still work. So we still actually have a Join page, if instead of clicking on one of these links, I just go to the Join page and hit Enter, you'll see that the page still loads just fine. And then if we come up here and go to index and hit Enter, the page still loads just fine. So hopefully, this has given you a pretty good idea of where we're headed in this course and what we're trying to accomplish here. And really, our main goal here is to create some really nice animations so that it doesn't feel like we've left the page. We don't have that jarring page refresh whenever we go from one page to another. Instead, we have these nice transitions going from one to the next. So we'll get started on building out this functionality in the next lesson. Thank you for watching.

Back to the top