Bootstrap By Building Projects - Includes Bootstrap 4
Created by Eduonix Learning Solutions, Last Updated 07-Nov-2019, Language:English
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
Preview00:03:29 -
Who is this Course for
Preview00:05:42 -
How to Succeed
Preview00:03:28 -
Advantages and Disadvantages
Preview00: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
Preview00: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
6 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 -
Attachment File
-
-
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.
