LEARNING PATH: Bootstrap Web Dev with React and Angular
0.0 (0 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.
8 students enrolled
Wishlisted Wishlist

Please confirm that you want to add LEARNING PATH: Bootstrap Web Dev with React and Angular to your Wishlist.

Add to Wishlist

LEARNING PATH: Bootstrap Web Dev with React and Angular

Create stunning web apps combining Bootstrap with React and Angular
0.0 (0 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.
8 students enrolled
Created by Packt Publishing
Last updated 6/2017
English
Curiosity Sale
Current price: $10 Original price: $200 Discount: 95% off
30-Day Money-Back Guarantee
Includes:
  • 7 hours on-demand video
  • 1 Supplemental Resource
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
What Will I Learn?
  • Integrate Bootstrap with React
  • Easily interact with DOM on your web browser
  • Get to know the basics of the Bootstrap framework to integrate with Angular projects
  • Get to work with the new router and form features in Angular
View Curriculum
Requirements
  • A working knowledge of HTML, CSS, and JavaScript is required.
Description

Bootstrap is one of the most popular frontend frameworks, and integrating it with React and Angular allows web developers to write much cleaner code. React is a JavaScript library that communicates changes on a user interface to the browsers quickly, without having to re-render anything except the part of the display that needs to change. The new version of Angular is a game changer in the field of web development and enables you to efficiently architect large-scale and maintainable software.

Packt’s Video Learning Paths are a series of individual video products put together in a logical and stepwise manner such that each video builds on the skills learned in the video before it.

This Learning Path helps you gain a thorough understanding of the Bootstrap framework and shows you how to build impressive web apps. You will get an overview of the features of Bootstrap and ReactJS, along with the integration of React-Bootstrap components with ReactJS. The next part is focused on Angular and helps you write dynamic, feature-rich Angular applications with Bootstrap's responsive layouts and end-to-end testing techniques. This Learning Path works with the new version of Angular too.

Two of the best frameworks, working together with Bootstrap, to make your life easier.

Integrate the best web development frameworks. Create awesome apps. All with the help of this Learning Path. Set yourself up with the required skills to integrated Boostrap with both React and Angular.

The goal of this Learning Path is to equip you with skills to leverage Bootstrap when building apps with either React or Angular.

This Learning Path is authored by some of the best in their fields.

Harmeet Singh is a senior UI developer working for CIGNEX Datamatics with varied experience in UI. His expertise includes HTML5, JavaScript, jQuery, AngularJS, and Node.js. He has given various presentations and conducted many workshops on UI development. On the academic front, he is a graduate in IT, and is a GNIIT diploma holder from NIIT, specializing in software engineering.

Mehul Bhatt has over 11 years of experience and serves as a user experience (UX) & user interface (UI) practice manager at CIGNEX Datamatics. As a manager, he handles a wide range of onshore and offshore teams. His expertise includes HTML5, CSS3, JavaScript, jQuery, application development, guiding and mentoring developers, and more. He is Microsoft certified in HTML, CSS, and JavaScript. On the academic front, he holds a PG diploma in multimedia, specialized in web development.

Tarun Sharma is a passionate senior web developer, currently working with a main focus on frontend technologies and JavaScript frameworks. He has 5 years of experience in developing frontend applications with various frameworks, mostly with Angular 1.x, Angular 2, and React JS.

He regularly contributes to open source projects and provides technical training on frontend technologies.

Who is the target audience?
  • This video is for anybody who is interested in modern web development and has an intermediate-level knowledge of HTML, CSS, and JavaScript. A basic knowledge of any JavaScript MVC framework would also be helpful. This course will enhance your capabilities in all three frameworks and you'll build a fully functional web app.
Students Who Viewed This Course Also Viewed
Curriculum For This Course
81 Lectures
07:03:22
+
Building a React Component with Bootstrap
22 Lectures 01:23:12

This video gives an overview of the entire course

Preview 02:40

Learn about ReactJS and set up the environment for creating an application

Setting Up the Environment
02:42

The ability to install ReactJS and Bootstrap to build user-interface components

Installing ReactJS and Bootstrap
05:08

Design one static login form and make your app a responsive grid system for different mobile devices’ static login form

Static Form with React and Bootstrap
05:03

The ability to use React-Bootstrap JS in which we have a collection of Bootstrap components rebuilt for React.

Preview 03:36

Reimplement of the bootstrap frontend reusable components in React

React-Bootstrap
04:49

The ability to create a two-column layout for the main content area and sidebar in our application to cover the whole area

Bootstrap Grid System
05:30

Learn to include a few helper classes that we can use to adapt our layout

Helper Classes
01:27

The ability to update and render your components when data changes

React Components
03:36

Ability to observe the syntax or structure of JSX

Preview 02:33

Learn to provide a simple syntax structure, which is visually similar to a HTML structure

Acquaintance or Understanding
03:48

The ability to use namespace in React using JSX namespace pattern

Namespace Components
03:32

Learn to execute a script or written function in JSXTransformer

JSX Transformer
01:49

The ability to allocate the value of the displayStyle JavaScript variable to the element's style attributes

JavaScript Expressions
04:43

Learn to change the value of a form input using the value attribute

Example of a Dynamic Form with JSX
04:39

The ability to translate your raw data into Rich HTML

Preview 06:12

The ability to add some advanced features in our Add Ticket form to display the tickets on the UI

Getting the Form Values on Submit
07:07

Learn to provide some helper classes to give you a better user experience

Bootstrap Helper Classes
01:21

The ability to build a responsive theme with React-Bootstrap and React

Preview 03:13

Learn about various life cycle components

Component Lifecycle Methods
01:39

Learn about the alert message and have a brief knowledge of close handler function

Component Integration
02:31

The ability to inject hidden.bs.modal to display an alert on every event fired

Bootstrap Modal
05:34

Test Your Knowledge
5 questions
+
Web Development with Angular 2 and Bootstrap
59 Lectures 05:40:10

This video provides an overview of the entire course.

Preview 04:36

Angular 2.0 is latest version of Angular coming out. It has been rewritten using TypeScript and has a lot of changes in it. Now we will see how we can learn Angular 2.0, having knowledge of Angular 1.0.

Angular 2.0 Versus Angular 1.0
06:17

We will do the installation and setup for development of Angular 2.0 applications using TypeScript and will explore different ways to develop an application.

Installation and Setup for Angular 2.0 with TypeScript ES6
06:22

We will write our first application—a “Hello world” application—and render the created Angular component on our browser.

“Hello world” Application Using Angular 2.0
05:27

Creating web design in the traditional approach is not responsive. The website doesn’t show consistent behavior in different devices. Now, after adding bootstrap classes in the application, we can see consistent behavior of our application in different devices.

Preview 05:15

CSS doesn’t always work without failing. Usually, it’s a tiny overlooked mistake that causes something not to work and is hard to find and fix. Enter the Chrome Dev Tools.

Bootstrap Fluid Responsive Layout with Grid System
08:54

Let’s start creating our web application by taking a good look at the header and then we will customize the body and the footer.

Bootstrap Responsive .navbar Header and .navbar Tabs
04:07

Looking for some cool bootstrap layout features here, they are glyph icons customized html forms list, and different tabs layout.

Bootstrap Table, List, Form, and Glyph Icons and Responsive Utilities
06:57

Looking for some cool bootstrap layout features such as adding accordions, adding image sliders carousel, and tab menus

Bootstrap Carousel with Bootstrap Panel, Accordion, and Tab Menu
05:52

Let’s Build the layout for our application using bootstrap styles and components.

Creating Demo Application Structure Using Bootstrap Component
05:00

Angular 2.0 is a language of the future, which can be written in different ways and can be compiled using different tools. Let’s unveil these ways of writing angular code. Now, after writing the Code in ES5 and ES6 with typescript, we now become aware of the role of typescript and ES6 in angular 2.0.

Preview 05:06

Angular 2.0 is a language of the future which is written in Typescript, let’s explore the role of typescript in Angular 2.0.

Typescript as a Language for Angular 2
04:52

Angular 2 doesn’t have its own module system as Angular 1 did, it uses System JS. It is a “Universal dynamic module loader”.

Understanding Universal Module Loader System JS
04:02

Webpack is a popular module bundler, a tool for bundling application source code in convenient chunks and for loading that code from a server into a browser.

Understanding webpack Module Loader
05:45

Angular 2.0 is written in ES6 typescript. So to run the code, we always need a transpiler and a loader to compile code for the browser.

Loaders and Transpilers using NPM Package Manager
03:19

Angular 2.0 is component-based development as everything is being represented using components and ES6 class with annotations.

Typescript@ annotations for Components, Views, and Directives
04:45

Now we have a good understanding of components and directives, so let’s create something for our demo application.

Hands-On on Our Application
04:46

The new version of JavaScript, "EcmaScript 6" or "ES6", offers a number of new features that extend the power of the language. ES6 is not widely supported in today's browsers. To run the code in browsers, we will be using typescript transpilers to transpile.

Preview 05:01

The aim of this video is to understand cover string interpolation and default arguments in ES6.

Template Literals and Default Arguments
04:13

The aim of this video is to understand cover Spread operator, Rest parameter and de-structuring.

Spread Operator, Rest Parameter, and De-Structuring
05:40

ES5 javascript for setting defaults to function arguments was to test parameter values in the body of the function and assign a value if they are undefined.

Arrow Function and Lexical This Binding
04:55

The aim of this video is to cover classes in ES6.

ES6 Classes and Inheritance
05:08

The aim of this video is to cover ES6 modules.

ES6 Modules Import and Export
05:33

The aim of this video is to understand cover ES6 native promises which will provide us with a way to deal with asynchronous API calls.

Asynchronous Processing with ES6 Native Promises
03:41

The aim of this video is to cover iterators and generators in ES6.

Iterators and Generators in ES6
04:48

The new version of JavaScript, "EcmaScript 6" or "ES6", offers a number of new features that extend the power of the language. ES6 is not widely supported in today's browsers. To run the code on the browser, we will be using typescript transpilers to transpile.

Preview 07:52

The aim of this video is to understand Modules in the angular application with Components.

Angular Modules and Components
04:43

The aim of this video is to understand the ng module and other angular modules.

Angular 2 Modules: @Ng Module
05:39

The aim of this video is to understand about nesting of angular components and different ways to define template for components.

Angular Components Nesting and Templates
05:42

The aim of this video is to understand about Web Components and the different principles of Web components.

Angular Web Component and View Encapsulation
07:39

The aim of this video is to understand about metaData Decorators we are using in our component.

Angular Component Metadata
06:37

The aim of this video is to understand about nesting of angular components and different ways to define template for components.

Angular Component Communication Input and Output
07:10

The aim of this video is to understand the working on our application to understand more on angular directives component communication.

Angular Component Building for Application
06:09

The aim of this video is to talk about property binding in angular components.

Preview 04:03

The aim of this video is to add DOM events in the same example.

DOM events and event binding
05:44

The aim of this video is to understand how two-way data binding in Angular 2 is implemented and how we can implement it in our own Components.

Two-way data binding in Angular app
06:13

The aim of this video is to discuss about different categories of directives.

Attribute directives and structural directives
06:55

The aim of this video is to understand about pipes.

Pipes in Angular 2
06:18

The aim of this video is to understand about the component lifecycle.

Angular component Lifecycle Hooks
05:46

The aim of this video is toadd more features to our application with Data binding, pipes, and directives.

Application development with data binding, pipes, and directives
04:37

The aim of this video is to understand the Dependency Injection and Inversion Of Control Patterns in software development.

Preview 04:53

The aim of this video is to create angular service, add dependency injection in angular 2 component, and understand @inject and @injectable annotations.

Injector and Providers @inject @injectable
04:23

Angular 2 has greatly simplified services since Angular 1. In Angular 1, there was a service, factory, provider, delegate, value, constant, and so on, and it wasn't always clear when to use which. For most use cases in Angular 2, services have been greatly simplified.

Building And Registering a Service
03:34

Creating services is nothing new in Angular 2. We just need to Create the service class,define the metadata with a decorator,and import what we need. Looks familiar? These are the same basic steps we followto build our components and custom pipes.Let's look at the code for a simple service.

Dependency Injection with Angular 2 Application
05:49

The aim of this video is to discuss the role of routing in Single Page Applications and Angular 2's new component router.

Preview 06:39

Routing comes with a lot of features. It is not all about rendering route templates on route-outlet, Here, we can create nested routes, child routes, and can pass some data as route parameters while accessing that route.

Route Architecture with Route Linking and Redirection
04:10

The aim of this video is to understand more in the routing section such as Nested routes and passing data in routes as route param.

Angular 2.0 Understanding Child Routes and Route Param
06:25

The aim of this video is to understand more in the routing section such as Location strategy and securing routes from unauthorized access or Guarding Routes.

Securing Routes and Location Strategy
06:19

The aim of this video is to add routing for our Angular 2 Application.

Routing with Angular 2 Demo Application
06:29

The aim of this video is to understand Angular 2 forms, form validation and capturing data from forms.

Preview 05:06

The aim of this video is to understand the custom validation rules and basic validation rules in Template-driven forms.

Template-driven forms with Validation
07:08

The aim of this video is to understand Model-driven forms and how they are different from Template-driven forms.

Model-driven Forms or Reactive Forms
04:42

Model-driven forms enable us to test our forms without being required to rely on end-to-end tests.

Model-driven Forms with Validations
06:34

The aim of this video is to develop an Angular form app using Model driven forms.

Angular 2 Application Development with Forms
08:23

The aim of this video is to understand the basics of reactive functional programming.

Preview 08:09

The aim of this video is to have a basic setup of applications using observables.

Observables and Reactive Extensions
06:06

The aim of this video is to learn how to make HTTP requests using RxJs Observable library.

Observables with HTTP Service in Angular 2
08:10

The aim of this video is to learn the other ways in which we can use observables in our application, such as using Form control Events.

Observables with Angular Forms in Angular 2
06:28

The aim of this video is to use observables in our application, such as using Form control Events where we can capture data from control asynchronously.

Observables and RX JS with Angular 2 Application
09:15

Test Your Knowledge
5 questions
About the Instructor
Packt Publishing
3.9 Average rating
7,349 Reviews
52,552 Students
616 Courses
Tech Knowledge in Motion

Packt has been committed to developer learning since 2004. A lot has changed in software since then - but Packt has remained responsive to these changes, continuing to look forward at the trends and tools defining the way we work and live. And how to put them to work.

With an extensive library of content - more than 4000 books and video courses -Packt's mission is to help developers stay relevant in a rapidly changing world. From new web frameworks and programming languages, to cutting edge data analytics, and DevOps, Packt takes software professionals in every field to what's important to them now.

From skills that will help you to develop and future proof your career to immediate solutions to every day tech challenges, Packt is a go-to resource to make you a better, smarter developer.

Packt Udemy courses continue this tradition, bringing you comprehensive yet concise video courses straight from the experts.