Test On Front-end Web Development! Trivia Questions Quiz
Welcome to the trivia test On Front-end Web Development. This type of development involves producing HTML, CSS and JavaScript for a website or Web Application so that a user can see and interact with them directly. Front end developers are at times referred to as client-side developers. If you are planning to be one of them, be sure to take this quiz and see how knowledgeable you are.
Questions and Answers
- 1.
Does setting margin-top and margin-bottom have an affect on an inline element?
- A.
NO
- B.
YES
Correct Answer
A. NOExplanation
Setting margin-top and margin-bottom does not have an effect on an inline element because inline elements do not have a width or height, and they are not affected by vertical margins. Inline elements are typically used for small pieces of content within a larger block-level element, and their layout is determined by the surrounding text and other inline elements. Margins can only be applied to block-level elements, which have a defined width and height and can be positioned and spaced using margins.Rate this question:
-
- 2.
Does setting padding-top and padding-bottom on an inline element add to its dimensions?
- A.
True
- B.
False
Correct Answer
B. FalseExplanation
Setting padding-top and padding-bottom on an inline element does not add to its dimensions. Padding only affects the space within the element, not its overall size. Inline elements are typically only as wide as their content, and adding padding does not change this. The padding will create space within the element, but it will not increase the width or height of the element itself.Rate this question:
-
- 3.
If you have a <p> element with font-size: 10rem, will the text be responsive when the user resizes / drags the browser window?
- A.
True
- B.
False
Correct Answer
B. FalseExplanation
When the font-size property is set to 10rem, it means that the font size will be 10 times the size of the root element's font size. Since the root element's font size does not change when the user resizes or drags the browser window, the text will not be responsive. Therefore, the answer is false.Rate this question:
-
- 4.
HTML:
- <ul class="shopping-list" id="awesome">
- <li><span>Milk</span></li>
- <li class="favorite" id="must-buy"><span class="highlight">Sausage</span></li>
- </ul>
- ul {
- color: red;
- }
- li {
- color: blue;
- }
- A.
Red
- B.
Blue
- C.
Neither
- D.
Black
Correct Answer
B. BlueExplanation
The text "Sausage" is blue because the CSS rule "li" sets the color of the text inside the "li" element to blue. The CSS rule "ul" does not affect the color of the text inside the "li" element.Rate this question:
- 5.
HTML:
- <ul class="shopping-list" id="awesome">
- <li><span>Milk</span></li>
- <li class="favorite" id="must-buy"><span class="highlight">Sausage</span></li>
- </ul>
- ul li {
- color: blue;
- }
- #must-buy {
- color: black;
- }
- A.
Black
- B.
Blue
- C.
Neither
- D.
Red
Correct Answer
A. BlackExplanation
The text "Sausage" is black because in the CSS code, there is a specific rule targeting the element with the ID "must-buy", and it sets the color property to black.Rate this question:
- 6.
HTML: <p id="example">Hello</p> CSS: #example { margin-bottom: -5px; } What will happen to the position of #example?
- A.
It will move 5px downwards
- B.
All elements succeeding #example with move 5px upwards
- C.
Neither
Correct Answer
B. All elements succeeding #example with move 5px upwardsExplanation
The CSS code "#example { margin-bottom: -5px; }" sets a negative margin-bottom value for the element with the id "example". This will cause the element to move 5px upwards, pulling all elements succeeding it along with it. Therefore, the correct answer is "All elements succeeding #example will move 5px upwards."Rate this question:
-
- 7.
A TARGET value that is used when a webpage is locked in a frame, is
- A.
_self
- B.
_top
- C.
_parent
- D.
_blank
Correct Answer
B. _topExplanation
The "_top" target value is used when a webpage is locked in a frame. It specifies that the linked document should replace the current frame's entire contents with the linked document, effectively breaking out of any frameset. This allows the linked document to be displayed in the full browser window, without any frames.Rate this question:
-
- 8.
Using a <style> element in head section is known as
- A.
External
- B.
Outline
- C.
Internal
- D.
Inline
Correct Answer
C. InternalExplanation
Using a element in the head section of an HTML document is known as internal styling. This method allows for the inclusion of CSS rules directly within the HTML file, making it easier to maintain and apply consistent styles across multiple pages. Unlike inline styling, which applies styles directly to individual HTML elements, internal styling affects all elements within the document that match the specified CSS rules. External styling, on the other hand, involves linking an external CSS file to the HTML document.Rate this question:
-
- 9.
In HTML elements, CSS can be added in different
- A.
2 ways
- B.
3 ways
- C.
4 ways
- D.
5 ways
Correct Answer
B. 3 waysExplanation
HTML elements can have CSS added to them in three different ways. The first way is by using inline CSS, where the CSS code is directly added to the HTML element using the "style" attribute. The second way is by using internal CSS, where the CSS code is placed within the tags in the head section of the HTML document. The third way is by using external CSS, where the CSS code is placed in a separate CSS file and linked to the HTML document using the tag. These three ways provide flexibility in adding and managing CSS styles to HTML elements.Rate this question:
-
- 10.
Browsers displays <em> tag as
- A.
<i>
- B.
<b>
- C.
<strong>
- D.
<u>
Correct Answer
A. <i>Explanation
The browser displays the tag as . The tag is used to emphasize text, and the tag is used to italicize text. Both tags are used for similar purposes, so the browser treats them as the same and displays the tag as .Rate this question:
-
- 11.
Alpha in RGB extension named RGBA, defines
- A.
Hue
- B.
Saturation
- C.
Lightness
- D.
Opacity
Correct Answer
D. OpacityExplanation
The alpha value in the RGB extension named RGBA defines the opacity of a color. It determines how transparent or opaque a color is. A higher alpha value means a color is more opaque, while a lower alpha value means it is more transparent. The opacity value is often used in graphic design and web development to create layers and overlays, allowing different elements to be seen through each other.Rate this question:
-
- 12.
To access an external sheet link is added over section
- A.
<head>
- B.
<!DOCTYPE>
- C.
<h1>
- D.
<body>
Correct Answer
A. <head>Explanation
The given answer, "", is correct because the question states that a link is added over the section "". In HTML, the "" section is used to define information about the HTML document, such as the title, stylesheets, and scripts. So, adding a link over the "" section would allow access to an external stylesheet.Rate this question:
-
- 13.
If form data contains sensitive or personal information, method to use is
- A.
Post
- B.
Get
- C.
Set
- D.
Append
Correct Answer
A. PostExplanation
The correct answer is "Post" because the Post method is used to send data to the server in a secure and confidential manner. When sensitive or personal information is being transmitted, it is important to use the Post method as it sends the data in the body of the HTTP request, rather than in the URL like the Get method. This ensures that the data is not visible in the browser's address bar or in server logs, providing an extra layer of security.Rate this question:
-
- 14.
HTML links are defined with <a> tag and address is specified by attribute
- A.
Hlink
- B.
Href
- C.
Src
- D.
Src-link
Correct Answer
B. HrefExplanation
HTML links are defined with the tag and the address of the link is specified by the href attribute. The href attribute is used to specify the URL or the file path of the destination page that the link should navigate to when clicked.Rate this question:
-
- 15.
For displaying a webpage within a webpage, HTML uses
- A.
Classes
- B.
Div element
- C.
Span Element
- D.
IFrames
Correct Answer
D. IFramesExplanation
To display a webpage within a webpage, HTML uses iFrames. iFrames allow you to embed another HTML document within the current document, creating a window where the embedded webpage is displayed. This is useful when you want to include external content, such as advertisements or external webpages, within your own webpage. By using iFrames, you can easily integrate external content into your webpage without affecting the overall structure or layout.Rate this question:
-
- 16.
A block level element of HTML always starts on a
- A.
New window
- B.
New Tab
- C.
New page
- D.
New Line
Correct Answer
D. New LineExplanation
A block level element of HTML always starts on a new line because block level elements are designed to create a block or a box on the web page. These elements take up the entire width available and force subsequent elements to start on a new line. This ensures that each block level element is visually separated from the previous one, making it easier to structure and style the content on the page.Rate this question:
-
- 17.
An external CSS usually defines style for?
- A.
Single element
- B.
Single HTML page
- C.
Multiple elements
- D.
Multiple HTML pages
Correct Answer
D. Multiple HTML pagesExplanation
An external CSS is typically used to define styles for multiple HTML pages. By linking an external CSS file to multiple HTML pages, the same styles can be applied consistently across all the pages, making it easier to maintain and update the styles. This approach promotes code reusability and helps to keep the HTML files clean and focused on the content, while the CSS file handles the styling aspects.Rate this question:
-
- 18.
Syntax of style attribute of HTML is
- A.
<tagname style="property">
- B.
<tagname style="property:value;">
- C.
<style="value;">
- D.
<style="property;">
Correct Answer
B. <tagname style="property:value;">Explanation
The correct answer is "Rate this question:
-
- 19.
Element to use for making responsive webpages, is called
- A.
<viewres>
- B.
<meta>
- C.
<portview>
- D.
<viewport>
Correct Answer
B. <meta>Explanation
The correct answer is . The element is used to provide metadata about the HTML document, including information about the viewport, character encoding, and other important settings. In the context of making responsive webpages, the element is commonly used to set the viewport, which determines how the webpage is displayed on different devices and screen sizes. By using the correct viewport settings, webpages can adapt and respond to different screen sizes, ensuring a better user experience on both desktop and mobile devices.Rate this question:
-
- 20.
Div element defines section at a
- A.
Page level
- B.
Inline level
- C.
Block level
- D.
Tab level
Correct Answer
C. Block levelExplanation
A element is used to define a section of content on a webpage. It is a block-level element, which means it takes up the entire width of its parent container and creates a new line before and after the element. This allows other elements to be positioned above or below it. Block-level elements are commonly used to group and style related content together, such as paragraphs, headings, and images.Rate this question:
-
- 21.
Which of the following is/are true about Bootstrap?
- A.
Free front-end framework.
- B.
Open source product.
- C.
It gives you the ability to create responsive designs
- D.
All of the above
Correct Answer
D. All of the aboveExplanation
Bootstrap is a free front-end framework that is also an open source product. It provides users with the ability to create responsive designs, meaning that the layout of the website or application will automatically adjust to different screen sizes and devices. Therefore, all of the given statements about Bootstrap are true.Rate this question:
-
- 22.
What layout is used for providing 100% width in Bootstrap?
- A.
Fixed layout
- B.
Fluid layout
- C.
Both (a)and (b)
- D.
None of the above
Correct Answer
B. Fluid layoutExplanation
The correct answer is Fluid layout. In Bootstrap, a fluid layout is used to provide 100% width. This means that the layout will automatically adjust to fit the width of the screen or container it is placed in. Unlike a fixed layout, which has a fixed width, a fluid layout is responsive and adapts to different screen sizes and devices. This allows for a more flexible and dynamic design that can accommodate various screen resolutions.Rate this question:
-
- 23.
Bootstrap global default font-size is
- A.
15px
- B.
14px
- C.
13px
- D.
None
Correct Answer
B. 14pxExplanation
The correct answer is 14px. Bootstrap has a default font-size of 14px, which means that all text within Bootstrap components will be displayed with a font-size of 14 pixels unless specified otherwise.Rate this question:
-
- 24.
Bootstrap’s grid system uses up to:
- A.
12 columns
- B.
6 columns
- C.
14 columns
- D.
10 columns
Correct Answer
A. 12 columnsExplanation
Bootstrap's grid system uses up to 12 columns. This means that when designing a layout using Bootstrap, you can divide the available space into 12 equal-width columns. This allows for flexibility in creating responsive designs, as you can easily adjust the width of each column based on the screen size or device being used. By using a 12-column grid system, Bootstrap provides a versatile and scalable framework for building responsive websites.Rate this question:
-
- 25.
Through which class we can make a fixed navigation bar at the top?
- A.
.navbar-fixed
- B.
.navbar-fixed-top
- C.
Both (A) and (B)
- D.
None
Correct Answer
B. .navbar-fixed-topExplanation
The correct answer is ".navbar-fixed-top" because this class can be used to create a fixed navigation bar at the top of the page. The class name suggests that it is specifically designed for this purpose, indicating that it will keep the navigation bar fixed in its position at the top of the screen even when scrolling. The other option, ".navbar-fixed", does not specify the position and could potentially be used for other types of fixed navigation bars.Rate this question:
-
- 26.
Which plugin is used to create tooltip?
- A.
Modal
- B.
Dialog box
- C.
Popup
- D.
Tooltip
Correct Answer
D. TooltipExplanation
The correct answer is "tooltip". A tooltip is a small pop-up box that appears when the user hovers over an element, providing additional information or context about that element. It is commonly used to display helpful hints, explanations, or labels for buttons, icons, or links on a website or application. The tooltip plugin allows developers to easily create and customize tooltips, specifying the content, position, and styling of the tooltip box.Rate this question:
-
- 27.
Which of the following class is used to create a button as a link in bootstrap?
- A.
.btn-hyperlink
- B.
.btn-link
- C.
.btn-anchor
- D.
None of these
Correct Answer
B. .btn-linkExplanation
The correct answer is .btn-link. In Bootstrap, the .btn-link class is used to create a button that appears as a link. This class gives the button a link-like appearance by removing the default button styling and adding a text-decoration underline. It is commonly used when you want to create a button that behaves like a link, allowing users to navigate to a different page or section of the website.Rate this question:
-
- 28.
Which class is used to make a standard /default button in bootstrap?
- A.
.btn-primary
- B.
.btn-default
- C.
.btn
- D.
None of the above
Correct Answer
C. .btnExplanation
The correct answer is ".btn". In Bootstrap, the ".btn" class is used to create a standard/default button. It provides the basic styling and structure for a button element. The other options mentioned, ".btn-primary" and ".btn-default", are specific variations of the button class that provide different styles and colors. Therefore, the correct class to make a standard/default button in Bootstrap is ".btn".Rate this question:
-
- 29.
Which of the following grid class is used for desktops?
- A.
Lg
- B.
Md
- C.
Sm
- D.
Xs
Correct Answer
B. MdExplanation
The "md" grid class is used for desktops. This class is part of the Bootstrap grid system, which allows for responsive design and the creation of multi-column layouts. The "md" class stands for medium-sized devices, such as tablets and desktop computers. It is used to define the layout and positioning of elements on the page specifically for these devices.Rate this question:
-
- 30.
Bootstrap grid class is used for tablets?
- A.
.tablet
- B.
.tab
- C.
Sm
- D.
Lg
Correct Answer
C. SmExplanation
The "sm" class in Bootstrap grid is used for tablets.Rate this question:
-
- 31.
How do you insert a comment in a CSS file?
- A.
// this is a comment //
- B.
/* this is a comment */
- C.
‘ this is a comment
- D.
// this is a comment
Correct Answer
B. /* this is a comment */Explanation
In CSS, comments are inserted using the /* */ syntax. This allows developers to add notes or explanations within the code that will not be interpreted by the browser. The correct answer, /* this is a comment */, demonstrates the proper way to insert a comment in a CSS file. The other options are incorrect as they either use the wrong syntax (//) or include quotation marks (‘’), which are not recognized as comments in CSS.Rate this question:
-
- 32.
Which plugin is used to create a modal window?
- A.
Modal
- B.
Popup
- C.
Window
- D.
Dialog box
Correct Answer
A. ModalExplanation
The correct answer is "modal" because a modal window is a type of window that requires the user to interact with it before they can return to the main application. It typically appears as a pop-up window that blocks other actions on the screen until it is closed or the user provides the necessary input. The "modal" plugin is specifically designed to create and manage modal windows in web applications.Rate this question:
-
- 33.
Javascript is _________ language.
- A.
Programming
- B.
Application
- C.
Scripting
- D.
None of these
Correct Answer
C. ScriptingExplanation
Javascript is considered a scripting language because it is primarily used to create scripts that are executed on the client-side of a web application. It is often embedded within HTML code and runs within a web browser. Unlike programming languages, which are used to create standalone applications, scripting languages are used to automate tasks and enhance the functionality of existing applications. Therefore, Javascript's main purpose is to add interactivity and dynamic features to web pages, making it a scripting language rather than a programming language or application language.Rate this question:
-
- 34.
Syntax to change font type of a heading in HTML is
- A.
<h1 style='font-type:verdana;'>
- B.
<h1 style="font-family:verdana;">
- C.
<style="font-family:verdana;">
- D.
<style='font-type:verdana;'>
Correct Answer
B. <h1 style="font-family:verdana;">Explanation
The correct answer is . This is because the font-family property is used to specify the font type in CSS, and the value "verdana" is the correct syntax for specifying the Verdana font.Rate this question:
-
- 35.
In HTML5, default character-set is known to be of
- A.
UTF-5
- B.
UTF-6
- C.
UTF-7
- D.
UTF-8
Correct Answer
D. UTF-8Explanation
The default character-set in HTML5 is UTF-8. UTF-8 is a variable-width character encoding that can represent any character in the Unicode standard, yet it is backward compatible with ASCII. It is widely used and supported by modern web browsers and ensures that text is displayed correctly regardless of the language or special characters used.Rate this question:
-
- 36.
A TARGET value that is used when a webpage is opened in a new tab, is
- A.
_self
- B.
_top
- C.
_parent
- D.
_blank
Correct Answer
D. _blankExplanation
When a webpage is opened in a new tab, the "_blank" target value is used. This target value instructs the browser to open the linked webpage in a new tab or window, depending on the user's browser settings.Rate this question:
-
- 37.
Array elements are accessed using their
- A.
Length
- B.
Pointers
- C.
Object
- D.
Index
Correct Answer
D. IndexExplanation
Array elements are accessed using their index. In an array, each element is assigned a unique index number starting from 0. This index number is used to access or retrieve the value stored at that particular position in the array. By specifying the index, we can easily locate and retrieve the desired element from the array. Therefore, the correct answer is "Index".Rate this question:
-
- 38.
URL encoding replaces a space in URL with sign
- A.
?
- B.
+
- C.
%
- D.
&
Correct Answer
B. +Explanation
URL encoding replaces a space in a URL with a plus sign (+). This is because spaces are not allowed in URLs and need to be represented by a special character. The plus sign is commonly used as the replacement for spaces in URL encoding.Rate this question:
-
- 39.
HTML element <div> describes
- A.
Divisor
- B.
Divided
- C.
Division
- D.
Diversion
Correct Answer
C. DivisionExplanation
The HTML element is used to create a division or section in a web page. It is a container that allows you to group and organize other HTML elements. This division can be used to apply styling, layout, or functionality to a specific section of the page. Therefore, the correct answer is "division".Rate this question:
-
- 40.
A HTML element can be assigned a style through attribute named
- A.
Design
- B.
Theme
- C.
Style
- D.
Template
Correct Answer
C. StyleExplanation
An HTML element can be assigned a style through the "style" attribute. This attribute allows developers to specify inline CSS (Cascading Style Sheets) rules for individual HTML elements. By using the "style" attribute, developers can define various properties such as color, font size, background color, etc., directly within the HTML tag. This provides a way to customize the appearance of specific elements without the need for external CSS files or classes.Rate this question:
-
- 41.
Browsers displays <strong> tag as
- A.
<i>
- B.
<b>
- C.
<u>
Correct Answer
B. <b>Explanation
The correct answer is because the tag is used to indicate strong emphasis on the text, typically displayed as bold. The tag is specifically used to make the text bold, so it is the most appropriate tag for browsers to display the tag as. The tag is used for italicizing text, and the tag is used for underlining text, so they are not the correct options for displaying the tag.Rate this question:
-
- 42.
Attribute in HTML that defines location of where to open linked area, is said to be
- A.
Target
- B.
Framename
- C.
VisitLink
- D.
OpenLink
Correct Answer
A. TargetExplanation
The attribute in HTML that defines the location of where to open a linked area is called "target". This attribute specifies the name of the window or frame where the linked content will be displayed when clicked.Rate this question:
-
- 43.
Not a way to composite HTML Colors ?
- A.
RGBA
- B.
HSL
- C.
CNYK
- D.
HEX
Correct Answer
C. CNYKExplanation
The correct answer is "CNYK". This is because "CNYK" is not a valid way to composite HTML colors. The correct term is "CMYK", which stands for Cyan, Magenta, Yellow, and Key (black). CMYK is a color model used in printing, while RGBA, HSL, and HEX are all valid ways to represent colors in HTML.Rate this question:
-
- 44.
All HTML documents must start with a declaration of
- A.
<DOCTYPE html>
- B.
<!DOCTYPE html>
- C.
<html>
- D.
<!html>
Correct Answer
B. <!DOCTYPE html>Explanation
The correct answer is "". This is because the declaration is used to specify the version of HTML that the document is written in. It tells the browser how to interpret the HTML code and ensures that the document is rendered correctly.Rate this question:
-
- 45.
An element named content have other elements of
- A.
2 types
- B.
3 types
- C.
4 types
- D.
5 types
Correct Answer
A. 2 typesExplanation
The element named "content" has two types of other elements associated with it.Rate this question:
-
- 46.
Syntax of style attribute of HTML is
- A.
<tagname style="property">
- B.
<tagname style="property:value;">
- C.
<style="value;">
- D.
<style="property;">
Correct Answer
B. <tagname style="property:value;">Explanation
The correct answer is "". This is the correct syntax for the style attribute in HTML. The style attribute is used to add inline CSS styles to an HTML element. It is written within the opening tag of the element and consists of one or more property-value pairs, separated by semicolons. Each property is followed by a colon and its corresponding value.Rate this question:
-
- 47.
When an attribute of HTML value contains double quotes, it is necessary to use
- A.
Single quotes
- B.
Double quotes
- C.
Single+Double quotes
- D.
No quotes
Correct Answer
A. Single quotesExplanation
When an attribute value in HTML contains double quotes, it is necessary to use single quotes instead. This is because using double quotes within the attribute value would cause a conflict and result in an incorrect interpretation of the HTML structure. By using single quotes, the attribute value can be properly enclosed without any conflicts or parsing errors.Rate this question:
-
- 48.
Element to use for making responsive webpages, is called
- A.
<viewres>
- B.
<meta>
- C.
<portview>
- D.
<viewport>
Correct Answer
B. <meta>Explanation
The correct answer is "".
The element is used in HTML to provide metadata about the webpage. It includes information such as the character encoding, viewport settings, and other important details. In the context of making responsive webpages, the element is used to set the viewport, which determines how the webpage is displayed on different devices and screen sizes. By using the appropriate viewport settings in the element, webpages can be made responsive and adapt to different devices and screen resolutions.Rate this question:
-
- 49.
In HTML5, a list of pre-defined options for an <input> element can be defined through
- A.
<datalist>
- B.
<select>
- C.
<option>
- D.
<output>
Correct Answer
A. <datalist>Explanation
The correct answer is . In HTML5, the element is used to provide a list of pre-defined options for an element. It allows users to select options from a dropdown list or type their own value. The element is used to create a dropdown list, the element is used to define an option in a dropdown list, and the element is used to display the result of a calculation in a form.Rate this question:
-
- 50.
Numeric array values can be sorted through an array method named as
- A.
Sort()
- B.
Length.sort()
- C.
Reverse()
- D.
Compare()
Correct Answer
D. Compare()Explanation
The given answer is incorrect. The correct method to sort numeric array values is the "sort()" method. The "compare()" method does not exist for sorting arrays.Rate this question:
-
Quiz Review Timeline +
Our quizzes are rigorously reviewed, monitored and continuously updated by our expert board to maintain accuracy, relevance, and timeliness.
-
Current Version
-
Mar 21, 2023Quiz Edited by
ProProfs Editorial Team -
Feb 25, 2019Quiz Created by
Jatan
Back to top