LTPC 2 – 0 – 2 – 3

23CSE113 User Interface Design

Semester :2 2024-25 Even semester
 Faculty
handling:
• Dr. J Guru Prakash. (A)
• Ms. Manjusha R. (B)
• Ms. Bindu K R. (C)
• Ms. Sathiya R R. (D)
• Dr. Prathilothamai . M (E)
• Dr. Thangavelu S. (F)
• Dr. Deepika T. (G)
• Dr .Bagyammal T. (H)

LTPC 2 – 0 – 2 – 3
Books
1. Jennifer Kyrnin, Julie Meloni, “Sams Teach
Yourself HTML, CSS, and JavaScript All in
One”, Third Edition, Pearson Education,
Inc., 2019

2. Jennifer Niederst Robbin, “LEARNING

WEB DESIGN A BEGINNER’S GUIDE TO
HTML, CSS, JAVASCRIPT, AND
WEBGRAPHICS”, Fifth Edition, O’Reilly
Media, Inc., 2018.

3. Jessica Minnick, “Responsive Web Design

with HTML 5 and CSS”, 9th Edition,
Cengage Learning, Inc., 2021.
 Evaluation Pattern: 70:30
ation Pattern: 70:30

01/17/2025
Plan for conduct
Mid Term – Lab based – 2 Hours – 20 Marks
End Semester - Lab based – 2 Hours – 30 Marks
Continuous Assessment (Theory) (CAT) – 2 Quizzes
– AUMS based – common across all sections - 10
Marks
Continuous Assessment (Lab) (CAL) – 2 Lab
Evaluations
• Lab 1 (HTML and CSS) – 15 Marks
• Lab 2 (HTML, CSS, JS) – 15 Marks
• Project based on real time Case study - 10
Marks – Group of 3 students – One module will
use OpenAI tools like ChatGPT and LLMs.
Plan for Delivery

 Introduction and about OBE – Outcomes – 2 Hours

 Overview of web design and UI – 2 Hours
 HTML- 12 Hours
 CSS – 12 Hours
 JS and Form control validation – 12 Hours
 Responsive web design and UI Frameworks – 10 Hours
 Project Discussion and feedback – 5 Hours
Plagiarism Policy
Academic dishonesty is any type of cheating
that occurs in a formal academic exercise.
It can include

i. Plagiarism means the adoption or

reproduction of original creations of
another author (person, collective,
organization, community, or another type
of author, including anonymous authors)
without due acknowledgment (reference
and citation).

ii. By the University Code of Academic

Misconduct, plagiarism in any form will
result in an “F” for the component of the
course.

iii. Cheating on exams carries similar

penalties.
Additional
materials and
learning planned
Further to enhance the learning of
students ,
https://grasshopper.app/curriculu
m/fundamentals-1/

Google grasshopper curriculum

on JavaScript will be introduced
apart from W3schools materials
on HTML, CSS and JavaScript.
Additional books identified
 Supplementary Learning
https://www.coursera.org/learn/introducti
on-to-web-development-with-html-css-jav
acript#syllabus

• Introduction to Web Development with

HTML, CSS, JavaScript – IBM
• Approx. 16 hours to complete
• Introduction to Programming for the
Cloud
• HTML5 and CSS Overview
• HTML5 Elements
• JavaScript Programming for Web
Applications
• GitHub
• Final Project
01/17/2025 Sample Footer Text 10
Objectives of this course
• First course to think about “Users”
• Understand from User’s perspective
• How to think like a computer user
• How will the user “talk” to a computer to get tasks done
• Examples:
• How to know about Amrita University
• How to know about Amsterdam
• How to buy books online
• How to read online
• How to book tickets online

• Focus in this course is to learn tools to design pages for the user to understand/ interact

UID Course Material 11

 Course Objectives
• Web Programming (or coding):
• Similar to solving a puzzle
• Consider a human language, like English/ Tamil/ Hindi -- We use these
languages to turn thoughts and ideas into actions and behavior.
• In programming: the goal of the puzzle is exactly the same -- you're just
driving different kinds of behavior, and the source of that behavior isn't a
human--- It's a computer.
• Programming language: is a way of communicating with software.
• People who use programming languages are often called programmers or
developers.
• The things we tell software using a programming language could be to
make a webpage look a certain way, or to make an object on the page
move if the human user takes a certain action. 12
Course Objectives

• Programming in Web Development:

• web designer is given an end goal like "create a webpage that has
this header, this font, these colors, these pictures, and an animated
unicorn walking across the screen when users click on this button,"
• the web designer's job is to take that big idea and break it apart into
tiny pieces, and then translate these pieces into instructions that
the computer can understand -- including putting all these
instructions in the correct order or syntax.

13
Course Design
• Course Objectives
• Course Outcome
• Program Outcome
• Blooms Taxonomy Level
• Remember (L1)
• Understand (L2)
• Apply (L3)
• Analyze (L4)
• Evaluate (L5)
• Create (L6)
Course Outcomes
CO Statement BTL
CO01 Understand the basics of World Wide Web L2

CO02 Understand the fundamentals of HTML5 L2

CO03 Understand the fundamentals of CSS and Java Script L2

CO04 Design and deploy a simple web application L3

15
 PROGRAM OUTCOMES FOR ENGINEERING
