Practice Questions for Microsoft Exam 70-480, Module 12

We’re nearing the end of the practice questions for Microsoft Exam 70-480, Programming in HTML5 with JavaScript and CSS! Here are some from Module 12 of the curriculum.

The normal width of <div id="myDiv"> is 100px. You have coded #myDiv:hover { width: 200px; transition: width 2s; } to cause it to widen when the user hovers over it. What is the minimum amount of code you must write to get it to revert to 100px when the user moves his mouse off the div?

You have a <div> whose width and height are each 50px. Which are valid ways to double each dimension of the div in half a second when the user hovers on it?

Your website has CSS that changes the background-color for several selectors when the user hovers on them (e.g., article: { background-color: lightblue } ). You wish to implement a standard across your website that when the background-color changes, it will do so with a 1-second transition. How can you do this with the least amount of coding?

You have coded a game in HTML. As part of the game, you want to make a <div id="timeline"> that simulates the passage of time by steadily decreasing its width over 10 seconds' duration when the countdown CSS class is applied to it. What is the minimal amount of CSS to accomplish this?

You have transitions for both opacity and height on the same div. You want to display a message at the end of the opacity transition only. How can you do this?

Which CSS rule(s) will result in the selected element being moved down 10 pixels?

In a rotational transformation, what is the default center of rotation?

You wish to transform a rectangular div into a parallelogram such that the lower edge does not move, but the upper edge is shifted to the right. Which could be helpful?

You have applied a transformation of skewX(10) to a square div. What will be the effect?

Which is equivalent to rotate(30deg)?

You have <div id='outer'><div id='inner'></div></div>. The inner div is styled as 100px square and with a 30-degree rotation about the Y axis. Which CSS rule on the outer div will cause the inner div to appear most distorted?

You have <body><div></div></body> and the following CSS stylesheet. How will the page look 5 seconds after loading, assuming the viewport is 600px wide?

body {
    width: 200px;
}
div {
    height: 100px;
    background-color: red;
    animation-name: test;
    animation-duration: 4s;
}
@keyframes test {
    from { width: 50px; }
    to { height: 100px }
}

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.