##HTML & CSS Quiz: Chapter 1 & 2
- On a website, what is the purpose of HTML code?
- The HTML code of a website provides the structural skeleton for the page.
- What is the difference between an element and a tag?
- Most elements have 2 tags, an opening and closing tag. The opening tag can contain various attributes about the element.
- Why do we use attributes in HTML elements?
- Attributes provide additional (sometimes manditory) information about the HTML element.
- Describe the purpose of the head, title, and body HTML elements.
- Inside the
<head>element, we place code that is not meant to be displayed on the page. This code is generally either metadata, links, or scripts. - The
<title>element is used (unsurprisingly) for the title of the HTML document. The title text gets displayed in the tab/title bar of the browser application. - The
<body>element is where all of the main content of the webpage is located.
- In your browser (Chrome), how do you view the source of a website?
- ⌥⌘U (alt-command-U)
-
List five different HTML elements and what they are used for.
-
<h1-6>- Heading elements: used for the titles or section names of the document -
<a>- Anchor element: used to link to other documents/destinations -
<img>- Image element: used to represent image files -
<script>- Script element: used to embed JavaScript code within an HTML document or link to code in a .js file. -
<article>- Article element: used to represent a self-contained body of work that can stand on its own and be redistributed (such as forum posts, news articles, blog entries) -
What are empty elements?
- Empty elements are composed of one single self-closing tag and cannot contain any content or child elements.
- What is semantic markup?
- Semantic markup is the use of HTML elements which describe the nature and purpose of their content.
- What are three new semantic elements introduced in HTML 5? Use page 431 in the book to find more about these new elements.
<header>,<nav>,<section>
##Codepen link Prework Codepen
##Gear Up
- What role does empathy play in your life and how has it helped you?
- Empathy has always played a significant roll at my previous jobs in technical support. Its has always been important for me to remind myself that the person on the other end is genuinely struggling and seeking assistance. No matter how trivial the problem may be, or how many times they might have asked before.
- How does empathy help you build better software?
- When you fully understand your users, and have a sense for how and why they use something the way they do, it allows you to design software that better caters to its userbase.
- Why is empathy important for working on a team?
- While working on a team, there will inevitably be a time when there are differing opinions. Empathy helps both sides see each other's perspective and potentially arrive at a solution that caters to both, or help one side see why objectively one option is better than another.
- Describe a situation in which your ability to empathize with a colleague or teammate was helpful.
- When helping a new co-worker, empathizing with their situation and remembering how it felt to be totally new helped a lot as I was guiding a new team member through the fix for a strange issue reported by a client. Having empathy is enough to turn that sort of interaction from 'just fixing it for them', to 'teaching them how to fix it'.
- When do you find it most difficult to be empathetic in professional settings? How can you improve your skills when faced with these scenarios?
- When a co-worker or team member has made a mistake or caused an invonvenience, it can be hard to get past the frustration and instead empithize with them and the fact that they (hopefully) didn't do it on purpose. In those cases it can help to take a moment to relax and see things through the other persons eyes. Maybe there is a good reason that this mistake was made, or maybe the mistake wasn't actually that person's fault at all.
##HTML & CSS Quiz: Chapter 3 & 4
- There are three main types of lists in HTML: ordered, unordered, and definition. What are their differences?
- Unordered Lists: meant for content in no specific order
- Ordered Lists: meant for content that should be presented in a specific order
- Definition (or Dictionary) Lists: meant to be used with term/definition pairs, like in a dictionary.
- What is the basic structure of an element used to link to another website?
<a>the tag itselfhref="#"the referenced link<a>content</a>the hyperlinked content
- What attribute should you include in a link to open a new tab when the link is clicked?
target="blank"
- How do you link to a specific part of the same page?
- By using the
idattribute on HTML elements, you can link to the position on the page where they are located by setting thehrefattribute of an achor tag to point to#elementName
##CSS Quiz: Chapter 10, 11 & 12
- What is the purpose of CSS?
- CSS is meant to add a layer of style over the structure of an HTML document.
- What does CSS stand for? What does cascading mean in this case?
- Cascading Style Sheets. Cascading refers to the idea that CSS rules cascade from top to bottom, and that rules closer to the bottom can overwrite previous rules.
- What is the basic structure of a CSS rule?
- A CSS rule is composed of a selector, and property, and a value.
- How do you link a CSS stylesheet to your HTML document?
- A .CSS file can be linked to an HTML document using the
<link>element inside of the<head>element.
- Why is it useful to use external stylesheets as opposed to using interal CSS?
- Multiple pages can be linked to the same stylesheet. This allows a single change to effect many pages at once.
- Describe what a color hex code is.
- A color hex code is a 6 character string using a mix of 16 characters (0-9 a-f) to represent values of red green and blue.
- What are the three parts of an HSL color property?
- Hue: the degree of color along the color spectrum
- Saturation: the amount of color
- Lightness: the lightness of the color relative to pure white
- In the world of typeface, what are the three main categories of fonts? What are the differences between them?
- Serif: letters have serifs
- Sans-Serif: letters do not have serifs
- Script: mimics a hand-written style
- When specifiying font-size, what are the main three units used?
- px, em (or rem), pt
##HTML & CSS Quiz: Chapter 7
- If you're using an input element in a form, what attribute controls the behavior of that input?
- The
typeattribute is used to specify the behavior of an input element.
- What element is used to create a dropdown list?
- The
<select>element is used to create dropdown lists with<option>elements inside.
- If you're using an input element to send form data to a server, what should the type attribute be set to?
- You can use
type = "submit"to send form data to a server
- What element is used to group similar form items together?
- The
<fieldset>element is used to group similar or related form items together.
##HTML & CSS Quiz: Chapter 13 & 15
- Describe the differences between border, margin, and padding.
- Padding is the space between the content and the border. Border is the space between the padding and margin. Margin is the space outside of the border.
- For a CSS rule
padding: 1px 2px 5px 10px, what sides of the content box does each pixel value correspond to?
- Clockwise starting at 12 (Top, Right, Bottom, Left)
- Descirbe the different between block-level and inline elements.
- Block elements stretch to take up as much horizontal space as there is room for. Inline elements are only as wide as their content.
- What is the role of fixed positioning, and why is z-index important in the scenario of using fixed positioning?
- An element with
position: fixedwill be removed from the flow of the document and will remain fixed to a specified locaion in the document. The z-index of the element is important to make sure that it does not get covered up by any of the other elements on the page.
- What is the difference between a fixed and liquid layout?
- A fixed layout is definied in absolute values and will always remain at the same size. Liquid layouts are generally defined in percentages and will expand/contract with the size of the browser window.
##HTML & CSS Quiz: Chapter 5
- In an image element, why is the alt attribute important?
- The
altattribute is important for screen readers to use for vision impaired users, and as a placeholder when images fail to load.
- What determines if an image element is inline or block?
- By default all images will be inline elements. Using CSS this can be changed to
display: block
- What are the benefits of jpg or png image file formats?
- PNG image files have the benefit of supporting transparency, however their file sizes are generally a bit larger. JPG image file sizes are generally smaller while loosing very little image quality.
##HTML & CSS Quiz: Chapter 16
- What is the benefit of specifying the height and width of images in CSS compared to specifying in the HTML?
- Following "separation of concerns", the width/height of an image is not structure, its presentation, and so it belongs to CSS.
- What is an image sprite, and why is it useful?
- An image sprite is a single image composed of multiple smaller images. Using
background-positionin CSS you can tell an element to use a specific portion of the image sprite file. This allows a single loaded image to be used for multiple purposes.
##Eloquent JavaScript: Chapters 1 & 2
- There are three big data types in JavaScript: numbers, strings, and booleans. Describe what each of them are.
- Numbers: Numeric values that are either whole numbers (integers) or fractional numbers (floats).
- Strings: This data type is used for text content and must be enclosed in either single or double quotes.
- Booleans: This value has only 2 options.
TrueorFalse. It is mainly used for logic.
- What are the three logical operators that JavaScript supports?
&&(and),||(or),!(not)
- What is the naming convention used for variables?
- Variables use a naming convention called Camel Case in which the first letter of each word is capitalized except the first. Variable names cannot include any spaces.
- What is the difference between an expression and a statement?
- An expression is any peice of code that produces a value, while a statement can be composed of multiple expressions.
- What are a few JavaScript reserved words, and why are they important to avoid using them for variable names?
const,let,var,if,while,for- It is important not to use keywords or reserved words as variable names because they are specifically meant to be used for other purposes.
- What is control flow, and why is it useful for programming?
- Control flow is the direction and order in which lines of code in JavaScript are executed. It is useful so that there is some order and predictability as to when and how the code is run.
##Eloquent JavaScript: Chapter 3
- If we have a function defined as
function sayHello() {console.log("Hello!")}, what is the difference between entering sayHello and sayHello() in the console?
sayHellois a reference to the codeblock contained in the sayHello function.sayHello()is an execution of the code in the function.
- What is the keyword return used for?
- Inside a function,
returnis used to pass the value generated by the function to the next piece of the program.
- What are function parameters?
- Parameters are like variables that are declared as a function is called, and passed into the function.
- What is the naming convention used for function names?
- Functions follow the same naming convention as variables, camel-case. For constructor functions, the first letter should be capitalized.