Create Mobile-Friendly Web Apps With HTML

Everything you need to build Web apps that work in any environment
4.7 (17 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.
961 students enrolled
Instructed by David Karlins Design / Web Design
$19
$20
5% off
Take This Course
  • Lectures 14
  • Length 1.5 hours
  • Skill Level Intermediate Level
  • Languages English
  • Includes Lifetime access
    30 day money back guarantee!
    Available on iOS and Android
    Certificate of Completion
Wishlisted Wishlist

How taking a course works

Discover

Find online courses made by experts from around the world.

Learn

Take your courses with you and learn anywhere, anytime.

Master

Learn and practice real-world skills and achieve your goals.

About This Course

Published 6/2016 English

Course 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. 

What are the 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

What am I going to get from this course?

  • 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

What 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

What you get with this course?

Not for you? No problem.
30 day money back guarantee.

Forever yours.
Lifetime access.

Learn on the go.
Desktop, iOS and Android.

Get rewarded.
Certificate of completion.

Curriculum

Section 1: Building Web Apps - An Overview
05:48

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.

09:49

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.

08:42

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.

Section 2: Build a Multi-page Web App - Add pages
05:10

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.

05:25

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

Section 3: Designing Collapsible Content
03:41

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.

06:44

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.

Section 4: Customizing Styling with Themes
08:25

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.

06:40

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

03:35

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

Section 5: Designing With Columns and Grids
03:57

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

06:11

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.

Section 6: Mobile Friendly Forms... and more
10:45

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?

08:56

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

Students Who Viewed This Course Also Viewed

  • Loading
  • Loading
  • Loading

Instructor Biography

David Karlins, 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. 

Ready to start learning?
Take This Course