Teach on Udemy

Turn what you know into an opportunity and reach millions around the world.

Learn More

Your cart is empty.

Keep shopping

jQuery Mobile Masterclass: Build Real apps using jQuery.

Name: jQuery Mobile Masterclass: Build Real apps using jQuery.
Rating: 3.8 (152 reviews)

Use jQuery for designing mobile apps for IOS ,ANDROID , BLACKBERRY phone and be a professional app designer using jQuery

Created byKunal Asudani

Last updated 11/2019

English

English [Auto],

What you'll learn

Go from a total beginner to a professional app designer using jQuery Mobile.
Understand how pages are designed and are integrated together.
Designing user friendly pages by adding buttons and icons.
Adding Popups with different functionalities.
Adding advance functionalities : Toolbars , Navigation bars , Panels and many more
Understand the use of Collapsible in mobile app.
Understand the advance GRID concept.
Hands on to : Designing Tables , List views , Filters , Forms and many more.
Be a PRO app designer for IOS , Android and BLACKBERRY mobile phone.
Get friendly support on any problem in less than 12 hours.
A certificate of completion at the end.

Course content

17 sections • 76 lectures • 8h 51m total length

Introduction to the course.3:50
Explore jQuery mobile as a cross-platform framework for building real mobile apps with HTML5, CSS3, and JavaScript that run on iOS, Android, BlackBerry, and Windows Phone using the jQuery library.
Introduction to Instructor.1:01
Meet your instructor, Danny, who outlines his background in Android website design and development, including eight years teaching, three in Android, and two as a UI trainer.

Your first page ...!!!6:45
Build your first jQuery mobile page in Dreamweaver, wiring header, content, photo, and footer, and preview its responsive mobile layout using the viewport meta tag.
Understanding the concept of multiple pages in jQuery Mobile.10:09
Learn to build a multi-page jQuery Mobile app by using multiple pages within a single file, assign unique IDs, and link pages with hash navigation to switch between pages.
Using pages in the form of dialogs.10:44
Learn how to implement pages as dialogs in jQuery Mobile, creating dialog boxes with data-role values and multi-page navigation to present information and collect input.

Introduction and basic understanding of buttons.8:17
learn the basics of buttons in jQuery mobile and compare three implementation methods: input data, class-based button, and anchor link for practical mobile navigation.
Using advance buttons in your app.7:09
Explore how to implement navigation with advanced buttons in a jQuery mobile app, using a navigation bar and a single-click transition to a second page.
Grouping of button is also possible.6:20
Learn how to group jQuery mobile buttons into horizontal or vertical layouts using the control group and day to day attributes, with practical code guidance.
Let's create a back button in jQuery Mobile.7:47
Create a back button in jQuery Mobile using data-rel to navigate to the previous page. Explore building a multi-page flow with headers and links that reveal a practical back action.
INLINE BUTTONS - The best way to use buttons.10:06
Discover how inline buttons differ from full-width normal buttons and learn to create inline buttons that appear side by side in a mobile app, with two-page practical examples.
Bonus information on buttons.5:05
Explore practical button styling in jQuery Mobile, applying inline, corner, mini, and shadow classes, plus color variants like white and black, to enhance mobile UI.

Adding icons to button.11:06
Learn how to add icons to jQuery mobile buttons, including left and right arrows, info, delete, back, home, alert, search, and lock icons.
Yes , we can POSITION the icons in the way we want.5:40
Learn to position icons on jQuery mobile screens using top, bottom, left, and right, with steps to create a header, assign IDs, and implement navigation buttons.
Let's remove the text and display only the icon.6:18
Learn to design icon-only buttons in jQuery Mobile, removing text for cleaner user interface, and apply rounded corners and back button ideas to enhance app creativity and navigation.
A DEEP modification in icons.6:59
Learn how to modify icons in jquery mobile with two examples: keep the default circular icons and remove the gray circles, then apply inline buttons and rounded corners.
Playing with the colours.2:43
Learn to adjust icon visibility in jQuery Mobile by applying a simple class to change icon color and appearance, including black interiors and dark circles, across web and mobile UI.