1. Engineering knowledge: Apply the knowledge of mathematics, science,
engineering fundamentals, and an engineering specialization to the solution of
complex engineering problems.
2. Problem analysis: Identify, formulate, review research literature, and analyze
complex engineering problems reaching substantiated conclusions using first
principles of mathematics, natural sciences, and engineering sciences.
3. Design/development of solutions: Design solutions for complex engineering
problems and design system components or processes that meet the specified needs
with appropriate consideration for the public health and safety, and the cultural,
societal, and environmental considerations.
4. Conduct investigations of complex problems: Use research-based knowledge
and research methods including design of experiments, analysis and interpretation of
data, and synthesis of the information to provide valid conclusions.
5. Modern tool usage: Create, select, and apply appropriate techniques, resources,
and modern engineering and IT tools including prediction and modelling to complex
engineering activities with an understanding of the limitations.
6. The engineer and society: Apply reasoning informed by the contextual knowledge
to assess societal, health, safety, legal and cultural issues and the consequent
responsibilities relevant to the professional engineering practice.
16
PROGRAM OUTCOMES FOR ENGINEERING
7. Environment and sustainability: Understand the impact of the
professional engineering solutions in societal and environmental contexts,
and demonstrate the knowledge of, and need for sustainable development.
8. Ethics: Apply ethical principles and commit to professional ethics and
responsibilities and norms of the engineering practice.
9. Individual and team work: Function effectively as an individual, and as a
member or leader in diverse teams, and in multidisciplinary settings.
10.Communication: Communicate effectively on complex engineering
activities with the engineering community and with society at large, such as,
being able to comprehend and write effective reports and design
documentation, make effective presentations, and give and receive clear
instructions.
11.Project management and finance: Demonstrate knowledge and
understanding of the engineering and management principles and apply
these to one’s own work, as a member and leader in a team, to manage
projects and in multidisciplinary environments.
12.Life-long learning: Recognize the need for, and have the preparation and
ability to engage in independent and life-long learning in the broadest context
of technological change.
17
Course Outcomes
PO/PSO PO1 PO2 PO3 PO4 PO5 PO6 PO7 PO8 PO9 PO10 PO11 PO12 PSO1 PSO2

CO

CO1 2 2 2 2 2 3 2

CO2 2 2 2 3 3 2

CO3 2 2 2 1 3 3 2

CO4 2 2 3 2 3 3 3 3 2

18
Lecture Topics

• HTML provides the basic structure of sites, which is enhanced and modified by
other technologies like CSS and JavaScript.
• CSS is used to control presentation, formatting, and layout.
• JavaScript is used to control the behavior of different elements.

19
Tips, Tricks and Techniques
• Continuous Learning
• Daily Evaluation (Attendance, class performance)
• Weekly lab tasks
• Reading text / reference books/ materials
• Peer and group discussions on recent technologies/ latest happenings

20
Which Software to use?

• Many choices…
• Simple Notepad
• IDE based: Edit ++, Dreamweaver
• IDE – Integrated Development Environment – includes compiler, executer, plug-
ins, debugger, etc.
• We suggest: Visual Studio Code
• Reasons – One IDE for all your programming
• Simple integration with run time environment
• Auto code generator… ++++
• You would experience by yourself

21
Where is it? How to install?

• Lab – Available in the machines

• Laptop – for class purposes
• http://vidya.amritanet.edu/Softwares/OpenSource/Visual%20Studio%20Code

Look into the shared word file for step by step installation

22
 How to learn this IDE

• About: https://code.visualstudio.com/docs
• Tutorial available at:
• https://code.visualstudio.com/docs/introvideos/basics
• Not all will be taught at class
• More of learning and discussions, than teaching

23
We shall start now to learn UID

• Introduction to Internet, WWW,…

• HTML (basic tags, representation of data)
• Cascading Style Sheet (formatting and enhancing look and feel)
• Java Script (validation of data entered/ captured)

24
Syllabus
Unit 1

• Introduction to Internet and Web design – Working of Web – Roles of Front-end, Back-end and Full stack
development – Web Server – Internet protocols – Web Hosting – HTML – HTML Tags – Create a simple Web Page –
Marking up Text – Adding Links – Adding Images – SVG – Table Markup – Embedded Media - Web Based Forms –
HTML Forms - CSS for Presentation - Basic Style Sheet - A CSS Style Primer - Using Style Classes - Using Style IDs
- Formatting Text - Advanced Typography with CSS3 - Working with Margins, Padding, Alignment, and Floating.
Responsive web design, Introduction to version control systems

Unit 2

• CSS Box Model and Positioning - Creating Layouts Using Modern CSS - Backgrounds and Borders - CSS
Transformations and Transitions - Animating with CSS and the Canvas - Dynamic Web Pages – Web Scripting -
JavaScript programming for Web Applications – Including JavaScript in HTML – HTML5 Form Controls and
Validation - Document Object Model - DOM manipulation and events - Event Handlers

Unit 3

• Overview of UI Frameworks – User Interface Design Concepts in Web Development – Accessibility - Introduction
to Electron - Overview of Electron - Setting up an Electron project - Creating a basic desktop application with
Electron - Object communication - Introduction to other popular frameworks and libraries (e.g., JavaFX, W PF,
GTK).

25
Syllabus
• Textbook(s)

• Jennifer Kyrnin, Julie Meloni, “Sams Teach Yourself HTML, CSS, and JavaScript All in One”, Third
Edition, Pearson Education, Inc., 2019.

• Reference(s)

• Jennifer Niederst Robbin, “LEARNING WEB DESIGN A BEGINNER’S GUIDE TO HTML, CSS,
JAVASCRIPT, AND WEBGRAPHICS”, Fifth Edition, O’Reilly Media, Inc., 2018.

• Jessica Minnick, “Responsive Web Design with HTML 5 and CSS”, 9th Edition, Cengage Learning,
Inc., 2021.

• Electron JS.

• https://www.electronjs.org/docs/latest
• https://www.electronforge.io/
• https://www.electronjs.org/fiddle 26