CAP916:FRONT-END WEB UI FRAMEWORKS AND TOOLS

L:2 T:0 P:4 Credits:4

Course Outcomes: Through this course students should be able to

CO1 :: gather knowledge about bootstrap grid system to target wide range of devices.

CO2 :: explain java script plugins to help for faster and attractive front end design.

CO3 :: apply bootstrap layout components, css for attractive and responsive design.

CO4 :: develop the responsive web pages by using bootstrap classes.

Unit I
Bootstrap scaffolding : introduction to bootstrap, bootstrap file structure, basic HTML template,
global styles, default grid system, fluid grid system, container layouts, responsive design
Unit II
Bootstrap Grids : default grid system, fluid grid system, container layouts, responsive design

Unit III
Bootstrap layout components : dropdown menus, button groups, buttons with dropdowns,
navigation elements, navbar, breadcrumbs, pagination, labels, badges, typographic elements, Cards,
spinners
Unit IV
Bootstrap CSS : typography, code, tables, forms, buttons, images, icons

Unit V
Bootstrap javaScript plugins : modal, dropdown, scrollspy, toggleable tabs, tooltips, pop-over,
alerts, buttons, collapse, carousel, typeahead, affix
Unit VI
Using bootstrap : gitHub project, built with bootstrap

Bootstrap Utilities : API, Flex, Display, float

List of Practicals / Experiments:

List of Experiments
• design the webpages by using default grid system in bootstrap

• design the webpages by using bootstrap layout components.

• design the webpages by using bootstrap typography classes.

• design the webpages by using bootstrap javascript plugins

• design the webpages to implement the concept of dropdown menus

• design the webpages to create the navbar in bootstrap.

• design the webpages to create the tables in bootstrap.

• implement the pop-over and alerts in bootstrap

• implementation the concepts of breadcrumbsand pagination

• implement the concept of labels and badges in bootstrap

• design the webpages by using buttons with dropdowns

• Create webpages with the use of carousel class in bootstrap.

Text Books:
1. BOOTSTRAP RESPONSIVE WEB DEVELOPMENT by JAKE SPURLOCK, O'REILLY

References:
1. LEARNING BOOTSTRAP by ARAVIND SHENOY, ULRICH SOSSOU, PACKT PUBLISHING

Session 2023-24 Page:1/2

Session 2023-24 Page:2/2