HTML5 Projects: Creating a Responsive Presentation

HTML5 Projects: Creating a Responsive Presentation is a course available on Lynda.com.

Description:
Follow along with author Justin Putney as he uses open technologies (HTML5, jQuery, and CSS) to create a dynamic presentation slideshow that responds to mobile and desktop layouts. Learn to customize the slideshow to fit your next project, and to display artwork, photography, and other kinds of content.

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.

Topics include:

  • 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

Don’t have a Lynda.com account? Get 30 days of free unlimited access to lynda.com.

Get updates from Ajar Productions

Sign up today and get the InDesign Split Text premium extension for free!

Unsubscribe at any time. Powered by ConvertKit

Join the Conversation

  1. Frederico Gerken says:

    Hello,

    I am interested in purchasing a standard license In5 to produce digital magazines. I would like to clarify some doubts.

    With In5 and Baker can create the same app(digital magazine) for Ipads, Iphone and Android Tablets and Smartphones?

    Is there any course that covers the topics addressed in In5?

    Is possible to test the digital magazines (view in Ipad) in trial version?

    I would appreciate if you could answer me.

    I await a return

    Thank you

    1. Justin says:

      I’m not sure about the status of the Android Baker project, but it’s worth a try.

      You might want to also look into some other options like PhoneGap Build.

      And yes, you can use the trial version of in5 to run tests. That’s what it’s there for. 😉

  2. Jonathan joeft says:

    Is there a way to make the images in the presentation slide in instead of just appear?

    1. Justin says:

      Yes, same type of CSS for the transitions and hooking into the section.active class, e.g.:

      img{
      transition: all 1s ease-out .5s;
      -moz-transition: all 1s ease-out .5s;
      -webkit-transition: all 1s ease-out .5s;
      -o-transition: all 1s ease-out .5s;
      opacity:0;
      transform:translateX(-50%);
      -moz-transform:translateX(-50%);
      -webkit-transform:translateX(-50%);
      -o-transform:translateX(-50%);
      }
      section.active img{
      opacity:1;
      transform:translateX(0);
      -moz-transform:translateX(0);
      -webkit-transform:translateX(0);
      -o-transform:translateX(0);
      }

      1. Jonathan Hoeft says:

        That works for Safari, but when I test in Firefox, it the images show up with the slide.

      2. Justin says:

        It may require some tweaks, but it works when I test it in Firefox v34.0 on the Mac.

Leave a comment

Your email address will not be published. Required fields are marked *