Join Justin Putney for an in-depth discussion in this video Challenge: Create a pause screen, part of HTML5 Projects: Creating a Responsive Presentation.
- View Offline
So your next challenge is to mimic a more advanced and lesser known feature of…PowerPoint and Keynote. In this case the feature basically pauses…the presentation and hides the current slide.…There're two different ways this works in both established presentation packages.…One is to hit the W key and it'll take the screen to white.…The other way is to hit the B key and it'll take the screen to black.…And this'll put the focus back on the presenter.…So, for this, let's keep it simple. Although it is going to be a little bit…trickier than the last challenge. And let's just go with white.…
I found a way to do that with a single line of jQuery.…So see if you can find that, too. And we'll talk about how to fade to black…in the solution. If you want to give it a try on your own,…be my guest. This may take you a little longer to…research so we got ten minutes, but I think you can do it.…
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