Introduction to the simple popup.9:16
Explore how to create, initialize, and customize a simple popup in jQuery Mobile, including closing, positioning, and using data-rel and data-role with content and headings.
Different ways to close a popup.9:19
Explore three popup closing patterns in this jQuery Mobile Masterclass: close via delete button (right or left), click outside, or strict non dismissable mode.
We can also position popups wherever we want.11:11
Learn to position popups in jQuery Mobile by centering them in the window or attaching them to a specific element by ID, with practical Dreamweaver examples.
Transitions can be made a part of popups.8:32
Learn to apply predefined jQuery Mobile transitions to popups, using the transition attribute on buttons and exploring effects like fade, flip, slide, and turn with proper popup ids.
Adding directional arrows to popups.5:15
Add directional arrows to popups using IDs to control left, top, right, and bottom orientations, enhancing user interaction in the app.
Dialogs can also be added to popups.10:22
Learn to convert popups into dialogs using jQuery mobile by creating a dialog element, configuring a slide transition, and adding open and back buttons.
Playing with photos in terms of popup.10:28
Learn to implement photo popups in a jQuery Mobile app, enabling image zoom inside a popup with a back button, using main page and content IDs, and practical steps.
Using some CSS to make popups amazing.6:14
Learn to create engaging popups in jQuery Mobile using CSS and the internal library to darken the background, focus attention, and reveal creative overlays.

Understanding the header.5:23
Explore header toolbars in jQuery Mobile, learn the two types of toolbars, and implement a header with home and search buttons and icons.
Understanding the footer.5:34
Learn to design flexible footers in jQuery mobile by adding unlimited icon buttons, note header limits of two, center inline icons, and use control groups to switch layouts.
Let's position headers and footers.6:12
Position headers and footers in jQuery Mobile using inline, fixed, and full-screen modes, and learn how each option behaves as content scrolls.

Let's create a basic navigation bar.6:27
Build a mobile navigation bar with a header, unordered lists, and list items to link home, search, and about us, emphasizing the active state in a jQuery mobile app.
Adding ICONS to navigation bar.2:46
Learn how to add icons to the navigation bar in this jQuery mobile masterclass, pairing icons with text to enhance navigation using practical examples like home, grid, and search.
Positioning icons in navigation bar.3:55
Master how to position navigation bar icons in jQuery Mobile by choosing top, right, left, or bottom placements, using a single class to control icon alignment.
Advance options in navigation bar.7:44
Demonstrates activating navigation bar buttons to reflect the current page in blue, using a two-page example (home and search) and a class-based approach to persist the active state.
Adding navigation bars to CONTENT.6:47
Add navigation bars to the content area of a jQuery mobile app, enabling quick access to search, contact us, and other content pages.
Adding navigation bar in the FOOTER.4:52
Learn to add a footer navigation bar in a jQuery Mobile app, with multiple items and icons, to create a user-friendly, accessible interface through practical implementation.
BONUS lecture on navigation bars.6:31
Build a navigation bar with more than five buttons in jQuery mobile, arranged in a sequential layout with icons and content areas, demonstrated in Dreamweaver for complex mobile apps.

Understanding the basics.7:03
Create basic banners and panels in a jQuery mobile app, showing panels before or after the head part and opening them with a button to reveal important messages.
Different ways of closing a panel.6:22
Learn multiple ways to close a panel in jQuery Mobile, using dismissible and data attributes, swipe gestures, and an inside-panel close button for better mobile interaction.
Different ways to display the panel.4:53
Explore three panel display modes in jQuery Mobile—overlay, push, and reveal—and learn how the data-display attribute controls whether the panel overlays, pushes, or reveals content.
Positioning of panels.4:36
Position panels with data-position, choosing left or right to control their opening. Use data-fixed to keep a panel stationary during scroll.

