Call : (+91) 968636 4243
Mail : info@EncartaLabs.com
EncartaLabs

Bootstrap

( Duration: 3 Days )

In Bootstrap training course, you will learn to design interfaces and responsive websites with the Bootstrap framework. You will get started building pages with Bootstrap’s HTML/CSS-based tools and design templates. You will also learn to extend apps with interactive features, using its suite of jQuery plugins, often without writing a single line of code.

By attending Bootstrap workshop, delegates will learn to:

  • Become familiar with Bootstrap’s file structure, grid systems, and container layouts
  • Use Html elements for typography, code, tables, forms, buttons, images, and icons
  • Design interfaces and other web elements, such as navigation, breadcrumbs, and custom modal windows
  • Use jQuery plugins for features such as revolving slideshows, table interfaces, and drop-down menus
  • Modify everything from column count to typography colors with the less stylesheet language

  • HTML
  • CSS
  • JavaScript

COURSE AGENDA

1

Getting Started with Bootstrap (Core Bootstrap)

  • What is Bootstrap?
  • Getting Started with Bootstrap
  • Quantity and quality
  • Improving with age
  • The power of leaner CSS
  • Downloading Bootstrap
  • The files you’ll have
  • Preparing a project template folder
  • Getting H5BP
  • Deleting unnecessary Boilerplate files
  • Evaluating the Boilerplate .htaccess file
  • Updating required Boilerplate files
  • Updating the favicon and touch icons
  • Pulling in the Bootstrap files
  • Fonts
  • JavaScript
  • Holding off on the CSS
  • Bringing the LESS files over
  • Taking inventory
  • Setting up the HTML template file
  • Giving your site a title
  • Adjusting the outdated browser message
  • Setting up major structural elements
  • Providing a navbar markup
  • Compiling and linking default Bootstrap CSS
  • Compiling Bootstrap CSS
  • Completing the responsive navbar
  • Troubleshooting
  • Adding support for Internet Explorer 8
2

Scaffolding Grid System in Bootstrap

  • Understanding the difference between default and fluid grids
  • Exploring the fluid grid and creating new rows
  • Understanding fluid offsetting
  • Nesting with fluid grids
  • Exploring Bootstrap media queries and device-specific styling
  • Adding a hero unit
  • Creating a thumbnail gallery
3

The Base CSS

  • Typography
  • Tables
  • Buttons, Images and Icons
  • Form Controls, Sizing and States
  • Extending Form Controls and Optional Layouts
4

Components

  • Dropdown Menus
  • Button Groups and Dropdowns
  • Tabs, Pills and Nav Lists
  • The Navbar
  • Breadcrumbs and Pagination
  • Labels, Badges and Typographic Components
  • Alerts and Progress Bars
  • Miscellaneous Components
5

Javascript

  • Modal Windows
  • Scrollspy
  • Tooltips and Popovers
  • Accordions and Carousels
6

Why Create Your Own System?

  • HTML for a Four-Column Layout
  • Calculating Widths
  • Resetting Styles
  • CSS for a Four-Column Layout
  • Creating a Three-Column Layout
7

Build A Website Based On A Set Of Wireframes

  • Design Overview
  • Homepage: Navbar and Featured Area
  • Homepage: Company, Testimonials and Footer
  • Contact Us Modal Window
  • Products Page
  • Single Product Page – Carousel
  • Single Product Page – Q&A, Testimonials
  • About Us Page
  • Finishing Touches
8

Bootstrap 3.0 is Mobile First

  • Bootstrap reviewed
  • Desktop to responsive
  • The new mindset – Mobile First
  • Practical example – The responsive dropdown
  • Now Bootstrap uses Bower and Jekyll
  • Running the docs
  • Version 3 in progress in the Github repository
  • Installing Jekyll
  • Bower
  • First step to responsiveness
  • Making changes in the Bootstrap source code
  • Running tests
9

Designing Stylesheet in Bootstrap 3.0

  • The grid system
  • Semantic grids
  • The grid framework
  • Breakpoints and completely fluid layouts
  • Predefined classes to control responsive flow
  • Forms in different resolutions
  • The icon library
  • Responsive utilities
  • Responsive classes
  • Semantic grid variables and functions
  • Relative units
  • Navigation
10

JavaScript, the Behavior in Mobile First Development

  • The carousel example
  • A touch of enhancement
  • Data attributes
  • Mobile First and progressive enhancements
  • Be semantic in your HTML markup
  • Unobtrusive JavaScript
  • Follow the Bootstrap tips about accessibility
  • Test a site in a lynx browser
  • Namespace events
  • JavaScript on the server
11

Getting it All Together – a Simple Twitter App

  • Bootstrapping our application
  • Inserting a customizable version of Bootstrap
  • The project template
  • The Bootstrap modal component example
  • Geolocation
  • The Twitter API search
  • Make a search
  • Going from a tablet device to desktop screen resolution
  • The choice between a web app and mobile application
12

Performance Matters

  • Responsive images
  • Load on demand
  • Optimizing icons
13

Bootstrapping’ Your Portfolio

  • What we’ll build
  • Surveying the exercise files
  • Marking up the carousel
  • Creating responsive columns
  • Turning links into buttons
  • Understanding the power of LESS
  • Nested rulesx
  • Mixins
  • Operations
  • Importing files
  • The modular file organization
  • Customizing Bootstrap’s LESS according to our needs
  • Customizing variables
  • Importing our new variables
  • Editing navbar variables
  • Adding the logo image
  • Adjusting nav item padding
  • Adding icons
  • Adding Font Awesome icons
  • Adjusting the navbar icon color
  • Adjusting the responsive navbar breakpoint
  • Styling the carousel
  • Setting Font Awesome icons for the controls
  • Adding top and bottom padding
  • Forcing images to their full width
  • Constraining the carousel height
  • Repositioning the carousel indicators
  • Styling the indicators
  • Tweaking the columns and their content
  • Styling the footer
  • Recommended next steps

Encarta Labs Advantage

  • One Stop Corporate Training Solution Providers for over 6,000 various courses on a variety of subjects
  • All courses are delivered by Industry Veterans
  • Get jumpstarted from newbie to production ready in a matter of few days
  • Trained more than 50,000 Corporate executives across the Globe
  • All our trainings are conducted in workshop mode with more focus on hands-on sessions

View our other course offerings by visiting https://www.encartalabs.com/course-catalogue-all.php

Contact us for delivering this course as a public/open-house workshop/online training for a group of 10+ candidates.

Top
Notice
X