Front-End-Test
Marks: 50
Section-A
Attempt All 10 Questions: (20Marks)
Q1. What is HTML and also explain Tags & Elements of HTML.
Ans: HTML (HyperText Markup Language) is the standard language used to create and structure web pages.
Tags are keywords enclosed in angle brackets defining elements in an HTML document.
Elements consist of an opening tag, content, and a closing tag
Q2. What are the different types of Selectors in CSS?
Ans:universal selector,id selector,class selector,tag selector, Group Selector
Q3. What is the Box model in CSS? Which CSS properties are part of it?
Ans: The CSS Box Model is a fundamental concept that defines how elements are structured and
spaced on a webpage. Content,padding,border,margin
Q4. Define JavaScript and also explain What is DOM?
Ans: JavaScript is a interpreted programming language used to create dynamic and interactive web
pages.DOM (Document Object Model) is a structured representation of an HTML document that
allows JavaScript to access, manipulate, and modify elements, attributes, and content dynamically.
Q5
Q6. Explain Hoisting in javascript.
Ans: Hoisting in JavaScript is a behavior where variable and function declarations are moved to the top of
their containing scope during the compilation phase, before the code is executed.
Q7. . In how many ways can we position an HTML element? Or what are the permissible values of the
position attribute?
Ans: n CSS, the position property is used to control the placement of an HTML element. The permissible
values of the position attribute are: static,relative, absolute,fixed, sticky
Q8. Explain Difference between “ == “ and “ === “ operators.
Ans:”==” Compares values after type conversion and
“===” Compares both value and data type.
Q9. Explain Difference between var and let keyword in javascript.
Ans: var hoisted and intialised as undefined
Var allowed redeclaration with in the same scope
Let hoisted but in temporal dead zone
Let redeclaration not allowed in the same scope
Q10. Explain Closures in JavaScript.
Ans: A closure in JavaScript is a function that retains access to its outer scope variables even after the
outer function has finished executing.
Section –B
Attempt Any 5 Questions: (30)
Q11. How to create any form with the background of the form as blur, and the background image of the
body should be an image without any repetition?
Ans: Set the body background image with no-repeat and cover.
Use backdrop-filter: blur() on the form or its container for the blur effect.
Center the form using flexbox or grid.
Q12. Explain call(), apply() and, bind() methods with implement.
Ans: Use call() when passing arguments individually.
const person = {
name: "Alice",
};
function greet(greeting) {
console.log(`${greeting}, ${this.name}!`);
Use apply() when passing arguments as an array.
greet.call(person, "Hello");
const numbers = [3, 8, 5];
console.log(Math.max.apply(null, numbers));
const user = {
name: "John",
};
Use bind() when you need to create a new function with this permanently set.
function sayName() {
console.log(this.name);
}
const boundFunction = sayName.bind(user);
boundFunction(); // Output: John
Q13. What do you mean by transformation in CSS, define it types and syntax with examples?
Ans: CSS Transformation allows elements to be visually manipulated using translate, scale, rotate, skew,
and matrix without affecting document flow.
.box {
width: 100px;
height: 100px;
background: blue;
transform: rotate(30deg) scale(1.2);
transform: translate(50px, 30px) rotate(45deg) scale(1.2);
Q14. Write the Short Note:
a) What is Call Stack?
Ans: The Call Stack in JavaScript is a data structure that keeps track of function execution in a Last
In, First Out (LIFO) order.
b) What are promises?
c) Ans; A Promise in JavaScript is an asynchronous object that represents a value which may be
available now, in the future, or never, with states: pending, fulfilled, or rejected.
Q15. Create a login form with username and password and a submit button, but the condition is that
without entering the details if i click on the submit button then it should show a pop-up that "field
shouldn't be empty..."?
Ans: <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Login Form</title>
</head>
<body>
<div class="login-container">
<h2>Login</h2>
<form onsubmit="return validateForm()">
<input type="text" id="username" placeholder="Username">
<input type="password" id="password" placeholder="Password">
<button type="submit">Submit</button>
</form>
</div>
<script>
function validateForm() {
let username = document.getElementById("username").value.trim();
let password = document.getElementById("password").value.trim();
if (username === "" || password === "") {
alert("Fields shouldn't be empty...");
return false; // Prevent form submission
return true; // Submit form if valid
</script>
</body>
</html>
