Bootstrap CSS

CSS Review

In de intro van de cursus worden de beginselen van CSS besproken zoals CSS selectors, tags, ID's, classes en attributes. Ook het Box Model, Viewport en absolute en relatieve units komen daarbij aan de orde.

Bootstrap Framework

Vervolgens wordt aandacht besteed aan de voordelen die de inzet van het Bootstrap Framework biedt. Hierbij wordt onder andere ingegaan op het gebruik van starter templates en de inzet van JavaScript en Sass.

Bootstrap Grid System

Het Bootstrap Grid Systeem als belangrijk fundament van Bootstrap wordt besproken. Ook is er aandacht voor Bootstrap elementen als Tables, Columns en Forms, Container en Panels, Buttons en Menu's. En de Flexbox Module en Child Boxes komen eveneens aan bod.

Bootstrap Layout

Het bouwen van een Bootstrap Layout met Containers, Rows en Columns wordt besproken. Zoals ook het gebruik van Forms in Bootstrap met input elementen, check en radio buttons, select boxes, navigation bars en tool bars.

Bootstrap Styling

Tenslotte is er aandacht voor Bootstrap Styling met het gebruik van colors en fonts, element alignment, responsive images en jumbotrons.

Doelgroep Cursus Bootstrap CSS

De cursus Bootstrap CSS is bedoeld voor Web Designers en Developer die het Bootstrap CSS Framework willen gebruiken bij de ontwikkeling van responsive Web Applicaties.

Voorkennis Cursus Bootstrap CSS

Kennis en ervaring met HTML en de basis principes van Cascading Style Sheets (CSS) zijn vereist.

Uitvoering Training Bootstrap CSS

De concepten worden behandeld aan de hand van presentatie slides. Demo projecten worden gebruikt om de concepten te verduidelijken. De theorie en de demos worden afgewisseld met hands-on oefeningen. De cursustijden zijn van 9.30 tot 16.30.

Certificering Cursus Bootstrap CSS

De deelnemers krijgen na het goed doorlopen van de cursus een officieel certificaat Bootstrap CSS.

Modules

Module 1 : Bootstrap Intro

• Bootstrap Framework
• Basic Syntax
• CSS Selectors
• Tags and ID's
• Classes
• Attributes
• Logical Selection
• Box Model
• Blocks of the Box
• Set Viewport
• Absolute Units
• Relative Units

Module 2 : Bootstrap Projects

• Bootstrap Advantages
• Starter Template
• Inserting JavaScript
• Normalizing
• Rebooting
• Static Site Generator
• Converting Base Template
• Installing Harp.js
• Sass in Harp
• Project Setup
• Setup Layout
• Deploying Projects

Module 3 : Bootstrap Components

• Grid System
• Tables
• Forms
• Buttons
• Pulldown Menus
• Cards versus Panels
• Progress Bars
• Flexbox Module
• Child Boxes
• Page Templates
• Containers
• Columns

Module 4 : Layouts

• Basic Containers
• Fluid Containers
• Utilizing Width
• Without Containers
• Multiple Containers
• Headings
• Inserting Rows
• Inserting Columns
• Interlace Columns
• Order Column
• Column Classes

Module 5 : Forms

• Form Structure
• Form Elements
• Single Line Forms
• Check Boxes and Radio Buttons
• Horizontal Forms
• Navigation Bar
• Input Elements
• Select Elements
• Semantic Buttons
• Drop Down Menus
• Toolbars

Module 6 : Styling

• Size and Appearance
• Use of Symbols
• Text Colour
• Background Colour
• Responsive Images
• Thumbnails
• Element Alignment
• Centering
• Divider Lines
• Deactivation
• Jumbotron