Viva Questions for Web Development Practical
(With Answer Key)
1. Create Home/Index page using HTML5. (CO1)
Q: What is HTML5 and how is it different from previous versions of HTML?
o A: HTML5 is the latest version of HTML. It introduces new elements,
attributes, and behaviors. It supports multimedia, graphical content, and is
designed to be device-independent.
Q: Name some key elements of HTML5.
o A: <header>, <footer>, <section>, <article>, <nav>, <canvas>, <video>,
<audio>.
Q: What are attributes in HTML?
o A: Attributes provide additional information about an element and are written
in the start tag. Example: href, src, alt, id, class.
Q: Explain the difference between block and inline elements.
o A: Block elements take up the full width available (e.g., <div>, <p>), whereas
inline elements only take up as much width as needed (e.g., <span>, <a>).
Q: How do you create a link in HTML?
o A: Using the <a> tag: <a href="https://example.com">Visit</a>
Q: How do you insert an image into a webpage?
o A: Using the <img> tag: <img src="image.jpg" alt="Description">
Q: How do you create a table and a list in HTML?
o A: Tables: <table><tr><td>Data</td></tr></table>; Lists:
<ul><li>Item</li></ul> or <ol><li>Item</li></ol>
2. Apply the basic styling to the web page using CSS3. (CO1)
Q: What is CSS3?
o A: CSS3 is the latest evolution of CSS that brings new features such as
rounded corners, shadows, gradients, transitions, and animations.
Q: Explain the CSS syntax.
o A: selector { property: value; }
Q: What are selectors in CSS?
o A: Selectors are patterns used to select the elements you want to style.
Examples: element selector, class selector (.class), ID selector (#id).
Q: How can you change the background color of a webpage?
o A: body { background-color: lightblue; }
Q: How do you apply margins and padding in CSS?
o A: margin: 10px; padding: 10px;
Q: What are media queries?
o A: Media queries are used to apply different styles for different devices or
screen sizes.
Q: How is responsive design implemented in CSS?
o A: Using flexible grids, media queries, and relative units like %, em, rem.
3. Add animation of HTML elements of web page designed using CSS3. (CO1)
Q: What is the difference between CSS transitions and animations?
o A: Transitions allow changes from one style to another, animations control the
intermediate steps.
Q: How do you create a CSS animation?
o A: Define with @keyframes, then use animation-name, animation-
duration, etc.
Q: What is the use of keyframes in CSS?
o A: Keyframes define the stages of the animation sequence.
Q: Give an example of animating a div element.
o A: @keyframes move { from {left: 0;} to {left: 100px;} }
o div { position: relative; animation: move 2s; }
4. Create page Layouts and Site designs using designing tools like Bootstrap. (CO2)
Q: What is Bootstrap?
o A: Bootstrap is a front-end framework for developing responsive and mobile-
first websites.
Q: What are the benefits of using Bootstrap?
o A: Speeds up development, responsive design, reusable components.
Q: Explain the Bootstrap grid system.
o A: A 12-column layout system using classes like .col-md-6, .row,
.container.
Q: How do you create a responsive layout in Bootstrap?
o A: Using grid classes, media queries, and components.
5. JavaScript Array, Object and Function. (CO3)
Q: What is JavaScript and where is it used?
o A: JavaScript is a scripting language used to create dynamic website content.
Q: How do you declare an array in JavaScript?
o A: let arr = [1, 2, 3];
Q: What is an object in JavaScript?
o A: A collection of key-value pairs: let obj = {name: "John", age: 30}
Q: How do you create a function in JavaScript?
o A: function greet() { alert("Hello"); }
Q: Client-side vs Server-side scripting?
o A: Client-side runs in browser (e.g., JavaScript); server-side runs on server
(e.g., PHP).
6. User Registration Form & Client Side Validation. (CO3)
Q: How do you create a form in HTML5?
o A: Using <form>, with input elements like <input>, <textarea>.
Q: What is client-side validation?
o A: Validation performed in the browser before submitting data.
Q: How do you validate an email field using JavaScript?
o A: Using regex: /^\S+@\S+\.\S+$/.
Q: Use of "required" attribute in HTML5?
o A: Ensures input must be filled before form submission.
7. DOM and Event Handling. (CO3)
Q: What is DOM?
o A: The Document Object Model represents the structure of a webpage.
Q: How do you access an element by ID?
o A: document.getElementById("id")
Q: What is an event in JavaScript?
o A: An event is an action like click, hover, or keypress.
Q: Handle a button click event?
o A: button.addEventListener("click", function()
{ alert("Clicked!"); });
8. XML Web Page using DTD and XML Schema. (CO4)
Q: What is XML?
o A: XML is a markup language for storing and transporting data.
Q: Purpose of DTD and Schema?
o A: To define the structure and rules of an XML document.
Q: Components of XML document?
o A: Declaration, elements, attributes, nested tags.
Q: Difference between DTD and Schema?
o A: Schema supports datatypes and is more expressive; DTD is simpler.
9. JSON Data Parsing. (CO5)
Q: What is JSON?
o A: JavaScript Object Notation is a lightweight data-interchange format.
Q: JSON vs XML?
o A: JSON is easier to read and write; uses fewer characters.
Q: Parse JSON in JavaScript?
o A: JSON.parse(jsonString)
Q: Data types in JSON?
o A: String, Number, Object, Array, Boolean, Null
10. Registration Form using PHP. (CO6)
Q: What is PHP?
o A: PHP is a server-side scripting language designed for web development.
Q: Handle form data in PHP?
o A: Using $_GET or $_POST arrays.
Q: GET vs POST method?
o A: GET appends data in URL; POST sends data securely in the request body.
Q: Form validation in PHP?
o A: Using isset() and regular expressions.
11. Capstone: Storing Form Data in Database. (CO1 to CO6)
Q: Connect PHP to MySQL?
o A: Using mysqli_connect("localhost", "user", "pass", "db")
Q: mysqli_connect() function?
o A: Establishes a connection to the database.
Q: Insert form data using PHP?
o A: Use INSERT INTO SQL command within mysqli_query().
Q: What is SQL injection?
o A: A security threat where SQL commands are inserted through form inputs.
Q: Difference between MySQL and Oracle?
o A: Both are relational DBMS; Oracle supports larger systems and advanced
features.
