facebook google plus twitter

Webucator's Free Developing Mobile Websites Tutorial

Welcome to our free Developing Mobile Websites tutorial. This tutorial is based on Webucator's Responsive Web Design Training course.
Start Tutorial or choose from a lesson below
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.
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.
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.
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.
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.
The GeoLocation API offers a device-agnostic means of accessing your user's location.
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.
Writing some custom JavaScript allows us to access data from the accelerometer.
In this lesson, you will learn about using video for 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.
In this lesson, you will learn about Mobile Menus.
In this lesson, you will learn how to use Bootstrap, a powerful grid-based layout for building responsive websites.