1. On a website, what is the purpose of HTML code?
- HTML code is used to describe the structure of a webpage.
2. What is the difference between an element and a tag?
- Element and tag are used interchangeably. The element comprises the opening tag, closing tag, and the content that lies between them. Tags tell you something about the information between their opening and closing tags.
3. Why do we use attributes in HTML elements?
- Attributes give extra information about the elements.
4. Describe the purpose of the head, title, and body HTML elements.
- The is everything written inside the element and shown inside the main browser window. The
<head>is written above the body and contains information about the page.The<title>is usually found inside the and is the name of the browser page or the name on the browser tab.
5. In your browser (Chrome), how do you view the source of a website?
- Click on the "View" menu at the top of the browser. Select "Developer" and then select "View Source." You can also press alt + command + U.
6. 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></h1>is a header element, and it is used to represent main headings.<b></b>is a bold element, and it is used to make text/characters appear bold.<i></i>is an italic element, and it is used to make text/characters appear italic.<sup></sup>is a superscript element, and it is used for characters that should be superscript (example: exponents).<sub></sub>is a subscript element, and it is used for characters that should be subscript (example: chemical formulas).
7. What are empty elements?
- Empty elements don't have any words between an opening and closing tag. It usually only has one tag.
8. What is semantic markup?
- Semantic markup doesn't affect the structure of a page, but it adds extra information to increase the clarity of your content. Screen readers and search engines can use this information to increase accuracy.
9. What are three new semantic elements introduced in HTML 5? Use page 431 in the book to find more about these new elements.
<strong></strong>is an element that indicates that the content has strong importance.<blockquote></blockquote>is an element that is used for longer quotes and browsers may indent the content to highlight it.<q></q>is an element that is used for shorter quotes within a paragraph.
https://codepen.io/francylang/pen/jwEzmJ
-
Empathy has played a significant role in my life, specifically my adult life. Teaching middle school, I found myself needing to channel my inner teenager. Practicing active listening was significant to the relationships I built with my students and colleagues. Genuine investment and recognition of people goes a long way in maintaining self-awareness and demonstrating a level of understanding for those that surround you. As a teacher I really learned that negative human behaviors are often a reaction to something far greater. I had a student who was very disruptive during class and wanted to derail teaching and learning whenever he saw an opportunity. Understanding that these beahviors were not malicious, they were strategies that stemmed from frustrations and used to avoid the bigger problem, he couldn't read and therefore couldn't access the information I was giving him. I wasn't setting him up for success and once I did provide him with resources he could access, there was a significant increase in his level of engagement.
-
As a coordinator, working with my math fellows, I found myself needing to display emapthy in order to support first year teachers. Having been a first year teacher myself, I knew the stress, anxiety, and frustration they were experiencing. Like students, adults have behaviors that are responses to underlying issues. Not meeting deadlines is more a sign of needing support than it is a sign of apathy. I am still learning how to show compassionate empathy and not emotional empathy.
1. There are three main types of lists in HTML: ordered, unordered, and definition. What are their differences?
- Ordered Lists each item is numbered.
- Unordered Lists begin with a bullet point
- Definition Lists set of terms and definitions for each
2. What is the basic structure of an element used to link to another website?
- The element uses the opening and closing tags ` .
- The link is included in the opening tag
<a link>. - The attribute href="link" precedes the link.
- The text to be clicked on is between the opening and closing tags.
- It ends with the closing tag
3. What attribute should you include in a link to open a new tab when the link is clicked?
- Include the attribute _blank, in the opening tab, to open a new window.
4. How do you link to a specific part of the same page?
- First, you have to identify the points on that page to link to. You give an id= "value "attribute to these points. Then, you set the href attribute = to the to the id attribute of the element you want to link to.
Chapters 10, 11, and 12 and 4 on What is CSS?, Color, and Text from HTML and CSS: Design and Build Websites
1. What is the purpose of CSS?
- CSS allows you to create rules that specify how the content of an element should appear.
2. What does CSS stand for? What does cascading mean in this case?
- Cascading Style Sheets. Cascading refers to the rules in place to determine which properties are applied to different elements. 3. What is the basic structure of a CSS rule?
- The more specific rule takes precedence. If they rules are identical, the last one will take precedence. You can add ! to indicate that is should be considered more important that the other rules that apply to the same element.
4. How do you link a CSS stylesheet to your HTML document?
- Use the
<link />element to specify where to find the CSS file for that page. In this tag you include the path(href), type of document(type), and the relationship between the HTML page and the file it's linked to(rel).
5. Why is it useful to use external stylesheets as opposed to using interal CSS?
- You can create one CSS style sheet that applies to websites with more than one page. All the pages can use the same rules. Keeps the content separate from how the page looks. You only have to alter one file to make changes.
6. Describe what a color hex code is.
- Hex codes represent how much red, green, and blue are in a color.
7. What are the three parts of an HSL color property?
- Hue
- Saturation
- Lightness
8. In the world of typeface, what are the three main categories of fonts? What are the differences between them?
- Serif
- Sans-serif
- Monospace
9. When specifiying font-size, what are the main three units used?
- Pixels
- Percentages
- Ems
1. 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 element in a form.
2. What element is used to create a dropdown list?
- The select element is used to create a drop down list box.
3. If you're using an input element to send form data to a server, what should the type attribute be set to?
- The type attribute should be set to the submit button.
4. What element is used to group similar form items together?
- The fieldset element is used to group similar form items together.
1. Describe the differences between border, margin, and padding.
- Borders separate the edge of one box from another.
- Margins sit outside the edge of the border and creates a gap between the borders of two adjacent boxes.
- Padding is the space between the border and the content in the box.
2. For a CSS rule padding: 1px 2px 5px 10px, what sides of the content box does each pixel value correspond to?
- The values are in clockwise order: top, right, bottom, left.
3. Describe the different between block-level and inline elements.
- Block-level start on a new line.
- Inline flow in between surrounding text.
4. What is the role of fixed positioning, and why is z-index important in the scenario of using fixed positioning?
- Fixed positioning makes it so when the user scrolls down the page, the content stays in the exact same place. The z-index is important because it controls which box appears on top. If you fix a heading, you will want the content to scroll behind the element.
5. What is the difference between a fixed and liquid layout?
- Fixed width (pixels) layouts do not change size when the user increases or decreases the size of their browser window.
- Liquid (percentages) layouts stretch and contract as the user increases od decreases the size of their browser window.
1. In an image element, why is the alt attribute important?
- The alt attribute is important because it provides a text description of the image which helps if you can't see the image.
2. What determines if an image element is inline or block?
- A block element always appears on a new line. An inline element sits within a block level element and does not start on a new line- the text or inline elements flow around the image.
3. What are the benefits of jpg or png image file formats?
- A jpg format is best for images with many different colors and png format is best for images with flat color or areas that are filled with exactly the same color.
1. What is the benefit of specifying the height and width of images in CSS compared to specifying in the HTML?
- Specifiying height and width of images in CSS allows you to control the dimensions of images across the entire website.
2. What is an image sprite, and why is it useful?
- A sprite is when a single image is used for several different parts of an interface. The advantage is that the web browser only needs to request one image rather than many images which will make the web page load faster.
Read Chapters 1 and 2 (Data Types, Variables, and Control Flow) from Eloquent JavaScript: A Modern Introduction to Programming
1. There are three big data types in JavaScript: numbers, strings, and booleans. Describe what each of them are.
- Numbers are numeric values.
- Strings are used to represent text. Strings are always enclosed in quotes (single or double). Strings have to stay on a single line (backslash an n can be used to create new lines). Strings cannot be divided, multiplies, or subtracted, but the + operator can be used on them- it glues the string together.
- Boolean values have just two values: true and false. When using boolean values, the unicode standard assigns a number to each charcter. Comparison symbols are used to get a boolean value returned.
2. What are the three logical operators that JavaScript supports?
- The 3 logical operators are: and && - result is true only if both the values given to it are true, or
||- produces true if either of the values given are true, and not!- it flips the value given to it, true producesfalseand!falsegives true.
3. What is the naming convention used for variables?
- var (indicates that this sentence will define a variable) name of variable = expression (var name = expression).
4. What is the difference between an expression and a statement?
- Expression- a fragment of code (sentence fragment) that produces a value.
- Statement- a full sentence in a human language.
5. What are a few JavaScript reserved words, and why are they important to avoid using them for variable names?
- var, yield, case, catch, continue, debugger...these are keywords that already have a special meaning in JavaScript.
6. What is control flow, and why is it useful for programming?
- When a program contains more than one statement, the statements are executed from top to bottom. The second statement depends on the input from the first statement.
1. If we have a function defined as function sayHello(){console.log("Hello!")}, what is the difference between entering sayHello and sayHello() in the console?
- Without the parentheses it is just a variable. The parentheses indicate that a function should take place and be returned.
2. What is the keyword return used for?
- It determines the value of the function return- it tells the console log what to do with the function) and causes the control to stop and return the value for that function.
3. What are function parameters?
- They are regular variables that define the function.
4. What is the naming convention used for function names?
- It starts with the keyword function, the parameters, a body wrapped in braces.
Psychology Is this something they want to do again? Why? How often?
- https://www.facebook.com - It is easy to scroll through and personal information is added slowly and at the users own pace. Clicking around is easy and it's usually being used to browse, there doesn't have to be a goal.
- https://www.dpsk12.org - Is generally used to find something a user is looking for. There are several different portals and it is attempting to accomodate all stakeholders in education on one site.
Usability Is it easy to find (good), hard to miss (better), or subconsciously expected (best)?
- https://www.nytimes.com/ - It is setup like a newspaper, which is intuitive for even non-computer people to use and follow.
- https://www.mountainproject.com/ - There is an overwhelming amount of information on the front page. You have to know you are looking for to use it efficiently.
Design Does it represent the brand? Does it all feel like the same site?
- https://www.rei.com/ - Represents the outdoors well and looks similar as you click through and shop.
Copywriting Does it motivate the user to complete their goal? Is that what we want?
- https://www.steepandcheap.com/ - It has an image of the item for sale and countdown clock that creates a sense of urgency to buy the product now.
- http://connectforhealthco.com/ - Very process intensive and may result in a user needing to revisit in order to complete the goal. It doesn't seem like a site that would benefit from a person needing to revisit multiple times to try and accomplish the same task.
Analysis Do you know why users do that, or are you interpreting their behaviour?
- https://www.ebay.com - The site is continually updated to accomodate the desires of the users. It suggests products users may want based on what they've been searching.
- http://runningintheusa.com/race/ - Doesn't seem to collect information on races that a user is searching for or suggest races they might be interested in.