Gyansetu Team 
Practice these MCQs to sharpen your Web Designing skills and prepare confidently for job interviews or certification exams.
Whether you’re aiming to land a front-end development role or build stunning, responsive websites using HTML, CSS, JavaScript, and modern UI/UX principles — you’re in the right place.
Get access to 70+ Web Designing MCQs covering everything from semantic HTML, CSS layouts and animations, responsive design, JavaScript interactivity, and accessibility standards — all with detailed answers to strengthen your foundation.
No guesswork. Just solid prep.
Q1: Which HTML tag is used to insert an image?
A. <image>
B. <img>
C. <src>
D. <picture>
✅ Answer: B
🧠 The <img> tag is used to embed images in an HTML document.
Q2: What will this CSS rule do?
p {
color: red;
}
A. Changes background to red
B. Adds border to paragraph
C. Changes text color to red
D. Makes text bold
✅ Answer: C
🧠 This CSS rule sets the text color of all <p> elements to red.
Q3: How do you create a function in JavaScript?
A. function = myFunc()
B. function:myFunc()
C. function myFunc()
D. create.myFunc()
✅ Answer: C
🧠 The correct syntax is: function myFunc() { }
Q4: What does the following HTML code do?
<a href=”https://example.com”>Visit</a>
A. Adds a script
B. Creates an image
C. Links to another page
D. Creates a form
✅ Answer: C
🧠 The <a> tag with href creates a hyperlink to another page.
Q5: Which of the following makes a webpage mobile responsive?
A. Using tables
B. Adding <meta viewport>
C. Using fixed-width layouts
D. Large images
✅ Answer: B
🧠 The meta viewport tag helps scale pages correctly on different devices.
Q6: Which CSS declaration makes an element a flex container?
A. display: inline;
B. position: absolute;
C. display: flex;
D. float: left;
✅ Answer: C
🧠 display: flex; turns an element into a flex container.
Q7: What is the output of this JavaScript code?
A. ‘object’
B. ‘array’
C. ‘list’
D. ‘undefined’
✅ Answer: A
🧠 In JavaScript, arrays are technically objects, so typeof [] returns ‘object’.
Q8: Which HTML5 element is used to display video content?
A. <media>
B. <vid>
C. <movie>
D. <video>
✅ Answer: D
🧠 The <video> tag is used to embed video files.
Enroll Today, Design Tomorrow’s Web
Q9: Which CSS property is used to change font type?
A. font-weight
B. font-family
C. font-size
D. font-style
✅ Answer: B
🧠 font-family specifies the typeface used for an element.
Q10: What does this HTML snippet do?
<input type=”text” placeholder=”Enter name” />
A. Creates a button
B. Creates a dropdown
C. Creates a text field with placeholder
D. Creates a label
✅ Answer: C
🧠 This input field displays a placeholder text until the user types something.
Q11: Which CSS property is used to create space between elements?
A. padding
B. margin
C. border
D. width
✅ Answer: B
🧠 Margin adds space outside the element’s border, creating space between elements.
Q12: What does this JavaScript code output?
console.log(2 + ‘2’);
A. 4
B. 22
C. NaN
D. undefined
✅ Answer: B
🧠 JavaScript concatenates a number with a string, resulting in ’22’.
Q13: Which HTML tag is used for a drop-down list?
A. <input>
B. <list>
C. <dropdown>
D. <select>
✅ Answer: D
🧠 The <select> tag is used to create a dropdown menu in HTML.
Q14: What will this CSS rule do?
div {
display: none;
}
A. Hide the element
B. Fade the element
C. Remove element spacing
D. Change text
✅ Answer: A
🧠 display: none hides the element completely, removing it from layout flow.
Q15: How do you apply a style to all <p> elements inside a <div>?
A. div > p
B. div p
C. p div
D. div.p
✅ Answer: B
🧠 div p selects all <p> tags that are descendants of a <div>.
Q16: What does this HTML snippet do?
<input type=”checkbox” />
A. Creates a radio button
B. Creates a checkbox
C. Creates a dropdown
D. Creates a text input
✅ Answer: B
🧠 This creates a checkbox input field.
Q17: Which JavaScript method selects elements by class name?
A. getElementById()
B. querySelectorAll()
C. getElementsByClassName()
D. getElement()
✅ Answer: C
🧠 This method selects all elements with the given class.
Q18: Which of these techniques is used to make a website responsive?
A. Fixed widths
B. Media queries
C. Tables
D. Inline styles
✅ Answer: B
🧠 Media queries allow for responsive layouts based on screen size.
Q19: What will this JavaScript code return?
console.log(10 == ’10’);
A. false
B. true
C. undefined
D. NaN
✅ Answer: B
🧠 The == operator compares values loosely and type coercion happens.
Q20: Which property sets the inner space of an element?
A. padding
B. margin
C. spacing
D. border
✅ Answer: A
🧠 Padding is the space between the content and the border of an element.
Q21: Which HTML element is used to define emphasized text?
A. <b>
B. <strong>
C. <i>
D. <em>
✅ Answer: D
🧠 <em> is used to emphasize text semantically, often rendered in italics.
Q22: What will this JavaScript code output?
let x = [1, 2, 3];
console.log(x.length);
A. 2
B. 3
C. undefined
D. null
✅ Answer: B
🧠 The .length property returns the number of elements in an array.
Q23: What is the correct CSS syntax to make text italic?
A. font-style: italic;
B. style: italic;
C. font: italic;
D. text-style: italic;
✅ Answer: A
🧠 font-style: italic; is the proper way to italicize text in CSS.
Q24: What does this HTML code represent?
<label for=”email”>Email:</label>
<input type=”email” id=”email” />
A. A dropdown menu
B. A radio button
C. A labeled email input
D. A disabled form
✅ Answer: C
🧠 The <label> tag is associated with the input using the for and id attributes.
Q25: Which CSS property controls the stacking order of elements?
A. position
B. z-index
C. float
D. display
✅ Answer: B
🧠 z-index defines the stack level of elements that overlap.
Q26: What is the result of this JavaScript code?
let a = 5;
let b = “5”;
console.log(a === b);
A. true
B. false
C. undefined
D. null
✅ Answer: B
🧠 === checks both value and type; here, one is a number and the other is a string.
Q27: Which HTML tag is used for creating a number input field?
A. <input type=”text”>
B. <input type=”range”>
C. <input type=”number”>
D. <input type=”digit”>
✅ Answer: C
🧠 <input type=”number”> allows only numerical inputs.
Q28: Which JavaScript method can be used to convert a string to an integer?
A. Number()
B. parseInt()
C. parseFloat()
D. All of the above
✅ Answer: D
🧠 All listed methods can convert strings to numbers, though with different precision.
Q29: Which CSS rule makes text uppercase?
A. text-decoration: uppercase;
B. font-style: caps;
C. text-transform: uppercase;
D. letter-style: upper;
✅ Answer: C
🧠 text-transform: uppercase; changes all characters to capital letters.
Q30: What will this HTML produce?
<ul>
<li>One</li>
<li>Two</li>
</ul>
A. A table
B. A numbered list
C. A bulleted list
D. A dropdown
✅ Answer: C
🧠 The <ul> tag creates an unordered (bulleted) list.
Q31: What will this JavaScript code return?
typeof NaN;
A. “number”
B. “NaN”
C. “undefined”
D. “object”
✅ Answer: A
🧠 In JavaScript, NaN is still of type “number”, even though it means “Not a Number”.
Q32: Which CSS unit is relative to the parent element’s font size?
A. px
B. em
C. %
D. vh
✅ Answer: B
🧠 em is relative to the font-size of the parent element.
Q33: What does this HTML snippet do?
<input type=”submit” value=”Send” />
A. Submits the form
B. Creates a button
C. Adds a hyperlink
D. Creates a label
✅ Answer: A
🧠 An input of type submit creates a form submission button.
Q34: Which JavaScript method is used to select a single element by CSS selector?
A. getElementById()
B. querySelector()
C. getElementsByClassName()
D. querySelect()
✅ Answer: B
🧠 querySelector() returns the first element that matches the CSS selector.
Q35: Which CSS property is used to make a background image cover the entire element?
A. background-fill: cover;
B. background-size: fill;
C. background-size: cover;
D. bg-size: full;
✅ Answer: C
🧠 background-size: cover; scales the background image to cover the entire area.
Q36: What is the result of this JavaScript code?
Boolean(“”)
A. true
B. false
C. undefined
D. “false”
✅ Answer: B
🧠 An empty string is falsy in JavaScript, so Boolean(“”) returns false.
Q37: What does this HTML code represent?
<ol>
<li>First</li>
<li>Second</li>
</ol>
A. An unordered list
B. A bulleted list
C. A numbered list
D. A dropdown menu
✅ Answer: C
🧠 The <ol> tag stands for “ordered list”, which displays numbered items.
Q38: What does this CSS rule do?
a:hover {
color: blue;
}
A. Makes links blue always
B. Makes links blue when clicked
C. Makes links blue when hovered
D. Hides the link
✅ Answer: C
🧠 :hover applies the style when the user hovers over the link.
Q39: Which HTML element is used to embed JavaScript code directly into the page?
A. <script>
B. <code>
C. <js>
D. <style>
✅ Answer: A
🧠 The <script> tag allows you to embed JavaScript code inside HTML.
Q40: What is the default value of the position property in CSS?
A. absolute
B. fixed
C. relative
D. static
✅ Answer: D
🧠 By default, all HTML elements are positioned using static.
Q41: What is the output of this JavaScript snippet?
console.log(“5” + 3);
A. 8
B. 53
C. 2
D. Error
✅ Answer: B
🧠 The + operator concatenates a string and a number, resulting in “53”.
Q42: Which HTML attribute is used to specify an inline style?
A. font
B. style
C. class
D. styles
✅ Answer: B
🧠 The style attribute allows you to add inline CSS directly to an HTML element.
Q43: Which CSS rule makes the text center-aligned?
A. text-center: true;
B. align-text: center;
C. text-align: center;
D. horizontal-align: center;
✅ Answer: C
🧠 text-align: center; is the correct CSS syntax for centering text.
Q44: What does this HTML snippet do?
<input type=”range” min=”1″ max=”10″>
A. Creates a number input
B. Creates a checkbox
C. Creates a slider control
D. Creates a dropdown
✅ Answer: C
🧠 type=”range” creates a slider input between 1 and 10.
Q45: Which JavaScript method removes the last element of an array?
A. shift()
B. pop()
C. slice()
D. splice()
✅ Answer: B
🧠 pop() removes and returns the last element of an array.
Q46: What is the correct CSS syntax to select all <h1> elements?
A. h1 {}
B. #h1 {}
C. .h1 {}
D. *h1 {}
✅ Answer: A
🧠 Use the element selector directly: h1 {}
Q47: What will this code output?
console.log(typeof undefined);
A. “undefined”
B. “null”
C. “object”
D. “boolean”
✅ Answer: A
🧠 The typeof operator returns “undefined” for undefined variables.
Q48: Which CSS property allows text to wrap within an element?
A. text-break
B. wrap
C. overflow
D. word-wrap
✅ Answer: D
🧠 word-wrap: break-word; or overflow-wrap: break-word; allows long words to wrap.
Q49: Which tag is used to display a progress bar in HTML5?
A. <progress>
B. <meter>
C. <bar>
D. <slider>
✅ Answer: A
🧠 <progress> is a semantic tag used to show a progress bar.
Q50: Which method adds a new element to the beginning of an array in JavaScript?
A. append()
B. unshift()
C. push()
D. shift()
✅ Answer: B
🧠 unshift() adds one or more elements to the beginning of an array.
From Basics to Brilliance – Start Your Web Journey
Q51: What will this JavaScript code return?
console.log(typeof null);
A. “null”
B. “undefined”
C. “object”
D. “boolean”
✅ Answer: C
🧠 Due to a quirk in JavaScript, typeof null returns “object”.
Q52: Which HTML attribute is used to provide alternative text for an image?
A. src
B. alt
C. title
D. href
✅ Answer: B
🧠 The alt attribute provides text if the image fails to load and is used for accessibility.
Q53: What does this CSS rule do?
div {
border: 1px solid black;
}
A. Sets background to black
B. Applies a black border
C. Makes text bold
D. Creates a shadow
✅ Answer: B
🧠 This rule sets a solid 1-pixel black border around all <div> elements.
Q54: Which method adds one or more elements to the end of an array?
A. append()
B. push()
C. join()
D. addTo()
✅ Answer: B
🧠 The push() method appends elements to the end of an array.
Q55: Which tag is used to create a table row in HTML?
A. <tr>
B. <td>
C. <th>
D. <table-row>
✅ Answer: A
🧠 <tr> stands for table row.
Q56: Which CSS property makes an element fixed in place when scrolling?
A. position: sticky;
B. position: relative;
C. position: fixed;
D. z-index: 1000;
✅ Answer: C
🧠 position: fixed; keeps the element in the same place even while scrolling.
Q57: What does this HTML code do?
<input type=”password”>
A. Hides input text
B. Encrypts the password
C. Adds a checkbox
D. Validates form
✅ Answer: A
🧠 The input hides the characters typed by the user (but it does not encrypt them).
Q58: Which JavaScript function is used to delay code execution?
A. wait()
B. pause()
C. setTimeout()
D. setInterval()
✅ Answer: C
🧠 setTimeout() executes code after a given delay in milliseconds.
Q59: Which CSS property defines the transparency of an element?
A. opacity
B. visibility
C. alpha
D. display
✅ Answer: A
🧠 opacity ranges from 0 (fully transparent) to 1 (fully opaque).
Q60: Which HTML tag is used to embed an external webpage in the current page?
A. <link>
B. <embed>
C. <iframe>
D. <frame>
✅ Answer: C
🧠 <iframe> embeds another HTML document within the current page.
Mastering these Web Designing MCQs is a valuable step toward becoming a skilled front-end developer and enhancing your design and coding proficiency.
If you’re ready to boost your career with hands-on projects and expert-led training, join our Web Designing course in Gurgaon at Gyansetu and become industry-ready with confidence.
