Test On Front-end Web Development! Trivia Questions Quiz

Reviewed by Editorial Team
The ProProfs editorial team is comprised of experienced subject matter experts. They've collectively created over 10,000 quizzes and lessons, serving over 100 million users. Our team includes in-house content moderators and subject matter experts, as well as a global network of rigorously trained contributors. All adhere to our comprehensive editorial guidelines, ensuring the delivery of high-quality content.
Learn about Our Editorial Process
| By Jatan
J
Jatan
Community Contributor
Quizzes Created: 2 | Total Attempts: 1,877
| Attempts: 1,349
Quiz Lesson
SettingsSettings
Please wait...
  • 1/60 Questions

    Does setting margin-top and margin-bottom have an affect on an inline element?

    • NO
    • YES
Please wait...
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 See morethis quiz and see how knowledgeable you are.

Test On Front-end Web Development! Trivia Questions Quiz - Quiz

Quiz Preview

  • 2. 

    Does setting padding-top and padding-bottom on an inline element add to its dimensions?

    • True

    • False

    Correct Answer
    A. False
    Explanation
    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?

    • True

    • False

    Correct Answer
    A. False
    Explanation
    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:
    1. <ul class="shopping-list" id="awesome">
    2. <li><span>Milk</span></li>
    3. <li class="favorite" id="must-buy"><span class="highlight">Sausage</span></li>
    4. </ul>
    CSS:
    1. ul {
    2. color: red;
    3. }
    4. li {
    5. color: blue;
    6. }
    What is the color of the text Sausage ?

    • Red

    • Blue

    • Neither

    • Black

    Correct Answer
    A. Blue
    Explanation
    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:
    1. <ul class="shopping-list" id="awesome">
    2. <li><span>Milk</span></li>
    3. <li class="favorite" id="must-buy"><span class="highlight">Sausage</span></li>
    4. </ul>
    CSS:
    1. ul li {
    2. color: blue;
    3. }
    4. #must-buy {
    5. color: black;
    6. }
    What is the color of the text Sausage ?

    • Black

    • Blue

    • Neither

    • Red

    Correct Answer
    A. Black
    Explanation
    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?

    • It will move 5px downwards

    • All elements succeeding #example with move 5px upwards

    • Neither

    Correct Answer
    A. All elements succeeding #example with move 5px upwards
    Explanation
    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

    • _self

    • _top

    • _parent

    • _blank

    Correct Answer
    A. _top
    Explanation
    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

    • External

    • Outline

    • Internal

    • Inline

    Correct Answer
    A. Internal
    Explanation
    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

    • 2 ways

    • 3 ways

    • 4 ways

    • 5 ways

    Correct Answer
    A. 3 ways
    Explanation
    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

    • <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:

  • 11. 

    Alpha in RGB extension named RGBA, defines

    • Hue

    • Saturation

    • Lightness

    • Opacity

    Correct Answer
    A. Opacity
    Explanation
    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

    • <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:

  • 13. 

    If form data contains sensitive or personal information, method to use is

    • Post

    • Get

    • Set

    • Append

    Correct Answer
    A. Post
    Explanation
    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

    • Hlink

    • Href

    • Src

    • Src-link

    Correct Answer
    A. Href
    Explanation
    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

    • Classes

    • Div element

    • Span Element

    • IFrames

    Correct Answer
    A. IFrames
    Explanation
    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

    • New window

    • New Tab

    • New page

    • New Line

    Correct Answer
    A. New Line
    Explanation
    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?

    • Single element

    • Single HTML page

    • Multiple elements

    • Multiple HTML pages

    Correct Answer
    A. Multiple HTML pages
    Explanation
    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

    • <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:

  • 19. 

    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:

  • 20. 

    Div element defines section at a

    • Page level

    • Inline level

    • Block level

    • Tab level

    Correct Answer
    A. Block level
    Explanation
    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?

    • 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 above
    Explanation
    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?

    • Fixed layout

    • Fluid layout

    • Both (a)and (b)

    • None of the above

    Correct Answer
    A. Fluid layout
    Explanation
    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 

    • 15px

    • 14px

    • 13px

    • None

    Correct Answer
    A. 14px
    Explanation
    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:

    • 12 columns

    • 6 columns

    • 14 columns

    • 10 columns

    Correct Answer
    A. 12 columns
    Explanation
    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?

    • .navbar-fixed

    • .navbar-fixed-top

    • Both (A) and (B)

    • None

    Correct Answer
    A. .navbar-fixed-top
    Explanation
    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?

    • Modal

    • Dialog box

    • Popup

    • Tooltip

    Correct Answer
    A. Tooltip
    Explanation
    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?

    • .btn-hyperlink

    • .btn-link

    • .btn-anchor

    • None of these

    Correct Answer
    A. .btn-link
    Explanation
    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?

    • .btn-primary

    • .btn-default

    • .btn

    • None of the above

    Correct Answer
    A. .btn
    Explanation
    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?

    • Lg

    • Md

    • Sm

    • Xs

    Correct Answer
    A. Md
    Explanation
    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?

    • .tablet

    • .tab

    • Sm

    • Lg

    Correct Answer
    A. Sm
    Explanation
    The "sm" class in Bootstrap grid is used for tablets.

    Rate this question:

  • 31. 

    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:

  • 32. 

    Which plugin is used to create a modal window?

    • Modal

    • Popup

    • Window

    • Dialog box

    Correct Answer
    A. Modal
    Explanation
    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.

    • Programming

    • Application

    • Scripting

    • None of these

    Correct Answer
    A. Scripting
    Explanation
    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

    • <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:

  • 35. 

    In HTML5, default character-set is known to be of

    • UTF-5

    • UTF-6

    • UTF-7

    • UTF-8

    Correct Answer
    A. UTF-8
    Explanation
    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

    • _self

    • _top

    • _parent

    • _blank

    Correct Answer
    A. _blank
    Explanation
    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

    • Length

    • Pointers

    • Object

    • Index

    Correct Answer
    A. Index
    Explanation
    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

    • ?

    • +

    • %

    • &

    Correct Answer
    A. +
    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

    • Divisor

    • Divided

    • Division

    • Diversion

    Correct Answer
    A. Division
    Explanation
    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

    • Design

    • Theme

    • Style

    • Template

    Correct Answer
    A. Style
    Explanation
    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

    • <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:

  • 42. 

    Attribute in HTML that defines location of where to open linked area, is said to be

    • Target

    • Framename

    • VisitLink

    • OpenLink

    Correct Answer
    A. Target
    Explanation
    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 ?

    • RGBA

    • HSL

    • CNYK

    • HEX

    Correct Answer
    A. CNYK
    Explanation
    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

    • <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:

  • 45. 

    An element named content have other elements of

    • 2 types

    • 3 types

    • 4 types

    • 5 types

    Correct Answer
    A. 2 types
    Explanation
    The element named "content" has two types of other elements associated with it.

    Rate this question:

  • 46. 

    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:

  • 47. 

    When an attribute of HTML value contains double quotes, it is necessary to use

    • Single quotes

    • Double quotes

    • Single+Double quotes

    • No quotes

    Correct Answer
    A. Single quotes
    Explanation
    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

    • <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:

  • 49. 

    In HTML5, a list of pre-defined options for an <input> element can be defined through

    • <datalist>

    • <select>

    • <option>

    • <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:

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, 2024
    Quiz Edited by
    ProProfs Editorial Team
  • Feb 25, 2019
    Quiz Created by
    Jatan

Related Topics

Recent Quizzes

Quiz: Aptitude Test for Web Development Quiz: Aptitude Test for Web Development
Web Development Fundamentals 2 Web Development Fundamentals 2
How well you know about Web Development? Trivia Quiz How well you know about Web Development? Trivia Quiz

Featured Quizzes

Best Friend Quiz: Are You Really Best Friends? Best Friend Quiz: Are You Really Best Friends?
Which Sonic Character Are You? Which Sonic Character Are You?
What Ethnicity Do I Look Like? What Ethnicity Do I Look Like?
Articles Quiz With Answers Articles Quiz With Answers
Basketball Quiz Questions And Answers Basketball Quiz Questions And Answers
Do I Have a Crush on Him? Quiz Do I Have a Crush on Him? Quiz
Back to Top Back to top
Advertisement
×

Wait!
Here's an interesting quiz for you.

We have other quizzes matching your interest.