jQuery UI Ultimate:Design Amazing Interfaces Using jQuery UI

Ultimate interface designing course using jQuery (jQuery ui) ,use jQuery to design professional interface for you client
4.8 (48 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.
205 students enrolled
Take This Course
  • Lectures 69
  • Length 12.5 hours
  • Skill Level All Levels
  • 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


Find online courses made by experts from around the world.


Take your courses with you and learn anywhere, anytime.


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

About This Course

Published 6/2016 English

Course Description

jQuery-"Write less do more" , let's use this concept to design amazing user interfaces using jQuery.

Are you dreaming to be a professional User Interface (UI) developer?? or

You want to develop an awesomely attractive Graphical User Interface(GUI)??or

You want to be a freelancer UI developer and earn $$$$???

This 10+ hours of content will transform yu as a complete user interface designer using jQuery.

If your answer to any of these questions is yes , then why not to choose jQuery?.

jQuery , a very small name , which can be used to perform website animations , used to create mobile apps , and also user interfaces which you are going to learn in this course.

It is proved that jQuery is said to be the easiest programming language if your dream is to design an user interface .

This jQuery User Interface (UI) course is just for you and your search for a complete UI course ends here.

Benifits / Advantages of this course:

1). No matter you are a beginner or an expert , this course is designed from scratch.

2). Every programming example will start from a blank page and will ends up with a desired output.

3). A line to line description of every single code is provided in a descriptive manner.

4). This course will work as a "ZERO to HERO" , so at the end you will be an expert in designing interfaces and using javascript libraries effectively.

Sections included in this course:

1). Introduction to instructor , Jquery UI , understanding about what you are going to learn in coming lectures with different uses and utilisations of jQuery UI.

2). Hands on to interactions which are: 

    2.1) Draggable

   2.2) Droppable

  2.3) Resizable

 2.2) Selectable

 2.2) Sortable.

 3). Understanding the practical uses of widgets:

 3.1). Accordion

3.2) Autocomplete

3.3) Button

3.4) Datepicker

3.4) Dialog

3.5) Menu

3.6) Progressbar

3.7) Selectmenu

3.8) Slider

3.9) Spinner

3.10) Tabs

3.11) Tooltip

4). Applying different effects :

4.1) Hide

4.2) Show

4.3) Toggle

4.4) AddClass

4.5) RemoveClass

4.6) SwitchClass

4.7). Easing effects

And now you can develop the complex graphical user interface with confidence.

What are the requirements?

  • Ntepad ++ / Dreamweaver software(which is used in this course.)
  • Web browser.
  • A little knowledge of HTML , Javascript and CSS is required , but not necessary , this course will teach you everything from scratch.

What am I going to get from this course?

  • A complete introduction to uses and utilisations of jQuery UI.
  • Get the deep knowledge of the features of jQuery UI.
  • Detailed understanding of interactions (drag , drop , resize , sort and select) with practical coding examples.
  • In-depth description of widgets (accordions , sliders , datepicker etc.. ) with different sets of example code.
  • Playing with the effects (hide , show , toggle , animation , class etc..) and applying in interface.
  • Understanding the utilities and positioning of different elements professionally in jQuery UI.
  • Using different options and actions for interactions , widgets and effects with description and programming codes.

Who is the target audience?

  • Students who want to be a professional User Inerface (UI) designer can take this course.
  • People who want to brush up there skills on jQuery UI can enroll.
  • Students who want to be a professional Graphical User Interface (GUI) developer can take this course.

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.


