Developing Mobile Websites Free Tutorial

Welcome to our free Developing Mobile Websites tutorial. This tutorial is based on Webucator's Responsive Web Design Training course.

Contact Us or call 1-877-932-8228
Start Tutorial or choose from a lesson below

Lesson 1: Designing for Mobile

In this lesson, you will learn why designing responsive websites - optimized for mobile - is more and more of a priority, and how we can accomplish a responsive design.

Lesson 2: Flexible Grids

In this lesson, we will discuss why flexible, percentage-based layouts are more responsive than fixed, pixel-based layouts, and how to convert fixed layouts to flexible layouts.

Lesson 3: Flexible Images and Other Media

In this lesson, we address a shortcoming of our previous work: images (and other elements with a fixed width) didn't scale when we converted pixel-width elements to flexible, percentage-based widths - and thus break the design. We learn how to scale images.

Lesson 4: The Viewport & Media Queries

In this lesson, we'll look first at the viewport tag, which allows us to scale content for various viewport widths. We will also learn how CSS3 media queries offer fine control over style rules, allowing us to target differing browser widths and device widths to change the manner in which we present content.

Lesson 5: HTML5: Mobile Specific

In this lesson, we'll investigate a bevy of handy new HTML5 features well suited for use on mobile devices, from form elements to local storage.

Lesson 6: GeoLocation API

The GeoLocation API offers a device-agnostic means of accessing your user's location.

Lesson 7: Home Screen Icons

iPhones, Android phones, and other devices offer users the ability to add a shortcut/bookmark to a Web page on their home screen; our job as developers is to provide a custom icon that best represents our site or page. Including some code in the head of each page or including a specifically-named icon in the website's root directory provides the functionality on iPhones and iPads; similar strategies work on Androids and other phones.

Lesson 8: Accelerometer

Writing some custom JavaScript allows us to access data from the accelerometer.

Lesson 9: Video

In this lesson, you will learn about using video for mobile.

Lesson 10: jQuery Mobile

In this lesson, we explore jQuery Mobile, a JavaScript framework that makes easy the process of creating Web sites for a wide range of popular mobile platforms.

Lesson 11: Mobile Menus

In this lesson, you will learn about Mobile Menus.

Lesson 12: The Bootstrap Framework

In this lesson, you will learn how to use Bootstrap, a powerful grid-based layout for building responsive websites.

Try The Complete Course

In addition to the free course material here, our complete self-paced course includes:

  • Video Presentations from Expert Instructors
  • Exercises
  • Interactive Quizzes
  • Readings and Tasks
Learn More