DI03000061 · Semester 3 · 5G scheme
Responsive Web Page Design
Notes and solutions following the Gujarat Technological University (GTU) syllabus for DI03000061. Independent material — not issued by the university.
Materials
Complete Book
The whole syllabus, unit by unit, written for the exam.
Complete Book
80 pages
Premium Preview · 27 pages
Syllabus units
Unit 1: Introduction to jQuery and Bootstrap Framework
- jQuert: Introduction to jQuery, Importance of jQuery, jQuery syntax, jQuery selectors, jQuery Events
- Bootstrap Framework: Why Bootstrap? History of Bootstrap, Advantages of Bootstrap Framework, Responsive web page, How to remove Responsiveness, Major Features of Bootstrap.
- Program Solving practice on the above concept
Unit 2: Bootstrap Grid
- Bootstrap Grid: Apply Bootstrap Grid, Container, Offset Column, Reordering Columns, and Advantages of Bootstrap Grid and Display responsive Images, Bootstrap Typography, use Typography, Bootstrap Tables, Form Layout, Button, Display images in different styles like Circle shape etc., Carets Classes, hide or show the text in Bootstrap.
- Program Solving practice on the above concept
Unit 3: Bootstrap Components
- Bootstrap Components, Advantages of Bootstrap Components, The different types of Bootstrap Components, Glyphicons Component, Use Glyphicons Component, Bootstrap Dropdown Menu Component, Bootstrap Card Component, Button Groups and Button Toolbar, Use Button Groups and Button Toolbar, Different Input Groups Components, Navigation Pills & Tabs Components, Use Navigation Pills and Tabs Components, Navbar Component, build a Responsive Navbar, Add Forms and other controls to Navbar, Fix the position of navbar, Breadcrumb Component, Pagination Component, apply Pagination in Application, Labels/Badge Components, Jumbotron/Page Header Components, Thumbnail Component, Alerts & Dismissible Alerts, How to Create Progress Bar, Media Objects Component, Bootstrap List Group Component, Bootstrap Panel Component.
- Program Solving practice on the above concept
Unit 4: Bootstrap Plug-Ins
- Bootstrap Plug-Ins: Why bootstrap plug-ins, Use of bootstrap plug-ins, Transition plug-in, Modal dialog box, The different properties, methods and events of model dialog box, Scroll spy plug-in, tab plug-in, use of tab plug-in, Drop Down plug-in, Tooltip plug-in, Use of Button plug-in, Methods and events of tooltip plug- in, popover plug-in, alert and button plug-ins, Collapse plug-in, different types of properties, methods and events of collapse plug- in, Carousel plug-in, affix plug-in
- Program Solving practice on the above concept
Unit 5: Advance Bootstrap Utilities and Customization
- Bootstrap Utilities: Benefits of using utilities, various bootstrap utilities (Spacing , Sizing , Display and Visibility, Positioning , Flex box , Border , Background , Opacity , Overflow , Shadow , Responsive )
- Bootstrap Customization: Benefits of customizing Bootstrap, Customizing Bootstrap Variables, Customizing Bootstrap with Sass, Customizing Bootstrap Components, Customizing Bootstrap Themes
- Program Solving practice on the above concept
About this course
In this technological era, different devices being used to view the online content and websites. While designing webpage, it is required to maintain visual consistency spanning all the platforms. Bootstrap is a free and open-source web development framework. Bootstrap is a sleek, intuitive, and powerful, mobile first front-end framework for faster and easier web development. It's designed to ease the web development process of responsive, mobile-first websites Bootstrap provide in build classes and files to make more fun in designing and give new look more and design. It is used to convert html page design into RWD (Responsive Web Design) which is easy to learn and have many designs related functionalities. It uses HTML, jQuery and JavaScript to provide cross platform web design solution.