Section 1: Introduction to the course and instructor with installation of jQuery UI.
Understanding the curriculum.
Introduction to the instructor.
Installation of jQuery UI.
Conceptual understanding of User Interface
Introduction to jQuery UI.
Understanding the features of jQuery UI.
Section 2: Interaction 1 - Draggable in jQuery UI.
Discussion on draggable options with default functionality.
Understanding options - Part 1
The advance helper option in draggable.
Understanding the position of cursor in draggable.
Discussion on actions used in draggable.
Section 3: Interaction 2 - Droppable in jQuery UI.
Discussion on droppable options with default functionality.
Understanding options for droppable - Part 1
Understanding options for droppable - Part 2
Understanding the concept of classes in droppable.
Discussion on droppable actions with the disable functionality.
Understanding events in droppable method.
Section 4: Interaction 3 - Resizable in jQuery UI.
Introduction to the resizable with default functionality.
Using advance options of resizable - Part 1.
Understanding options for resizable - Part 2
Understanding options for resizable - Part 3
Discussion on actions used in resizable with functionality.
Section 5: Interaction 4 - Selectables in jQuery UI.
Introduction to selectables with default functionality.
Using options of selectables Part-1
Understanding different actions in selectables.
Working with the index in selectables.
Section 6: Interaction 5 - Sortables in jQuery UI.
Introduction to sortables with default functionality.
Using options in sortables Part-1.
Understanding options in sortables Part-2.
Using advance options in sortable Part-3.
Introduction to the actions used in sortables.
Use of events in sortable method.
Section 7: Widgets 1 - Using accordion in jQuery UI.
Introduction to accordion with default functionality.
Understanding different actions used in accordion.
Section 8: Widgets 2 - Using autocomplete method in jQuery UI.
Introduction to autocomplete with default functionality.
Understanding options in autocomplete Part-1.
Using options in autocomplete Part-2.
Understanding options Part-3.
Section 9: Widget 3 - Concept of Buttons in jQuery UI.
Introduction to the buttons with default functionality.
Using options in buttons Part-1.
Introduction to actions used in buttons.
Section 10: Widget 4 - Using datepicker in jQuery UI.
Introduction to datepicker with default functionality.
Creating an inline datepicker.
Using options in datepicker Part-1.
Using options in datepicker Part-2.
Introduction to actions with functionality.
Section 11: Widget 5 - Using dialogs in jQuery UI.
Introduction to dialogs with default functionality.
Using options in dialog Part-1.
Using options in dialog Part-2.
Introduction to actions in dialogs with functionality.
Section 12: Widget 6 - Menu in jQuery UI.
Introduction to menu with default functionality.
Using options in menu Part-1.
Using actions in menu.
Section 13: Widget 7 - Progressbar in jQuery UI.
Discussion on progressbar with default functionality.
Section 14: Widget 8 - Sliders in jQuery UI.
Understanding the sliders with the default functionality.
Using options in slider Part-1.
Using options in slider Part-2.
Using actions in slider.
Section 15: Widget 9 - Spinners in jQuery UI.
Introduction to spinners with default functionality.
Using options in spinner Part-1.
Understanding the actions in spinner.
Using actions in spinner.
Section 16: Widget 10 - Tabs in jQuery UI.
Introduction to tabs with default functionality.
Using options in tabs Part-1.
Use of event option in tab method.
Understanding actions in tab.
Section 17: Widget 11- Tooltip in jQuery UI.
Introduction to the tooltip with default functionality.
Using options in tooltip Part-1.
Using options in tooltipPart-2.

Students Who Viewed This Course Also Viewed

  • Loading
  • Loading
  • Loading

Instructor Biography

Kunal Asudani, Website developer and instructor at Udemy

Hello friends!! I am kunal asudani , a website developer with an experience of 8 years in web development and an instructor.

Having a keen interest to spread my knowledge and skills , i started teaching the students who love programming , i have an expertise in programming languages such as HTML , JSON ,javascript , jquerry , css , Bootstrap , Angular JS , Foundation, C , C++, PHP and DSA.

Now , my students are there in 102 countries , started with the single class room , i am sharing my programming skills to my students worldwide.

My way of teaching:

Before creating any course , or any topic , i always create it in the way that my students have zero knowledge of it , because i always aim to start from the scratch.

If you are enrolling in any of my course , you will find everything from the basic , you don't need to google anything.

My aim for students:

I have decided to provide you with all my skills , experience and ideas and bring you up with a great programmer and a website developer.

i will create the every basic course , from scratch which will be in use , as far a person with zero experience can become a hero.

All the best my students...!!

Ready to start learning?
Take This Course