Fundamentals of Front End Development MCQs with Answers
Practice important Fundamentals of Front End Development MCQs with answers and explanations.
Chapter: 155
Q1741:
What is the primary purpose of the @font-face rule?
A. To use web-safe fonts only
B. To embed fonts directly into the web page
C. To specify a name for a font and link to its file
D. To define font color
Correct Answer:
C
Chapter: 155
Q1742:
Fill in the blank: SVG Fonts allow SVG to be used as ______ when displaying text.
A. images
B. glyphs
C. background
D. colors
Correct Answer:
B
Chapter: 155
Q1743:
Which font format was developed by Microsoft specifically for use as embedded fonts on web pages?
A. TrueType Fonts (TTF)
B. OpenType Fonts (OTF)
C. Web Open Font Format (WOFF)
D. Embedded OpenType Fonts (EOT)
Correct Answer:
D
Chapter: 155
Q1744:
Fill in the blank: The font-family name defined in the @font-face rule must match the ______ used in the CSS styles.
A. font-type
B. font-size
C. font-family
D. font-style
Correct Answer:
C
Chapter: 156
Q1745:
What does the translate() method do in CSS3?
A. Moves an element to a new position
B. Rotates an element
C. Scales an element
D. Skews an element
Correct Answer:
A
Chapter: 156
Q1746:
Fill in the blank: To rotate an element clockwise by 45 degrees, use transform: ______;
A. rotateX(45deg)
B. rotateY(45deg)
C. rotate(45deg)
D. rotateZ(45deg)
Correct Answer:
C
Chapter: 156
Q1747:
Which CSS3 transform method skews an element along the X-axis?
A. skewY()
B. skew()
C. skewX()
D. scale()
Correct Answer:
C
Chapter: 156
Q1748:
Fill in the blank: To skew an element along both X and Y axes by 20 and 10 degrees, use transform: ______;
A. skewX(20deg, 10deg)
B. skew(20deg)
C. skew(20deg, 10deg)
D. matrix(1, 0, 0, 1, 20deg, 10deg)
Correct Answer:
C
Chapter: 156
Q1749:
Which method would you use to rotate an element around its Y-axis?
A. rotateX()
B. rotateY()
C. rotateZ()
D. rotate()
Correct Answer:
B
Chapter: 156
Q1750:
Fill in the blank: To move an element 50 pixels right and 100 pixels down, use transform: ______;
A. translate(50px, 100px)
B. translate3d(50px, 100px, 0)
C. translateX(50px)
D. translateY(100px)
Correct Answer:
A
Chapter: 156
Q1751:
What property allows you to change the position of transformed elements in CSS3?
A. transform-origin
B. transform-style
C. perspective
D. perspective-origin
Correct Answer:
A
Chapter: 156
Q1752:
Fill in the blank: The perspective property specifies the ______ on how 3D elements are viewed.
A. color
B. depth
C. angle
D. distance
Correct Answer:
B
Chapter: 156
Q1753:
Which method is used to define a 3D rotation along the Z-axis?
A. rotateX()
B. rotateY()
C. rotateZ()
D. rotate3d()
Correct Answer:
C
Chapter: 156
Q1754:
Fill in the blank: The translate3d(x, y, z) method defines a ______ translation.
A. 2D
B. 3D
C. 1D
D. 4D
Correct Answer:
B
Chapter: 156
Q1755:
Which method is used to apply a 3D scale transformation to an element?
A. scale()
B. scale3d()
C. scaleX()
D. scaleY()
Correct Answer:
B
Chapter: 156
Q1756:
Fill in the blank: To define a 3D rotation with a given angle along the X-axis, use transform: ______;
A. rotateX(angle)
B. rotate3d(1, 0, 0, angle)
C. rotateY(angle)
D. rotateZ(angle)
Correct Answer:
A
Chapter: 157
Q1757:
What does the transition property in CSS3 specify?
A. The color of an element
B. The width of an element
C. The duration of an effect
D. The property to add an effect to
Correct Answer:
D
Chapter: 157
Q1758:
Fill in the blank: To create a transition effect for the width property with a duration of 3 seconds, use transition: ______;
A. width 3s
B. width 3s, height 2s
C. width 2s
D. width 3s ease
Correct Answer:
A
Chapter: 157
Q1759:
Which value for transition-timing-function specifies a transition effect with the same speed from start to end?
A. ease
B. linear
C. ease-in
D. cubic-bezier
Correct Answer:
B
Chapter: 157
Q1760:
Fill in the blank: The transition-delay property specifies a delay ______ for the transition effect.
A. before the effect starts
B. after the effect ends
C. for the duration
D. for the speed
Correct Answer:
A