Let's create a simple collapsible .7:23
Learn to implement a simple collapsible panel in a jQuery Mobile app, using a heading and expandable content that reveals details on tap to save space.
Let's use the concept of nested collapsibles.6:30
Explore building nested collapsibles in a jQuery Mobile app, where a collapsible contains another collapsible. Learn to add and display multiple nested sections and their relationships.
Grouping of multiple collapsibles.7:48
Master how to group collapsibles into a collapsible set or accordion, enabling only one open at a time to save mobile space and improve layout.
Using collapsible as popup.8:31
Create a collapsible menu with a popup in a single collapsible set, using jQuery Mobile principles to ensure only one section opens at a time and enhance interactivity.
Bonus lecture on collapsibles.2:44
Learn how to modify collapsible menu corners from rounded to normal by setting data-inset to false, with practical code demos across five collapsible types.
Playing with icons.5:46
Explore how to enhance jQuery mobile apps with collapsible components, customize icons and arrows (up or down), and control data collapsed and expanded states for engaging mobile interfaces.
Changing the position of icons.2:32
Learn how to change the position of icons in jQuery Mobile collapsibles using the data-iconpos attribute to place icons on the left or right, with a live demonstration.

Requirements

I will take you from beginner to expert so no coding experience is necessary.
Any computer or OS will work.
A basic understanding of HTML will be a plus , but not must !

Description

jQuery - "Write less do more" , let's use this concept for designing amazing and interactive mobile apps for ANDROID , IOS , BLACKBERRY and WINDOWS phone.

What this course is about???

This course is a complete guide on app designing using jQuery (jQuery Mobile) , which will provide you a complete programming approach on designing mobile apps easily and takes your future to the next level.

________________________________________________________________________________

NOTE : This course is for beginners as well as for experts.

A complete course on app designing using jQuery Mobile.

Enjoy a complete guide onjQuery( jQuery Mobile) with 100+ lectures and 10+ hours of content.

___________________________________________________________________________________

Are you a beginner in the field of app designing ??

Do you want to be a professional app designer in a very less time and with no skills?? or

You want to earn $$$$ quickly while working as a freelancer app designer ??

If your answer to any of these question is yes , then you can go further.

This course is a complete guide on jQuery for mobile which will teach you everything from scratch .

Why jQuery Mobile for designing apps???

1). jQuery Mobile works on all popular smartphones and tablets.

2).jQuery Mobile uses HTML5 & CSS3 for laying out pages with minimal scripting.

3).It can be used on android , Blackberry , IOS , Windows phone .

4). Very less programming is required.

What you can do after this course??

You will be able to design complete mobile app for android , blackberry , windows phone , IOS easily.

What you should know before starting this course??

Basic knowledge of HTML , CSS , jQuery is good , but not required. This course is from scratch and will provide you everything.

Before starting..??

You should install , Notepad++ / Dreamweaver (used in this course) . All the steps for installing the software are provided in the curriculum.

Who this course is for:

Take this course if you want to be a professional App designer using jQuery.
Take this course if you want to understand how jQuery works in app design.
Take this course if you want to learn app designing quickly without learning any complex programming.

jQuery Mobile Masterclass: Build Real apps using jQuery.

What you'll learn

Explore related topics

Course content

Introduction to jQuery for mobile.2 lectures • 5min

Let's create pages for your mobile apps.3 lectures • 28min

Playing with transitions in jQuery Mobile.2 lectures • 12min

Let's add BUTTONS to your mobile app.6 lectures • 45min

Using icons on buttons.5 lectures • 33min

Creating POPUPS in your app.8 lectures • 1hr 11min

Better understanding of TOOLBARS in jQuery Mobile.3 lectures • 17min

Let's create a NAVIGATION BAR for your mobile app.7 lectures • 39min

Creating PANELS for your mobile app.4 lectures • 23min

Using COLLAPSIBLE in your mobile app.7 lectures • 41min

Requirements

Description

Who this course is for: