Developing Mobile Websites

Udemy

Description

In this “Developing Mobile Web Sites: How to Make a Mobile Website “class, you will learn to use HTML5, CSS, JavaScript, and other tools create websites that are responsive: sites that adapt their layout to the client device being used, whether it be a Smartphone, tablet computer, or desktop computer/laptop. You will learn to use CSS media queries, mobile-friendly HTML5 features, JavaScript enhancements, and various frameworks to build websites that look as good on an iPhone or Android as they do on a desktop or laptop computer.

Take this Developing Mobile Websites course and learn how to make a mobile website.

</p>



Curriculum For This Course Expand All Collapse All 81 Lectures 05:36:16 + – Udemy Mobile Websites Promo 2 Lectures 03:11 Udemy Mobile Websites Promo 03:05 Before you begin the course, please take a moment to check out the link below to setup your computer and download your exercise files. http://www.webucator.com/help/wiki/index.cfm/MBL101  Class Files 00:06 + – Designing for Mobile 4 Lectures 10:18 Lesson Introduction 00:37   Responsive Design: Good for All Devices Responsive web design is the process of building Web pages to work well for all viewing environments: whether users access our sites on an iPhone or Android smartphone, an iPad tablet, a small laptop, or a desktop computer with a huge monitor, we want the si… Responsive Design: Good for All Devices Preview 02:33   The New York Times and Boston Globe Web Sites Duration: 10 to 20 minutes. In this exercise, you will evaluate how the Web sites for two major American newspapers differ in responsiveness. Can you find the code behind the differences in the sites' behaviors? Your work on this exercise - and on work… The New York Times and Boston Globe Web Sites Preview 02:07 Reviewing the New York Times and Boston Globe Websites Preview 05:01 + – Flexible Grids 9 Lectures 36:30 Lesson Introduction 01:18   The Flexible Grid: A More Responsive Layout Strategy The Case for Flexible Responsive Web design is the process by which we craft the markup and stylesheets for a site to adapt to the user's environment. Users viewing our site on a smartphone, a tablet device, a laptop with a small screen resoluti… The Flexible Grid: A More Responsive Layout Strategy 07:05 The Flexible/Inflexible Demo Reviewed 05:10 A Better Jazz Calendar Let's now apply the same process to the Jazz Calendar page - open the file FlexibleGrids/Demos/jazzcalflexible.html in your browser. We'll use a width of 90% for the outermost (#container) div. The container div (#main) inside of #container gets a width of 93.75%, since 900 /… A Better Jazz Calendar 01:43 The Flexible JazzCal Site Reviewed 06:29 The Pickup Soccer Site Duration: 20 to 30 minutes. In this exercise, you will create the first page of a site dedicated to listing local soccer (football, if you aren't in the US!) games - a place for folks to find pickup games at local fields where anyone can join in the game. The recreational socc… The Pickup Soccer Site 02:21 Solution to Pickup Soccer Site Exercise Reviewed 06:19 Making Pickup Soccer Flexible Duration: 20 to 30 minutes. Let's apply the same process to the Pickup Soccer page that we did to the Jazz Calendar page: we'll change a fixed-width design into a more flexible, percentage-based design. Keep in mind the key rule here: percentage widths are calculated by… Making Pickup Soccer Flexible 00:44 Solution to Making Pickup Soccer Flexible Reviewed 05:19 + – Flexible Images and Other Media 8 Lectures 20:02 Lesson Introduction 01:13 Flexible Images and Other Media Improving the Jazz Calendar Site The updates to the Jazz Calendar site we made in the previous lesson took a static, fixed-width, pixel-based design and turned it into a more flexible, percentage-based page. But a quick examination of the page - especially when one re… Flexible Images and Other Media 02:34 Flexible Images and Other Media Reviewed 05:39 Fixing Images in Pickup Soccer Duration: 10 to 15 minutes. In this exercise, you will edit the Pickup Soccer site to learn how to scale image widths dynamically. Open FlexibleImages/Exercises/flexiblesoccerimages/index.html and FlexibleImages/Exercises/flexiblesoccerimages/css/style.css. Edit the CS… Fixing Images in Pickup Soccer 00:29 Flexible Images in Pickup Soccer Exercise Reviewed 03:10 Flexible Widths for Embedded Video Duration: 10 to 15 minutes. We consider now an interior page for the Pickup Soccer site - the "About Us" page. mocked up with some greeking text. We include a video - an embedded YouTube video of cool soccer tricks, appropriate for our audience. Of course, in the a… Flexible Widths for Embedded Video 00:47 Flexible Background Image in the Pickup Soccer Site Duration: 10 to 15 minutes. In this exercise, you will add a graphic background for the right column of the Pickup Soccer site to match this design: Open the files FlexibleImages/Exercises/flexiblebg/index.html and FlexibleImages/Exercises/flexible… Flexible Background Image in the Pickup Soccer Site 00:43 Flexible Background Image in the Pickup Soccer Site Exercise Reviewed 05:26 + – Media Queries 8 Lectures 28:06 Lesson Introduction 01:07 Media Queries Targeting Widths and Devices with CSS3 Media Queries Our Jazz Calendar site is more and more flexible: we've used a percentage-based layout to scale the site independent of the browser window's size, and we've applied CSS to scale images and other fixed-width elements. But the design s… Media Queries 04:12 Media Queries Reviewed 07:11 Adding Media Queries for Pickup Soccer Duration: 20 to 30 minutes. Let's use media queries to fix a few things on the Pickup Soccer site. The top (white) nav has never worked well once the browser window is resized too small (it slides under the logo when the container runs out of room to float it r… Adding Media Queries for Pickup Soccer 01:21 Linearizing the Pickup Soccer Site Duration: 20 to 30 minutes. In this exercise, you'll update the Pickup Soccer site again, this time presenting the sidebar under the main column at widths under 520px, as shown: Open MediaQueries/Exercises/sidebarnotfloated/index.html and MediaQueries/Exercises/sid… Linearizing the Pickup Soccer Site 01:31 Linearizing the Pickup Soccer Site Exercise Reviewed 05:55 Pickup Soccer - For Phones Duration: 20 to 30 minutes. In this exercise, you will update the Pickup Soccer site for mobile devices - we'll use media queries to display the site like this on a phone: Open MediaQueries/Exercises/devicewidth/index.html and MediaQueries/Exercises/devicewidth/css/style.c… Pickup Soccer - For Phones 01:23 Pickup Soccer - For Phones Exercise Reviewed 05:25 + – The Viewport 5 Lectures 13:36 Lesson Introduction 00:47   The Viewport Our Jazz Calendar site is getting better and better - our flexible design now benefits from media queries to target both window widths and device widths. But the scale of the site, when viewed on a mobile device, leaves a bit to be desired - even the smartphone-specific media queries… The Viewport 01:21 The Viewport Reviewed 06:07   Scaling the Pickup Soccer Site Appropriately for Devices Duration: 10 to 15 minutes. In this exercise, you will use the viewport tag to control the initial zoom and scaling of the Pickup Soccer site on smartphone devices. Open Viewport/Exercises/viewporttag/index.html and Viewport/Exercises/viewpo… Scaling the Pickup Soccer Site Appropriately for Devices 00:38

 

