Create Mobile-Friendly Web Apps With HTML
4.6 (24 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
975 students enrolled
Wishlisted Wishlist

Please confirm that you want to add Create Mobile-Friendly Web Apps With HTML to your Wishlist.

Add to Wishlist

Create Mobile-Friendly Web Apps With HTML

Everything you need to build Web apps that work in any environment
4.6 (24 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
975 students enrolled
Created by David Karlins
Last updated 6/2016
English
Current price: $15 Original price: $25 Discount: 40% off
30-Day Money-Back Guarantee
Includes:
  • 1.5 hours on-demand video
  • 21 Supplemental Resources
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
What Will I 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
View Curriculum
Requirements
  • 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
Description

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 is the target audience?
  • 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
Curriculum For This Course
Expand All 14 Lectures Collapse 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?
09:49

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!
08:42
+
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
05:25
+
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
03:41

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
06:44
+
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
08:25

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
06:40

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

Assigning Theme Swatches to Mobile Page Elements
03:35
+
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
03:57

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
06:11
+
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
08:56
About the Instructor
David Karlins
4.6 Average rating
24 Reviews
975 Students
1 Course
Web design & consulting

David Karlins is the author of HTML5 and CSS3 For DummiesDeveloping Mobile Websites With HTML; co-author of Building Websites All-In-One For Dummies; and author of thirty other books on Web Design. His syndicated online courses are taught through thousands of colleges and universities around the world. David's design clients have ranged from Hewlett Packard to the Himalayan Fair.