Tutorialspoint
Subscription Includes
 14:38:27 of High Quality Videos
 160  Lectures
 Full Lifetime Access
 Certificate on Completion
$ 130   9.99

Bootstrap By Building Projects - Includes Bootstrap 4

Master Responsive Web Development Using Bootstrap 3 and Bootstrap 4 While Building Real Life projects

Created by Eduonix Learning Solutions, Last Updated 07-Nov-2019, Language:English

What Will I Get ?

  • Build Responsive Websites
  • Understand the use of Bootstrap Components
  • Master the best practices for HTML, CSS and JS development

Requirements

  • Students should have fair understanding of HTML, CSS and JS for this course

Description

Bootstrap is the world's most popular mobile ready web development framework for HTML, CSS and JavaScript. Bootstrap is for you if you want to quickly build a super cool website which work across devices and browsers. It is easy to learn and super powerful. We have recently included new projects from Bootstrap 4 beta in addition to Bootstrap 3 which is the stable version of Bootstrap.

We have bought together all the best practices of building bootstrap sites into an unique project based course which will teach you all the nuances of web development while building real world bootstrap projects. The projects cover generic development process and are diverse enough to cover a very wide variety of websites. The projects covered in the course are

Bootstrap 3 Projects

Photo App Sales Website : A simple project to get you started. It will help you quickly master the basic bootstrap structures and you will be quickly up and running on your first bootstrap website.

Portfolio Resume using SASS - Learn to use SASS along with Bootstrap for this next project. Learn about Grid Systems, List Styling and Progress Bar Components in this course.

Social Network Template - This will be a fairly complex project with multiple bootstrap components. You will learn about Nested grids, Button Groups, Gallery plugin and Responsive Media Queries.

Agency Landing page - This project develops a landing page using LESS. LESS is a CSS preprocessor. You will also learn Jumbotron showcase,Scroll Down Effect and Font Awesome Icons.

Photo Gallery - You will learn to create a Photo gallery display using components such as Grid UI and Tab Widget. You will also learn the use of Bootstrap Image Carousel and Photo Lightbox Jquery Plugin.

CMS Admin Template - Learn to build an Admin template for a content management system. You will learn the use of Bootstrap Table Classes,Glyphicons, Breadcrums and Button Groups

Web hosting Company Website - This project will teach you Bootstrap Components such as Bootswatch UI tools, Content carousel, Stack icons and stylish fonts.

E-commerce Template - Learn to build a front end of an E-commerce website. Learn components such as Tab Widget, Product Grid and Custom header.

Business Bootstrap Theme - Learn to use animation in your website with animate css. Also learn to optimize your site for mobile with this amazing project.

Blog Website - Learn to build the front end of the blog with components such as Dropdown menu, Contact form, Carousel Thumbnails & Grid View.

Bootstrap 4

Whats New in Bootstrap 4 - Get to know everything thats new in Bootstrap

Hello World Project - Build a complete project template

Complete Website Project - A complete website built using latest Bootstrap 4 features

More Bootstrap 4 projects will be added soon.

With all this projects under your back you can build almost anything with Bootstrap. So click that Enroll button and see you on the other side.

Who this course is for:

  • Students who want to build responsive websites using bootstrap and have basic knowledge of HTML and CSS should find this course extremely helpful


