2015
Pluralsight
Paul Sheriff
3:19
English
This course will use a step-by-step approach for showing the student how to build several UI widgets using HTML, HTML5, CSS/CSS3, and Bootstrap. The overall project for this course is a simple Music Site that shows how to build all these UI widgets. There will be step-by-step demos for each module to illustrate the concepts of building custom UI widgets. We will use Visual Studio 2013 to build the HTML, however, any editor can be used as we will not be using any Microsoft-specific technology. The concepts in this course can be applied equally to PHP, MVC, Web Forms, or any web development system. At the end of the course the student will have built several ready-to-use UI widgets they can incorporate into their own web projects right away.
Course Introduction
Course Introduction
Course Audience and Pluralsight Courses to Help You
Course Outline
Create Left (Sidebar) Navigation
Module Introduction
Introduction to Simple Left Navigation
Building the HTML for Our Left Navigation
Styling the Left Navigation
Adding a Media Query
Add Transitions for Visual Interest
Transition to Icons on Small Devices
Left Navigation with Accordions
Module Summary
Build Custom Dashboard Widgets
Module Introduction
Introduction to Summary Blocks
Build Summary Blocks Step-by-Step
Introduction to Summary Blocks Themes
Theme Summary Blocks
Introduction to Readme Boxes
Build Readme Box Step-by-Step
Adding More Styles for Readme Box
Theme Readme Boxes
Add a New Page with Readme Boxes
Stopping Transitions When Moving From Page to Page
Module Summary
Extending Check Boxes and Radio Buttons
Module Introduction
Using Bootstrap Check Boxes
Check Boxes in a Button
Check Boxes in a Button Group
Toggle Glyphs in Check Boxes Using jQuery
Radio Buttons in Button Groups and Toggling Glyphs
Module Summary
Custom Product Selectors
Module Introduction
Introduction to Product Selectors
Build a Product Selector
Styling the Product Selector
Write jQuery to Toggle Product Selector
Intro to Making Your Product Selector More Generic
Create JavaScript Objects for More Generic Code
Intro to Calculating Totals
Create Product Total Area
Write jQuery to Calculate Running Totals
Generic Total Calculation and Final Sample
Module Summary
Customizable Bootstrap Accordions
Module Introduction
Adding Glyphs to Accordions
Introduction to Adding Glyphs Programmatically
Add Glyphs to Accordion Using jQuery
Change Glyphs Using jQuery
Use 'data-' Attributes for Generic Coding
Adding 'data-' Attributes to Accordions
Handling Different Accordions
Making the jQuery Generic for Multiple Accordions
Module Summary
Let Your User Know Something Is Happening
Module Introduction
Disable Button and Change Text
Adding a Pop-up Message
Gray Out the Background
Add a Spinner
Module Summary
Course Summary
Download File Size:590.37 MB
|
