-
On a website, what is the purpose of HTML code?
HTML describes the structure of a web page using elements. These elements can create headings, subheadings, paragraphs, tables, images, videos, etc.
-
What is the difference between an element and a tag?
An element tells the browser how to modify the content of a web page. An element is usually made up of two tags that surround information. For example, the paragraph element would create a new paragraph by enclosing the paragraph text with the paragraph tags:
<p> This is a new paragraph. </p>. The<p>and</p>are the opening and closing tags of the paragraph element, respectively. -
Why do we use attributes in HTML elements?
Attributes further modify the contents of an element. For example, the "lang" attribute can indicate the language used in a particular paragraph. The example on page 25 is:
<p lang="en-us">Paragraph in English</p>The element tag consists of an attribute value (in the example above, it'slang) and an attribute name ("en-us"in the example). Most attributes are already defined or have a format that must be followed. -
Describe the purpose of the head, title, and body HTML elements.
Everything in the
<body>element is shown inside the main browser window. The<head>element includes information about the page and often contains the<title>element. This is not shown within the main browser window. The contents of the<title>element will be shown in the tab or the title bar of the browser window. -
In your browser (Chrome), how do you view the source of a website?
In Chrome, you can right click and select "View Source" or "Inspect", or you can click on the three dots in the top right hand corner, click on "More Tools" then "Developer Tools. You can also use the shortcuts CTRL + U for View Source and CTRL + SHIFT + I to inspect.
-
List five different HTML elements and what they are used for. For example,
<p></p>is a paragraph element, and it is used to represent a paragraph of text.-
<h1>This is the heading element and it creates headings. Numbers 1-6 can be used to make progressively smaller headings/subheadings. -
<b>This is the bold element and it makes text appear bold. -
<i>This is the italic element and it makes text appear italic. -
<hr />This is the horizontal rule element and inserts a horizontal line.
-
<blockquote>This is the blockquote element and it indents the text contained in the blockquote tags.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nec mattis nisl, et imperdiet mauris. Phasellus dapibus mauris maximus laoreet dapibus. Quisque et nisi hendrerit, pellentesque mi sit amet, congue quam.
-
-
What are empty elements?
Empty elements are those that have no words between an opening and closing tag. The
<br />break element and the<hr />horizontal rule element are examples of empty elements. -
What is semantic markup?
Semantic markup doesn't change the structure of the page, but adds extra information. Some semantic markup elements can be helpful for screen readers and/or search engines.
-
What are three new semantic elements introduced in HTML 5? Use page 431 in the book to find more about these new elements.
<header><footer>and<nav>are new elements. The header element contains the main header that appears at the top of every page, while the footer contains what appears at the bottom of every page.<article>and<section>elements can also have their own headers and footers. The<nav>element is used to contain the main navigation blocks on a site.
-
There are three main types of lists in HTML: ordered, unordered, and definition. What are their differences?
Ordered lists , created with the
<ol>element, are lists where each item is numbered. They can be numbered with arabic numerals, roman numerals, or letters using CSS properties.- This is an ordered list item.
- This is an ordered list item.
- This is an ordered list item.
Unordered lists use the
<ul>element and typically list items have bullet points, which can also be changed using CSS properties.- This is an unordered list item.
- This is an unordered list item.
- This is an unordered list item.
Definition lists use the
<dl>element. The<dt>element denotes the definition term, or the word being defined, and the<dd>element denotes the definition of the term. -
What is the basic structure of an element used to link to another website?
This structure:
<a href="http://www.npr.org/">NPR</a>produces this link: NPR -
What attribute should you include in a link to open a new tab when the link is clicked?
If you want a link to open a new tab, you include the "target" attribute:
<a href="http://www.npr.org/" target="_blank">NPR</a> -
How do you link to a specific part of the same page?
First you need to identify parts of the page where a link will point to by using the
idattribute in any HTML element. Then, you use the<a>element with the value of the id attribute you want to link to, preceded by the # symbol:<a href="#top">Top</a>could link to an element with an id of top.
-
What is the purpose of CSS?
CSS allows you to change how the content of elements appear through creating rules.
-
What does CSS stand for? What does cascading mean in this case?
CSS stands for "Cascading Style Sheets." Cascading means that you can write generic or simpler style sheets that can apply to most elements, and then you can override the properties of individual elements. The last rule takes more precedence, and more specific rules take precedence. You can also add
!importantto any property value to give it precedence over other rules for the same element. -
What is the basic structure of a CSS rule?
A CSS rule has a selector (which indicates to which element the rule applie), as well as a declaration (which indicates how the selector should be styled). The declaration is made up of a property and a value separated by a colon. The declarations are written inside curly brackets. More than one property can be specified, and they would be separated by a semi-colon.
-
How do you link a CSS stylesheet to your HTML document?
In the html document, a
<link>element is used to connect a CSS file to an HTML document. An example of this might look like<link href="styles.css" type="text/css" rel="stylesheet" />This element usually sits inside the<head>element. -
When is it useful to use external stylesheets as opposed to using internal CSS?
When you have a website with multiple pages, an external stylesheet allows the website to load faster since only one stylesheet needs to be downloaded. To edit multiple pages' styles, only one stylesheet needs to be edited. An external stylesheet also allows the HTML code to be cleaner and easier to read.
-
Describe what a color hex code is.
A color hex code is a six-digit code following a # that represents the amount of red, green, and blue in a color.
-
What are the three parts of an HSL color property?
The three parts of an HSL color propertery are hue, saturation, and lightness values. Hue is typically the base color, saturation is the amount of gray in a color, and lightness is the amount of white or black in a color.
-
In the world of typeface, what are the three main categories of fonts? What are the differences between them?
There are serif, sans-serif, and monospace/fixed with fonts. Serif fonts have serifs or little details on the ends of the letters, sans-serifs do not have serifs. San-serif fonts tend to look cleaner and are more readable when the font is small. Monospace fonts have characters that are all the same width.
-
When specifiying font-size, what are the main three units used?
Pixels, Percentages, and Ems are the three units used to specify font size.
-
If you're using an input element in a form, what attribute controls the behavior of that input?
The type attribute controls the behavior of the input. The type attribute could be set to text, password, radio, checkbox, submit, hidden, etc.
-
What element is used to create a dropdown list?
The
<select>element is used to create a dropdown list. -
If you're using an input element to send form data to a server, what should the type attribute be set to?
If you want an input element to send form data to a server, you should set the type attribute equal to submit
type=“submit” -
What element is used to group similar form items together?
The
<fieldset>element is used to group similar form items together.
-
Describe the differences between border, margin, and padding.
Borders separate the edge of one box from another. Every box has a border, but it may be invisible.
Margins are outside the border and you can use it to create a gap between the borders of boxes that are next to each other.
Padding is the space between a border and the contents of a box.
-
For a CSS rule padding: 1px 2px 5px 10px, what sides of the content box does each pixel value correspond to?
1px: top, 2px: right, 5px: bottom, 10px: left
-
Describe the difference between block-level and inline elements.
Inline elements have no line breaks before or after them. They flow in between the surrounding text. Block elements have white space above and below them and strt a new line.
-
What is the role of fixed positioning, and why is z-index important in the scenario of using fixed positioning?
Fixed positioning places an element in relation to the browser window and will not move if the user scrolls up or down. Other elements will ignore the space that the fixed element would have taken up. The z-index allows you to order elements from back to front. The higher the z-index, the closer the element is to the front layer of the page. In fixed positioning, you can use the z-index to prevent elements from appearing over others (like text scrolling over a fixed heading). The z-index is also called the "stacking context."
-
What is the difference between a fixed and liquid layout?
Fixed with layouts do not change size when the browser window is changed. The gives the designer more control over the appearance and position of elements, but can be hard to read on certain devices and/or if the user changes the font size. Liquid layouts can expand and contract based on the browser window size. However, the design can end up looking very different than what the designer intended.
-
In an image element, why is the alt attribute important?
The
altattribute allows those who use screen readers (such as the visually impaired) and search engines understand what an image contains without having to see the image. -
What determines if an image element is inline or block?
If an image is followed by a block level element, then the block level element will be on a new line after the image. If an image is inside a block level element, then it will behave as an inline element.
-
What are the benefits of jpg or png image file formats?
JPEGs are used when displaying an image with many colors and will better display those images than a PNG. JPEGs balance file size and image quality. A PNG is more appropriate for logos, with areas filled with all of the same exact color. (Logos, diagrams, etc.) The benefit is a small file size. It is not appropriate for colorful photographs/images.
-
What is the benefit of specifying the height and width of images in CSS compared to specifying in the HTML?
Specifying these rules in CSS will allow you to keep all the rules that affect the presentation of the page all in one place (in the CSS).
-
What is an image sprite, and why is it useful?
An image sprite is a single image that has multiple versions of an interface (like a button, for example). A sprite will allow you to load only one image, but be able to display a button, what the button looks like when hovered over, and what the button looks like when clicked/active. You achieve this by providing just enough width/height in order to show one section of the image at a time and specifying which part of the image to show. Loading only one image will make loading the page faster.
-
How do you declare a variable. What does the equals sign really mean in JavaScript? What is it called in JavaScript?
In order to declare a variable, you use the variable keyword
varfollowed by the variable name and a semicolon.var subtotal;would declare a variable called subtotal. The equals sign is the "assignment operator" and it allows you to assign a value to a variable. For example,subtotal = 3;would set the subtotal variable's value to 3. -
There are three big data types in JavaScript: numbers, strings, and booleans. Describe what each of them are.
Numbers are just ... numbers. They can be positive or negative, integers or decimals. Math can be done with these data. Strings are made of words (and other characters) andthey are enclosed within a pair of single or double quotes. Math cannot be done to these types of data. Boolean data can be either true or false.
-
What are the six rules for naming variables? What are a few JavaScript reserved words that you should avoid using for variable names?
- The name must begin with a letter, a $, or an underscore. It cannot start with a number.
- The name can contain letters, numbers, $, or underscores. It cannot use a - or a period.
- You cannot use keywords or reserved words such as: var, class, if, new, true, false, function.
- Variables are case sensitive. Don't set two variables with the same word(s) but with different capitalization.
- The variable name should be descriptive of the value(s) stored in the variable.
- If the variable has more than one word, use camel case:
camelCaseis where the first word is not capitalized, but the first letter of each subsequent word is capitalized.
-
How can an array be useful when dealing with multiple related values? How do you access/change a value in an array?
Arrays can store any number of related items in a list and you don't need to specify how many items are in that list. To access/change a value in an array, we must remember that the first item has an index of 0, the second has an index of 1, etc.
var animals = ['cat', 'dog', 'cow'] //This will access the first item in the animals array ('cat') animals[0] //This will change the second item animals[1] = 'skunk'; -
What is the difference between an expression and a statement?
Statements are instructions that the computer follows, each of which sits on a new line. Expressions are statements that result in a single value, such as assigning a value to a variable, or those that use two or more values to return a single value
var area = 4 * 4orvar fullName = firstName + " " +lastName. -
What are three types of operators and how are they used?
Assignment operators assign a value to a variable:
firstName = "John"Arithmetic operators do basic math and follow the order of operations:triangleArea = base * height / 2String operators (+) combine or "concatenate" strings:name = "Brianna" + " DelValle"
- If we have a function defined as
function sayHello(){console.log("Hello!")}, what is the difference between entering sayHello and sayHello() in the console?
When you have a defined function, you make the function run if you call it with parentheses sayHello() will actually cause the console log to show Hello!, while typing in sayHello will cause the console to show the contents of the function sayHello(){console.log("Hello!")}
-
What is the difference between function parameters and arguments?
A function parameter are those values that are needed for the function to run and are in curly braces when the function is declared. Arguments are the values passed into the code when calling the function.
-
What is the keyword return used for?
return is used to return a value to the code that called the function. It also causes the interpreter to leave the function and go back to the statement that called it.
- How are local variables better than global variables? Are there instances you can think of where you might want to use a variable that is globally scoped over local?
Local variables are better than global variables because they will reduce the potential for variable naming conflicts. They also require less memory, since local variables are only stored during their use within a function. This can improve the user experience and speed up loading of the website.
A global variable might be used for debugging. A global variable will let you see when a variable changes value.
-
Psychology: How much work is required to get to goal?
Example: Google
You are able to misspell almost anything and still get relevant search results.
Non-example: myFitnessPal
Until recently, misspellings when looking up food items would return no results.
-
Usability: Are there any user mistakes you could prevent?
Example: Gmail
Gmail has a lab you can enable that will notice words like "see attached" and will ask you if you meant to attach a file before sending if it sees no file has been attached.
Non-example: Facebook
Older users often mix up the purpose of the search bar and the status update field. Older users also confuse posting to one's own timeline with posting on another person's timeline.
-
Design: Do users think it looks good? Do they trust it immediately?
Example: Reddit's new design
Reddit's front page (and subreddits) look more like a timeline that users are comfortable with from other social media sites like Facebook, Instagram, Pinterest and Twitter. You can now click on and interact with a post without leaving the original subreddit or front page. Previously, you would need to open a new tab or new window or click back on your browser to get back to the subreddit/front page.
Non-example: Reddit's old design
Reddit's front page (or a subreddit) display a list of posts that include a title, maybe a snippet of the post, and a thumbnail of an image related to the post. Each post has associated up and downvote buttons, a link for comments, and a the poster's username. When you first encounter the site, it is overwhelming and not immediately clear how to navigate the site.
-
Copywriting: Does it inform the user or does it assume that they already know what its about?
Example: Google Calendar
While google uses sleek symbols for search, help, and settings, if a user isn't sure what it does, a description pops up upon being hovered over.
Non-example: Colorado Peak
It was unclear and I had to click two different links to understand what was being asked in the question "Who do you live with?" (It turns out they mean who is in your household as defined by tax law.)
-
Analysis: Do you know why users do that, or are you interpreting their behavior?
Example: Pinterest
When hiding pins from your feed, Pinterest asks you to optionally add a reason why you're hiding it.
Non-example: typing.io
When you repeatedly fail to type a certain character in consecutive attempts, a tooltip comes up asking if a particular character is untypeable. It was inferring that I had an issue with my keyboard or that there is an issue with the code in the lesson. However, I was trying to find the correct character without looking at my keyboard, causing repeated failures.