70-480 Practice Test: HTML5, Javascript, CSS3
Welcome to the practice test for 70-480: programming in HTML5 with Javascript and CSS3. After recently taking and passing the 70-480 exam I decided to create a test to help others prepare for the real thing.
The practice test has over 100 questions in total - all based on the official exam topics and my experience from the exam. I’ve split the questions into manageable 15 question tests which you’re free to retake as often as you like. I recommend doing so to ensure you cover all the topics and learn from your mistakes during subsequent retakes.
Start the test now..it's free!
15 questions
Timed test (no limit)
Helpful explanations
Background to the test
As you probably know, the 70-480 exam forms part of the MCSD certification path for web developers. That pathway consists of 3 exams; an HTML exam, MVC exam and finally a web services exam. Don’t be fooled into thinking that the HTML exam is any easier than the others because it isn’t.
The exam focus on the user interface side of web development using HTML for structure, CSS for styles and Javascript for interactivity. You must be competent in each of these areas before attempting the exam for yourself.
If you’re a veteran programmer who already uses MVC (or something similar) then you’ll be familiar with most aspects of HTML, CSS and Javascript. This alone will give you the basis for this exam but you’ll need to push a little deeper into HTML5 specifics, Javascript classes/inheritance and any CSS3 peculiarities.
For my part, I’ve been working with HTML, CSS and Javascript for just over a decade so it was just a case of brushing up on the HTML5 aspects rather than learning from scratch. That said, anyone with at least a couple of years experience developing in HTML, CSS and Javascript will be able to pass this exam.
Topics
As the title suggests, the topics for 70-480 are split into three major sections: HTML, CSS and Javascript. I found that the exam was evenly split between all three areas, with many questions combining skills between these three areas. For example, you might see a question asking you to modify an elements style using JQuery. To answer that you’d need to understand JQuery (javascript) to modify the style but also the CSS style properties that you need to include as parameters to the method call.
From my experience taking the exam, you need to focus on these areas:
For HTML I suggest you get to grips with the new HTML5 elements such as Canvas, SVG, data storage and the new input and validation types. Of course you’ll need to understand HTML in general including elements, attributes, events and how these tie into CSS styling and Javascript function calls.
On the CSS side I recommend you study selectors, positioning, classes, inheritance and cascading rules. There will be many questions that try and trick you into thinking the obvious answer is correct. For example, pay attention to the order of CSS rules and remember the priority rules for determining the elements final style.
Finally, for the Javascript side get ready to learn as much as you can about AJAX client side calls. Get to know the data types, methods and return types from various AJAX calls including the shorthand versions such as getJSON. There’s also a really tricky topic on Javascript classes and overriding functions which you’ll need to dig into the messy world of Javascript Prototypes. All of this is the icing on the cake of your usual Javascript events, functions and variables.
About this test
As mentioned above, this test is a multiple choice simulator with 15 random questions. The questions are based on the official topics for 70-480 which I wrote myself. To start the test just click the Start Test button which is below.
I don’t believe in test dumps or PDF downloads with actual exam questions because that defeats the whole object of testing your skills. I (and you should you) prefer to learn what I don’t know so I can apply that new knowledge in the workplace.
Please take the time to bookmark this test and share with any colleagues who might find it useful. It took a long time to write all the questions so I really hope they help you out too..
Good Luck!!
Brain dumps
We take the Microsoft certification platform very serious. As a result, we do not endorse braindumps or braindump type material. You’ll get better rewards from learning the material yourself and becoming a great technical expert. Remember, you shouldn’t download exam dumps, or real exam questions because you’ll end up being a cheat.
Sample Questions
Here are a few sample questions, to take the full test scroll to the bottom of the page and click "Start Practice Test"...
Q1. You’re developing a new website that displays information on the current exchange rates worldwide. The page consists of many different elements and one particular element needs to be positioned so that its 100px below its normal position.
Which value should you use for the position property?
- absolute
- relative
- fixed
- static
Answer:relative
Comments:The relative value will position the element relative to its normal position. For example if you add top:20 to an element with the relative position value it will be 20 pixels below its normal position.
Q2. You want to start drawing on a Canvas element to draw several arcs and then fill the area with a solid blue colour. Which piece of code would you call first?
- var context = canvas.getContext('2d');
- context.fillStyle = '#8ED6FF';
- context.fill();
- var canvas = document.getElementById('myCanvas');
Answer:var canvas = document.getElementById('myCanvas');
Comments:You want to get a reference to the canvas element before you start drawing. You could use a simple getElementById call to assign the canvas to a variable.
Q3. You’re trying to use the new Canvas element in HTML5 to draw some fancy graphics on the page. You’ve been using the rect() function to draw a rectangle but the shape isn’t appearing to users of the page.
What mistake have you made?
- You forgot to use clearRect()
- You forgot to use closePath()
- You forgot to use beginPath()
- You forgot to use stroke()
Answer:You forgot to use stroke()
Comments:Simply using rect() doesn’t draw the rectangle. You have to call stroke to draw the lines. Alternatively you can use strokeRect() to draw the entire shape in one go.
Q4. You’re using the new Canvas element to draw graphics on your web page. You want to draw a line from the top left hand corner to the opposite bottom hand corner.
Which piece of code would you use first?
- context.moveTo(0,0)
- context.beginPath()
- context.stroke()
- context.lineTo(300,300)
Answer:context.beginPath()
Comments:You would use beginPath() to signify that you want to start drawing a path. You would then follow this up with a moveTo() and then a lineTo() to create a diagonal line. Finally the stroke() method is used to actually draw the line on the path.
Q5. You need to create an HTML table to display summary information for an online checkout page. This table will display all the products that the visitor has added to their basket, in addition to a total price for all the items.
Which of the following HTML tags is not a valid child item for the table element?
Answer:tf
Comments:tf doesn’t exist. If you want to add a table footer element then you should use tfoot.
Q6. One of your clients has asked for a new form to be added to their HTML5 friendly website. This form accepts several pieces of information including first name, surname and phone number. You want to ensure that the user enters information into each of the fields before the form is submitted.
Which attribute should you use?
- required
- compulsory
- enforced
- optional
Answer:required
Comments:The required attribute can be used to specify that an input field must contain a value.
Q7. The readonly attribute is great for preventing users from changing data in an input control. However, the readonly attribute can’t be used for every input type.
Do you know which one?
Answer:Checkbox
Comments:The readonly attribute doesn’t work on checkboxes because it prevents you from editing the fields value rather than the fields state. In the case of checkboxes when you click the checkbox you’re modifying the state (on/off) rather than the value.
Q8. You want to make sure that a div containing the words “copyright joe blogs” is always positioned at the bottom of the page. You’ve added the following css code:
position:absolute; bottom:0;
But the div isn’t appearing at the bottom of the page. What could be wrong?
- You should change the position to relative instead
- You didn’t set the parent div to position:relative
- You didn’t specify the number of pixels for the bottom property
- The property Bottom doesn’t exist, you should use margin-bottom:0;
Answer:You didn’t set the parent div to position:relative
Comments:You must use position:relative for the parent node before attempting to absolutely position a child element in this position.
Q9. You’re trying to add 10 spaces to a paragraph but the rendered page is always displaying a single space? What is the best way to fix this?
- Wrap this sentence in an <em> tag
- Wrap the spaces in a DIV tag first
- Use a textbox to display the sentence instead
- Use for the extra spaces
Answer:Use for the extra spaces
Comments:You can use to add spaces into any html text. By default browsers trim extra spaces in html.
Q10. You want to use JQuery to read the value of a textbox. This value contains the users full name which is needed for further processing in Javascript.
Which code segment is NOT a workable solution?
- value = $("#txt_name").text();
- value = $("#txt_name").val();
- value = $("#txt_name").attr('value');
- document.getElementById('txt_name').value
Answer:value = $("#txt_name").text();
Comments:You should use the val() method for reading input values, whereas the text() method is for reading other html elements.
Q11. You want to use JQuery to change the ALT value for a particular image. The alt value must be changed to “Scene from the park”.
What is the correct solution?
- $( "#myphoto" ).attr("alt") = "Scene from the park";
- $( "#myphoto" ).attr( "alt", "Scene from the park" );
- $( "#myphoto" ).alt = "Scene from the park";
- $( "#myphoto" ).attr("val") = "Scene from the park";
Answer:$( "#myphoto" ).attr( "alt", "Scene from the park" );
Comments:Changing attributes is done via the .attr() method in JQuery. This method accepts the name of the attribute to change and the new value.
Take the practice test..
Start Practice Test
View other free tests
< Back to Microsoft Exams
Share..