Creating a Responsive Web Experience

with Chris Converse
please wait ...
Creating a Responsive Web Experience
Video duration: 0s 1h 23m Intermediate

Viewers:

Many times, simply resizing your web design is not enough to create a satisfying user experience. This course helps you make your webpages more responsive to different screen sizes with HTML, CSS, and JavaScript. Chris Converse shows how to modify your existing HTML, dynamically load content, animate elements on the page, and collapse the navigation on smaller screens—while allowing users to expand menus with a tap of their finger.

Note: This course uses the jQuery JavaScript library to add interactivity and other features to the example site. But if you've never written JavaScript before, don't worry. This course provides a step-by-step approach to writing just the code you need to replicate the experience Chris shows on screen.

Topics include:
  • Modifying the graphics
  • Adjusting the CSS for the navigation
  • Adding JavaScript and jQuery to your project
  • Loading content with jQuery
  • Determining screen size with JavaScript
  • Loading alternate content based on screen size
  • Animating the hero panel
  • Maintaining support for Internet Explorer 7 and 8
Subject:
Web
Software:
HTML jQuery CSS
Author:

Preview the final project

- Hi, I'm this is Chris Converse and in this course I'm going to show you how to alter the user experience of a webpage based on screen size. While HTML and CSS can be very powerful for making a design responsive, adding in Java script gives you the opportunity to adjust the user experience as well. In this course we'll pick up from my responsive design course and we'll change the HTML based on screen size. We'll animate elements on the page, and we'll even change the way the navigation works. Instead of moving the navigation down to be below the content using just HTML and CSS, we'll use Java script to collapse the navigation, and we'll let users open the navigation with a single click or tap of their finger.

Now, if you've never tried Java script or jQuery before, fear not! I'll show you how to do all of these things step by step. So, I hope this course sounds interesting to you and if so, let's get started.

please wait ...