Join Justin Putney for an in-depth discussion in this video Exploring the final results, part of HTML5 Projects: Creating a Responsive Presentation.
- View Offline
In this video we're going to take a look at the final presentation, but first let's have a look at the inspiration for the presentation itself. So, this is a conference website and what we'll be producing is a presentation template for the speakers of the conference. So, if you scroll down on the conference website, see this bit of artwork of a cityscape that we're going to pick up in the final presentation. So I'm going to switch over to the presentation and take it into full screen and walk you through some of the slides here.
And then I'm going to hit Escape to pull out of the presentation and full screen mode. And I'm going to scale the browser down, so you can see how it responds to different sizes. Now that I've shown you the presentation, let's take a look at what's under the hood.
Discover how to structure the HTML and slide content; design the navigation to react to clicks, keyboard input, and swipe gestures; and use CSS to customize the slide display for different screens and animated transitions. Justin also includes a series of challenge-and-solution pairs to test your skills.
Then, when you're ready, watch the HTML5 Projects: Creating an Advanced Responsive Presentation follow-up course to enhance your web presentation slides with audio, video, and an automatic playback feature.
- Structuring an HTML5 slideshow
- Creating the default slide appearance
- Using jQuery to display the current page
- Adding swipe gestures for mobile
- Creating a pause screen
- Translating your ideas into CSS
- Using media queries to adjust the layout