Hands-on introduction to Bootstrap

Bootstrap, which originated from Twitter, is the world wide leading UI framework, which allows designers and developers to easily create nice looking and responsive websites. It contains a wide variety of elements that you will learn to appreciate from this one-day hands-on workshop with Sander Hoogendoorn. Bootstrap is the ideal companion for developers to build good looking websites, without deep knowledge of user interface design.

image

Sander will demonstrate how to use elements such as the grid system, buttons, inputs, labels and more interesting elements such as panels, grids, popups and the inevitable jumbotron. Also, he will show how to use third party libraries for elements such as dropdowns, checkboxes and radiobuttons, and will elaborate on building reusable UI components using the popular AngularJS framework, and Microsoft’s Razor syntax.

496_thumb[2]

But even more important, this one-day training course is mainly a workshop where participants will build their own website, ground-up from scratch.

Agenda

Introduction and grid system

  • A brief introduction to Bootstrap
  • The elements of Bootstrap
  • Introduction the grid system
  • Building a first empty page
  • Putting the grid system to the test

The basic elements

  • Using panels
  • Inputs and labels
  • Buttons in all sizes and colors
  • Creating you own CSS to extend Bootstrap
  • Using web fonts in your CSS
  • Using glyph icons
  • Using additional icon sets, such as Font Awesome

More imputs

  • Creating checkboxes
  • Working with radiobuttons
  • Using additional libaries to beautify checkboxes and radiobuttons
  • Creating dropdowns
  • Using advanced features of dropdowns with additional frameworks

Advanced elements

  • Tables and grids
  • Jumbotrons and accordeons
  • Popups and modals
  • Menu’s and navigation bars

Reusable components

  • Which websites will help you further?
  • Mocking images in design
  • A brief introduction into Angular JS directives
  • Creating reusable components with AngularJS
  • Creating reusable components with Razor syntax

Wrap up

Pre-requisites

Participants should have knowledge about HTML, CSS. Participants should bring their own laptop, and have an editor, such as JetBrains Webstorm, Sublime or Visual Studio Code installed.