Mid-Term Exam: Web Design with HTML5, CSS3, and Bootstrap

Duration: 60 minutes

Section 1: HTML5 with Responsive Design (Questions 1-10)

1. What is the purpose of the <meta name="viewport" content="width=device-width,
initial-scale=1.0"> tag in HTML?
A) It specifies the webpage title.
B) It sets the web page's width to the device's.
C) It defines the font size of the webpage.
D) It adds a CSS stylesheet to the webpage.
2. Which HTML5 element creates a semantic section within a webpage?
A) <div>
B) <section>
C) <span>
D) <article>
3. What does a media query in CSS3 allow you to do?
A) Create animations on the webpage.
B) Specify different CSS styles based on device characteristics.
C) Define HTML form elements.
D) Embed multimedia content.
4. How can you make an image responsive in a webpage using CSS?
A) Apply the responsive-image: true; property.
B) Set the image width using width: 100%;.
C) Use the <responsive> HTML tag.
D) Use JavaScript to resize the image.
5. Which CSS property is commonly used for adding smooth transitions to webpage
elements?
A) transition
B) animation
C) transform
D) hover
6. What is the purpose of the max-width property in CSS?
A) It sets the maximum font size.
B) It limits the maximum width of an element.
C) It specifies the maximum number of paragraphs.
D) It defines the maximum number of characters.
7. Which HTML5 input type is used for collecting numerical data?
A) text
 B) number
C) checkbox
D) select
8. What does the required attribute do in an HTML form input field?
A) It specifies the maximum length of the input.
B) It makes the input field mandatory to fill out.
C) It changes the input field's color.
D) It specifies the default value of the input.
9. How can you create a dropdown list in HTML?
A) Using the <input type="dropdown"> tag.
B) Using the <dropdown> tag.
C) Using the <select> and <option> tags.
D) Using the <list> tag.
10. Which CSS3 property is used for rotating an element?
A) rotate()
B) scale()
C) transform()
D) transition()
Section 2: CSS3 - Selectors, Typography, Color Mode, Transitions, Transformation, and
Animations (Questions 11-25)
11. Which CSS selector selects elements with a specific class?
A) #
B) >
C) .
D) :
12. What CSS property is used to change the color of text?
A) background-color
B) color
C) text-color
D) font-color
13. Which CSS property creates a shadow effect behind an element?
A) box-shadow
B) text-shadow
C) element-shadow
D) background-shadow
14. What is the purpose of the line-height property in CSS?
A) It changes the text color.
B) It sets the height of a line box.
 C) It adjusts the font size.
D) It specifies the line spacing.
15. Which CSS property is used to add smooth transitions to webpage elements?
A) transition
B) animation
C) transform
D) hover
16. What does the CSS property text-transform: uppercase; do?
A) It makes the text bold.
B) It converts text to uppercase.
C) It adds underline to the text.
D) It italicizes the text.
17. Which CSS property is used to create rounded corners on elements?
A) border-radius
B) corner-style
C) round-corners
D) border-style
18. Which CSS property is used for rotating an element?
A) rotate()
B) skew()
C) transform()
D) transition()
19. How can you center-align text horizontally in CSS?
A) text-align: center;
B) align: center;
C) horizontal-align: center;
D) center-text: horizontal;
20. What is the purpose of the rgba() color function in CSS?
A) It specifies a color as a percentage value.
B) It defines a color using hexadecimal notation.
C) It creates a color with transparency.
D) It converts a color to grayscale.
21. Which CSS property is used for applying multiple styles to an element using shorthand
notation?
A) combined
B) multiple
C) composite
D) all
22. What does the CSS property overflow: hidden; do?
A) It hides the text within an element.
B) It hides the overflowing content of an element.
C) It creates a hidden animation effect.
D) It hides the background image of an element.
23. Which CSS property is used to change the size of an element relative to its parent?
A) resize
B) scale
C) size
D) stretch
24. What is the purpose of the transition property in CSS?
A) It creates an animation effect.
B) It specifies the duration of a transition.
C) It defines the timing function of a transition.
D) All of the above
25. Which CSS property is used to change the style of a list item marker?
A) marker-style
B) list-marker
C) list-style-type
D) marker-type
Section 3: Bootstrap Grid Basic and Navbar (Questions 26-40)
26. Which class is used to create a responsive grid layout in Bootstrap?
A) .row
B) .col
C) .grid
D) .container
27. How can you create a navigation bar in Bootstrap?
A) By using the <nav> element.
B) By adding a <div> with a specific class.
C) By using the <navbar> element.
D) By custom CSS styling.
28. Which class is used to create a full-width container in Bootstrap?
A) .container-fluid
B) .container-full
C) .full-width
D) .wide-container
29. Which class is used to create a responsive navigation bar toggle button in Bootstrap?
A) .navbar-toggler
 B) .navbar-toggle
C) .navbar-expand
D) .nav-toggle
30. In Bootstrap grid system, how many columns are there by default?
A) 10
B) 12
C) 16
D) 8
31. Which Bootstrap class is used to specify the width of a column for large screens?
A) .col-lg-
B) .col-md-
C) .col-sm-
D) .col-xs-
32. How can you create a two-column layout using Bootstrap grid system?
A) Use two <div> elements with .row class.
B) Use one <div> element with .row class and two <div> elements with .col classes.
C) Use two <div> elements with .col classes.
D) Use two <div> elements with .container class.
33. Which class is used to align content vertically in Bootstrap grid?
A) .align-items-center
B) .justify-content-center
C) .align-self-center
D) .vertical-align-center
34. What is the purpose of the Bootstrap class navbar-expand?
A) It expands the navbar vertically.
B) It expands the navbar horizontally.
C) It controls the responsiveness of the navbar.
D) It changes the navbar color.
35. How can you make a Bootstrap navbar fixed at the top of the page?
A) Add the class .navbar-static-top.
B) Add the class .navbar-fixed-top.
C) Add the class .navbar-sticky.
D) Add the class .navbar-fixed.
36. Which class is used to add spacing between columns in Bootstrap grid system?
A) .column-spacing
B) .col-space
C) .col-gap
D) .gutter
37. Which class is used to create a responsive image in Bootstrap?
A) .img-responsive
B) .responsive-img
C) .img-fluid
D) .fluid-img
38. What is the purpose of the .container class in Bootstrap?
A) It creates a fixed-width container.
B) It creates a fluid-width container.
C) It centers the content horizontally.
D) All of the above
39. Which class is used to hide an element visually but keep it accessible to screen readers
in Bootstrap?
A) .d-none
B) .hidden
C) .invisible
D) .sr-only
40. How can you create a responsive navbar brand logo in Bootstrap?
A) Use an <img> tag with the appropriate class inside the navbar.
B) Apply a background image to the navbar using CSS.
C) Use an <svg> element inside the navbar.
D) Add a custom font icon to the navbar.