Course Content

  • Introduction Section 8 Lectures 00:38:45

    • Intro

      Preview
      00:03:29

    • Who is this Course for

      Preview
      00:05:42

    • How to Succeed

      Preview
      00:03:28

    • Advantages and Disadvantages

      00:03:42

    • What this Course will Cover

      00:05:31

    • Html Review

      00:10:31

    • Css Review

      00:06:22

    • Attachment File

  • Bootstrap 101 4 Lectures 00:26:43

    • Framework vs Library

      00:05:15

    • Reading Documentations

      00:13:13

    • Getting Started

      00:08:15

    • Attachment File

  • SCSS + Gulp 16 Lectures 01:32:48

    • Sass-Intorduction

      00:10:50

    • Gulp-Intorduction

      00:03:39

    • Installing-Sass-Windows

      00:04:12

    • Installing-nodejs-and-npm

      00:04:22

    • Starting out with gulp and sass

      00:05:54

    • Testing with Browsersync

      00:05:42

    • Sass Porject Structure

      00:05:07

    • Variables and Nesting

      00:11:53

    • BEM

      00:10:48

    • Extends Mixins and Includes

      00:08:07

    • Functions and Operators

      00:07:23

    • LAB1 Problem

      00:01:46

    • LAB1 Solution

      00:03:18

    • LAB2 Problem

      00:01:27

    • LAB2 Solution

      00:08:20

    • Attachment File

  • Grid and Flexbox 12 Lectures 00:59:27

    • Flexbox

      00:03:16

    • Installing with NPM

      00:10:13

    • Adding Custom Bootstrap to Project

      00:06:32

    • Container and Breakpoints

      00:05:56

    • Grid Options

      00:07:55

    • Equally width Columns

      00:06:58

    • Gutters and Alignment

      00:05:15

    • What to stay away from in Bootstrap Grid

      00:03:51

    • Nesting and Sass

      00:04:54

    • Lab Problem

      00:00:46

    • Lab Solution

      00:03:51

    • Attachment File

  • Typography 5 Lectures 00:22:03

    • Typography

      00:05:11

    • RFS

      00:04:07

    • RFS in Action

      00:05:45

    • Vertical Rhythm Updated

      00:07:00

    • Attachment File

  • Code Images and Figures 9 Lectures 00:35:13

    • Code

      00:04:23

    • Images and Figures

      00:06:32

    • Table Syntax

      00:04:31

    • Bootstrap Tables

      00:05:00

    • Bootstrap Responsive Tables

      00:03:11

    • None Bootstrap Responsive Tables

      00:06:22

    • Lab Problem

      00:01:19

    • Lab Solution

      00:03:55

    • Attachment File

  • Components I Alerts, Badges, Breadcrumbs and Toasts 12 Lectures 01:05:17

    • Node Modules

      00:09:57

    • Building JavaScript

      00:09:25

    • Util.js

      00:02:36

    • Alerts

      00:04:25

    • Bootstrap Colors

      00:08:02

    • Close Alerts

      00:04:25

    • JavaScript Alerts

      00:05:22

    • Badges

      00:05:19

    • Breadcrumb

      00:05:35

    • Lab Problem

      00:02:50

    • Lab Solution

      00:07:21

    • Attachment File

  • Components 2 Buttons, Button Groups and Pagination 5 Lectures 00:31:36

    • Buttons

      00:04:14

    • Overriding Bootstrap

      00:06:17

    • Button State

      00:07:14

    • Button Group

      00:10:30

    • Pagination

      00:03:21
  • Components 3 Cards 6 Lectures 00:31:21

    • Card

      00:11:44

    • Media object

      00:05:37

    • List Group

      00:08:24

    • Lab Problem

      00:03:06

    • Lab Solution

      00:02:30

    • Attachment File

  • Components 4 Carousel, Collapse and Dropdown 9 Lectures 00:51:51

    • Carousel

      00:06:26

    • Carousel JavaScript

      00:10:51

    • Collapse

      00:08:08

    • Dropdown

      00:07:03

    • Dropdown JavaScript

      00:07:32

    • Jumbotron

      00:05:31

    • Lab Problem

      00:01:49

    • Lab Solution

      00:04:31

    • Attachment File

  • Components 5 Forms and Input Groups 11 Lectures 01:00:18

    • Froms Layout

      00:09:13

    • Froms Validation and Custom Forms

      00:07:44

    • Froms Testing Component

      00:04:05

    • Input Groups

      00:04:05

    • Navs

      00:09:38

    • Navbar

      00:07:32

    • Navbar Color Schemes

      00:03:02

    • Nav Tabs and List Group Tabs

      00:05:10

    • Lab Problem

      00:01:36

    • Lab Solution

      00:08:13

    • Attachment File

  • Components 6 Jambotrone, Listgroups and Media objects 8 Lectures 00:36:26

    • Modal

      00:10:10

    • Modal JavaScript

      00:05:59

    • Progress

      00:02:58

    • Scrollspy

      00:07:42

    • Spinners

      00:04:51

    • Lab Problem

      00:01:34

    • Lab Solution

      00:03:12

    • Attachment File

  • Components 7 Modal, Popovers and Tooltips 5 Lectures 00:23:13

    • Tooltip

      00:10:49

    • Popovers

      00:03:54

    • Toasts

      00:06:47

    • Bootstrap Cheat Sheet

      00:01:43

    • Attachment File

  • Accessibility 3 Lectures 00:13:10

    • Intro to Accessibility

      00:03:53

    • Accessibility Options

      00:09:17

    • Attachment File

  • Utilities 5 Lectures 00:27:24

    • Utilities Borders Clearfix Close icon Colors Display Embed

      00:07:07

    • Utilities Flex Floats Overflow Position Screen Readers

      00:04:27

    • Utilities Shadow Sizing Spacing Stretched link Text Vertical align Visibil

      00:09:52

    • Theming

      00:05:58

    • Attachment File

  • Project 1 3 Lectures 00:26:03

    • Single Product Page Intro

      00:03:36

    • Markup Overview

      00:14:34

    • Decresing Size of css and js

      00:07:53
  • Project 2 4 Lectures 00:23:04

    • Blog Intro

      00:01:52

    • Blog Code Walkthrough

      00:08:01

    • Blog Adding Contact Page

      00:13:11

    • Attachment File

  • Project 3 3 Lectures 00:12:57

    • Stock Image Webiste Intro

      00:02:00

    • Stock Image Webiste Code Overview

      00:10:57

    • Attachment File

  • Project 4 4 Lectures 00:22:18

    • Image Gallery Intro

      00:01:52

    • Image Gallery Header Live Code

      00:12:30

    • Image Gallery Grid Column Layout

      00:07:56

    • Attachment File

  • Project 5 3 Lectures 00:11:00

    • Intro Landing Page Project

      00:01:53

    • Code Overview

      00:09:07

    • Attachment File

  • Project 6 3 Lectures 00:13:23

    • Intro to Adming Dashboard

      00:02:55

    • Admin Dashboard Layout Overview

      00:10:28

    • Attachment File

  • Project 7 6 Lectures 00:38:43

    • Portfolio Header

      00:05:34

    • Banner and Icons

      00:11:21

    • Portfolio Markup and Styles

      00:09:28

    • Portfolio Modal and js

      00:06:16

    • Form

      00:06:04

    • Attachment File

  • Project 8 3 Lectures 00:12:15

    • Resume Website Intro

      00:03:36

    • Resume Website Code Review

      00:08:39

    • Attachment File

  • Project 9 6 Lectures 00:39:42

    • Intro Coming Soon

      00:01:16

    • Coming Soon Page Html Markup

      00:09:58

    • Coming Soong Styling-1

      00:13:11

    • Coming Soong Styling-2

      00:07:32

    • Coming Soon Slider

      00:07:45

    • Attachment File

  • Project 10 7 Lectures 01:03:27

    • Intor to Slicing

      00:03:57

    • Header Section

      00:10:32

    • Service Section

      00:12:22

    • Pricing Table and Testimonials Sections

      00:15:09

    • Contact us Section

      00:08:59

    • Footer

      00:12:28

    • Attachment File

Eduonix Learning Solutions

Eduonix brings quality skill-building content and world-class learning experience to everyone using both online and offline mediums. Edunix is a premier training and skill development organization that works with a vision to bring exceptional training content, pedagogy, and best learning practices at affordable costs. We identify industry veterans and content creators around the globe and bring them close to the global audience using a number of intuitive platforms for easy and affordable access to quality content. Eduonix offers easy-to-understand online courses and workshops for everyday people. If you have ever wanted to learn a new skill, but don't want to attend four years of college to do it, we have a solution for you.

More Courses from Eduonix Learning Solutions