Scaling the Pickup Soccer Site Appropriately for Devices Reviewed 04:42 + – HTML5: Mobile Specific 7 Lectures 22:20 Lesson Introduction 00:53   New HTML5 Features Forms Our mobile sites will need to accept user input - registration forms, comment forms, and the like to ask users to send us, via form fields, some information. HTML5 makes available a set of new form input types and attributes that enhance the user experience. Keep in mind t… New HTML5 Features 01:47 New HTML5 Features Reviewed 04:43   Local Storage Like cookies, HTML5 local storage offers a mechanism for storing key/value pairs locally, within the client browser, even after you navigate away from the page, close the browser, etc. Unlike cookies, these data are never sent back to the server. In addition, HTML5 offers session sto… Local Storage 01:32

 

Local Storage Reviewed 06:11   Registration Form for Pickup Soccer Duration: 20 to 30 minutes. In this exercise, you will create a registration form for the Pickup Soccer site: Open the file HTML5MobileSpecific/Exercises/soccer/index.html in your file editor and in your browser. Add a form and input fields for name, phone, emai… Registration Form for Pickup Soccer 01:19 Registration Form for Pickup Soccer Reviewed 05:54 + – GeoLocation API 7 Lectures 27:53 Lesson Introduction 00:50   The GeoLocation API One can easily see the value of location-aware Web sites; increasingly, we rely on our phones to find the nearest gas station, restaurant, or shopping center. As we move through this lesson, we will explore how location-aware code might enhance the user experience for visitors… The GeoLocation API 03:38 The GeoLocation API Reviewed 06:02   Google Maps In the demonstrations below and the next few exercises, we'll make use of the Google Maps API. See the Google Developers Maps page for lots more information about what one can do to integrate maps into your pages. Jazz Calendar : Finding Nearby Gigs Let's build a page for the Jazz Cale… Google Maps 02:18 Google Maps and the GeoLocation API Reviewed 05:31   Adding a Location-Aware Page to the Pickup Soccer Site Duration: 20 to 30 minutes. In this exercise, you will use the GeoLocation API to offer visitors to the Pickup Soccer site a way to find pickup games near their current location, as shown in the screen shot: Open ClassFiles/GeoLocationAPI/Exer… Adding a Location-Aware Page to the Pickup Soccer Site 03:44 Adding a Location-Aware Page to the Pickup Soccer Site Reviewed 05:49 + – Consolidating the Web with Native Extensions 8 Lectures 27:44 Lesson Introduction 01:04   Integrating with the Home Screen - Custom Icons iPhone 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 a line of code in the head of each page… Integrating with the Home Screen - Custom Icons 04:06 Custom Icons & Hiding Browser UI Reviewed 05:11   Using the Accelerometer Both the iPhone and the Android expose accelerometer data from the phone through JavaScript. On the iPhone, the window.ondevicemotion event handler gives the device's current acceleration via the accelerationIncludingGravity.x and accelerationIncludingGravity.y values. To i… Using the Accelerometer 01:12 Accessing the Accelerometer Reviewed
Dates:
  • Free schedule
