HTML
1. What is the web development trifecta?
HTML, CSS, JavaScript
2. What is the role of HTML in the web trifecta?
It is the “base” of the website. The structure.
3. What is the role of CSS in the web trifecta?
CSS is the formatting
4. What is the role of JavaScript in the web trifecta?
Javascript makes it interactive and allows actions to be completed
5. How has HTML evolved to support modern design techniques?
HTML5 is more complex to support the changes in web development. It has new
functionalities like multimedia, new tags and elements, and new APIs
6. Why is the doctype important?
It is instructions for the web browser about what version of HTML the page is written in.
It keeps it the same throughout different browsers.
7. How is an ordered list created? An unordered list?
ordered list - <ol> </ol> (numbers, alphabet, roman numerals), unordered list <ul> </ul>
(bullets)
8. How are structure elements different from basic elements?
A structure element is what creates the different sections (ex. header, footer, article). A
basic element defines the content of the web page (Ex. title tag, paragraph, anchor tags)
9. How is HTML code validated?
After declaring the standard (DOCTYPE) you submit it to a validator on the internet
(W3C) or through one on your computer.
10. Why is it important to validate code and adopt a single standard?
It helps to teach best practices and creates less errors.
11. Give an example of how to embed a video in a webpage.
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
This is a sample video code
</video>
12. Give an example of how to embed an audio file in a webpage.
<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
This is a sample audio code
</audio>
13. Use the following code example and label which portions are the element, attribute, opening
tag, and closing tag:
a. <p class="bg-gray" style="color:blue;">This is a paragraph with blue text</p> Whole thing is the element
Element - <p class="bg-gray" style="color:blue;">This is a paragraph with blue text</p>
Opening Tag - <p>
Attribute - class="bg-gray" style="color:blue;">
Closing Tag - </p>
Using CSS
1. Use the following code example and label which portions are the selector, property, value, and
rule:
a. h1 { color:blue; }
Selector – h1
Property – color
Value – blue
Rule - h1 { color:blue; }
b. #wrapper { font-size: 1.25em; }
Selector - #wrapper
Property – font-size
Value – 1.25 em
Rule - #wrapper { font-size: 1.25em; }
2. Give an example of how to embed a style sheet.
<head>
<link rel="stylesheet" href="mystyle.css">
</head>
3. Give an example of how to create an inline style.
<h1 style="color:blue;text-align:center;">This is a heading</h1>
4. Why is it helpful to use an external stylesheet?
It is all in one file, and eaiser to maintain just the CSS From that file instead of having to
locate it in the code
5. How are ID selectors and class selectors different in purpose?
#id - uses the id attribute of an HTML element to select a specific element
.class – Selects HTML elements with a specific class attribute
6. Give an example of how to create a class selector in CSS and then apply it to an HTML
element.
Class - .center {
text-align: center;
color: red;
}
7. Give an example of how to create an ID selector in CSS and then apply it to an HTML element.
8. ID - #para1 {
text-align: center;
color: red;
}
9. How are images positioned vertically?
With the vertical align property
10. Explain the box model.
It is the “box” around an HTML Element. The Content, Padding, Border and margin.
11. How are padding and margin different?
Padding is around the content. The margin is the outside border.
12. What is the purpose of each positioning scheme?
13. Use the following CSS rule to identify how much margin is applied to the top of the element?
bottom? right? left?
a. margin: 20px 30px 40px 50px;
Top – 20px
Bottom – 40 px
Right – 30 px
Left – 50 px
Intro to CSS3
1. What is the difference between background-clip and background-size?
Background clip – determins what part of the background is shown, background –
size is how it will grow or shrink
2. What are the background-size values?
Auto (default), length (width and height), percentage, cover (cover entire comtainer),
contain (resize background image to make sure its fully visible), initial (default),
inherit (inherits from parent)
3. What are the background-origin values?
Padding-box (default), border-box, content-box, content box, initial, inherit
4. How do the shorthand properties work? (margin, padding, border, background, transform,
transition, animation, etc.)
When you put all the measurements and styles in one line. No commas needed.
5. Which element would be selected with this selector: h2~p
paragraphs preceded by h2
6. Which element would be selected with this selector: [class^="col"]
selects every element whose class value begins with “col”
7. What is the difference between word-break and word-wrap?
Word-breaks breaks the word in the middle of the sentence, word-wrap moves the
word down to the next line to wrap it.
Advanced CSS3
1. How is the CSS transformation matrix method used?
matrix() combines all the 2D transform methods into one. It takes 6 parameters,
containing math functions and allows you to rotate, scale, move and skew elements.
2. How is a transition different from a transformation?
Transition creates gentle transitions and transformation moves or modifies the look
of the element.
3. How are animations different from transformations?
Animations can change property values inside their keyframes
4. What does it mean to scale, translate, and skew an object?
Scale – Defines a scale transformation changing elements width and height
Translate – moves the element along the x and y axis
Skew – transforms along the x and y axis
5. What are overlay and z-index used for?
Overlay places the element over the selected element. z-index layers them in an
order.
6. Given the following animation, how would you apply it to an element?
@keyframes color-change {
from { background-color: red; }
to { background-color: blue; }
}
You would put it inside of the style tag after the div instructions
Intro to JavaScript
1. Does JavaScript run on the server or on the user agent/client side?
Client side
2. Give an example of how to embed a script.
- with the script tag in either header or title
<head>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "Paragraph
changed.";
}
</script>
</head>
3. Give an example of how to create an inline script.
within the line of text
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "Paragraph
changed.";
}
</script>
4. Give an example of how to create an external script. – href = script
function myFunction() {
document.getElementById("demo").innerHTML = "Paragraph
changed.";
}
5. Give an example of a real-world object and the properties and methods of that object.
Calculator – methods: add, subtract. Properties – manufacturer, size
6. Give an example of how to create a variable. – Container for storing data. Var z = x+y;
var x = 5;
var y = 6;
var z = x + y;
7. How do we designate and identify string data? written inside quotes
8. What is concatenation? Create an example using three separate string values. –
SELECT CONCAT(‘SQL’, ‘ is’, ‘ fun!’);
9. Use the following code example and label which portions are the variable, assignment,
method:
b. var userName = prompt("What is your name?");
i. Variable – What is your name
ii. Assignment - =
iii. method = prompt()
10. What does it mean to parse string values? It will parse values as a string and returns
the first integer.
JavaScript Events, Functions and Methods
1. How do the following methods work:
a. alert() – When you want information to pop up as a window loads
b. prompt() – prompts a response
c.
confirm() – displays a box with a message, ok button or cancel button.
d. document.write() – write something directly to HTML
e. console.log() – writes something to the console
2. What does the prompt() method return? – true with response
3. What does the confirm() method return? – true with ok
4. How is alert() different from document.write()? alert is an actual pop up box, write
displays the content in a webpage
5. How is click different from onclick? – onclick triggers a function that requests a
response. click simulates a mouse-click
6. How is the select event triggered when working with form fields? with the trigger()
method
7. Which event triggers when you close a webpage? onunload
8. How is a function defined? – with the function keyword followed by a name and ()
9. How is a function called? with the function name ()
10. How is function output defined? return followed by function or statement
11. Use the following code example and label which portions are the function declaration,
function block, parameter(s), argument(s), calling statement, and return values:
iv. var num = 7; -declaration
calling statement - function calculate(x) {
return x * 3 + 2;
} – block (argument inside)
var sum = calculate(num); - return value
API
1. What is the purpose of the DOM? – represents the page so programs can change the
document structure, style ad content
2. How do you create a canvas and draw a line? – beginpath() moveTo(x,y), lineTo(x,y)
3. What is the purpose of getContext()? What contexts are available? – returns a drawing
context on the canvas, if null the content identifier is not supported, or the canvas
has already been set to a different context mode
4. What is the purpose of a manifest file? – contains metadata for a group of
accompanying files that are part f a set or coherent unit
5. What is the difference between draggable,dragstart, and dragover? – draggable means it
can be drug. Drag start activates when it starts dragging, drag over is when the
mouse is still in the control bound rectangele and is stilld ragging something
6. How is preventDefault() used with drag-and-drop? indicates that a drop is allowed at
that location.
7. How can we determine the number of URLs in the history list for a user? With the
history.length property.
8. What is the purpose of go()? – move forward or backwards through the history
depending on the value of a parameter
9. What is the purpose of XMLHttpRequest? – to interact with servers
10. What do append() and prepend() do? append puts data inside of an element, prepend
puts the prepending element in the first index
HTML 5 Forms
1. What new form input types were introduced in HTML5? How is each input type used?
2. What does it look like on a webpage
3. How is the <datalist> element used?
specifies a pre-defined option for an <input> element. It is used to provide an
autocomplete feature for <input> elements. Users will see a drop-down list of predefined options as they input data.
4. What is the function of the <keygen> element?
Returns the id of the form containing the <keygen> element
5. What is the function of the <output> element?
The output tag is used to represent the result of a calculation
6. What is the purpose of each form input attribute?
displays the element in different ways depending on the type attribute
7. What do action and method define?
action – specifies where to send the data when a form is submitted
Method (get/post) – specifies the HTTP method to use when sending form-data
8. What does the autocomplete attribute do when attached to a <form> versus an <input>?
autocomplete on a form automatically completes values based on values that the
use has entered before
9. How is autocomplete different from a datalist?
datalist brings up a drop down menu with options
10. What are three types of buttons used in a web form?
Submit, Radio, Checkbox
11. How are labels, legends, and fieldsets used to group and caption forms?
They tell the screens readers that a group of form fields relate to each other and
provide a label for the group
Completing, submitting and Validating Forms
1. What are the limitations of form validation?
If there is an error in the form, it will not allow the user to proceed
2. How do we ensure a form is validated when submitted?
It will not return any errors
3. What is inline validation?
validating as you go, line by line to prevent errors when you submit it all at once
4. Which form attributes are used to validate user input?
pattern, min, max, required, step, minlength, maxlenght
5. How are patterns used for input validation?
If the specified pattern is invalid, no regular expression is applied and the attribute
is ignored
6. What is pogo-sticking?
it is used to describe a situation where a searcher quickly navigates back and forth
between pages in search results. It penalizes websites
Mobile Design
1. What is click-to-call? How is it created?
It allows uses to click a button to dial the number from the web app. It is created
using the <input type=”tel”> followed by id, name and the phone number
2. How do mobile web sites differ from mobile apps?
Mobile websites are designed for smaller devices, so they are a cleaner less
cluttered looking web page. Mobile apps are more user friendly versions of the
webpage, that gives the user higher level items that are easier to access. Mobile
apps will be downloaded to the phone.
3. How do mobile web sites differ from responsive designs?
a responsive design site will automatically resize and reformat a sites content based
on the size of the screen being used.
4. What are key considerations when designing web sites for mobile devices?
layout of pages, button sizes, menus, avoid pop-ups, make call to actions eye
catching, make it easy to use, remove long links, provide a search feature
5. What should be done to increase the usability of navigation on mobile devices?
minimize content colums and maximize navigation, hide/unhiding content columns
according to mouse hover, use dedicated web pages for navigation only that can be
accessed by a single button
6. How are emulators used to ensure cross browser compatibility?
they can be used to test web pages in different platforms
7. How do you use images appropriately on mobile web pages?
They must have the appropriate resolution to enhance the user experience. They
also need the correct image-related tags
8. How do you validate and test mobile web pages?
with an online emulator and a validators.
9. What is the role of grid layouts in responsive design?
it makes it easier to place elements on a page
10. How is a CSS media query used?
they allow you to apply CSS styles depending on the devices general type or other
characteristics such as screen resolution or browser viewport width
11. Create a media query that targets devices at least 350px wide.
@media (max-width: 350px) {
/* … */
}
12. What role do frameworks play?
it is a complete set of software built to help you develop apps more easily
