Question 1:
Which of the following CSS3 property specifies how the contents of a replaced element should be fitted to the box established by its used height and width?
A.
object-fit
B.
object-position
C.
image-orientation
D.
none of the mentioned
Answer: _________
Question 2:
Which of the following method skews an element along the X and Y-axis by the given angles using tranform?
A.
skewX()
B.
skewy()
C.
skew-X-Y()
D.
skew()
Answer: _________
Question 3:
Which of the following method skews an element along the X-axis by the given angle using tranform?
A.
skewX()
B.
skewy()
C.
x-axis()
D.
skew()
Answer: _________
Question 4:
Which of the following element is used to begin an SVG image?
A.
<image>
B.
<svg>
D.
<graph>
Answer: _________
Question 5:
Which of the following method combines all the 2D transform methods into one using transform?
A.
combine()
B.
2D-tranform()
C.
matrix()
D.
matrix-2D()
Answer: _________
Question 6:
Which of the following CSS3 property specifies the intrinsic resolution of all raster images used in/on the element?
A.
image-orientation
B.
image-rendering
C.
image-resolution
D.
all of the mentioned
Answer: _________
Question 7:
Which of the following code set the webpage correctly displayed on a device?
A.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
B.
<meta name="viewport" content="width=device-width, initial-scale=2.0">
C.
<meta name="viewport" content="width=device-width, initial-scale='parent-size'">
D.
<meta name="viewports" content="width=device-width, initial-scale=1.0">
Answer: _________
Question 8:
Which of the following property defines where a 3D element is based in the x- and the y-axis?
A.
transform-style
B.
perspective(n)
C.
perspective-origin
D.
none of the mentioned
Answer: _________
Question 9:
Which of the following CSS3 property is used to tell the browser what the sizing properties should be include?
A.
box-sizing
B.
box-model
C.
box-design
D.
box-redesign
Answer: _________
Question 10:
Which of the following css property is used to define the time it takes one iteration of an animation to play?
A.
control
B.
animation-duration
C.
transition-duration
D.
all of the mentioned
E.
animation-duration
F.
animation-time
G.
animation-value
H.
none of the mentioned
Answer: _________
Question 11:
Which of the following css property is used to define which properties a transition will be applied to?
A.
animation-property
B.
transition-property
C.
css3-property
D.
none of the mentioned
Answer: _________
Question 12:
Which of the following css property is used to describe how the animation will play?
A.
animation-timing-function
B.
css3-timing-function
C.
transform-timing-function
D.
transition-timing-function
Answer: _________
Question 13:
Which of the following css property is used to define a delay before an animation starts?
A.
transform-delay
B.
delay-function
C.
delay-animation
D.
animation-delay
E.
delay
F.
transition-delay
G.
transform-delay
H.
none of the mentioned
Answer: _________
Question 14:
Which of the following css property is used to indicate if an animation plays in reverse or repeats itself every other iteration?
A.
animation-iteration
B.
animation-check
C.
animation-direction
D.
animation-state
Answer: _________
Question 15:
Which of the following css property is used to define the number of times an animation should play?
A.
scale-iteration-count
B.
transtion-iteration-count
C.
animation-iteration-count
D.
all of the mentioned
Answer: _________
Question 16:
Which of the following css property is used to define the animations that should be run?
A.
animation-run
B.
animation-name
C.
transtion-name
D.
none of the mentioned
Answer: _________
Question 17:
Which of the following CSS3 property specifies how nested elements are rendered in 3D space?
A.
transform
B.
transform-style
C.
transform-render
D.
none of the mentioned
Answer: _________
Question 18:
Which of the following CSS3 property specifies where to navigate when using the arrow-right navigation key?
A.
right
B.
nav-right
C.
nav-side
D.
none of the mentioned
Answer: _________
Question 19:
Which of the following element is used to create a circle?
A.
<cir>
B.
<round>
C.
<circle>
D.
<ellipse>
Answer: _________
Question 20:
Which of the following method rotates an element around its Y-axis at a given degree using tranform 3D?
A.
rotateY()
B.
rotate-Y()
C.
rotate-Yaxis()
D.
none of the mentioned
Answer: _________
Question 21:
Which of the following transition-timing-function property lets you define your own values in a cubic-bezier function
A.
cubic(n,n,n,n)
B.
matrix(n,n,n,n)
C.
cubic-bezier(n,n,n,n)
D.
none of the mentioned
Answer: _________
Question 22:
Which of the following selector is used to select and style when you place mouse over it?
A.
focus
B.
hover
C.
mouse
D.
all of the mentioned
Answer: _________
Question 23:
Which of the following css property repeats an image both horizontally and vertically?
A.
background
B.
background-image
C.
background-repeat
D.
background-position
Answer: _________
Question 24:
Which of the following CSS3 property specifies the alignment of the replaced element inside its box?
A.
object
B.
object-allign
C.
object-position
D.
object-render
Answer: _________
Question 25:
Which of the following element is used to create any shape that consists of only straight lines?
C.
<lines>
D.
<multiline>
Answer: _________
Question 26:
Which of the following property specifies the speed curve of the transition effect?
A.
transition-delay
B.
transition-duration
C.
transition-timing-function
D.
transition
Answer: _________
Question 27:
Which of the following css property specifies a delay for the transition effect?
A.
transition-delay
B.
transition-effect
C.
transition
D.
transition-duration
Answer: _________
Question 28:
Which of the following transition-timing-function property specifies a transition effect with a slow start, then fast, then end slowly
A.
ease
B.
ease-in
C.
ease-in-out
D.
none of the mentioned
Answer: _________
Question 29:
Which of the following element is used to create an SVG ellipse?
A.
<circle>
B.
<ellipse>
C.
<curve>
D.
none of the mentioned
Answer: _________
Question 30:
Which of the following css property defines whether or not an element should be visible when not facing the screen?
A.
visibility
B.
backface-control
C.
backface-visibility
D.
none of the mentioned
Answer: _________
Question 31:
Which of the following CSS3 property specifies whether or not an element is resizable by the user?
A.
resize
B.
length
C.
inherit
D.
none of the mentioned
Answer: _________
Question 32:
Which of the following nav-right value is used to the inherits this property from its parent element?
A.
auto
B.
id
C.
target-name
D.
inherit
Answer: _________
Question 33:
Which of the following css property specifies an image to use as the background of an element?
A.
background
B.
background-img
C.
background-image
D.
none of the mentioned
Answer: _________
Question 34:
Which of the following outline-offset value sets the distance the outline is outset from the border edge?
A.
distance
B.
length
C.
initial
D.
all
Answer: _________
Question 35:
Which of the following transition-timing-function property specifies a transition effect with a slow start?
A.
ease
B.
ease-in
C.
ease-in-out
D.
none of the mentioned
Answer: _________
Question 36:
Which of the following element is used to create a SVG rectangle?
A.
<rectangle>
C.
<rect>
D.
<square>
Answer: _________
Question 37:
Which of the following CSS3 property specifies where to navigate when using the arrow-down navigation key?
A.
down
B.
nav-down
C.
arrow-down
D.
none of the mentioned
Answer: _________
Question 38:
Which of the following nav-left value sets it's value to default value?
A.
target-name
B.
id
C.
inital
D.
inherit
Answer: _________
Question 39:
Which of the following CSS3 property specifies the sequential navigation order for an element?
A.
nav
B.
class
C.
nav-index
D.
class-index
Answer: _________
Question 40:
Which of the following CSS3 property adds space between an outline and the edge or border of an element?
A.
offset
B.
outline
C.
outline-offset
D.
none of the mentioned
Answer: _________
Question 41:
Which of the following method moves an element from its current position using tranform?
A.
rotate()
B.
scale()
C.
translate()
D.
matrix()
Answer: _________
Question 42:
Which of the following method increases or decreases the size of an element using tranform?
A.
rotate()
B.
scale()
C.
translate()
D.
matrix()
Answer: _________
Question 43:
Which of the following element is used to create a SVG line?
A.
<line>
B.
<dot>
C.
<ray>
D.
<stick>
Answer: _________
Question 44:
Which of the following CSS3 property specifies where to navigate when using the arrow-up navigation key?
A.
nav-upper
B.
nav-top
C.
nav-up
D.
all of the mentioned
Answer: _________
Question 45:
What does SVG stands for?
A.
Scaled Vector Graph
B.
Scalable Vector Graphics
C.
Scaled Vector Graphics
D.
None of the mentioned
Answer: _________
Question 46:
Which of the following is not an attribute used with SVG ellipse?
A.
cx
B.
cy
C.
rr
D.
ry
Answer: _________
Question 47:
Which of the following is attribute of SVG line?
A.
x
B.
y
C.
x1
D.
all of the mentioned
Answer: _________
Question 48:
Which of the following defines the color of a line, text or outline of an element?
A.
text
B.
stroke
C.
line
D.
all of the mentioned
Answer: _________
Question 49:
Which of the following css property should be used to make a responsive image?
A.
float
B.
max-width
C.
margin-right
D.
all of the mentioned
Answer: _________
Question 50:
Which of the following CSS framework is used to create a responsive design?
A.
larawell
B.
bootstrap
C.
rails
D.
django
Answer: _________
Question 51:
Which of the following css propery defines a relationship between bound elements(s) and some code or content?
A.
@import
B.
@media
C.
url-bind
D.
binding
Answer: _________
Question 52:
Which of the following css propery define the properties that will be animated in an animation rule?
A.
@keyframes
B.
animation-origin
C.
transform
D.
animation
Answer: _________
Question 53:
Which of the following css property allows elements to be offset, rotated, scaled, and skewed in a variety of different ways?
A.
transform-3D
B.
transform-origin
C.
transform
D.
transition
Answer: _________
Question 54:
What does this code do? Code:
@media only screen and (orientation: landscape) {
body {
background-color: lightblue
}
}
A.
web page will have a lighblue background if the orientation is in landscape mode
B.
web page will have a lighblue background if the orientation is not in landscape mode
C.
web page will have a red background if the orientation is in landscape mode
D.
None of the mentioned
Answer: _________
Question 55:
What does this code do? Code:
@media only screen and (max-width: 500px) {
body {
background-color: lightblue
}
}
A.
If the browser window is smaller than 500px, the background color will change to lightblue:
B.
If the browser window is larger than 500px, the background color will change to lightblue:
C.
The background color will change to lightblue
D.
Nothing happens
Answer: _________
Question 56:
What does this code do? Code:
@media only screen and (max-width: 768px) {
class*="col-"] {
width: 100%
}
}
A.
When the screen gets larger than 768px, each column should have a width of 100%.
B.
When the screen gets smaller than 768px, each column should have a width of 100%.
C.
Error occured
D.
None of the mentioned
Answer: _________
Question 57:
What should be written in the blank of the code for JQuery Code Used to Apply CSS3 Animations? CSS Code:
_________ leftmove {
100% { transform: translateX(-70px)
opacity: 1
}
}
_________ rightmove {
100% { transform: translateX(70px)
opacity: 1
}
} jQuery Code:
A.
@media
B.
@keyframes
C.
animation-name
D.
!important
Answer: _________
Question 58:
What should be written in the blank of the code for resizing elements in Responsive Web Design with Transitions Code:
body { background-image: url(fog.jpg)
background-size: cover
background-repeat: no-repeat
color: #fff
font-family: Avenir, Arial, sans-serif
}
h1 { font-family: 'Calluna Sans', Arial, sans-serif
text-align: center
font-size: 10rem
margin: 8rem auto
}
h1 { font-family: 'Calluna Sans', Arial, sans-serif
text-align: center
font-size: 10rem
margin: 8rem auto
transition: 1s font-size linear
}
______________ and (max-width: 1100px) {
h1 { font-size: 8rem
}
A.
@media
B.
@media screen
C.
div
D.
transform
Answer: _________
Answer Key
1:
A
2:
D
3:
A
4:
B
5:
C
6:
C
7:
A
8:
C
9:
A
10:
C, E
11:
B
Solution: Syntax: transition-property: all | none | property-name-1
12:
D
Solution: Syntax:transition-timing-function transition-timing-function: timingfunction,timingfunction2,...timingfunctionN]
13:
D, F
Solution: Syntax: animation-delay: time1 [,..timeN]
14:
C
Solution: Syntax: animation-direction: normal | alternate [,normal | alternate
15:
C
Solution: Syntax: animation-iteration-count: number | infinite
16:
D
Solution: Syntax:animation-name: @keyframe-name | none
17:
C
18:
C
19:
C
20:
A
21:
C
22:
B
23:
C
24:
C
25:
B
26:
C
27:
A
28:
A
29:
B
30:
C
31:
B
32:
D
33:
C
34:
B
35:
B
36:
C
37:
C
38:
C
39:
C
40:
B
41:
C
42:
B
43:
A
44:
C
45:
B
46:
C
47:
D
48:
D
49:
D
50:
B
Solution: Bootstrap is a free and open-source collection of tools for creating websites and web applications. It contains HTML- and CSS-based design templates for typography, forms, buttons, navigation and other interface components, as well as optional JavaScript extensions. It aims to ease the development of dynamic websites and web applications.
51:
D
Solution: Syntax: binding: none | url(bindingfile)
52:
D
Solution: Syntax: @keyframes: keyframe-name {percentage | from | to {cssrules}}
53:
C
Solution: Syntax: transform: list of transform-functions | none
54:
A
55:
A
56:
B
57:
B
58:
B