Udemy
    •  
    •  
    •  
    •  
    •  
    •  
    •  
    •  
Subscribe
Turn what you know into an opportunity and reach millions around the world.
Learn More
Your cart is empty.
Keep shopping
Bootstrap & jQuery - Certification Course for Beginners
Rating: 4.5 out of 5(1,449 ratings)
213,198 students

Bootstrap & jQuery - Certification Course for Beginners

Learn to Create fully Animated, Interactive, Mobile Responsive Web Pages using Bootstrap & jQuery Library.
Created byYouAccel Training
Last updated 6/2019
English

What you'll learn

  • How to create Mobile-Responsive web pages using the Bootstrap Grid System
  • How to create custom, drop-down navigation menus with animation
  • How to create collapse panels, accordion menus, pill menus and other types of UI elements
  • Working with Typography in Bootstrap for modern, stylish fonts
  • Working with Lists and Pagination to organize content
  • How to add events to page elements using jQuery
  • How to create animations in jQuery (Fade, Toggle, Slide, Animate, Hide-Show)
  • How to add and remove elements using Selectors (Id, Class)
  • How to use the Get Content function to retrieve Values and Attributes
  • How to use the jQuery Callback, and Chaining Function
  • Master the use of jQuery Animate with Multiple Params, Relative Values, and Queue Functionality

Course content

2 sections • 84 lectures • 4h 0m total length

  • Introduction to Bootstrap2:12

    Bootstrap, an open source framework, streamlines web development with HTML and CSS templates for typography, forms, buttons, tables, navigation, and image carousels, plus optional JavaScript plugins, delivering responsive, cross-browser layouts.

  • Embedding Bootstrap0:49

    Embed the Bootstrap framework on your web page using the CDN, then include the jQuery library and Bootstrap.js with plugins to enable built-in CSS and JavaScript components.

  • Bootstrap Basic Page Structure5:29
  • Bootstrap Grid System5:32
  • Bootstrap Three Column Layouts2:24

    Learn to convert a two-column layout to a responsive three-column Bootstrap grid, using 12 columns (4-4-4) and experimenting with different widths; see stacking at smaller viewports.

  • Bootstrap Typography6:50
  • Bootstrap Tables3:00
  • Bootstrap Styling Images2:17
  • Bootstrap Jumbotron2:27
  • Bootstrap Wells0:58
  • Bootstrap Alerts2:24
  • Bootstrap Buttons7:11
  • Bootstrap Button Groups1:57
  • Bootstrap Justified Button Groups2:32
  • Bootstrap Glyphicons2:52
  • Bootstrap Badges and Labels3:12
  • Bootstrap Progress Bars2:54
  • Bootstrap Pagination2:24
  • Bootstrap Pager Pagination1:17
  • Bootstrap List Groups5:10
  • Bootstrap Panels2:33
  • Bootstrap Dropdown Menus4:37
  • Bootstrap Collapsibles3:24

    Create Bootstrap collapsibles that let users show or hide content by clicking the collapse button. Bind a button with data-toggle='collapse' and data-target='#x1' to the div, with content hidden by default.

  • Bootstrap Collapse Panel1:53

    Create a collapsible panel in Bootstrap by building a panel group, a panel with a heading and title, and body and footer areas linked via data-toggle collapse to an id.

  • Bootstrap Collapse List Group0:57

    Learn to build a collapsible Bootstrap list group by clicking a heading to reveal three list items, using a ul with list-group and list-group-item classes.

  • Bootstrap Accordian5:01
  • Bootstrap Tab Menus4:46

    Build Bootstrap menus from a basic inline list to tabbed navigation with nav nav-tabs, mark an active tab, and add a dropdown menu using dropdown-toggle and dropdown-menu.

  • Bootstrap Pill Menus3:12
  • Bootstrap Dynamic Tabs and Pills4:03
  • Bootstrap Navigation Bar6:24

    Learn to build a responsive Bootstrap navigation bar that spans the page, using container or container-fluid, with header, brand, active links, right-aligned items, dropdowns, and fixed positioning.

  • Bootstrap Collapsible Navigation Bar3:30
  • Bootstrap Forms - Vertical and Inline3:36

    Learn to style Bootstrap forms with vertical and inline layouts and accessible markup using role=form. Implement labeled email and password inputs with validation and a remember me checkbox.

  • Bootstrap Inputs4:28
  • Bootstrap Form Control States3:41

    Learn Bootstrap form control states such as focused, success, error, and disabled, and build a horizontal form with form group, labels, and inputs, using Bootstrap grid and validation feedback.

  • Bootstrap Input Sizing3:11
  • Bootstrap Carousel9:22

    Create a Bootstrap carousel that cycles through slides of car images with titles and descriptions, using indicators and left/right controls for manual navigation. The carousel is responsive.

  • Bootstrap Modal4:01

    learn to build a bootstrap modal that pops up on top of current page with header, body, and footer, using fade effects and a close button via data-toggle and data-target.

  • Bootstrap Tooltip2:12
  • Bootstrap Popover2:52

    Explore how bootstrap popover extends tooltips with headers and content, configure placement (right, bottom, top, left), initialize with jQuery, and control visibility using click, focus, or hover.

  • Bootstrap Scrollspy5:40
  • Bootstrap Project - Themes Intro3:31
  • Bootstrap Project - File Overview2:15

    Explore the downloaded bootstrap freelancer theme and its folder structure: CSS files, fonts, images, JavaScript, less, mail app, and the index page; prepare to inspect the code next.

  • Bootstrap Project - Script Overview8:46
  • Bootstrap Project - Script Overview Cont.7:49

    Explore how the Bootstrap theme structures the about us, contact, and footer sections with containers and grid, and how modals and jQuery form validation boost interactivity.

Requirements

  • Basic Computer Skills

Description

Welcome to the Bootstrap & jQuery – Certification Course for Beginners

With over 64% of the world using mobile devices to browse web pages, it’s no surprise that Bootstrap and jQuery have become the industry leaders in front-end scripting languages.

This course starts right from the foundational concepts and gradually progresses to intermediate topics. Through a project-style learning approach, students will have the opportunity to build mobile-responsive web pages, complete with animation and interactivity.

Bootstrap Section:

Students are taught to use the Bootstrap framework for responsive, mobile-first - front-end development. As one of the leading open-source development libraries, Bootstrap is an essential part of the developers coding arsenal. The section begins with teaching students how to include essential Bootstrap files into web pages. It then explores the Bootstrap Grid system and popular layout strategies for optimal cross-device and cross-browser compatibility.

Students gain exposure to just about every Bootstrap component, from typography, tables and images, to jumbotrons, wells, alerts, buttons, glyphicons and progress bars. The section includes several hands-on exercises that will walk students through the process of creating stunning layouts, complete with modals, carousels, popovers, drop-down menus, forms and much more.

jQuery Section:

We explores the jQuery library and many of its unique features, used to create stunning, animated web pages. We start with the basics, from embedding jQuery into web pages to working with Selectors. Students then explore working with events, toggling, fading, sliding, and other forms of animation. The lessons also teach students how to work with callbacks, chaining, dragables, accordion menus and many other functions.

Who this course is for:

  • Students who want to learn the foundations of Bootstrap & jQuery Development
  • Beginner Web Developers looking to upgrade their existing skills
  • Students interested in building animated, interactive, mobile-responsive web pages
  • Coding enthusiasts looking to learn new front-end scripting languages

Report abuse