Study Guide Questions
What is the role of HTML in the web trifecta?
"The body", creates the structure of the page using elements that tell the browser how to display content. Uses tags to create elements.
What is the role of JavaScript in the web trifecta?
"The brain"; the major functional programming language for the web. Can perform calculations, validations, and manipulate elements.
What is the role of CSS in the web trifecta?
"The style", visual modification of HTML elements. Can specifically format an element's position relative to the other elements on the page.
How do you validate and test mobile web pages?
* Adjust the configuration of your browser window to several width and height values commonly encountered in mobile devices * functionality testing: links, forms, database connections * interface testing: compatibility between servers * usability testing: navigation, content positioning, accessibility * performance testing: multiple user requests, content loads * compatibility testing: system, multiple browsers, printing options
How do mobile web sites differ from responsive designs?
* Responsive web design is designed to adapt to many different devices (fluid vs adaptive) and is a version of the desktop website that adapts and adjusts to the on-screen content to accommodate whatever device is viewing the page fluid reflows freely adaptive uses specific breakpoints * Mobile web sites are a completely separate state from the desktop counterpart; requires manual updating separate from the desktop site update
How is JavaScript used for input validation?
* test for multiple patterns * add multiple validation feedback messages * customize the appearance of form validation * validate fields where their validity is dependent on a different form field altogether * custom validation can be achieved using the constraint validation API, which allows for defining input constraints beyond the default browser options
How is preventDefault() used with drag-and-drop?
...by calling the preventDefault() method of the event if you have accepted the drop, the browser's default handling is not triggered by the dropped data as well. event . preventDefault();
Use the following CSS rule to identify how much margin is applied to the top of the element? bottom? right? left? margin: 20px 30px 40px 50px;
20px = TOP 30px = RIGHT 40px= BOTTOM 50px = LEFT
Give an example of how to create a class selector in CSS and then apply it to an HTML element.
<!DOCTYPE html> <html> <head> <style> .city { background-color: tomato; color: white;border: 2px solid black;margin: 20px;padding: 20px;} </style> </head> <body> <div class="city"> <h2>London</h2> <p>London is the capital of England.</p> </div> </body> </html>
Give an example of how to embed an audio filed in a webpage.
<audio> element; uses <source> child element to accept MP3, WAV, Ogg. <audio controls autoplay muted> <source src="horse.ogg" type="audio/ogg"> <source src="horse.mp3" type="audio/mpeg"> Your browser does not support the audio element. </audio>
How do you create a canvas and draw a line?
<canvas id="my-canvas" width="300" height="200"></canvas> beginPath() - begins a paty, or resets the current path moveTo(x,y) - moves the current path to the x,y coordinate without creating a line lineTo(x,y) - moves the current path to the x,y coordinate, creating a line stroke() - draws the current path
How are labels, legends, and fieldsets used to group and caption forms?
<fieldset> element provides a container for related form controls <legend> element acts as a heading to identify the group <label> names the fieldset form fields
Create a media query that targets devices at least 350px wide.
<link rel="stylesheet" href="desktop.css" type="text/css" media="only screen and (min-width: 350px)" >
How is an ordered list created? An unordered list?
<ol></ol> = ordered <ul></ul> = unordered list <li></li> = list items <dl></dl> = description list (term) [Coffee] <dt></dt> = defines the term <dd></dd> = describes the term [hot drink]
Give an example of how to create an inline style.
<p color="blue";>Text is blue</p>
Use the following code example and label which portions are the element, attribute, opening tag, and closing tag: <p class="bg-gray" style="color:blue;"> This is a paragraph with blue text</p>
<p></p> = Element style = Attribute <p> = opening tag </p> = closing tag
Give an example of how to embed a video in a webpage.
<video> element; uses <source> child element to store the location the video file will play in the browser; accepts MP4, WebM, Ogg. <track> for subtitles Consists of 4 attributes: height, width, autoplay, controls <video width="320" height="240" controls autoplay muted> <source src="movie.mp4" type="video/mp4"> <source src="movie.ogg" type="video/ogg"> Your browser does not support the video tag. </video>
What is the purpose of the DOM?
A programming interface of the web documents. It represents the page so that programs can change the document structure, style, and content. Represented as nodes and objects.
Give an example of how to create an inline script.
Adds JavaScript to a single HTML element
How is autocomplete different from a datalist?
Autocomplete attribute tells the browser whether to give a user options for completion based on previous input and whether to store the entered value for future completion Datalist tag specifies a list of pre-defined options for an <input> element
Why is it important to validate code and adopt a single standard?
Benefits of using universal markup: *cleaner pages with adaptable changes/revisions *prevents page breaks following browser updates *ensures everyone on a team follows the same coding practice and can work interchangeably *ensures cross-browser and device compatibility and accessibility Benefits of validation: *Ensures that code complies with standards *Creates web pages that are cross-browser, cross-platform compatible, including future versions *Increases search engine visibility *Reduces unexpected errors and makes the page more accessible to the user Syntax errors will not stop a browser from rendering. This type of error is parsed by the browser's built-in rules and will still render the page.
How is HTML code validated?
Code validators via URL Input, File Upload, or Direct Input. Most browsers attempt to correct some syntax errors. Typos in tag names are not fixable, but skipped so that the page still loads but skips what it cannot read. Why use a code validator instead of a visual check? *Different browsers can have different renderings of a web page *Code validators can identify syntax or logic errors that are not readily visible
How do we designate and identify string data?
Data type that holds any string of alphanumeric characters used for words or for numbered phrases that are not mathematically manipulated
How has HTML evolved to support modern design techniques?
Flavors were introduced in HTML4 to ensure backwards compatibility. HTML5 allows fully scalable pages without the need for third-party software via HTML5 elements. UX (user experience) - drag-and-drop capability Responsive design - CSS hover options Accessible - for users with disabilities Elements that enable game development.
Give an example of how to embed a style sheet.
Full URL <link rel="stylesheet" href="https://www.w3schools.com/html/styles.css"> Style Sheet in HTML folder on web site <link rel="stylesheet" href="/html/styles.css"> Style sheet in the same folder as current page <link rel="stylesheet" href="styles.css">
How is a function called?
HTML code element or another JS function
What is the web development trifecta?
HTML, CSS, JavaScript; Allow interaction with web browsers via code and the creation of websites and applications.
How are ID selectors and class selectors different in purpose?
ID(#) targets one HTML element Class(.) targets all elements assigned to the class
What are key considerations when designing web sites for mobile devices?
Interactive elements may need to be increased in size to allow for touch interactions The total file size should be kept small so that the website does not use too much data The website should adapt to the size and orientation of the screen
How do mobile web sites differ from mobile apps?
Mobile app - an application designed for a specific mobile operation system Mobile web site - web site designed specifically for viewing on mobile device browsers
What are overlay and z-index used for?
Overlays are elements that lay overtop other elements, usually for a brief amount of time. They are controlled by the z-index property. Z-index property accepts any real number (including negatives) and it sets the z-order of elements. The higher the number, the higher on the stack an element will be.
How are padding and margin different?
Padding surrounds the content; space between the content and the border Margin is the outermost box; space between the border and the surrounding elements
Explain the box mode.
Refers to how HTML elements are displayed. Each element is recognized as a square made up of 4 nested inner sections: Content --> Padding --> Border --> Margin
How are structure elements different from basic elements?
Structural elements have a specific role and can be easily seen in code. (<header><main><nav><section>...) <div></div> repeated in a block of code makes it difficult to differentiate content in larger sites and code that is interpreted by the browser.
Why is it helpful to use an external stylesheet?
The CSS rules are added on a separate file which can be referenced by multiple HTML pages and updated universally.
How is function output defined?
The functions pack up JS commands to perform a task. This task can be carried out by executing commands that produce some sort of output, and/or returning one or more variables to the function caller, which can be either an HTML code element or another JS function.
What is concatenation? Create an example using three separate string values.
The joining of 2 or more strings and returns a new string combination: string.concat(string1, string2, string3) = stringstringstring "string" + "string" + "string" = stringstringstring
What does it mean to scale, translate, and skew an object?
The transform CSS property lets you rotate, scale, skew, or translate an element. It modifies the coordinate space of the CSS visual formatting model. "developer.mozilla.org"
What is the purpose of XMLHttpRequest?
These objects are used to interact with servers. You can retrieve data from a URL without having to do a full page refresh; used with AJAX to run in the background.
How do the shorthand properties work? (margin, padding, border, background, transform, transition, animation, etc.)
They let you set the values of multiple other CSS properties simultaneously. You can write more concise style sheets, saving time and energy. "developer.mozilla.org"
How are emulators used to ensure cross browser compatibility?
They test display performance, though limited to the environment chosen to test with A user might be using a finger on a touch screen instead of a mouse and keyboard
Why is the doctype important?
This is the first tag in an HTML document that informs the browser which version of HTML the web page is written in.
What is the purpose of each positioning scheme?
To eliminate the need for third-party plug-ins
How is the CSS transition matrix method used?
To style elements in a two-dimensional space. matrix() function is an alternative to the two-dimensional transform functions rotate(), skew(), scale(), and translate() "www.quackit.com"
How is a transition different from a transformation?
Transitions provide a way to control animation speed when changing CSS properties. Transformation changes the shape and position of the affected content without disruption the normal document flow. (only elements position by the box model can be transformed. display:block)
What is inline validation?
Validating as the user types or as a field is completed
What are the limitations of form validation?
Validating on the client side first speeds up response time for the user and reduces the load on server resources Validating on the server side ensures the data is valid and secure before storing it or using it to execute code Validation can only detect incorrect format and missing information, not if information is semantically correct; validating user interaction can improve the end-user experience
How is the select event triggered when working with form fields?
When some text has been selected
What is the difference between word-break and word-wrap?
Word-break property specifies how words should break when reaching the end of a line Word-wrap property allows long words to be able to be broken and wrap onto the next line
What is pogo-sticking?
a searcher quickly navigates back and forth between pages in search results
What do action and method define?
action attribute of the FORM element defines where to send the form data the method attribute specifies the HTTP method for sending the form data
Does JavaScript run on the server or on the user agent/client side?
agent/client side; the browser processes the code, not the web server
How is a function defined?
aka module; a function is defined by: *a reserved word: function *an identifier: the function name *the input parameters enclosed by parentheses *the function commands enclosed by curly braces
How do the following methods work: alert() prompt() confirm() document.write() console.log()
alert() - used to display a virtual alert box, mostly to give a warning message to the user; typically has an OK button prompt() - displays a dialog box that prompts the user for input confirm() - used to display a model dialog with an optional message and two buttons, OK and Cancel document.write() - writes a string of text to a document stream opened by document.open() console.log() - used to print any kind of variables defined or just print a message
How is alert() different from document.write()?
alert() displays the content in a pop up dialog box document.write() displays the content in the actual web page
Which element would be selected with this selector: h2~p
all <p> elements preceded by an <h2> element
How is the <datalist> element used?
allows a list of options to be associated with a text input < datalist id = fav-color > <option value = "red" > < /datalist >
What does it mean to parse string values?
analyzing and converting the string values into a runtime environment
What do append() and prepend() do?
append() - puts data inside an element at the last index prepend() - puts data at the first index of an element
What is the difference between background-clip and background-size?
background-clip - specifies whether the background extends into the border or not background-size - defines the size of background images
How is click different from onclick?
click a function on HTML elements you can call to trigger their click handlers onclick occurs when the user clicks on an element of the web page
How is each input type used? What does it look like on a webpage?
color - allows the user to choose colors date - allows the user to enter a date using a drop-down date-picker calendar (sans time zone) datetime - allows the user to choose a date and time with a GMT time zone datetime-local - allows the user to choose a date and time with a local time zone email - allows the user to enter one or more email address(es) month - allows the user to choose a date using the month and year (sans time zone) number - allows the user to enter rational integers or float values range - allows the user to enter numbers using a slider control search - allows the user to enter text for a search query tel - allows the user to enter a phone number time - allows the user to enter a time (sans time zone) url - allows the user to enter a URL week - allows the user to choose a date using the week and year (sans time zone)
How do you use images appropriately on mobile web pages?
consider responsive adaptive position of the content in a mobile web page <picture> tag allows the definition of a source set of images with <source> tags allows for setting variable options for low resolution, medium, high to provide better end user experience
What is the role of grid layouts in responsive design?
content may be side-by-side or stacked based on the columns that fit on the screen width of the users device
What is click-to-call? How is it created?
creates a link to dial a phone number <p><a href="tel:+4733378901">+47 333 78 901</a></p>
What new form input types were introduced in HTML5?
date, datetime, datetime-local, time, week, month, email, tel, URL, search, range, color, number
What is the function of the <output> element?
display purposes only; to display calculated values, entered by users, in forms using the for attribute
Give an example of a real-world object and the properties and methods of that object.
dog (name, color, breed) behavior (barking, fetching, wagging tail)
What is the difference between draggable, dragstart, and dragover?
draggable (draggable) - a global attribute that indicates whether the element can be dragged dragstart (ondragstart) - event is fired when the user starts dragging an element or text selection dragover (ondragover) - event is fired when an element or text selection is being dragged over a valid drop target **making an element draggable requires adding the draggable attribute and the ondragstart global event handler**
Which element would be selected with this selector: a[class^="col"]
every <a> element whose class attribute value begins with "col"
What role do frameworks play?
facilitate the pursuit of a responsive website templates, tools, boilerplates that provide basic foundation for responsive design
Use the following code example and label which portions are the function declaration, function block, parameter(s), argument(s), calling statement, and return values: var num = 7; funciton calculate(x) { return x * 3 + 2; } var sum = calculate(num);
function calculate(x) {} = function declaration { return x * 3 + 2;} = function block (x) = parameter var num = 7; and var sum = calculate(num); = argument console.log(calculate(x)); = calling statement x * 3 + 2; = return values
Use the following code example and label which portions are the selector, property, value, and rule: h1 { color:blue; } #wrapper { font-size: 1.25em; }
h1 = selector (selector) color = property (declaration) blue = value (declaration) rule = (selector) + (declaration block)
What is the purpose of go()?
history . go() loads a URL (page) from the history list; only works if the page exists in the history list
How can we determine the number of URLs in the history list for a user?
history . length; the length property returns the number of URLs in the history list of the current browser window; at least 1 because the list returns the current page
How do we ensure a form is validated when submitted?
inline validation
What are the background-size values?
length, percentage, cover, contain
Which form attributes are used to validate user input?
max - maximum value allowed for numeric inputs min - minimum value allowed for numeric inputs step - step intervals allowed for numeric inputs maxlength - maximum number of characters minlength - minimum number of characters
Which event triggers when you close a webpage?
onunload
What are the background-origin values?
padding-box, border-box, content-box
What is the function of the <keygen> element?
provides a way to generate key pairs when a form is submitted; encryption
What is the purpose of each form input attribute?
specifies the URL of the file that will process the input when the form is submitted
What does the autocomplete attribute do when attached to a <form> versus an <input>?
specifies whether a form or an input field should have autocomplete on or off
What are three types of buttons used in a web form?
submit - submits form-data reset - resets the form-data to default values button - clickable button
What is the purpose of a manifest file?
tells the browser what to cache/not to cache
What does the prompt() method return?
the input value if the user clicks OK, otherwise it returns null
How are patterns used for input validation?
the pattern attribute takes a regular expression as a value regular expressions are patterns used to match character combinations in strings \d - any digit 0-9, shorthand for [0-9] \w - any alhpanumeric character, including underscore, shorthand for [A-Za-z0-9] \s - any whitespace character * - match zero or more times + match one or more times {n} - match exactly n times {n,} - match n or more times {n,m} match between n and m times inclusive
What does the confirm() method return?
true if the user clicks OK, otherwise false
What is the purpose of getContext()? What contexts are available?
used to request the preferred rendering context; 2d - flat two-dimensional drawing webgl/webgl2 - three-dimensional rendering
Given the following animation, how would you apply it to an element? @keyframes color-change { from { background-color: aqua;} to { background-color: aquamarine;} }
using JavaScript: CSSKeyframesRule.name Represents the name of the keyframes, used by the animation-name property. @keyframes color-change
How is a CSS media query used?
usually chosen so that they capture a specific group of common screen sizes a person resizing their browser on a desktop will be shown the CSS breakpoint based on the size of their web browser, not the size of the computer screen
Give an example of how to create a variable.
var x = 2; (integer) var x = "two"; (string)
Use the following code example and label which portions are the variable, assignment, method: var userName=prompt("What is your name?");
variable = prompt assignment = "What is your name?" method = string other string options are number and Boolean
How are images positioned vertically?
vertical-align
