Create Mobile-Friendly Web Apps With HTML
4.2 (31 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
1,019 students enrolled

Create Mobile-Friendly Web Apps With HTML

Everything you need to build Web apps that work in any environment
4.2 (31 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
1,019 students enrolled
Created by David Karlins
Last updated 9/2017
English [Auto-generated]
Current price: $13.99 Original price: $19.99 Discount: 30% off
5 hours left at this price!
30-Day Money-Back Guarantee
This course includes
  • 1.5 hours on-demand video
  • 21 downloadable resources
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
Training 5 or more people?

Get your team access to 4,000+ top Udemy courses anytime, anywhere.

Try Udemy for Business
What you'll learn
  • Build a mobile app using jQuery Mobile and HTML5
  • Make mobile apps that work in any operating system
  • Design mobile-friendly navigation to invite users into your site
  • Create custom CSS -- without coding! -- to create a unique look and feel for your mobile site
  • Lay out mobile pages with tabbed navigation bars and columns
  • Invite users to complete forms with mobile-friendly input techniques
  • Mesh your mobile Web app with a laptop/desktop site
  • You'll find this course easier to digest if you have some exposure to HTML5 and CSS3 - on the level of a Dummies book, for example

Ever wonder what makes a mobile Web experience really positive? This course shows you how to build mobile Web apps that draw users into your content on their smartphones and tablets. 

Don't worry about high level coding. You won't need it for this course. You can build excellent, inviting, interactive Web apps with HTML, CSS and JavaScript with very little coding at all. The JavaScript we use in this class comes in pre-packaged widgets and there is no coding involved. Instead we use jQuery widgets which are included in jQuery Mobile. 

Here are key skills you're acquire in this class

  • HTML5, and especially new elements in HTML5 that enhance mobile design
  • CSS3 -- again with a focus on mobile design
  • jQuery Mobile. jQuery Mobile is built on jQuery, and allows you to create Web apps that have all the features of native apps which are much more expensive and complicated to create. 

The course covers both technique, and design, so that you can build mobile Web apps that are as appealing as they are functional. It consists of six sessions, each with video lectures, detailed notes, and sample code. 

Who this course is for:
  • This course is for people who want to learn to build mobile Web apps using HTML and CSS, along with jQuery Mobile
  • This is not a class for creating native apps with high-level coding languages that work in only one device
  • This is not a responsive Web design class, it is a more robust approach to creating an app experience for users
Course content
Expand all 14 lectures 01:33:48
+ Building Web Apps - An Overview
3 lectures 24:19

In this lecture, we'll examine examples of successful Web apps, and identify features that make them particularly useful and attractive to visitors. You'll come away with a good sense of the features available to you as a Web app developer, and how to make the best use of them.

Preview 05:48

In this lecture, I'll break down the skills you'll be drawing on to build Web apps. I'll provide you with resources to strengthen or catch up on any gaps in your HTML skillset needed to build Web apps. And I'll help you accumulate and organize free online resources needed to build mobile web apps.

What do you need to build Web apps?

Here, I'll break down just how Web apps are actually built, and preview how we'll do that. Wait! We won't just "preview" that, we'll build our first Web app page.

Building a Web app - now!
+ Build a Multi-page Web App - Add pages
2 lectures 10:35

You might be surprised to learn that most multi-page mobile Web apps are actually a single HTML page! I'll explain why that is, and how that works, in this lecture. And then I'll walk you through what looks and feels like a multi-page Web app.

Preview 05:10

Here we'll set up a structure that allows us to integrate unlimited "pages" into our Web app.

Adding New Pages to Your Site
+ Designing Collapsible Content
2 lectures 10:25

High resolution and larger mobile devices have created a demand, and capacity for multi-column designs in Web apps. I'll show you how to design effective ones - starting with tabbed navigation bars.

Creating collapsible blocks of content

Collapsible sets -- more powerful than just collapsible blocks -- are an effective way to present a lot of content in a small space. I'll show you how Boston's Logan Airport does that in their mobile site, and then walk you through how to do it yourself.

Presenting content in collapsible sets
+ Customizing Styling with Themes
3 lectures 18:40

The CSS that makes up mobile Web apps is insane -- too insane to customize by hand even if you're a CSS guru. The solution: jQuery Mobile ThemeRoller. We'll define custom themes here.

Creating Custom Themes

Having built a custom theme, the next step is to download it and install on in your mobile Web app. We do that here.

Downloading & Applying Custom Themes

Mobile app themes actually include multiple color sets. I'll walk you through how to apply those.

Assigning Theme Swatches to Mobile Page Elements
+ Designing With Columns and Grids
2 lectures 10:08

A basic implementation of columns in mobile design is a tabbed navigation bar. We build that here.

Creating tabbed navigation bars

Don't use tables to design mobile Web app layouts with columns and rows... let me show you how to do it with grids and blocks in a way that provides a better experience for mobile users. We do that here.

Laying out pages with columns and rows
+ Mobile Friendly Forms... and more
2 lectures 19:41

Why do mobile apps normally avoid multiple-columns? And how has the evolution of larger and more high resolution smartphones and tables impacted that? When, and how, should you design with columns?

Preview 10:45

Here I'll review key concepts we covered in class, add a couple important new tips, and point you towards additional resources. 

Summary, Review... and More