Join Justin Putney for an in-depth discussion in this video Full screen, part of HTML5 Projects: Creating a Responsive Presentation.
- View Offline
Let's take a look at another common presentation feature which is going to…full screen. It'd be really nice if our presenter can…have the presentation take over the whole screen and not have to see bits of the…browser window. So I'm going to switch over the browser…here and just show you where I'm getting the code for this.…This is John Dyer's site and you can download it form here.…Also got the snippet saved in the snippet text file here.…So if I switch over to the exercise files in Chapter 4 > 04_04 there is a snippet…text file then I open this up to rather large bit of code.…
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