DR.
SUBHASH UNIVERSITY - JUNAGADH
School of Engineering & Technology
Syllabus for 3rd Semester
Responsive Webpage Design [1DECO305]
Name of Department in which this course is offered Semester in which offered
CE 3rd
1. Type of Course : Audit
2. Prerequisite : Knowledge of HTML & CSS
3. 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.
JavaScript is a light-weight object-oriented programming language that is used by several
websites for scripting the webpages. jQuery is a fast, small, cross-platform and feature-rich
JavaScript library. It is designed to simplify the client-side scripting of HTML.
4. COURSE OUTCOME:
Marks %
Sr. No. CO Statement
Weightage
CO – 1 Design the responsive website/application using bootstrap. 30
CO – 2 Demonstrate & Developing website using of JavaScript. 35
CO – 3 Demonstrate & Developing website using of jQuery. 35
Subject: Responsive Webpage Design [1DECO305] Page 1 of 4
Dr. Subhash University - Junagadh
5. TEACHING AND EXAMINATION SCHEME:
Teaching Schemes Credit Examination Scheme
Theory Practical Total
L T P C
E-ESE M-PA V-ESE I-PA
0 0 2 0 0 0 30 20 50
6. CONTENT :
Sr. Total %
Content
No. Hrs Weightage
1. UNIT I – BOOTSTRAP:
Introduction to Bootstrap, Bootstrap Grid, Bootstrap Components –
Button, Table, Form, Alert, Badge, Label, Image, Glyphicon, 10 30
Progress Bar, Tabs/Pill, Navbar, Modals, Accordion, Carousel,
Bootstrap Typography.
2. UNIT II – JAVASCRIPT:
Syntax of JavaScript, Execution of JavaScript, Internal, Embedded
and External Javascript, JavaScript: variables, arrays, functions,
conditions, loops, Pop up boxes, JavaScript objects and DOM, 15 40
JavaScript inbuilt functions, JavaScript validations and Regular
expressions, Event handling with JavaScript, Callbacks in
Javascript, Function as arguments in JavaScript
3. UNIT III – JQUERY:
Introduction & Syntax of Jquery, jQuery selectors, jQuery 10 30
traversing, HTML Manipulation, Effects, Events
7. SUGGESTED SPECIFICATION TABLE WITH MARKS (THEORY)
Distribution of Theory Marks
R Level U Level A Level N Level E Level C Level
0 0 0 0 50 50
(Revised Bloom’s Taxonomy)
Legends: R: Remembrance U: Understanding A: Application
N: Analyze E: Evaluate C: Create and above Levels
Note: This specification table shall be treated as a general guideline for students and teachers. The
actual distribution of marks in the question paper may vary slightly from above table.
Subject: Responsive Webpage Design [1DECO305] Page 2 of 4
Dr. Subhash University - Junagadh
8. REFERENCE BOOKS:
1. HTML 5 Black Book 2Ed, Kogent Learning Solutions Inc, dreamtech
2. Head First JavaScript Programming: A Brain-Friendly Guide 1st Edition O'Reilly Media
2014
3. A Smarter Way to Learn JavaScript - Mark Myers 2013-2015
4. Jquery: A Beginner'S Guide by John Pollock, McGraw Hill 2014
5. Mastering HTML, CSS & JavaScript Web Publishing, by Laura Lemay (Author), Rafe
Colburn (Author), Jennifer Kyrnin (Author), 2016
9. LIST OF EXPERIMENTS:
1. Install Bootstrap framework and understand various tags, attributes of HTML and other
necessary files to make responsive web page.
2. Display student information content on responsive web page by using container and
container-fluid classes.
3. Use offset column, reordering column and Nesting column to create responsive web page
for given format.
4. Create responsive web page of your class time table by using bootstrap grid system.
5. 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.
6. Making thumbnails, rounded corner and circular images with Bootstrap
7. Creating accordion & progress bars with Bootstrap.
8. Write a JavaScript program to add two float number using prompt.
9. Print Fibonacci series using JavaScript.
10. Write a JavaScript program for access HTML element using different methods.
11. Write a JavaScript program to redirect to another URL on button click.
12. Write a JavaScript program for hide/show dive on button click.
13. Write a JavaScript program to set the background color of a page as per value selected from
dropdown.
14. Write a JavaScript function to get the value of the href, hreflang, rel, target, and type
attributes of the specified link.
15. Write a JavaScript function to add rows to a table.
16. Write a JavaScript program to add and remove items from a dropdown list.
17. Write a JavaScript program for form validation.
18. Write a jQuery program for turn on/off light.
19. Write a jQuery program for change face image as per value selected from dropdown.
Subject: Responsive Webpage Design [1DECO305] Page 3 of 4
Dr. Subhash University - Junagadh
20. Write a jQuery click the button to animate the paragraph element with a number of different
properties.
21. Write a jQuery for change the color of any div that is animated.
22. Write a jQuery find all the divisions with a name attribute that contains 'tutorial' and sets
the background color yellow.
23. Write a jQuery for Set a timer to delay execution of subsequent items in the queue.
10. LIST OF OPEN-SOURCE SOFTWARE / LEARNING WEBSITE:
1. NPTEL course/tutorials Swayam
2. Open online courses from www.coursera.org, www.udacity.com, etc
3. Vlabs.iitb.ac.in
Subject: Responsive Webpage Design [1DECO305] Page 4 of 4
Dr. Subhash University - Junagadh
