<!-- image -->

## GUJARAT TECHNOLOGICAL UNIVERSITY

## Program Name: Engineering Level: Diploma

Branch: Computer Engineering / Computer Science &amp; Engineering

Subject Code : DI03000061

Subject Name : Responsive Web Page Design

| W.E. F. Academic Year:   | 2024-25   |
|--------------------------|-----------|
| Semester:                | 3 rd      |
| Category of the Course:  | PCC       |

| Prerequisite:   | Basic computer literacy, Logical Thinking and Basic HTML Tags and CSS                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    |
|-----------------|----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| Rationale:      | 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. |

## Course Outcome:

After Completion of the Course, Student will able to:

| No                                                                                                               | Course Outcomes                                                                                                  | RBT Level   |
|------------------------------------------------------------------------------------------------------------------|------------------------------------------------------------------------------------------------------------------|-------------|
| 01  Prepare environment for Bootstrap framework for first time use.                                              | 01  Prepare environment for Bootstrap framework for first time use.                                              | Apply       |
| 02  Construct  responsive  web  page  layouts  using  Bootstrap  Grid  for  various  platforms and screen sizes. | 02  Construct  responsive  web  page  layouts  using  Bootstrap  Grid  for  various  platforms and screen sizes. | Apply       |
| 03  Apply  reusable  bootstrap  components  to  design  effective  user-friendly  web  pages.                    | 03  Apply  reusable  bootstrap  components  to  design  effective  user-friendly  web  pages.                    | Apply       |
| 04  Create  dynamic,  feature-rich  web  pages  by  utilizing  Bootstrap  plugins  for  enhanced interactivity.  | 04  Create  dynamic,  feature-rich  web  pages  by  utilizing  Bootstrap  plugins  for  enhanced interactivity.  | Apply       |
| 05  Design  responsive  web  pages  using  advanced  Bootstrap  utilities  and  customization techniques.        | 05  Design  responsive  web  pages  using  advanced  Bootstrap  utilities  and  customization techniques.        | Apply       |

*Revised Bloom's Taxonomy (RBT)

<!-- image -->

## GUJARAT TECHNOLOGICAL UNIVERSITY

## Program Name: Engineering Level: Diploma

Branch: Computer Engineering / Computer Science &amp; Engineering Subject Code : DI03000061

Subject Name : Responsive Web Page Design

## Teaching and Examination Scheme:

| Teaching Scheme  (in Hours)   | Teaching Scheme  (in Hours)   | Teaching Scheme  (in Hours)   | Total  Credits  L+T+  (PR/2)   | Assessment Pattern and Marks   | Assessment Pattern and Marks   | Assessment Pattern and Marks   | Assessment Pattern and Marks   | Total   |
|-------------------------------|-------------------------------|-------------------------------|--------------------------------|--------------------------------|--------------------------------|--------------------------------|--------------------------------|---------|
| L                             |                               |                               | C                              | Theory                         | Theory                         | Tutorial / Practical           | Tutorial / Practical           | Marks   |
|                               | T                             | PR                            |                                | ESE  (E)                       | PA(M)                          | PA(I)                          | ESE  (V)                       |         |
| 0                             | 1                             | 4                             | 3                              | 0                              | 0                              | 20                             | 30                             | 50      |

## Course Content:

|   Unit  No. | Content                                                                                                                                                                                                                                                                                                                                                                                                                               |   No. of  Hours |   % of  Weightage |
|-------------|---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|-----------------|-------------------|
|           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                                    |              10 |                17 |
|           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 |              12 |                20 |

<!-- image -->

## GUJARAT TECHNOLOGICAL UNIVERSITY

## Program Name: Engineering Level: Diploma

Branch: Computer Engineering / Computer Science &amp; Engineering

Subject Code : DI03000061

Subject Name : Responsive Web Page Design

| 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   |   14 |   23 |
|------|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|------|------|
| 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                                                                                                                                                                                                                                                                                                                                             |   14 |   23 |
| 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                                                                                                                                                                                                                                                                                                                                                                                                            |   10 |   17 |
|      | Total                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           |   60 |  100 |

<!-- image -->

## GUJARAT TECHNOLOGICAL UNIVERSITY

## Program Name: Engineering Level: Diploma

## Branch: Computer Engineering / Computer Science &amp; Engineering Subject Code : DI03000061

Subject Name : Responsive Web Page Design

## Suggested Specification Table with Marks (Theory):

Distribution of Theory Marks (in %)

|   R Level |   U Level |   A Level |   N Level |   E Level |   C Level |
|-----------|-----------|-----------|-----------|-----------|-----------|
|         0 |         0 |         0 |         0 |         0 |         0 |

