Test On Front-end Web Development! Trivia Questions Quiz
-
A HTML element can be assigned a style through attribute named
-
Design
-
Theme
-
Style
-
Template
-
About This 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.
Quiz Preview
- 2.
HTML links are defined with <a> tag and address is specified by attribute
-
Hlink
-
Href
-
Src
-
Src-link
Correct Answer
A. 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:
-
- 3.
In HTML, unordered list items are marked with
-
Bullets
-
Numerical
-
Increasingly
-
Alphabetically
Correct Answer
A. BulletsExplanation
In HTML, unordered list items are marked with bullets. This means that when creating a list using the tag, each item in the list will be displayed with a bullet point in front of it. This is the default style for unordered lists in HTML, and it helps to visually distinguish each item in the list.Rate this question:
-
- 4.
All HTML documents must start with a declaration of
-
<DOCTYPE html>
-
<!DOCTYPE html>
-
<html>
-
<!html>
Correct Answer
A. <!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:
-
- 5.
Browsers displays <strong> tag as
-
<i>
-
<b>
-
<u>
Correct Answer
A. <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:
-
- 6.
A block level element of HTML always starts on a
-
New window
-
New Tab
-
New page
-
New Line
Correct Answer
A. 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:
-
- 7.
Font to be used for an HTML element can be defined through property
-
Font
-
Font-name
-
Font-src
-
Font-family
Correct Answer
A. Font-familyExplanation
The correct answer is "Font-family." This property in HTML is used to define the font to be used for an HTML element. It allows you to specify a list of font families, in order of preference, that should be used for the text content of the element. If the first font in the list is not available, the browser will try the next font in the list until a suitable font is found or the list is exhausted.Rate this question:
-
- 8.
In HTML5, default character-set is known to be of
-
UTF-5
-
UTF-6
-
UTF-7
-
UTF-8
Correct Answer
A. 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:
-
- 9.
How do you insert a comment in a CSS file?
-
// this is a comment //
-
/* this is a comment */
-
‘ this is a comment
-
// this is a comment
Correct Answer
A. /* 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:
-
- 10.
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;
- }
-
Red
-
Blue
-
Neither
-
Black
Correct Answer
A. 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:
- 11.
Syntax of style attribute of HTML is
-
<tagname style="property">
-
<tagname style="property:value;">
-
<style="value;">
-
<style="property;">
Correct Answer
A. <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:
-
- 12.
Syntax of style attribute of HTML is
-
<tagname style="property">
-
<tagname style="property:value;">
-
<style="value;">
-
<style="property;">
Correct Answer
A. <tagname style="property:value;">Explanation
The correct answer is "Rate this question:
-
- 13.
Which of the following is/are true about Bootstrap?
-
Free front-end framework.
-
Open source product.
-
It gives you the ability to create responsive designs
-
All of the above
Correct Answer
A. 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:
-
- 14.
HTML element <div> describes
-
Divisor
-
Divided
-
Division
-
Diversion
Correct Answer
A. 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:
-
- 15.
Which plugin is used to create tooltip?
-
Modal
-
Dialog box
-
Popup
-
Tooltip
Correct Answer
A. 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:
-
- 16.
Bootstrap’s grid system uses up to:
-
12 columns
-
6 columns
-
14 columns
-
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:
-
- 17.
To access an external sheet link is added over section
-
<head>
-
<!DOCTYPE>
-
<h1>
-
<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:
-
- 18.
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;
- }
-
Black
-
Blue
-
Neither
-
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:
- 19.
Div element defines section at a
-
Page level
-
Inline level
-
Block level
-
Tab level
Correct Answer
A. 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:
-
- 20.
Syntax to change font type of a heading in HTML is
-
<h1 style='font-type:verdana;'>
-
<h1 style="font-family:verdana;">
-
<style="font-family:verdana;">
-
<style='font-type:verdana;'>
Correct Answer
A. <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:
-
- 21.
Attribute in HTML that defines location of where to open linked area, is said to be
-
Target
-
Framename
-
VisitLink
-
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:
-
- 22.
Alpha in RGB extension named RGBA, defines
-
Hue
-
Saturation
-
Lightness
-
Opacity
Correct Answer
A. 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:
-
- 23.
For displaying a webpage within a webpage, HTML uses
-
Classes
-
Div element
-
Span Element
-
IFrames
Correct Answer
A. 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:
-
- 24.
Which plugin is used to create a modal window?
-
Modal
-
Popup
-
Window
-
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:
-
- 25.
Array elements are accessed using their
-
Length
-
Pointers
-
Object
-
Index
Correct Answer
A. 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:
-
- 26.
In HTML elements, CSS can be added in different
-
2 ways
-
3 ways
-
4 ways
-
5 ways
Correct Answer
A. 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:
-
- 27.
Element to use for making responsive webpages, is called
-
<viewres>
-
<meta>
-
<portview>
-
<viewport>
Correct Answer
A. <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:
-
- 28.
Javascript is _________ language.
-
Programming
-
Application
-
Scripting
-
None of these
Correct Answer
A. 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:
-
- 29.
A TARGET value that is used when a webpage is opened in a new tab, is
-
_self
-
_top
-
_parent
-
_blank
Correct Answer
A. _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:
-
- 30.
Element to use for making responsive webpages, is called
-
<viewres>
-
<meta>
-
<portview>
-
<viewport>
Correct Answer
A. <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:
-
- 31.
A sequence of characters forming a
-
Pattern Expression
-
Regular expression
-
Expression parsing
-
Expression detailing
Correct Answer
A. Regular expressionExplanation
Regular expressions are a sequence of characters that define a search pattern. They are commonly used in programming and text processing to match and manipulate strings. Regular expressions allow for powerful and flexible pattern matching, making it easier to search for specific patterns in a given text. Therefore, "Regular expression" is the correct answer as it accurately describes the given sequence of characters and their purpose.Rate this question:
-
- 32.
An external CSS usually defines style for?
-
Single element
-
Single HTML page
-
Multiple elements
-
Multiple HTML pages
Correct Answer
A. 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:
-
- 33.
A HTML element known to be <ins>, defines
-
Incapsulation
-
Insertion
-
Instance
-
Instantiation
Correct Answer
A. InsertionExplanation
The correct answer is "Insertion". The HTML element <ins> is used to mark up inserted content in a document. It represents text that has been added to the document.Rate this question:
-
- 34.
Bootstrap global default font-size is
-
15px
-
14px
-
13px
-
None
Correct Answer
A. 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:
-
- 35.
Internal CSS defines style for
-
Single element
-
Single HTML page
-
Multiple pages
-
Whole Document
Correct Answer
A. Single HTML pageExplanation
Internal CSS defines style for a single HTML page. It allows you to specify the styling rules for elements within that specific HTML page only. This means that any changes made to the internal CSS will only affect the appearance of the elements on that particular page and not on any other pages within the website. It provides a way to customize the design and layout of individual pages without affecting the overall styling of the entire website.Rate this question:
-
- 36.
If form data contains sensitive or personal information, method to use is
-
Post
-
Get
-
Set
-
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:
-
- 37.
Which of the following class is used to create a button as a link in bootstrap?
-
.btn-hyperlink
-
.btn-link
-
.btn-anchor
-
None of these
Correct Answer
A. .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:
-
- 38.
Not a way to composite HTML Colors ?
-
RGBA
-
HSL
-
CNYK
-
HEX
Correct Answer
A. 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:
-
- 39.
In HTML, element defining a table heading is
-
<style>
-
<head>
-
<thead>
-
<th>
Correct Answer
A. <th>Explanation
The correct answer is . In HTML, the element is used to define a table heading. It is used to represent the header cells in a table, which typically contain the column names or titles. The element is important for accessibility purposes as it helps screen readers and other assistive technologies to identify and navigate through the table headers.Rate this question:
-
- 40.
Does setting margin-top and margin-bottom have an affect on an inline element?
-
NO
-
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:
-
- 41.
Through which class we can make a fixed navigation bar at the top?
-
.navbar-fixed
-
.navbar-fixed-top
-
Both (A) and (B)
-
None
Correct Answer
A. .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:
-
- 42.
If you have a <p> element with font-size: 10rem, will the text be responsive when the user resizes / drags the browser window?
-
True
-
False
Correct Answer
A. 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:
-
- 43.
HTML: <p id="example">Hello</p> CSS: #example { margin-bottom: -5px; } What will happen to the position of #example?
-
It will move 5px downwards
-
All elements succeeding #example with move 5px upwards
-
Neither
Correct Answer
A. 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:
-
- 44.
Using a <style> element in head section is known as
-
External
-
Outline
-
Internal
-
Inline
Correct Answer
A. 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:
-
- 45.
Browsers displays <em> tag as
-
<i>
-
<b>
-
<strong>
-
<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:
-
- 46.
Does setting padding-top and padding-bottom on an inline element add to its dimensions?
-
True
-
False
Correct Answer
A. 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:
-
- 47.
Which class is used to make a standard /default button in bootstrap?
-
.btn-primary
-
.btn-default
-
.btn
-
None of the above
Correct Answer
A. .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:
-
- 48.
What layout is used for providing 100% width in Bootstrap?
-
Fixed layout
-
Fluid layout
-
Both (a)and (b)
-
None of the above
Correct Answer
A. 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:
-
- 49.
Element used as a container for some text is defined as
-
<span>
-
<div>
-
<container>
-
<style>
Correct Answer
A. <span>Explanation
A element is used as a container for some text. It is an inline element that is commonly used to apply styles to a specific section of text within a larger block of content. Unlike a element, which is a block-level element that creates a new line and takes up the full width of its parent container, a element does not create a new line and only takes up as much space as its content requires. Therefore, the element is the correct answer for this question.Rate this question:
-
Quiz Review Timeline (Updated): Sep 16, 2024 +
Our quizzes are rigorously reviewed, monitored and continuously updated by our expert board to maintain accuracy, relevance, and timeliness.
-
Current Version
-
Sep 16, 2024Quiz Edited by
ProProfs Editorial Team -
Feb 25, 2019Quiz Created by
Jatan
Senior Front End Developer Quiz Questions And Answers
Do you want to be a senior front-end web developer, or are you already one? Here, we have a few front-end web development quiz questions and answers to check if you know how to...
Questions:
48 |
Attempts:
2784 |
Last updated:
Dec 02, 2024
|
Escape Campus - Front End Quiz
This quiz tests knowledge on front-end web development, focusing on CSS behavior, HTML structure, and responsive design principles.
Questions:
60 |
Attempts:
95 |
Last updated:
Mar 20, 2023
|
Intelligent Front-End Developer Test Quiz
As a front-end web developer, you will produce a number of programming, style sheets, and scripting languages for a website or web app which users can interact directly with. Take...
Questions:
10 |
Attempts:
6353 |
Last updated:
Aug 27, 2024
|
Quiz: Aptitude Test For Web Development
Embark on a transformative journey to unravel the depths of your web development aptitude with our "Aptitude Test for Web Development" quiz. Whether you're a...
Questions:
15 |
Attempts:
1250 |
Last updated:
Nov 13, 2024
|
Online Quiz With Javascript
This online quiz assesses knowledge in web development, focusing on HTML and JavaScript. It covers topics like HTML tags, JavaScript integration, and web standards, providing a...
Questions:
10 |
Attempts:
181 |
Last updated:
Mar 17, 2022
|
Senior Front End Developer Quiz Questions And Answers
Do you want to be a senior front-end web developer, or are you already one? Here, we have a few front-end web development quiz questions and answers to check if you know how to...
Questions:
48 |
Attempts:
2784 |
Last updated:
Dec 02, 2024
|
Back to top