Join Justin Putney for an in-depth discussion in this video Translating ideas into CSS, part of HTML5 Projects: Creating a Responsive Presentation.
So as the first step to adding some of this additional display, let's make sure…we have that image available to use of the cityscape.…So, in your exercise files in Chapter 4 > 04_02, go to the Images directory and copy…the background buildings PNG, and then go into the Start folder and images and paste…that in. So we have a copy of that.…And then go to your CSS directory, and open up styles.css.…
Here I have it in Dreamweaver, and we're going to start modifying the display here.…Now, remember I wanted to add that image and add some differentiating to the…opening and closing slides. So in our HTML, we open that up and I will…do that so that we can use that as a reference.…We have the first slide is called title slide is the class and the last slide is…called end slide of a class. So, let's create a new CSS rule where a…section that has a class of title slide. And say or, do that with a comma.…
A section that has a class of andSlide, and I did this with some, trial and error.…So, let's go head and do that ourselves. The question is, how do we bump that text…
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