Scribd
Upload
42 views39 pages

Sample Question Paper Mid-Term Test 1

The document outlines the mid-term examination for the User Interface Design course at Amrita University, consisting of short answer and descriptive questions. It covers essential topics such as web servers, front-end and back-end development, HTML vs. XHTML, SVG usage, CSS box model, media queries, version control, and full-stack web development components. The examination tests students' understanding of web development concepts and practical coding skills.

Uploaded by

jr.vijiofficial
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
42 views39 pages

Sample Question Paper Mid-Term Test 1

The document outlines the mid-term examination for the User Interface Design course at Amrita University, consisting of short answer and descriptive questions. It covers essential topics such as web servers, front-end and back-end development, HTML vs. XHTML, SVG usage, CSS box model, media queries, version control, and full-stack web development components. The examination tests students' understanding of web development concepts and practical coding skills.

Uploaded by

jr.vijiofficial
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 39

Amrita University - Mid-Term Examination

Course: User Interface Design (23CSE113)


Duration: 2 Hours
Maximum Marks: 100

Part A - Short Answer Questions (2 marks each)


Answer ALL questions.

1. Define web server and its role in web development.

Web Server and Its Role in Web Development

Definition of a Web Server

A web server is a software or hardware system that stores, processes, and delivers
web pages to users over the Internet. It responds to client requests (usually from
web browsers) using the HTTP/HTTPS protocols.

Role of a Web Server in Web Development

1. Hosting Websites – Stores and serves website files (HTML, CSS, JavaScript).

2. Processing Requests – Handles user requests and sends responses.

3. Running Server-Side Code – Supports dynamic content using languages like PHP,
Node.js, or Python.

4. Ensuring Security – Uses HTTPS, authentication, and firewalls to protect data.

5. Load Balancing – Manages traffic across multiple servers for performance


optimization.

Example: Apache, Nginx, Microsoft IIS, and LiteSpeed are popular web servers.

2. What are front-end and back-end development? Give examples.

Front-End and Back-End Development

1. Front-End Development (Client-Side)

Front-end development focuses on the visual and interactive aspects of a website


that users directly interact with.

✅ Technologies Used:

 HTML (Structure)
 CSS (Styling)

 JavaScript (Interactivity)

 Frameworks: React, Angular, Vue.js

✅ Example:
A login page with a form, styled buttons, and animations built using HTML, CSS, and
JavaScript.

2. Back-End Development (Server-Side)

Back-end development deals with the server, database, and application logic that
power a website.

✅ Technologies Used:

 Programming Languages: Python, Node.js, PHP, Java

 Databases: MySQL, MongoDB

 Frameworks: Express.js, Django, Laravel

✅ Example:
A back-end login system that verifies user credentials, interacts with a database, and
sends a response to the front end.

3. Explain the working of the Internet in brief.

Working of the Internet (Brief Explanation)

The Internet is a global network that connects computers and devices, allowing them
to communicate and exchange data. It works using a combination of network
infrastructure, protocols, and servers.

Steps in Internet Communication:

1. User Request: When you enter a URL (e.g., www.google.com), your browser sends a
request.

2. DNS Resolution: The Domain Name System (DNS) translates the domain name into
an IP address (e.g., 172.217.160.78).

3. Data Routing: The request is sent through a series of routers and networks using the
TCP/IP protocol.
4. Server Processing: The web server receives the request, processes it, and retrieves
the required web page or data.

5. Response Sent Back: The web server sends the data back to your browser using the
HTTP/HTTPS protocol.

6. Page Rendering: The browser receives the response and displays the web page.

Key Protocols:

 HTTP/HTTPS – Handles web page requests.

 TCP/IP – Ensures reliable data transfer.

 DNS – Converts domain names to IP addresses.

4. List any four HTML tags and their uses.

(refer the previous qp)

5. What is the difference between HTML and XHTML?

Difference Between HTML and XHTML

HTML (HyperText Markup XHTML (Extensible HyperText Markup


Feature
Language) Language)
Standard markup language for A stricter and XML-based version of
Definition
creating web pages. HTML.
More flexible, does not require Requires well-formed syntax (follows XML
Syntax
strict rules. rules).
Tags are not case-sensitive Tags must be lowercase (<br> is correct,
Tags
(<br> and <BR> both work). <BR> is not).
Some tags can be left unclosed All tags must be properly closed (<img />
Closing Tags
(<img> or <input>). or <input />).
Attribute Attributes can be used without All attribute values must be quoted
Quotation quotes (width=100). (width="100").
Error Browsers can ignore small Strict error handling; incorrect syntax results
Handling syntax errors. in failure.
Document Uses <!DOCTYPE html PUBLIC "-
Uses <!DOCTYPE html> //W3C//DTD XHTML 1.0 Strict//EN"
Type declaration. ... >.
Example of HTML:

