- On a website, what is the purpose of HTML code?
A: HTML is used to create web pages. Describes the structure of the web page. - What is the difference between an element and a tag?
A: A tag is part of an element. Specifically two tags create an element, an opening tag that looks like this: < p > and a closing tag that looks like this: < /p >. The difference between the two is the forward slash after the left angle bracket (<) - Why do we use attributes in HTML elements?
A: Attributes provide additional information about the contents of an element. They appear on the opening tag of the element and are made up of two parts: a name and value seperated by an equals sign. ex: <p lang="en-us">Paragraph in English> - Describe the purpose of the head, title, and body HTML elements.
A: Head: This element comes before the body element. This just contains info about the page, stuff that we don't want to show on the webpage. Title: Inside the Head Element, there is the Title Element. The contents of this element are shown at the to of the webpage/tab. Body: Everything inside this element is show inside the main web browser. - In your browser (Chrome), how do you view the source of a website?
A: click view, developer, view source. OR use the keyboard shortcut: option + command + u - List five different HTML elements and what they are used for.
A:- HTML element 1: <header> - represents introductory content, typically a group of introductory or navigational aids. It may contain some heading elements but also a logo, a search form, an author name, and other elements.
- HTML element 2: <h1>-<h6> represent six levels of section headings. h1vis the highest section level and h6 is the lowest.
- HTML element 3: <nav>"represents a section of a page whose purpose is to provide navigation links, either within the current document or to other documents. Common examples of navigation sections are menus, tables of contents, and indexes.
- HTML element 4: <link> specifies relationships between the current document and an external resource. This element is most commonly used to link to stylesheets, but is also used to establish site icons (both "favicon" style icons and mobile home screen/app icons) among other things.
- HTML element 5: <style> contains style information for a document, or part of a document.
- What are empty elements?
A: Elements that do not need a closing tag. The image tag is an example of this. - What is semantic markup?
A: text elements that do not affect the structure of the web page, but add extra information to the pages. The reason for using these elements is that other programs, such as screen reades or search engines can use this extra information. - What are three new semantic elements introduced in HTML 5? Use page 431 in the book to find more about these new elements.
A:- HTML element 1: <em> subtly changes the meaning of a sentence.
- HTML element 2: <strongindicates> that its contenthas strong importance.
- HTML element 3: <s> indicated something that is no longer relevant but should not be deleted.
- There are three main types of lists in HTML: ordered, unordered, and definition. What are their differences?
A: Ordered lists - are lists where each item in the list is numbered. Ex: set of steps for a recipe that must be performed in order. The ordered lists is created with the <ol></ol> element and each item in the list is placed between an opening <li> and closing </li> tag. Unordered lists - are lists that begin with a bullet point The unordered lists is created with the <ul></ul> element and each item in the list is placed between an opening <li> and closing </li> tag. Definition lists - are made up of a set of terms along with the definitions for each of those terms. The definition lists is created with the <dl></dl> element and each term in the list that is being defined is placed between an opening <dt> and closing </dt> tag. The definition of the term is placed between an opening <dd> and closing </dd> tag. - What is the basic structure of an element used to link to another website?
A: <a hfer+"http://www.ilovecookies.com">I love Cookies The text between the opening and closing is the visible text on the web page. Within the opening tag lives the website where the user will be directed to. - What attribute should you include in a link to open a new tab when the link is clicked?
A: If you want a link to open in a new page, you can use the target attribute on the opening tag. The value of this should be left to _blank. <a hfer+"http://www.ilovecookies.com" target"_blank">I love Cookies - How do you link to a specific part of the same page?
A: To link to a part of a page you need to identify the points in the page that the link will go to. This is done using the id attribute(which can be used on every HTML element).
- What is the purpose of CSS?
A: CSS allows us to create rules that specify how the content of an element should appear. - What does CSS stand for? What does cascading mean in this case?
A: I think it has to do with the order of which is read and implemented. Like things that are read last are implemented unless it is more specific or told it is more important than other tags. - What is the basic structure of a CSS rule?
A: A CSS rule is made up of a selector(which points to either a ) and a declaration. In the declaration is a property and a value, separated by a colon. Here is an example: h1, h2, h3 { font-family: Arial; color: red;} - How do you link a CSS stylesheet to your HTML document?
A: A link using the element to the CSS file is placed in the element of the webpage. It is an empty element, meaning it does not need a closing tag. - When is it useful to use external stylesheets as opposed to using internal CSS?
A: It is useful because there can be multiple style sheets. Some folks like to have one CSS page that controls the presentation and a second that controls the layouts. all the web pages can share the same style sheet(s) which allow you to make changes on the CSS page that affects all the rest of the pages. Allows for faster loading of the web page. HTML code is read easier and edited because the CSS rules are not mixed in with it. - Describe what a color hex code is.
A: These are six-digit codes that represent the amount of red, green and blue in a color, preceded by a pound or has # sign. - What are the three parts of an HSL color property?
A: Hue - Hue is the colloquial idea of color. In HSL hue is often represented as a color circle where the angle represents the color. Saturation - saturation is the amount of gray in a color. It is represented as a percentage. Lightness - is the amount of white (lightness) or black (darkness) in a color. 0% lightness is black, 100% lightness is white. Alpha - If alpha is present is represents the opacity. - In the world of typeface, what are the three main categories of fonts?
A: Serif, Sans-serif and monospace - What are the differences between them?
A: Serif fonts have extra details on the ends of the main strokes of the letters, know as serifs. sans-serif fonts have straight ends to letters and therefore have a much cleaner design. monospace - every letter in a monospace (or fixed width) font is the same width. - When specifying font-size, what are the main three units used?
A: Pixels, percentages and ems. pixels - are relative to the resolution of the screen, so the same type size will look different on different size screens. percentages - this uses a percentage of the default text size, which is usually 16px. EMS - allows you to change the size of the text relative to the size of the text in the parent element.
- If you're using an input element in a form, what attribute controls the behavior of that input?
A: The value of the type attribute determines what kind of input they will be creating. ex: <input type="text" name="username" size="15" maxlength="30" /> - What element is used to create a dropdown list?
A: 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?
A: If you are sending data to a server you should use the post method which also allows users to upload a file, if its a lot of content, contains sensitive data(like a password) adds information to, or deletes information from a database. - What element is used to group similar form items together?
A: The fieldset element can group related form controls inside the element. This is particularly helpful for longer forms.
- Describe the differences between border, margin, and padding.
A:- Border - every box has a border(even if you can't see it, or it is set to be 0 pixels). The border separates the edge of one box from another.
- Margin - sits outside the edge of the border. You can set the width of a margin to create a gap between the borders of two adjacent boxes.
- Padding - the space between the border of a box and any content within it. Adding padding can increase the readability of its contents. It also just makes everything look a whole lot better.
- For a CSS rule padding: 1px 2px 5px 10px, what sides of the content box does each pixel value correspond to?
A: Starting from the top you go around the box clockwise assigning the value to that side of the border for the width. In this case 1px - border-top-width, 2px - border-right-width, 5px - border-bottom-width, 10px - border-left-width. - Describe the difference between block-level and inline elements.
A: Block-level elements start on a new line and act as the main building block of any layout. They start on a new line. example elements are: h1, p, ul & il Inline elements - flow in between surrounding text. example elements: img, b, i - What is the role of fixed positioning, and why is z-index important in the scenario of using fixed positioning?
A: Fixed positioning keeps something at the same spot on the web page. Some examples are a heading you want present while the user scrolls through or different navigations tools. I imagine if its a site selling something they BUY button can be fixed so that a user can click buy at any moment. Z-index is very important because it allows us to stack elements on top of each other giving them an order of importance based on a numerical value, the higher the number the more important it is. This is also referred to stacking content as if the blocks have been stacked on top of each other on the z-axis. - What is the difference between a fixed and liquid layout?
A: Fixed width layouts do not change size as users increase or decrease the size of the browser while liquid layouts stretch and contract as the user increases or decrease the size of the browser.
- In an image element, why is the alt attribute important?
A: this provides a text description of an image which describes the image if you cannot see it. If the image can't load you'll know what was supposed to be there, if a person with disabilities cannot see it then the screen reading software can read what the image is for them. Also very important for SEO. - What determines if an image element is inline or block?
A: Depending on where you place the link to the image tells the browser if the image is inline or block. If the image code is then followed by a heading or paragraph element, then it is a block. If the image code is placed inside the block level event, after the opening paragraph element tag, then it is in line with the text. - What are the benefits of jpg or png image file formats?
A: jpg is best used for photos, especially those with a lot of colors or things like a sky where there is a lot of different shades of blue. png is ben when images have few colors or large areas of the same color or there is a partially transparent part of the image.
- What is the benefit of specifying the height and width of images in CSS compared to specifying in the HTML?
A: You can control the sizes of the images across the site in the single CSS page/command. Makes it a lot easier than having to change it on each web page. - What is an image sprite, and why is it useful?
A: Sprites are pretty cool, they are images that appear in several different places and the browser only needs to request one image, making the page faster to load. Some examples: logo and interface elements such as buttons.
- How do you declare a variable? What does the equals sign really mean in JavaScript? What is it called in JavaScript?
A: To declare a variable you need to use the keyword var followed by the name you are giving it, ex: var firstName; The equal sign means you are assigning the variable value to the variable name, ex firstName = "Matthew" - There are three big data types in JavaScript: numbers, strings, and booleans. Describe what each of them is.
A: Numbers - use of numbers 0-9. Numbers are written without commas separating the hundreds and thousandths place. Strings - this data type is made up of letters and other characters all within a pair of quote marks. Boolean - have either two values, 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?
A: Six Rules:- The name must begin with a letter, dollar sign ($), or an underscore (_). It must not start with a number.
- The name can contain letters, numbers, dollar sign, or an underscore. You must not use a dash (-) or a period (.) in a variable name
- You cannot use keywords or reserved words.
- All variables are case sensitive, so name and Name would be different variables, but it's not good practice to have the same name using different variables.
- Use a name that describes the kind of information that the variable stores. firstName describes that the first name is being stored in that variable.
- Use camelCase to type more than one word. ex: gameScore. Reserve & keyword words to avoid using: instanceof, new, return, switch. They all have or will have a special meaning that tells the interpreter to do something.
- How can an array be useful when dealing with multiple related values? How do you access/change a value in an array?
A: Arrays are great for storing a bunch of information, you can store either similar information like a list of names or the commonly used example of a grocery list. But arrays can also store more arrays, numbers, boolean values and strings all next to each other. The amount of values in an array is fluid and can change based on what you need, adding and taking away values is something you can do with an array. Each value in an array sits at an index value starting with 0. To access the second item in an array you would need to pull from index 1. You can overwrite any value using the array index number/location. If you just want to add to an array you can add using various methods. - What is the difference between an expression and a statement?
A: An expression evaluates into a single value. When declaring a variable it is first given a value of undefined, a data type itself, then it changes when it is assigned a value. - What are three types of operators and how are they used?
A:- An assignment operator assigns a value to a variable, ex: firstName = 'Matthew'
- An arithmetic operator performs basic math, ex: add = 5 + 6. The value of add is 11
- The string operator (often called concatenation) combines two strings into one, ex: fullName = 'Matthew ' + 'Malone'. The value of fullName is Matthew Malone.
- If we have a function defined as function sayHello(){console.log("Hello!")}, what is the difference between entering sayHello and sayHello() in the console?
A: To invoke a function, the parentheses after are very important, without those the function won't be invoked. sayHello() will run the function and return, Hello! While sayHello doesn't return anything. - What is the difference between function parameters and arguments?
What is the keyword return used for?
A: Parameters are specific information for the functions to perform its task, inside the function the parameters act as values. The actual values themselves that are passed into the code are the arguments. The parameters are words that are placeholders for the arguments that will be entered into the function. The parameters are seen throughout the function all within the curly brackets. The return keyword is what the function gives you after it finishes running. I guess it is like the answer to the function. - 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?
A: Local variables are better than global variables because of the amount of memory taken up. Local variables are only stored when running the area of code they are in and then forgotten once it leaves. A global variable comes in handy as the piece is passed into various functions and updated.
- Psychology Question: How much work does the user have to do to get what they want?
- Good: Apple - its very simple to find a product, ther information about it and then purchase it.
- Violates: AT&T I have to constantly search around, hit the back button and spend a lot of time to purchas soemthing.
- Usability Question: Is it easy to find (good), hard to miss (better), or subconsciously expected (best)?
- Good: Google - you just type and hit enter.
- Violates: Denver Post - won't even load! On the whole news papers, espically smaller local ones are setup to look like a newspaper, which is unfrotunate because that view doesn't vew well on a screen. Its easy to miss a lot and hard to find what you are looking for.
- Design Question: Do users think it looks good? Do they trust it immediately?
- Good: Sonos - very clean and simple. easy to find what you are looking for. Makes choosig very easy!
- Violates: Frys - There is SO many options. When you search it comes up with almost everything in the store. Doesn't look good, reminds me of a crazy newspaper advertisement.
- Copywriting Question: Is it clear, direct, simple, and functional?
- Good: Ninja Pop Grip make it simple to not just order what you want but also customize the product.
- Violates: Spirit It never alerts you that the flight you are booking has a overnight layover on the way. Other airlines will alert you about this.
- Analysis Question: Do you know why users do that, or are you interpreting their behaviour?
- Good: Lyft - lyft constantly uses input from users to make their app easier to use. One example is replacing taps with swipes to reduce input errors.
- Violates: IMDB its easy to get to a show or movive but difficult to find more information about it, going to google to seach through imdb is far easier. I don't really know how to prove this, but things went from simple to more complex to use for the website over time.