Course properties:
  • Free:
  • Paid:
  • Certificate:
  • MOOC:
  • Video:
  • Audio:
  • Email-course:
  • Language: English Gb

Reviews

No reviews yet. Want to be the first?

Register to leave a review

Show?id=n3eliycplgk&bids=695438
NVIDIA
More on this topic:
18539_3412_4 Dreamweaver CS6 Build an HTML5 CSS3 website Getting Started
Learn how to Create, Design, Edit and FTP Publish a fully working SEO friendly...
Extensionflag Fundamentals of Website Development
This course provides a comprehensive overview of website development...
19260_3680_18 Create an Engaging Website with Twitter Bootstrap 2.x
Learn to create your website with this free and open-source web design framework...
50587_f92a_5 Online Courses - Anytime, Anywhere
Learn to build responsive websites that are viewable on all devices from desktops...
56255_40c8_6 Javascript
Javascript is an open source scripting language used to enhance user interfaces...
More from 'Udemy':
Show?id=n3eliycplgk&bids=323058 Thousands of online courses for only $15
Most courses are dropped to $15 flat price!
Banner_ruby Ruby on Rails Tutorial: Learn From Scratch
This post is part of our “Getting Started” series of free text tutorials on...
Show?id=n3eliycplgk&bids=323058 $10 Sitewide Deal
$10 Fixed Price across the site!
64422_c6dd_6 1 Hour HTML
Learn how to code in HTML in 1 hour. This class is set up for complete beginners...
72262_60dc_6 1 hour jQuery
Have you ever wanted to learn to code. This course will show you the basics...

© 2013-2019