<img src="image.jpg">

Example of XHTML:
<img src="image.jpg" />

Conclusion:

✅ HTML is more lenient and widely used in modern web development.


✅ XHTML is stricter and follows XML rules, but HTML5 has replaced it in most cases.

6. What is SVG? How is it used in web development?

SVG (Scalable Vector Graphics) is an XML-based format used to create vector images
that can be scaled without losing quality. It is commonly used in web development
for icons, logos, charts, and animations.

How is SVG Used in Web Development?

1. Embedding Directly in HTML:

<svg width="100" height="100">

<circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />

</svg>

✅ Creates a red circle inside an SVG canvas.

2. Using an External SVG File:

<img src="image.svg" alt="SVG Image">

✅ Embeds an external SVG file like an image.

3. Styling with CSS:

svg {

fill: blue;

stroke: black;

stroke-width: 2px;

✅ Changes SVG colors and appearance dynamically.


4. SVG for Animations:

<svg width="100" height="100">

<circle cx="50" cy="50" r="40" fill="red">

<animate attributeName="r" from="40" to="20" dur="1s"


repeatCount="indefinite" />

</circle>

</svg>

Why Use SVG?

✔ Scalability: No loss of quality when resized.


✔ Lightweight: Smaller file size compared to PNG/JPG.
✔ Customizable: Easily styled with CSS & JavaScript.
✔ Interactive & Animatable: Supports animations and interactions.

7. What is the purpose of CSS in web design?

Purpose of CSS in Web Design

CSS (Cascading Style Sheets) is used to style and format web pages, enhancing their
visual appeal and user experience.

Key Purposes of CSS:

1. Enhances Presentation – Controls colors, fonts, layouts, and animations.

2. Ensures Consistency – Maintains a uniform design across all web pages.

3. Improves Accessibility – Helps create responsive designs for different devices.

4. Speeds Up Development – Allows for separation of content (HTML) and design


(CSS), making updates easier.

5. Boosts Performance – Reduces page load times by replacing bulky inline styles with
external stylesheets.

Example of CSS Usage:

body {

background-color: lightblue;

font-family: Arial, sans-serif;

text-align: center;
}

✅ Changes the background color, font, and text alignment of a web page.

8. Define the CSS Box model.

CSS Box Model Definition

The CSS Box Model is a fundamental concept in web design that describes how
HTML elements are structured and spaced. It consists of four layers around each
element:

1. Content – The actual text or image inside the element.

2. Padding – Space between the content and the border.

3. Border – The outer edge surrounding the padding.

4. Margin – Space between the element and other elements.

Diagram of the Box Model:

+------------------------+ <- Margin

| |

| +------------------+ | <- Border

| | Padding | |

| | +----------+ | | <- Content

| | | Text | | |

| | +----------+ | |

| +------------------+ |

| |

+------------------------+

Example of CSS Box Model in Action:

.box {

width: 200px;

padding: 10px;

border: 5px solid black;

margin: 20px;
}

✅ Total width = 200px + 10px (padding) + 5px (border) + 20px (margin) = 250px

The Box Model is essential for layout design, spacing, and positioning in web
development.

9. What are media queries in responsive web design?

Media Queries in Responsive Web Design


Media queries are a feature of CSS used to make web pages responsive, allowing
designs to adapt to different screen sizes and devices (mobile, tablet, desktop).
Purpose of Media Queries:
✅ Adjust layouts for different screen sizes.
✅ Improve user experience on all devices.
✅ Apply different styles based on screen width, height, or device type.
Example of a Media Query:

/* Default styles */

body {

background-color: lightblue;

/* Styles for screens smaller than 600px (mobile devices) */

@media (max-width: 600px) {

body {

background-color: pink;

✅ If the screen width is 600px or less, the background color changes to pink.

Why Use Media Queries?

✔ Makes websites mobile-friendly.


✔ Prevents content overflow on small screens.
✔ Improves SEO ranking (Google favors responsive sites).
10. What is version control and why is it important?

Version Control and Its Importance

What is Version Control?

Version control is a system that tracks changes to files, allowing developers to manage
and collaborate on code efficiently. It enables teams to:
✅ Track modifications over time
✅ Revert to previous versions
✅ Work collaboratively without conflicts

Example: Git is a popular version control system used in software development.

Why is Version Control Important?

1. History Tracking – Keeps a record of all changes, making it easy to review previous
versions.

2. Collaboration – Multiple developers can work on the same project without


overwriting each other's code.

3. Error Recovery – If a mistake is made, you can roll back to a previous version.

4. Branching & Merging – Developers can work on different features separately and
merge them later.

5. Backup & Security – Ensures a safe copy of the project is always available.

Example Using Git (Version Control System)

# Initialize a Git repository

git init

# Add files to version control

git add .

# Commit changes with a message


git commit -m "Initial commit"

# Push to a remote repository (GitHub)

git push origin main

✅ This tracks changes and stores the project in GitHub or GitLab for
collaboration.

Part B - Descriptive Questions (5 marks each)


Answer ANY SIX questions.

1. Describe the components of a full-stack web development setup.

Components of a Full-Stack Web Development Setup

Full-stack web development involves both front-end (client-side) and back-end


(server-side) development, along with database management.

1. Front-End (Client-Side)

The front-end is responsible for the visual and interactive part of the website that
users interact with.

✅ Technologies Used:

 HTML – Structure of the webpage

 CSS – Styling and layout (Bootstrap, Tailwind CSS)

 JavaScript – Adds interactivity (React, Angular, Vue.js)

🔹 Example: A navigation bar and form built using HTML, CSS, and JavaScript.

2. Back-End (Server-Side)

The back-end handles the logic, authentication, and communication with the
database.

✅ Technologies Used:
 Programming Languages: Node.js, Python, PHP, Java

 Frameworks: Express.js (Node.js), Django (Python), Laravel (PHP)

 APIs: RESTful APIs or GraphQL for data exchange

🔹 Example: A login system that checks user credentials in a database.

3. Database Management

The database stores and retrieves website data efficiently.

✅ Types of Databases:

 SQL (Structured): MySQL, PostgreSQL

 NoSQL (Flexible): MongoDB, Firebase

🔹 Example: Storing user profiles and comments in MongoDB or MySQL.

4. Web Server & Hosting

A web server delivers web pages to users when requested.

✅ Common Web Servers:

 Apache, Nginx (for hosting websites)

 Node.js (for running JavaScript on the server)

✅ Hosting Platforms:

 Cloud: AWS, Google Cloud, Azure

 Shared Hosting: GoDaddy, Bluehost

 Dedicated: DigitalOcean, Heroku

🔹 Example: Deploying a website using Vercel or Netlify for hosting.

5. Version Control & Development Tools

Version control keeps track of changes in the codebase.

✅ Tools Used:

 Git & GitHub/GitLab – Tracks code changes


 Docker – Manages containerized applications

 CI/CD Pipelines – Automates testing and deployment

🔹 Example: Using GitHub for collaborative coding and Heroku for automated
deployment.

Conclusion:

A full-stack developer works with both front-end and back-end technologies,


ensuring smooth functionality and an optimal user experience.

2. Explain the structure of a basic HTML document with an example.

Structure of a Basic HTML Document

An HTML document is structured using different tags to define its elements. The
basic structure includes:

1. <!DOCTYPE html> – Declares the document as HTML5.

2. <html> – The root element of the page.

3. <head> – Contains metadata, title, and links to styles/scripts.

4. <body> – Contains the visible content of the webpage.

Example of a Basic HTML Document:

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>My First Web Page</title>

<link rel="stylesheet" href="styles.css"> <!-- External CSS -->

</head>

<body>

<h1>Welcome to My Web Page</h1>


<p>This is a simple HTML document.</p>

<img src="image.jpg" alt="Sample Image" width="300">

<a href="https://www.example.com">Visit Example</a>

<ul>

<li>HTML</li>

<li>CSS</li>

<li>JavaScript</li>

</ul>

<form>

<label for="name">Enter your name:</label>

<input type="text" id="name" name="name">

<button type="submit">Submit</button>

</form>

</body>

</html>

Explanation of Key Elements:

Tag Purpose

<!DOCTYPE html> Declares HTML5 document type.

Defines the root of the document with language


<html lang="en">
attribute.

<head> Contains metadata, title, and links to styles/scripts.

<meta charset="UTF-8"> Ensures proper text encoding.


Tag Purpose

<meta
Makes the page responsive.
name="viewport">

<title> Sets the page title (shown in the browser tab).

<body> Contains all visible content.

<h1> to <h6> Headings for structuring content.

<p> Paragraph tag for text.

<img> Embeds images.

<a> Creates hyperlinks.

<ul> Defines an unordered list.

<form> Creates an input form for user interaction.

Conclusion:

This basic HTML document forms the foundation for any web page. You can enhance
it with CSS for styling and JavaScript for interactivity.

3. Write HTML code to create a table with four rows and three columns.

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Simple Table</title>

<style>

table {

width: 50%;
border-collapse: collapse;

margin: 20px 0;

th, td {

border: 1px solid black;

padding: 10px;

text-align: center;

th {

background-color: lightgray;

</style>

</head>

<body>

<h2>Student Information Table</h2>

<table>

<tr>

<th>Name</th>

<th>Age</th>

<th>Grade</th>

</tr>

<tr>

<td>John Doe</td>

<td>20</td>

<td>A</td>

</tr>
<tr>

<td>Jane Smith</td>

<td>22</td>

<td>B</td>

</tr>

<tr>

<td>David Lee</td>

<td>21</td>

<td>A</td>

</tr>

<tr>

<td>Emma Brown</td>

<td>19</td>

<td>B+</td>

</tr>

</table>

</body>

</html>

Explanation of the Code:

 <table> – Defines the table.

 <tr> (Table Row) – Creates a row in the table.

 <th> (Table Header) – Creates bold column headers.

 <td> (Table Data) – Defines each cell in a row.

 CSS Styling:

o Borders around table cells.

o Centered text in cells.

o Light gray background for headers.


This code will generate a 4-row, 3-column table displaying student details

4. What are the different types of Internet protocols? Explain any two.

Different Types of Internet Protocols

Internet protocols are a set of rules that govern how data is transmitted over the
internet. Some important types of internet protocols include:

1. Transmission Control Protocol/Internet Protocol (TCP/IP)

2. Hypertext Transfer Protocol (HTTP & HTTPS)

3. File Transfer Protocol (FTP)

4. Simple Mail Transfer Protocol (SMTP)

5. Domain Name System (DNS)

6. Internet Control Message Protocol (ICMP)

Explanation of Two Key Internet Protocols:

1. TCP/IP (Transmission Control Protocol/Internet Protocol)

✅ Purpose:
TCP/IP is the foundation of internet communication. It ensures data is transmitted
correctly between devices over a network.

✅ How It Works:

 TCP breaks data into packets and ensures they reach the destination in the correct
order.

 IP is responsible for addressing and routing these packets between devices.

✅ Example:
When you visit a website, TCP ensures the webpage data is delivered correctly, and IP
routes the data to the correct destination.

2. HTTP/HTTPS (Hypertext Transfer Protocol / Secure HTTP)

✅ Purpose:
HTTP is used for transferring web pages from a server to a browser, while HTTPS is
the secure version that encrypts data for protection.
✅ How It Works:

 When you enter a URL in a browser, HTTP requests the webpage from the server.

 The server responds with the webpage data, which is then displayed in the browser.

 HTTPS uses SSL/TLS encryption to secure data transfer, preventing hacking.

✅ Example:

 HTTP: http://www.example.com (Not secure)

 HTTPS: https://www.example.com (Secure, used for online banking and shopping)

Conclusion:

 TCP/IP ensures reliable data transfer over networks.

 HTTP/HTTPS is essential for accessing websites.

5. How can images and links be added to an HTML page? Provide code snippets.

Adding Images and Links to an HTML Page


1. Adding an Image (<img> Tag)
The <img> tag is used to display images in an HTML page. It requires the src
attribute (image source) and the alt attribute (alternative text).
✅ Example:
<img src="image.jpg" alt="A beautiful scenery" width="300" height="200">
src="image.jpg" – Specifies the image file path.
alt="A beautiful scenery" – Provides alternative text if the image cannot be
displayed.
width and height – Control image dimensions.
Example Using an Online Image:

<img src="https://www.example.com/sample-image.jpg" alt="Sample Image">


2. Adding a Link (<a> Tag)
The <a> tag is used to create hyperlinks to other web pages or resources.
✅ Example:

<a href="https://www.google.com" target="_blank">Visit Google</a>


 href="URL" – Specifies the link destination.
 target="_blank" – Opens the link in a new tab.
📌 Example of Linking to Another Page in the Same Website:

<a href="about.html">Go to About Page</a>


3. Making an Image Clickable
You can combine the <img> and <a> tags to make an image act as a clickable link.
<a href="https://www.example.com">
<img src="logo.png" alt="Company Logo" width="200">
</a>

6. Discuss the use of CSS classes and IDs with suitable examples.

Refer previous paper

7. Explain the concepts of padding, margins, and alignment in CSS.

Padding, Margins, and Alignment in CSS


In CSS, padding, margins, and alignment are essential for spacing and positioning
elements properly on a webpage.

1. Padding
✅ Padding is the space between the content of an element and its border.
✅ It creates inner spacing within an element.
📌 Example:
.box {
background-color: lightblue;
padding: 20px; /* Adds 20px space inside the border */
}
✅ Visual Representation:
[ Border ]
[ Padding ]
[ Content ]
2. Margin

✅ Margin is the space outside an element’s border.


✅ It creates space between elements.

📌 Example:

.box {
background-color: lightblue;
margin: 30px; /* Adds 30px space around the element */
}
✅ Visual Representation:
[ Margin ]
[ Border ]
[ Padding ]
[ Content ]
Difference between Padding and Margin:
 Padding: Increases the size of the element itself.
 Margin: Moves the element away from others without changing its size.
3. Alignment in CSS
Alignment in CSS is used to position text, images, and elements horizontally or
vertically.
Text Alignment (text-align)
✅ Used for aligning text inside an element.

p{
text-align: center; /* Centers the text */
}
Block Alignment (margin: auto;)
✅ Used to center block elements.

.container {
width: 50%;
margin: auto; /* Centers the div horizontally */
}
Flexbox Alignment (Modern Approach)
✅ Used for advanced layouts.

.container {
display: flex;
justify-content: center; /* Centers horizontally */
align-items: center; /* Centers vertically */
height: 100vh;
}
Conclusion:
✔ Padding = Space inside the element.
✔ Margin = Space outside the element.
✔ Alignment = Controls positioning of elements.

8. What are HTML5 form controls and how do they simplify form validation?

HTML5 Form Controls and Their Role in Form Validation


HTML5 introduced new form controls and attributes that simplify form creation
and validation without requiring JavaScript. These controls improve user
experience by enforcing input rules automatically.

1. Common HTML5 Form Controls

Form Control Description Example

<input Validates email <input type="email"


type="email"> format required>
<input Accepts only <input type="number"
type="number"> numbers min="1" max="100">

<input type="date"> Provides a date picker <input type="date">

<input Ensures a valid URL <input type="url"


type="url"> format required>

<input Creates a slider <input type="range" min="1"


type="range"> input max="10">

<input Accepts phone <input type="tel" pattern="[0-


type="tel"> numbers 9]{10}">

<input Hides text input for <input type="password"


type="password"> passwords required>

. How HTML5 Simplifies Form Validation

✅ 1. Built-in Validation:

 HTML5 automatically checks inputs (e.g., ensuring a valid email format).

 Example

<input type="email" required>

The browser prevents form submission if the email is invalid.

✅ 2. required Attribute:

 Ensures that users do not leave a field empty.

 Example:

<input type="text" required>

✅ 3. pattern Attribute for Custom Validation:

 Allows developers to define input patterns using regular expressions.

 Example (Phone Number Validation)


✅ 4. min and max for Numeric Inputs:

 Restricts values within a specified range.

<input type="number" min="1" max="100">

✅ 5. maxlength for Character Limit:

 Limits the number of characters in an input field.

 Example

<input type="text" maxlength="20">

3. Example: HTML5 Form with Validation


<form>
<label for="email">Email:</label>
<input type="email" id="email" required>

<label for="password">Password:</label>
<input type="password" id="password" required minlength="6">

<label for="age">Age:</label>
<input type="number" id="age" min="18" max="100" required>

<button type="submit">Submit</button>
</form>
Conclusion
✔ HTML5 form controls reduce the need for JavaScript validation.
✔ They improve user experience with built-in error messages.
✔ Developers can create secure, structured forms easily.

Part C - Long Answer Questions (10 marks each)


Answer ANY THREE questions.

1. Create a simple HTML page with proper text markup, links, images, and embedded
media.

<!DOCTYPE html>
<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>My Simple Webpage</title>

<style>

body {

font-family: Arial, sans-serif;

margin: 20px;

img {

width: 300px;

display: block;

margin: 10px 0;

video {

width: 400px;

display: block;

</style>

</head>

<body>

<h1>Welcome to My Simple Webpage</h1>

<p>This is an example of an HTML page with text markup, links, images, and
embedded media.</p>

<h2>About Me</h2>
<p>I am learning web development and this is my first webpage.</p>

<h2>Useful Links</h2>

<p>Check out my favorite website: <a href="https://www.wikipedia.org"


target="_blank">Wikipedia</a></p>

<h2>My Favorite Image</h2>

<img src="https://www.w3schools.com/html/img_girl.jpg" alt="A sample image">

<h2>Embedded Video</h2>

<video controls>

<source src="https://www.w3schools.com/html/mov_bbb.mp4"
type="video/mp4">

Your browser does not support the video tag.

</video>

<h2>Contact Me</h2>

<form>

<label for="name">Name:</label>

<input type="text" id="name" name="name" required><br><br>

<label for="email">Email:</label>

<input type="email" id="email" name="email" required><br><br>

<button type="submit">Submit</button>

</form>

</body>

</html>
Key Features in This Page:

✅ Text Markup: Headings (<h1>, <h2>) and paragraphs (<p>).


✅ Hyperlinks: Using the <a> tag.
✅ Images: Added with <img> tag.
✅ Embedded Media: A video is included with the <video> tag.
✅ Form Elements: A simple contact form with text and email inputs.

2. Explain the process of web hosting and the role of domain names and DNS.

Web Hosting and the Role of Domain Names & DNS

Web hosting is the process of making a website accessible on the internet. It involves
storing website files on a web server and linking them to a domain name for easy
access.

1. What is Web Hosting?

Web hosting is a service provided by hosting companies that allows individuals and
businesses to store website files (HTML, CSS, JavaScript, images, videos, etc.) on a
server. These servers are always connected to the internet, allowing users to access
websites anytime.

✅ Types of Web Hosting:

 Shared Hosting: Multiple websites share one server (cost-effective).

 VPS Hosting: Dedicated resources on a virtual private server.

 Dedicated Hosting: A single website gets an entire server (high performance).

 Cloud Hosting: Websites are hosted across multiple servers for reliability.

📌 Example:
A hosting provider like Bluehost, Hostinger, or AWS offers storage and services to
host your website.

2. What is a Domain Name?

A domain name is a human-readable address that helps users access a website


instead of using an IP address.
✅ Example:
Instead of typing "192.168.1.1", users type "example.com" to visit a website.

✅ Domain Name Structure:

 Top-Level Domain (TLD): .com, .org, .net, .edu

 Second-Level Domain: example in example.com

 Subdomain: blog.example.com

📌 Example:

 Google's website: www.google.com

 University website: www.harvard.edu

3. What is DNS (Domain Name System)?

DNS (Domain Name System) is like the "phonebook of the internet." It translates
domain names into IP addresses that computers use to communicate.

✅ How DNS Works:

1. A user types www.example.com in the browser.

2. The browser sends a request to a DNS server.

3. The DNS server finds the IP address of the website (e.g., 192.168.1.1).

4. The browser connects to the web server and loads the website.

✅ DNS Components:

 Root Servers: Directs queries to TLD servers (.com, .net).

 TLD Servers: Finds domain-specific information (e.g., example.com).

 Authoritative DNS Server: Stores the actual IP address of the domain.

📌 Example:
Typing www.facebook.com triggers a DNS lookup, which fetches Facebook's IP
address, allowing the browser to load the website.

4. Steps to Host a Website

1⃣ Buy a Domain Name (from GoDaddy, Namecheap).


2⃣ Choose a Web Hosting Provider (Bluehost, AWS, Hostinger).
3⃣ Upload Website Files (via cPanel, FTP, or CMS like WordPress).
4⃣ Connect Domain to Hosting (update DNS settings).
5⃣ Go Live!

Conclusion

✔ Web Hosting makes websites accessible online.


✔ Domain Names simplify website addresses.
✔ DNS translates domain names into IP addresses.

3. Describe how JavaScript can be used to create dynamic web pages. Provide code
examples.

How JavaScript Creates Dynamic Web Pages


JavaScript is a client-side scripting language that enhances web pages by making
them interactive and dynamic. It allows users to interact with a webpage without
requiring a full page reload.

1. Ways JavaScript Makes a Web Page Dynamic


✅ Changing Content Dynamically
✅ Handling User Events (Click, Hover, Input, etc.)
✅ Manipulating the DOM (Document Object Model)
✅ Animating Elements
✅ Fetching Data from a Server (AJAX, Fetch API)

2. JavaScript Code Examples


Example 1: Changing Text Dynamically

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Dynamic Content with JavaScript</title>

</head>

<body>
<h1 id="heading">Hello, Welcome to My Website!</h1>

<button onclick="changeText()">Click Me</button>

<script>

function changeText() {

document.getElementById("heading").innerText = "You clicked the button!";

</script>

</body>

</html>

📌 How it Works?
✔ When the button is clicked, JavaScript changes the text inside the <h1> tag
dynamically.

Example 2: Handling User Input (Form Validation)

<!DOCTYPE html>

<html lang="en">

<head>

<title>Form Validation</title>

</head>

<body>

<form onsubmit="return validateForm()">

<label for="name">Enter your name:</label>

<input type="text" id="name">

<button type="submit">Submit</button>

</form>
<p id="message"></p>

<script>

function validateForm() {

let name = document.getElementById("name").value;

if (name === "") {

document.getElementById("message").innerText = "Name cannot be


empty!";

return false;

document.getElementById("message").innerText = "Form submitted


successfully!";

return true;

</script>

</body>

</html>

📌 How it Works?
✔ If the user tries to submit an empty name, an error message appears without
reloading the page.

Example 3: Changing Styles Dynamically

<!DOCTYPE html>

<html lang="en">

<head>

<title>Change Background Color</title>

</head>
<body>

<button onclick="changeColor()">Change Background Color</button>

<script>

function changeColor() {

document.body.style.backgroundColor = "lightblue";

</script>

</body>

</html>

<!DOCTYPE html>

<html lang="en">

<head>

<title>Change Background Color</title>

</head>

<body>

<button onclick="changeColor()">Change Background Color</button>

<script>

function changeColor() {

document.body.style.backgroundColor = "lightblue";

</script>

</body>
</html>

Example 4: Fetching Data from a Server (AJAX)

<!DOCTYPE html>

<html lang="en">

<head>

<title>Fetch Data</title>

</head>

<body>

<button onclick="loadData()">Load Data</button>

<p id="data"></p>

<script>

function loadData() {

fetch('https://jsonplaceholder.typicode.com/todos/1')

.then(response => response.json())

.then(data => {

document.getElementById("data").innerText = "Title: " + data.title;

});

</script>

</body>

</html>

📌 How it Works?
✔ JavaScript fetches data from a fake API and updates the webpage dynamically
without refreshing.
3. Why JavaScript is Important for Dynamic Pages?

✅ Enhances User Experience (real-time updates).


✅ Reduces Page Reloads (better performance).
✅ Handles User Interactions (clicks, forms, animations).
✅ Connects to APIs (fetching live data).

Conclusion

✔ JavaScript makes web pages interactive and dynamic.


✔ It can change content, validate forms, and fetch live data.
✔ It improves performance and user experience.

4. What are CSS transformations and transitions? Create a simple animation using CSS.

CSS Transformations and Transitions

CSS transformations and transitions are used to create animations and interactive
effects in web design without requiring JavaScript.

1. What are CSS Transformations?

CSS transformations allow elements to be moved, rotated, scaled, or skewed


without affecting surrounding elements.

✅ Common CSS Transformations:

 translate(x, y) → Moves an element

 rotate(deg) → Rotates an element

 scale(x, y) → Resizes an element

 skew(x, y) → Skews an element

📌 Example:

.box {

width: 100px;

height: 100px;
background-color: red;

transform: rotate(45deg);

✔ This rotates the box by 45 degrees.

2. What are CSS Transitions?

CSS transitions create smooth animations between different states of an element.

✅ Key Properties:

 transition-property → Specifies the property to animate

 transition-duration → Defines the time for the animation

 transition-timing-function → Controls the speed curve (ease, linear, etc.)

 transition-delay → Adds a delay before animation starts

📌 Example:

.box {

width: 100px;

height: 100px;

background-color: red;

transition: background-color 1s ease-in-out;

.box:hover {

background-color: blue;

✔ When hovered, the box smoothly changes color from red to blue over 1 second.

3. Creating a Simple CSS Animation

Here’s a simple animation using CSS transitions and transformations.


HTML + CSS Code:

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>CSS Animation</title>

<style>

body {

text-align: center;

margin-top: 50px;

.box {

width: 100px;

height: 100px;

background-color: red;

position: relative;

transition: transform 1s ease-in-out, background-color 1s;

.box:hover {

transform: translateX(200px) rotate(360deg);

background-color: blue;

</style>

</head>

<body>
<h2>Hover Over the Box</h2>

<div class="box"></div>

</body>

</html>

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>CSS Animation</title>

<style>

body {

text-align: center;

margin-top: 50px;

.box {

width: 100px;

height: 100px;

background-color: red;

position: relative;

transition: transform 1s ease-in-out, background-color 1s;

.box:hover {

transform: translateX(200px) rotate(360deg);

background-color: blue;

</style>
</head>

<body>

<h2>Hover Over the Box</h2>

<div class="box"></div>

</body>

</html>

📌 How It Works?
✔ The box moves right (translateX) and rotates (360deg) when hovered.
✔ The background color changes from red to blue smoothly.

4. Why Use CSS Transitions & Transformations?

✅ No JavaScript Needed → Simple animations with CSS only.


✅ Performance-Optimized → Uses GPU for smooth rendering.
✅ Enhances User Experience → Creates interactive effects.

Conclusion

✔ Transformations modify an element’s position, size, or shape.


✔ Transitions create smooth animations between states.
✔ Using both, we can create engaging, interactive web pages.

5. Discuss the importance of responsive web design and how CSS media queries help
achieve it.

Answer:

Importance of Responsive Web Design & Role of CSS Media Queries

1. What is Responsive Web Design (RWD)?

Responsive Web Design (RWD) ensures that a website adapts to different screen sizes
(desktops, tablets, and smartphones) for a seamless user experience.
✅ Key Features of RWD:

 Adapts layout based on screen size.

 Improves usability across devices.

 Enhances SEO and page performance.

2. Importance of Responsive Web Design

🔹 Improved User Experience:


A responsive website provides a better reading and navigation experience across devices.

🔹 Better SEO Ranking:


Google prefers mobile-friendly sites, improving search engine rankings.

🔹 Faster Loading Speeds:


Responsive design eliminates unnecessary elements on smaller screens, making pages load
faster.

🔹 Cost and Time Efficient:


A single responsive website eliminates the need for a separate mobile version.

🔹 Higher Conversion Rates:


Users stay longer on a responsive site, leading to higher engagement and sales.

3. How CSS Media Queries Help in Responsive Design

CSS media queries allow developers to apply different styles based on screen size,
resolution, or device type.

✅ Media Query Syntax:

@media (max-width: 768px) {

body {

background-color: lightblue;

📌 How It Works?
✔ If the screen width is 768px or less, the background color changes to light blue.
4. Example: Responsive Navigation Menu

This example demonstrates how media queries change navigation for smaller screens.

HTML + CSS Code:

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Responsive Web Design</title>

<style>

body {

font-family: Arial, sans-serif;

margin: 0;

padding: 0;

text-align: center;

.menu {

background-color: #333;

padding: 10px;

.menu a {

color: white;

text-decoration: none;

padding: 10px 20px;

display: inline-block;

}
@media (max-width: 600px) {

.menu a {

display: block;

padding: 15px;

text-align: center;

</style>

</head>

<body>

<div class="menu">

<a href="#">Home</a>

<a href="#">About</a>

<a href="#">Contact</a>

</div>

<h2>Resize the window to see the effect</h2>

</body>

</html>

📌 How It Works?
✔ On large screens, menu links are displayed horizontally.
✔ On small screens (max-width: 600px), menu links become stacked vertically.

5. Common Media Query Breakpoints

📌 Developers use standard breakpoints to optimize layouts for various devices:


 Mobile Devices: @media (max-width: 600px)

 Tablets: @media (max-width: 768px)

 Laptops: @media (max-width: 1024px)

 Large Screens: @media (max-width: 1200px)

6. Conclusion

✔ Responsive Web Design ensures better usability, SEO, and performance.


✔ CSS Media Queries make websites adapt to different screen sizes.
✔ A single responsive design saves time & cost compared to multiple versions.

You might also like