Practice Questions Flashcards
What is the characteristic of a web page with responsive design?
A) A measure of the page close speed
B) The ability to react to user events
C) The ability to resize to the screen size
D) A measure of the page load speed
The ability to resize to the screen size
Which language provides dynamic content for a webpage across all browsers?
A) XML
B) HTML5
C) JavaScript
D) XHTML
JavaScript
Which type of content should use an <aside>?
A) Site copyrights
B) Navigation menus
C) News feeds
D) Headlines
News feeds
Which element should a developer use for a bulleted list?
A) <dl>
B) <ul>
C) <ol>
D) <p>
<ul>
What does an HTML5 code validator confirm about code?
A) It follows best practices
B) It complies with a standard
C) It works in every browser
D) It contains no warnings
It complies with a standard
A web developer needs to play an audio file endlessly.
The developer writes the following HTML code:
<audio>
<source src = “media/audio.ogg” type=”audio/ogg” />
</audio>
Which attribute should this developer use?
A) controls
B) autoplay
C) loop
D) src
loop
Which attribute is used to display an image inside a <video> element before the video starts playing?
A) src
B) poster
C) type
D) img
poster
Which style rule correctly defines the 2em Arial font for all level two heading elements?
A) h2 {
font-family-: Arial ; font-weight: 2em; }
B) .h2 {
font-name: Arial; font-size: 2em; }
C) h2 {
font-family: Arial; font-size: 2em; }
D) .h2 {
font-name: Arial; font-weight: 2em; }
h2 {
font-family: Arial; font-size: 2em; }
Given the following CSS code:
body {
color: white;
}
Which part of an element is affected by the color property?
A) Border
B) Background
C) Text
D) Shadow
Text
What should be added first when embedding CSS in a single web page as an internal style sheet?
A) Declarations within a <style> </style> block
B) Declarations within a <head> block
C) A <head> element to the <style> section
D) A <style> element to the <head> section
A <style> element to the <head> section
What is the first character a developer should use for an id selector in CSS?
A) ;
B) #
C) :
D) .
#
A developer has an image that needs to remain in the same place when the page is scrolled.
Which CSS positioning scheme should this developer use?
A) Relative
B) Static
C) Absolute
D) Fixed
Fixed
A developer needs two pixels of space on the left side of content relative to the border.
Which CSS property should this developer use?
A) margin-left:2px;
B) float:left;
C) border:2px;
D) padding-left:2px;
padding-left:2px;
A web designer reviews the following style rule:
#brand {
font-weight: bold;
}
Which paragraph element will it select?
A) <p class=”brand”>Web Design</p>
B) <p id=”brand”>Web Design</p>
C) <p style=”brand”>Web Design</p>
D) <p id=”#brand”>Web Design</p>
<p id=”brand”>Web Design</p>
Which CSS selector defines an element with a “class” attribute equal to “subject”?
A) ::subject
B) #subject
C) @subject
D) .subject
.subject
What immediately encloses the padding in the CSS box model?
A) Border
B) Content
C) Margin
D) Table
Border
What is the outermost box of the CSS box model?
A) Border
B) Content
C) Padding
D) Margin
Margin
Which markup positions an image so that the lower part of it is even with the lower part of the adjoining text?
A) <img src=”sample.jpg” text-align=”bottom”>
B) <img src=”sample.jpg” margin=”bottom”>
C) <img src=”sample.jpg” vertical-align=”baseline”>
D) <img src=”sample.jpg” padding=”baseline”>
<img src=”sample.jpg” vertical-align=”baseline”>
Which syntax for a CSS class floats images to the right?
A) .float {
floatright: right;
margin: 7px;
}
B) .floatright {
float: right;
margin: 7px;
}
C) .float <
float; right;
margin: 7px;
>
D) .floatright <
float: right;
margin: 7px;
>
.floatright {
float: right;
margin: 7px;
}
Which CSS transition should be used on an image to make it ease in when a user’s mouse hovers over that image?
A) transition-property
B) transition-timing-function
C) transition-duration
D) transition-delay
transition-timing-function
Which CSS property should a developer use to specify the bottom of a 3D element?
A) transform-style
B) perspective
C) perspective-origin
D) transform
perspective-origin
texteffect {
A web designer creates the following animation by using CSS3:
position: relative;
animation-name: scroll;
animation-duration: 5s;
animation-timing-function: linear;
animation-play-state: running;
}
@keyframes scroll {
from {left: 0-px;}
to {left: 200px;}
}
How does the content of the element move when the page loads?
A) From left to right, repeating for as long as the page displays
B) From left to right one time
C) From top to bottom, repeating for as long as the page displays
D) From top to bottom one time
From left to right one time
A web page includes the following CSS code:
@keyframes anim_01 {
0% {left: 0px; top: 0px;}
50% {left: 200px; top: 0px}
100% {left: 600px ;top: 0px;}
}
#animation {
position:relative;
animation-name: anim_01;
animation-duration: 4s;
animation-timing-function: linear;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-play-state: running;
}
How often does the animation play when it is invoked?
A) Forever
B) Two times
C) Once
D) Four times
Forever
Given the following CSS code:
div
{
transition-property: opacity, left, top, height;
transition-duration: 5s;
transition-delay: 3s
{
Which value determines how long the transition will last?
A) 0 seconds
B) 1 second
C) 3 seconds
D) 5 seconds
5 seconds
Given the following CSS code:
.box {
width: 150px;
height 150px;
background: red;
margin-top: 20px;
margin-left: auto;
margin-right: auto;
-webkit-transition: background-color 2s ease-out;
-moz-transition: background-color 2s ease-out;
-o-transition: background-color 2s ease-out;
transition: background-color 2s ease-out;
}
.box:hover {
background-color: green;
cursor: pointer;
}
Which color does this box turn when a user hovers a mouse pointer over it?
A) Red with a time delay of two seconds
B) Green with a time delay of two seconds
C) Green with a time duration of two seconds
D) Red with a time duration of two seconds
Green with a time duration of two seconds
A webpage has a section that contains an <aside> element. The element is always 10 pixels from the right and 50 pixels from the top of the browser.
Which type of layout positioning does the <aside> element use?
A) Absolute
B) Fixed
C) Static
D) Relative
Fixed
Which “background-size” property value scales the background image to the greatest height and width that fits within the specified content area?
A) length
B) contain
C) cover
D) percentage
contain
The “background-origin” property has a value named “padding-box”.
Which corner of the padding edge does the “padding-box” value set the background relative to?
A) Upper right
B) Upper left
C) Lower right
D) Lower left
Upper left
Which tag enables developers to include dynamic code in an HTML document?
A) <script>
B) <mark>
C) <main>
D) <section>
<script>
Why is JavaScript considered a scripting language?
A) The code must be interpreted.
B) The code must be compiled.
C) It is driven by events.
D) It is object-oriented.
The code must be interpreted.
Which option declares a variable called “name” and assigns the literal value “Student” to it?
A) string name = Student;
B) string name = “Student”;
C) var name = Student;
D) var name = “Student”;
var name = “Student”;
Which code segment declares a variable and assigns a Boolean value to it?
A) var enabled = true;
B) bool enabled = true;
C) bool enabled = ‘true’;
D) var enabled = ‘true’;
var enabled = true;
Which code segment contains a logical expression?
A) if (total > 250) {discount = true;}
B) discount = total * 0.75 + 1000;
C) var total = get(discount) + 100;
D) placeOrderAndShip (discount, total);
if (total > 250){discount = true;}
Which code segment contains a logical expression?
A) var discount = CalculateDiscount (total);
B) var discount = (total > 250) ? true : false;
C) var discount = total > 250;
D) var discount = total;
var discount = (total > 250) ? true : false;
A user’s information defaults onto a form.
Which event triggers if the user keys in a new value in the First Name field?
A) reset
B) change
C) unload
D) abort
change
Which JavaScript event handler is associated with the form object?
A) onchange
B) onselect
C) onreset
D) onclick
onreset
What are variables that are passed to a function called?
A) Statements
B) Prompts
C) Arguments
D) Keywords
Arguments
What must follow the name of a function in a JavaScript function declaration?
A) Curly braces
B) Calling statement
C) Parenthesis
D) Script block
Parenthesis
Which method should a developer use to create a message and request user input in a text field?
A) alert
B) prompt
C) write
D) confirm
prompt
Given the following JavaScript:
var name = “student”;
Which code statement modifies the “name” variable so that all characters are uppercase?
A) name.toUpperCase();
B) name = name.toUpperCase;
C) name.toUpperCase;
D) name = name.toUpperCase();
name = name.toUpperCase();
Which variable name format does JavaScript use?
A) 1stAddress
B) #address
C) _address
D) .address
_address
Which data type contains properties and methods?
A) String
B) Null
C) Function
D) Object
Object
Which document object model (DOM) method does the Canvas element use?
A) stroke()
B) getContext()
C) fill()
D) beginPath()
getContext()
Which technology is used to access the document object model (DOM)?
A) JavaScript
B) HTML5
C) CSS
D) Canvas
JavaScript
Which JavaScript application programming interface (API) allows for the creation and manipulation of 2-D images?
A) Application cache
B) Canvas
C) Geolocation
D) Drag and drop
Canvas
What uses predefined code to add functionality to HTML5 pages, such as media display and manipulation, document editing, and web storage?
A) Software development kit (SDK)
B) Application programming interface (API)
C) Asynchronous JavaScript and XML (AJAX)
D) Document object model (DOM)
Application programming interface (API)
Given the following code:
ctx.beginPath();
ctx.lineWidth = 3;
ctx.fillStyle = “red”;
ctx.arc(75, 75, 50, 0, Math.PI * 2, true);
ctx.fill();
ctx.moveTo(0, 0);
ctx.lineTO(100, 100);
Which Canvas application programming interface (API) method should a developer use to add the line to the draw path on a canvas?
A) closePath()
B) beginPath()
C) fill()
D) stroke()
stroke()
Which method of the Geolocation application programming interface (API) should a developer use to get periodic updates of a user’s coordinates?
A) watchPosition()
B) clearWatch()
C) toString()
D) getCurrentLocation()
watchPosition()
Given the following markup:
<script>
function DragOver(event) {
}
function drag(event) {
event.dataTransfer.setData("id",event.target.id);
}
function drop(event) {
var id = event.dataTransfer.getData("id");
event.target.appendChild(document.getElementById(id));
}
</script>
<section></section>
<img></img>
Which statement should a developer add to the ‘dragOver’ function to allow the image to be dragged and dropped onto the ‘section’ element?
A) event.cancelBubble = true;
B) event.preventDefault();
C) event.type = “acknowledge”;
D) event.stopPropagation();
event.preventDefault();
Which line of code should a developer use to create an interface that can retrieve data in a client browser?
A) new XMLHttpRequest();
B) <script src = “jquery-1.8.21.min.js” ></script>
C) <script src = “ajax” ></script>
D) new { “AjaxObject”:”xml” }
new XMLHttpRequest();
Given the following HTML code:
<ul>
<li>One</li>
<li>Two</li>
</ul>
Which jQuery code segment inserts an item at the beginning of the list?
A) $(“ul”).before(“<li>Zero</li>”);
B) $(“ul”.prepend(“<li>Zero</li>”);
C) $(“ul > li”).after(“<li>Zero</li>”);
D) $(“ul > li”).append(“<li>Zero</li>”);
$(“ul”).prepend(“<li>Zero</li>”);
Which HTML tag provides ways for users to enter information on forms?
A) <button>
B) <img>
C) <title>
D) <input>
<input>
Which HTLM input type allows for a web address entry?
A) file
B) hidden
C) url
D) number
url
Which form attitude limits the number of characters for an input field?
A) size
B) disabled
C) value
D) maxlength
maxlength
Which element allows a developer to add a caption for a created group of items?
A) <label>
B) <input>
C) <fieldset>
D) <legend>
<legend>
Which attribute value presents form data to a server for processing?
A) url
B) submit
C) reset
D) button
submit
Which global attribute should a developer use to bind a label element to an input element?
A) form
B) for
C) placeholder
D) name
for
Given the following HTML:
What color would you like to use?
<select autofocus>
<option value = “red”>Red</option>
<option value = “blue”>Blue</option>
<option value = “green”>Green</option>
<option value = “pink”>Pink</option>
</select>
What happens when the page loads?
A) The red option is selected
B) The blue option is selected
C) The ‘select’ element in the form takes focus
D) The ‘autofocus’ attribute in the form takes focus
The select element in the form takes focus
Which code segment creates input text that has its value checked against a regular expression?
A) <input type=”text” name”name” format=”[a-zA-Z]”>
B) <input type=”text” name”name” required=”[a-zA-Z]”>
C) <input type=”text” name”name” regex=”[a-zA-Z]”>
D) <input type=”text” name”name” pattern=”[a-zA-Z]”>
<input type=”text” name=”name” pattern=”[a-zA-Z]”>
What is a limitation of user input validation?
A) Users make errors while filling out the form
B) Users have difficulties filling out the form
C) Validation detects only incorrect formatting and missing information
D) Validation detects only invalid content and misleading information
Validation detects only incorrect formatting and missing information.
Given the following markup:
<input id=”password” name=”password” type=”password” class=”password pattern=”.(8,12)” required>
What does the markup do?
A) It generates a password key pair between 8 and 12 characters long
B) It allows a users to enter a password between 8 and 12 characters long
C) It calls a JavaScript function named password with the arguments 8 and 12
D) It executes a stored procedure named password with the arguments 8 and 12
It allows a user to enter a password between 8 and 12 characters long.
Which HTML pattern attribute validates an IPv4 address?
A) <input type =”text” pattern=”[A-Za-z]{3}”>
B) <input type =”text” pattern=”a-zA_Z0-9]+”>
C) <input type =”text” pattern=”\d{1,2}/\d{1,2}/\d{4}”>
D) <input type =”text” pattern=”\d{1,3}.\d{1,3}.\d{1,3}.\d{1,3}”>
<input type=”text” pattern=”\d{1,3}.\d{1,3}.\d{1,3}.\d{1,3}”>
Given the following code:
<form name=”Form” action=”/action.php” method=”post”>
Name: <input type=”text” name=”name”>
<input type=”submit” value=”Submit”>
</form>
What should a developer add or change to ensure that the form is validated when submitted?
A) The method needs to be changed from ‘post’ to ‘get’
B) The input type needs to be c hanged from ‘text’ to ‘submit’
C) The event handler and function should be added to the ‘form’ tag
D) The event handler and function should be added to the ‘input’ tag
The event handler and function should be added to the ‘form’ tag.
Which unit of measurement should a developer use when designing mobile websites to ensure that content fits multiple screen sizes?
A) Pica
B) Pixel
C) Percentage point
D) Inch
Percentage point
What is a characteristic of mobile web design?
A) Screen resolution is not an important factor
B) Easily understood text labels as links
C) Do not use fluid images
D) Media queries should not be used in mobile web design
Easily understood text labels as links
Where should a search field be placed on a mobile site?
A) Across the top
B) Along the right edge
C) Across the bottom
D) Along the left edge
Across the top
Which development phase helps ensure cross-browser compatibility through coding standards?
A) Testing
B) Calibration
C) Validation
D) Production
Validation
What should a developer use to test sites for cross-browser compatibility?
A) Emulator
B) Form
C) Canvas
D) WebGL
Emulator
What is a goal of responsive web design?
A) Server-side rendering
B) Content on a separate site
C) Multiple versions of HTML
D) Dynamic element adjustments
Dynamic element adjustments
What is used in code to specify the width of an image in responsive web design?
A) pc
B) px
C) #
D) %
%
What is an ‘id’?
- unique
- use #
- global attribute that defines an identifier (ID)
Example:
#top {
background-color: red;
padding: 20px
}
What is a ‘class’?
- not unique
- uses a .
- can use multiple classes on the same element
Example:
.introduction {
color: red;
font-weight: bold;
font: 20px Arial
}