Where R: Remember; U: Understanding; A: Application, N: Analyze and E: Evaluate C: Create (as per Revised Bloom's Taxonomy)

## References/Suggested Learning Resources:

## (a) Books:

1. Jake  Spurlock,  'Bootstrap',  O'Reilly  Media,  Inc.,  ISBN-10:  1449343910,  ISBN-13:  9781449343910
2. Jacob Lett, 'Bootstrap Reference Guide', Bootstrap Creative, ISBN-10 : 1732205833, ISBN13 : 978-1732205833
3. AjdinImsirovic,, 'Bootstrap 4 Cookbook', Packt Publishing Limited, ISBN-10 : 1785889295, ISBN-13 : 978-1785889295
4. Benjamin  Jakobus,  'Mastering  Bootstrap  4  -  Second  Edition',  Packt  Publishing  Limited, ISBN-10 : 1785889295, ISBN-13 : 978-1785889295
5. Silvio Moreto, 'Bootstrap 4 By Example', Packt Publishing Limited, ISBN-10 : 1785288873, ISBN-13 : 978- 1785288876
6. Thomas Powell, 'HTML &amp; CSS: The Complete Reference', Tata McGrew Hills, New Delhi, ISBN-10 : 0070701946, ISBN-13 : 978- 0070701946

## (b) Open source software and website:

7. https://www.geeksforgeeks.org/bootstrap/
8. https://www.getbootstrap.com
9. https://www.w3schools.com/bootstrap/
10. https://www.websitesetup.org/bootstrap-tutorial-for-beginners/
11. https://www.tutorialrepublic.com/twitter-bootstrap-tutorial/
12. https://www.tutorialspoint.com/bootstrap/index.htm
13. 12 Awesome CSS3 Features That You Can Finally Start Using - Tutorialzine
14. Twitter Bootstrap Tutorial for Beginners (ieatcss.com)
15. CSS3 - Tutorial (tutorialspoint.com)
16. CSS3 Tutorial - An Ultimate Guide for Beginners (tutorialrepublic.com)
17. Customize Bootstrap With Sass? - GeeksforGeeks

## Suggested Course Practical List:

1. Install  Bootstrap  framework  and  understand  various  tags,  attributes  of  HTML  and  other necessary files to make responsive web page.

<!-- image -->

## GUJARAT TECHNOLOGICAL UNIVERSITY

## Program Name: Engineering Level: Diploma

Branch: Computer Engineering / Computer Science &amp; Engineering Subject Code : DI03000061

Subject Name : Responsive Web Page Design

2. Design web page that shows department name, college name at center of web page by using bootstrap framework and without using bootstrap framework.
3. Display student information content on responsive web page by using container and containerfluid classes.
4. Use offset column, reordering column and Nesting column to create responsive web page for given format.
5. Create responsive web page of your class time table by usingbootstrap grid system.
6. Shows at least five to six co-curricular/Extra activities of student that includes multiple images and short description of each activity  on responsive web page using responsive images with different  styles  and  responsive  tables  with  3  to  4  different  styles  such  as  hover  state  when mouse over, different color of each row, table with striped row etc.
7. Use bootstrap typography to create responsive web page on given blog topic.
8. Design responsive web  page for student  registration  form  using  bootstrap  form  layout,  form control, bootstrap buttons.
9. Create  various  types  of  menus  using  bootstrap  menu  components  such  as  right  aligned dropdown menu, drop up menu, adding headers of each item etc. and glyphicons components.
10. Design responsive web page that shows odd (sem1, sem3, sem5) and even (sem2, sem4, sem6) semester  consider  as  menu,  courses  of  each  semester  as  submenu  using  button  groups  and button toolbar component.
11. Use  different  bootstrap  input  groups  components  to  create  responsive  webpage  for  job application or any other kind of application.
12. Use Navigation tabs/Pills to create responsive web page for summarize of all individual units of any one course.
13. Use Nav bar component to create responsive fixed to top menu design includes logo, menu, drop down menu, form input elements such as sign-up button, search mechanism etc. And fixed to bottom menu design contains footer information.
14. Create  responsive  web  page  of  education  website  using  bootstrap  breadcrumb,  pagination, labels/badge, Jumbotron/page header, thumbnail components.
15. Following tasks to be performed using bootstrap progress bars component.
- a. Creating progress bars
- b. Adding label to progress bars
- c. Creating multi-color, stripped and animated progress bars
- d. Changing value of progress bar dynamically using JavaScript
16. Use media, rounded media, Nested media object to create responsive web page for all family members in hierarchical order.

<!-- image -->

## GUJARAT TECHNOLOGICAL UNIVERSITY

## Program Name: Engineering Level: Diploma

Branch: Computer Engineering / Computer Science &amp; Engineering

Subject Code : DI03000061

Subject Name : Responsive Web Page Design

17. Create  responsive  webpage  of  various  service  provider  information  using  bootstrap  panel component, List group component, various alert messages and show message after bootstrap alert has been closed.
18. Design a smooth page transition between homepage, about and contact us page using bootstrap transition plugin.
19. Design a webpage with different modal dialog for 'Save record confirmation', 'Delete record confirmation' using model dialog plugin of bootstrap.
20. Design  news  story  page  to  demonstrate  usage  of  Scrollspy  for  multiple  section,  Tooltip  for different photos and Collapsible and popover plugins of bootstrap.
21. Design  animated  photo  gallery  page  using  Carousel  bootstrap  plugin  with  minimum  seven photos.
22. Design header and footer of webpage of any domain using Bootstrap Utility class.
23. Create responsive webpage to demonstrate usage of Customizing Bootstrap with Sass.
24. Design webpage to demonstrate usage of Customize bootstrap components and themes.
25. Develop advanced responsive website with minimum Five to seven pages on any of following domains (Tourism, Hospitality, Airline reservation, Medical, E commerce etc.)

## List of Laboratory/Learning Resources Required:

1. Computer with basic configuration with windows or unix and browser that supports Javascript.
2. HTML IDEs and Code Editors Open-source tools like Visual Studio Code, Notepad++.
3. Open-source jQuery, Bootstrap Framework,Node.js &amp; npm (Node Package Manager), Sass Compiler and Custom SCSS Files.

## Suggested Project List:

1. Design mobile first responsive departmental website.
2. Develop  any  domain  specific  responsive  website  (Food,  Automobiles,  Educational  and Business etc.).
3. Develop  a  responsive  website  for  NGO  or  society  working  to  save  environment  to  make awareness  towards  environment  to  save  soil,  water,  trees  and  other  major  resources  of  our environment.
4. Portfolio Website - Develop a responsive personal portfolio using Bootstrap, including sections like About, Projects, Blog, and Contact to showcase skills and work.

<!-- image -->

## GUJARAT TECHNOLOGICAL UNIVERSITY

## Program Name: Engineering Level: Diploma

Branch: Computer Engineering / Computer Science &amp; Engineering

Subject Code : DI03000061

Subject Name : Responsive Web Page Design

5. E-commerce  Product  Showcase  -  Design  a  product  display  page  for  an  online  store  using Bootstrap cards, modals, and carousels to present product images, descriptions, and prices.
6. Event  Management  Website  -  Create  a  web  portal  for  event  listings  and  registrations, implementing Bootstrap's navbar, forms, and breadcrumb navigation for easy access.
7. Online  Food  Ordering  Website  -  Build  a  responsive  restaurant  menu  using  Bootstrap's  grid system, with order placement and checkout functionality for a seamless experience.
8. Tourism  &amp;  Travel  Website  -  Design  a  travel  website  that  showcases  destinations  using Bootstrap layouts, with galleries, travel packages, and booking options.
9. Educational  Website  -  Create  an  online  learning  platform,  utilizing  Bootstrap  pagination  for course lists and progress bars for tracking student learning.
10. Blog Website with Categories - Develop a categorized blogging platform with Bootstrap tabs or pills, enabling easy organization and navigation of blog posts.
11. News Portal - Build a responsive news website using Bootstrap scrollspy, alerts, tooltips, and pagination to display articles efficiently and interactively.
12. Student  Management  System  UI  -  Design  an  interface  for  managing  student  records  using Bootstrap tables, modals, and forms for data entry and updates.
13. Online  Job  Application  Portal  -  Create  a  job  application  platform  with  a  Bootstrap-based responsive form, including input groups, validation, and submission confirmation.
14. NGO  Awareness  Website  -  Develop  a  responsive  NGO  website  highlighting  social  causes using Bootstrap badges, progress bars, and alerts to engage users.
15. Online Resume Builder - Build a web tool where users can input their details and generate a structured resume using Bootstrap forms and formatting features.
16. Hospital  Appointment  Booking  UI  -  Design  an  online  hospital  appointment  booking  system using Bootstrap forms and modals for scheduling doctor consultations.
17. Weather  Dashboard  -  Create  a  weather  forecast  system  using  Bootstrap  panels  and  cards, displaying city-wise weather conditions dynamically.

<!-- image -->

## GUJARAT TECHNOLOGICAL UNIVERSITY

## Program Name: Engineering Level: Diploma

Branch: Computer Engineering / Computer Science &amp; Engineering Subject Code : DI03000061

Subject Name : Responsive Web Page Design

18. Hotel Room Booking UI - Develop a responsive hotel booking interface using Bootstrap for room selection, reservation, and confirmation messages.

## Suggested Activities for Students:

- a) Identify tools used for web page development and present its features.

- b) Undertake course 'HTML, CSS, and Javascript for Web Developers' available on courser online platform. (https://www.coursera.org/learn/html-css-javascript-for-web-developers).

- c) Undertake course 'Front-End Web UI Frameworks and Tools: Bootstrap' available on coursera online platform. (https://www.coursera.org/learn/bootstrap-4) or any other such site.

- d) Undertake course 'Bootstrap 5 From scratch with 13 Projects | 4 Sass Projects' available on Udemy online platform. https://www.udemy.com/course/learn-by-building-bootstrap-5-from- scratch-with-8-projects) or any other such site.

*********