Join Justin Putney for an in-depth discussion in this video Creating slide content, part of HTML5 Projects: Creating a Responsive Presentation.
- View Offline
Here I've got the Index.HTML file opened up from the Start folder in 02 02 of…Chapter Two. So you can see that, this file is making…use of the section tags. The first tag has a class of title Slide,…so it's going to be differentiated. There are two headings in there.…Heading one which will be the name of the presentation and heading two, which is the…name of the presenter. So again, we could get really detailed in…the markup here, naming these classes, title, and presenter, that kind of thing.…
But, let's just keep it simple for the sake of demonstration.…There are a couple different kinds of slides here.…So in this section tag, there's a heading and there's a paragraph of text.…If I scroll down a bit, here's one with a heading and a paragraph of text and also…an image before that and down a bit more, of a slide with an unordered list and…three list items, it's a really common thing you see in a PowerPoint…presentation, are bullet points. So that what these will look like in the…final version. And then there is a final slide and this…
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