21ITC28 WEB DEVELOPMENT USING ANGULAR AND BOOTSTRAP L T P C

3 0 0 3

COURSE OBJECTIVES:
1. To Apply the HTML5, CSS3 and Bootstrap concepts in front-end development of modern web applications
2. To Design Web applications using Bootstrap
3. To Create and deploy scalable web-based system using Angular JS.
4. To Implement Directives and Controllers for front-end development
5. To Demonstrate knowledge on the usage of Keys and Values Create Forms, validate and use Filters.

COURSE OUTCOMES:
At the end of the course, the students will able to
Apply the HTML5, CSS3 and Bootstrap concepts in front-end development of modern web
21ITC28.CO1
applications
21ITC28.CO2 Design Web applications using Bootstrap
21ITC28.CO3 Create and deploy scalable web-based system using Angular JS.
21ITC28.CO4 Implement Directives and Controllers for front-end development
21ITC28.CO5 Demonstrate knowledge on the usage of Keys and Values Create Forms, validate and use Filters.

Program Outcomes PSOs

Course
Outcomes PO1 PO2 PO3 PO4 PO5 PO6 PO7 PO8 PO9 PO10 PO11 PO12 PSO1 PSO2 PSO3

21ITC28.CO1 x x x x - - - - - - x x x x x
21ITC28.CO2 x x x x - - - - - - x x x x x
21ITC28.CO3 x x x x - - - - - - x x x x x
21ITC28.CO4 x x x x - - - - - - x x x x x
21ITC28.CO5 x x x x - - - - - - x x x x x

UNIT I HTML5 & CSS3 9

HTML5 – Introduction, Elements, Tags, Lists, Tables, Images, Forms - Form Elements & Attributes, Hidden Fields,
Semantic Elements, Media Elements, Canvas, SVG, Drag & Drop, Geolocation, WebStorage, Special Tags,
Formatting Tags. CSS – Introduction, Styling, Box Model, Padding & Dimension, Transforms, Transitions,
Animations, Multiple columns, User Interface.
UNIT II BOOTSTRAP 9
Bootstrap: Overview, Environment setup, Precompiled Bootstrap, Source Code, Grid System,Bootstrap CSS
Overview, Typography, Code, Tables, Forms, Helper Classes,Responsive Utilities,Glyphicons, Dropdowns,
Navigation Elements, Breadcrumb, Pagination, Badges, Progress bars Plugins - Overview: Transition Plugin, Model
Plugin, Dropdown Plugin, Scrollspy Plugin, Tab Plugin, Tooltip Plugin, Popover Plugin, Alert Plugin, Button
Plugin, Collapse Plugin, Carousel Plugin, Affix Plugin
UNIT III INTRODUCTION TO ANGULAR JS 9
Introduction: Features , Angular JSModel, View-Controller; Expression, Directives and Controllers; Angular JS
Modules, Arrays, Working with ng-model, Working with Forms, Form Validation, Error Handling with Forms,
Nested Forms with ng-form, Other Form Controls.
UNIT IV DIRECTIVES & BUILDING DATABASES 9
Filters: Using Filters in Controllers and Services; Angular JS Services, Internal Angular JSServices, Custom Angular JS
Services, Directives, Alternatives to Custom Directives, Understanding the Basic options, Interacting with Server, HTTP
Services, Building Database, FrontEnd and BackEnd.
UNIT V JSON AND MoNGoDB 9
JSON and MongoDB, Adopting a Non-relational Approach, Opting for Performance vs. Features Running the
Database Anywhere, Generating or Creating a Key, Using Keys and Values, Implementing Collections
TOTAL: 45
TEXT BOOKS:
Year of
Sl.No Author(s) Title of the Book Publisher
Publication
AngularJS: Up and Running:
Shyam Seshadri,Brad
1. Enhanced Productivity with Apress, O'Reilly Media 2014
Green,
Structured Web Apps
Jon Duckett Web Design with HTML, CSS, Paperback 2014
2.
JavaScript and jQuery Set

REFERENCE BOOKS:
Year of
Sl.No Author(s) Title of the Book Publisher
Publication
Kristina Chodorow Mongo DB – The Definitive Guide
1. O'Reilly Media 2010
and Michael Dirolf
Jake Spurlock Responsive Web Development – O'Reilly Media
2. Bootstrap 2013

21ITC29 ADVANCED WEB DEVELOPMENT LAB L T P C

0 0 2 1

COURSE OBJECTIVES:
1. To Apply the HTML5, CSS3 and Bootstrap concepts in front-end development of modern web applications
2. To Design Web applications using Bootstrap
3. To Create and deploy scalable web-based system using Angular JS.
4. To Implement Directives and Controllers for front-end development
5. To Demonstrate knowledge on the usage of Keys and Values Create Forms, validate and use Filters.

COURSE OUTCOMES:
At the end of the course, the students will able to
21ITC29.CO1 Develop front-end applications using Node.js framework and React JS
21ITC29.CO2 Develop server-side Framework using Django
21ITC29.CO3 Building web application and Host web application using front-end and back-end tools.

21ITC29.CO4 Work independently or in teams to solve problems with effective communication.

21ITC29.CO5

Course Program Outcomes PSOs

Outcomes PO1 PO2 PO3 PO4 PO5 PO6 PO7 PO8 PO9 PO10 PO11 PO12 PSO1 PSO2 PSO3

21ITC29.CO1 x x x x - - - - - - x x x x x
21ITC29.CO2 x x x x - - - - - - x x x x x
21ITC29.CO3 x x x x - - - - - - x x x x x
21ITC29.CO4 x x x x - - - - - - x x x x x
21ITC29.CO5 x x x x - - - - - - x x x x x

S.No LIST OF EXPERIMENTS

Front-end Web Application
Library Library: React
1. Experiments:
1. Installing Node.js framework and configuring Visual Studio (VS) Code Integrated Development
Environment (IDE), and its dependencies.
 2. Create and Run ―Hello World‖ Application in VS Code.
3. Create a React application that includes simple functional components.
4. Create a React application that includes simple class components.
5. Develop a React application to insert and access props (properties) and state of components.
6. Create a React application to demonstrate event handling.
7. Develop a React application for list rendering.
8. Implement a React application for form handling.

Server-side Development Framework.

side Framework: Django
Experiments:
1. Installing Python, Django framework and configuring PyCharm Integrated Development Environment
2. (IDE), and its dependencies.
2. Creating workspace, project and setting up the necessary environment.
3. Implement a simple view to handle http response (displayHello World) in Django Application.
4. Create a simple model for storing student details.
5. Implement a Django application for form creation and storage of form data into model.
6. Write simple test cases and test any Django application.
7. Create a Django application to include static files such as images, CSS and JavaScript.
Hosting Web Applications
3. Building web application and Hosting web application using WAMP/XAMPP Server.