https://codepen.io/katemalone/pen/QReEbJ
- On a website, what is the purpose of HTML code?
- HTML describes the structure and information for a website.
- What is the difference between an element and a tag?
- Tags are the hidden keywords within a web page that define how your web browser must format and display the content.
- Elements are made up of tags, usually two different tags. An element tells the web browser something about the information sitting between the two tags.
- Why do we use attributes in HTML elements?
- Attributes provide additional information about the contents of an element.
- Describe the purpose of the head, title, and body HTML elements.
- The body tag is the meat of the page anything that shows up between the body tag is displayed in the main window browser
- The head tag contains the information about the page like a title, not the information shown on the page.
- The title tag is not shown on the page but is usually above the URL. It allows you to navigate between multiple tabs.
- In your browser (Chrome), how do you view the source of a website?
- Right click on the page and select view page source.
- List five different HTML elements and what they are used for. (For example, is a paragraph element, and it is used to represent a paragraph of text.)
<h1></h1> is the largest heading tag
<b></b> bold
<i></i> italic
<sup></sup> superscript
<sub</sub> subscript
- What are empty elements?
- Tags which have no data presented in between tags.
- What is semantic markup?
- Semantic markup's provide extra information to describe the content of the web page accurately.
- What are three new semantic elements introduced in HTML 5? Use page 431 in the book to find more about these new elements.
The <section> element defines a section in a document.
The <article> element specifies independent, self-contained content like blog posts and news articles.
The <time> element defines a date/time.
- There are three main types of lists in HTML: ordered, unordered, and definition. What are their differences?
- Ordered lists are where each item in the list is numbered. For example, the list might be a set of steps for a recipe that must be performed in order or a legal contract where each point needs to be identified by a section number.
- Unordered lists are lists that begin with a bullet point.
- Definition lists are made up of a set of terms along with the definitions for each of those terms.
- What is the basic structure of an element used to link to another website?
<html>
<head>
<title>Linking to Other Sites</title>
</head>
<body>
<li><a href="http://www.rottentomatoes.com">Rotten Tomatoes</a></li
</body>
</html>
- What attribute should you include in a link to open a new tab when the link is clicked?
<a href= "http://wwww.imdb.com" target="_blank">
- How do you link to a specific part of the same page?
To link to a specific part of the same page, you need to create id attributes for different sections of the page. Then you can add a link symbol followed by the id attribute of the element you want to link.
- What is the purpose of CSS?
- CSS allows you . 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?
- Cascading style sheet. "Cascading" means that styles can fall (or cascade) from one style sheet to another, enabling multiple style sheets to only use one HTML document.
- What is the basic structure of a CSS rule?
- A CSS rule contains two parts: a selector which indicates which element the rule applies to and a declaration which indicates how the element referred to in the selector should be styled.
- How do you link a CSS stylesheet to your HTML document?
- The < link > element can be used in an HTML document to tell the browser where to find the CSS file used to style the page.
- When is it useful to use external stylesheets as opposed to using internal CSS?
- When building a site with more than one page.
- Describe what a color hex code is.
- Six-digit codes that represent the amount of red, green, and blue in a color, preceded by a pound or hash sign.
- What are the three parts of an HSL color property?
- Hue
- Saturation
- Lightness
- In the world of typeface, what are the three main categories of fonts? What are the differences between them?
- Serif - has extra details on the end of the main strokes of the letters.
- Sans-serif - has straight ends to letters and therefore have a much cleaner design
- Monospace - every letter is the same width.
- When specifying font-size, what are the main three units used?
- pixels
- percentages
- ems
- If you're using an input element in a form, what attribute controls the behavior of that input?
- the < input > element is used to create several different form controls. the type attribute has different values to create different types of input.
- What element is used to create a dropdown list?
- The < select > element is used to create a drop-down list box. It contains two or more < option > elements.
- If you're using an input element to send form data to a server, what should the type attribute be set to?
- The < submit > button is used to send a form to the server.
- What element is used to group similar form items together?
- The < fieldset > element is used to group related form controls together.
- Describe the differences between border, margin, and padding.
- Border Every box has a border even if it's not visible. The border separates one box from the other.
- Margin Margins sit 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 Padding is the space between the border of a box and content contained within it. Adding padding can increase the readability of its contents.
- For a CSS rule padding: 1px 2px 5px 10px, what sides of the content box does each pixel value correspond to?
- 2px (top), 1px (right), 1px (bottom), 2px (left)
- Describe the difference between block-level and inline elements.
- A block-level element is an HTML element that begins a new line on a web page and extends the full width of the available horizontal space.
- A inline element is part of a line and only exists between its tags.
- What is the role of fixed positioning, and why is z-index important in the scenario of using fixed positioning?
- The fixed position is a type of absolute positioning. It positions the element in relation to the browser window. So, when a user scrolls down the page, the element stays in the exact same place.
- The z-index determines which elements sit on top of other elements.
- What is the difference between a fixed and liquid layout?
- Liquid Layouts stretch and contract as the users increase or decrease the size of their browser.
- Fixed Layouts do not change as the user increases or decreases the size of their browser window.
- In an image element, why is the alt attribute important?
- < alt > provides a text description of an image in case you cannot see it.
- What determines if an image element is inline or block?
- If the code comes before a block level element or it is within the block level element.
- What are the benefits of jpg or png image file formats?
- jpeg is good for many colors.
- PNG is great for images with few colors.
- What is the benefit of specifying the height and width of images in CSS compared to specifying in the HTML?
- You can batch large photos as large, medium, or small. Less code, and a faster site.
- What is an image sprite, and why is it useful?
- An image sprite is used when an image is used multiple times over a website. The web browser only needs to request one image, so the page loads faster.
- How do you declare a variable? What does the equals sign really mean in JavaScript? What is it called in JavaScript?
- var = Declares a variable. The = is the assignment operator.
- There are three big data types in JavaScript: numbers, strings, and booleans. Describe what each of them are.
- String Data consists of letters and other characters.
- Numeric Data handles numbers.
- Boolean Data can have one of 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 variable name must start with a letter, underscore, or a dollar sign. Not a number.
- You cannot use dashes(-) or periods.
- You cannot use specific keywords or reserved words.
- Variables are case sensitive and create different variables.
- Used a name that describes what the variable information is.
- Use camel casing.
- How can an array be useful when dealing with multiple related values? How do you access/change a value in an array?
- An array is excellent when using a list and you might only use a percentage of that list.
- To change a value in an array you reassign the array name with the index number in square brackets and assign it a new value.
- What is the difference between an expression and a statement?
- An expression evaluates into a single value. Simply speaking it is declaring a value.
- A statement is a line of instructions for the computer.
- What are three types of operators, and how are they used?
- Assignment Operators assign a value to a variable.
- Arithmetic Operators perform basic math.
- String Operators combine two strings.
- If we have a function defined as function sayHello(){console.log("Hello!")}, what is the difference between entering sayHello and sayHello() in the console?
- sayHello shows us what the function sayHello is pointing to.
- sayHello() calls the function
- What is the difference between function parameters and arguments?
- Parameters are variables in a function that are not specific.
- Arguments are specific numbers of values that pass into the code.
- What is the keyword return used for?
- return is used to return a value to the code that called 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 variable keeps complexity to a minimum by isolating the variable to a single unit, the function.
- A global variable allows the whole program to have a shared memory. It's useful in situations where the function is used repeatedly or needs to connect and to communicate by reading from and writing that common memory location.
How much work does the user have to do to get what they want?
- Good Warby Parker is some of the best user experience I've seen. You can choose to look through every pair of glasses, or you can take an effortless quiz, and they will recommend glasses to you. If you aren't sure, they will send you glasses to try on at home.
- BAD AT&T to get help with a task you need to get done you need to stop using the website and call about six times.
Is it easy to find (good), hard to miss (better), or subconsciously expected (best)?
- Good NBA site makes it very clear to find your team and buy tickets.
- Bad MLB (also every MLB team) Buying tickets for the Rockies game is a confusing mess. When you press "tickets," other events pop up rather than a baseball game. It's not as clear as it could be.
Do users think it looks good? Do they trust it immediately?
- Good HEADSPACE This site has an incredible design. It's calming and clear. Since the user is looking to become calm and clear, it matches what people want from the service and creates trust.
- Bad New York Times Its quite abrasive. It kinda feels like click bait.
Is it clear, direct, simple, and functional?
- Good MINT gives a lot of information in an enjoyable way, and it is still evident what you're getting and what you can focus on when it comes to your budget.
- Bad RTD I'M SO CONFUSED. It tells me not to buy and to buy it, and the layout is confusing with all these different sized fonts.
Do you know why users do that, or are you interpreting their behavior?
- Good Shazam This might be my age, but I think Shazam took a common problem and made it incredible seamless and habit forming. I hear a song I like, and I pull my phone out, AND they sink to my preferred music player. Shazam is looking at actual human behavior and desire.
- Bad Snapchat Snap chat has changed user behavior. Instead of making it intuitive or give directions, they often make you guess how to do what. It might also be my age, but it has a high learning curve for a social app.