-
On a website, what is the purpose of HTML code? HTML code gives a website its structure- the basic shapes that the content fits in to and where things are located on the page. HTML contains the hard materials too- images and links as well as title info.
-
What is the difference between an element and a tag? An element is more broad than a tag- it includes the opening and closing tags, as well as the content between them. Opening and closing tags tell us about the information between them.
-
Why do we use attributes in HTML elements? Attributes are placed on the back side of the opening tag, and give us extra information about the content between the tags that helps the browser communicate and display our information effectively.
-
Describe the purpose of the head, title, and body HTML elements. The head is within the HTML document and contains information about the page rather than within the page. Anything within the body element is displayed in the body of the webpage. The head element contains the title element, which is displayed above the browser, usually on the tab (like in a manual filing cabinet, the part that sticks out the tab so you know how to find things).
-
In your browser (Chrome), how do you view the source of a website? Command + Option + u (or R-click and select 'View Page Source')
-
List five different HTML elements and what they are used for. For example, p is a paragraph element, and it is used to represent a paragraph of text.
- hr is a single tag (no additional closing tag) element that separates text by inserting a horizontal line.
- h1 is a Header 1 element, the biggest and boldest header of them all, telling the reader to 'look here first!'
- abbr is an element for both abbreviations and acronyms (in HTML 5) that include a title attribute that is visible when hovered over that spells out the full term.
- cite The cite element italicizes the title text of a referenced source in the webpage.
- s The s element scores out text without deleting it, so the original text is still visible, but has a horizontal line through the middle.
-
What are empty elements? Empty elements are elements that do not have written content between the opening and closing tags, but are stand-alone elements, and are formatted with a space followed by a forward slasha after the essential character. They usually have only one tag (see hr above), so they really do stand alone!
-
What is semantic markup? Semantic markup speaks to the text and may change the structure of the page it is not intended to do so. The purpose is to clarify the content, which is particularly useful for screen readers.
-
What are three new semantic elements introduced in HTML 5? Use page 431 in the book to find more about these new elements.
- nav is where you navigate, usually a search bar with a place to input text and scour the webpage.
- article is an element that designates where to put numerous posts or articles or summaries with links on a webpage.
- aside designates text that goes in a side bar of the webpage.
CodePen prework1 link: http://codepen.io/dunbarsa/pen/mWeQvG?editors=1000
Readings:
- http://www.danielgoleman.info/three-kinds-of-empathy-cognitive-emotional-compassionate/
- http://www.bresslergroup.com/blog/why-empathic-design/
- http://www.ted.com/talks/daniel_goleman_on_compassion#t-39146
Questions and Reflection:
-
What role does empathy play in your life and how has it helped you? Empathy helps me connect with others on a deep level rather quickly, and to make people feel more comfortably in new situations.
-
How does empathy help you build better software? Empathy makes me interested in other people's stories, putting me in their shoes and introducing me to their problems and potential.
-
Why is empathy important for working on a team? Working on a team can be truly exhausting when teammembers put their own self-interest before the group's. When people are empathetic towards each other, negotiation and collaboration are more fluid, and working on a team can actually lighten the load and nurture inspiration. People are more patient with each other and more open-minded.
-
Describe a situation in which your ability to empathize with a colleague or teammate was helpful. My colleagues were uncertain about which client they should take. I could feel their hesitation, so the next time, before there was confusion, I stepped forward and assigned each therapist a client. It was a small move, but they were so grateful not to have to spend the extra energy in subtle negotiation. Their faces lit up and they thanked me, and felt more comfortable communicating issues to me in the future because they knew I was paying attention and genuinely wanted to help.
-
When do you find it most difficult to be empathetic in professional settings? How can you improve your skills when faced with these scenarios? I find it very difficult to be empathetic towards a person in power when I perceive them as being unkind or manipulative towards their 'inferiors.' It helps me to remember that this person is often unaware of their behavior, or if they are aware of it, they are unable to improve it at that time. It doesn't help the situation when I create more animosity, internalize the power dynamics, and label people as good or bad.
I appreciate this quote from the Bressler Group blog: "This is the definition of empathic design: studying users and their behavior in context, in order to open up opportunities for product innovation." This feels like the opposite of mindless consumerism based on advertising, when the producer convinces the consumer what they want and need, even if they don't really need it or it isn't a quality product.
Responses to Chapters 3 and 4 on Lists and Links in Duckett's HTML and CSS: Design and Build Websites
- There are three main types of lists in HTML: ordered, unordered, and definition. What are their differences?
- Ordered lists are numbered, and are enclosed within the
- Unordered lists are separated by small circles and are contained within the
- Definition lists are contained within the element
-
What is the basic structure of an element used to link to another website? An a element is the basis of any HTML link. An href attribute is on the back-side of the opening tag and it is where the absolute or relative URL is placed, within double quotation marks.
-
What attribute should you include in a link to open a new tab when the link is clicked? (A new tab or a new window? Is the code the same thing for both? Does it just depend on the computer's settings?) Inside the opening a element, after the href link, a target attribute is inserted, with a value of "_blank".
-
How do you link to a specific part of the same page? You create an id (using a letter or underscore) for that specific part of the page and reference that name of the id with #in the place where you want it to jump to when clicked.
-
What is the purpose of CSS? CSS allows you to style the appearance of the foreground and background of a website.
-
What does CSS stand for? What does cascading mean in this case? Cascading Style Sheets. Cascading means top to bottom = most general to most specific.
-
What is the basic structure of a CSS rule? Selector. open curly bracket. declaration containing property, colon, value. closed curly bracket. This means the HTML element you are referencing, the kind of change you want to make, and what you are changing it to.
-
How do you link a CSS stylesheet to your HTML document? An external CSS stylesheet requires an empty link element with three attributes: href, type, and rel; which means the link, the document type of the link, and the relationship between the two documents. Common values for these three attributes are styles.css, text/css, and stylesheet respectively.
-
What is it useful to use external stylesheets as opposed to using internal CSS? Keeps your content separate from your styling for organization purposes. Also easier to make edits when using consistent styling over a multi-page site.
-
Describe what a color hex code is. A hexadecimal code representing the values of the RBG contents in the color.
-
What are the three parts of an HSL color property? Hue (standard color value), saturation (amount of gray in the color. more saturation = less gray content), and lightness (how much white or black are in the color by percerent- 100% = no black).
-
In the world of typeface, what are the three main categories of fonts? What are the differences between them? Serif (fancier, lots of dangly bits), sans-serif (no dangly bits, easier to read on screen), monospace (great for coding, same spaces between all letters in accompanying fonts)
-
When specifiying font-size, what are the main three units used? Pixels or approx. points, percents, and ems which keeps fonts proportational.
- If you're using an input element in a form, what attribute controls the behavior of that input? The type= attribute.
- What element is used to create a dropdown list? A select element.
- If you're using an input element to send form data to a server, what should the type attribute be set to? An action attribute. *What element is used to group similar form items together? The fieldset element is great for grouping similar forms.
- Describe the differences between border, margin, and padding. Borders are in the middle of margins (outside- creats a gap between the margins of two boxes) and padding (inside, creates space between the text or content of a box and the border, particularly increases readibility) and separate the edges of one box to another.
- For a CSS rule padding: 1px 2px 5px 10px, what sides of the content box does each pixel value correspond to? Top, right, bottom, left
- Descirbe the different between block-level and inline elements. Block- level elements create a box around the entire element, changing its shape and starting a new paragraph. Inline elements don't disrupt the shape and only go around the text.
- What is the role of fixed positioning, and why is z-index important in the scenario of using foxed positioning? The position property in CSS allows one element to stay in a fixed position as the user scrolls through the page, while the other elements move. The z-index allows you to control which element sits on top as they overlap. It is determined by the highest number in the z-element.
- What is the difference between a fixed and liquid layout? Fixed width layouts do not change appearance even when the browser or screen size (or resolution) changes. Liquid layout adjust depending on the browser size, and you can do a partial liquid layout to specify what can change and how much it can change by.
- In an image element, why is the alt attribute important?
is an empty element that enables you to insert images into HTML and the attribute is where you put an accurate description of the picture, for the sake of screen readers. If it's an appearance>content image, use the alt attribute but keep the quotes blank.
- What determines if an image element is inline or block? An image element appears block if it is followed by a block element. If it is within a block element, then it appears inline.
- What are the benefits of jpg or png image file formats? .jpg is great for complex images with many different colors or tones. .png or .gif is great for images with one primary color or only a few colors covering a large area.
-
What is the benefit of specifying the height and width of images in CSS compared to specifying in the HTML? If all your images have the same formatting, you can adjust it all at once with CSS rather than individually with HTML and your content code looks like complicated. You can give a common name (class) to all the small/med/large images and adjust them accordingly.
-
What is an image sprite, and why is it useful? One image is used with adjustments made to it upon different clicks or aspects of the site, which makes loading much faster.
-
There are three big data types in JavaScript: numbers, strings, and booleans. Describe what each of them are. Numbers are numbers without quotations. You cannot name a function a number, but you can set a variable to a number. String are anything inside of quotation marks, including numbers. Strings are useful for entering text/ names of things, or numbers that you don't want to be calculated. Booleans are true/false statements, and you can set the code to run differently based on different results to the boolean. They don't have = but they can have === (equal to) or !== (not equal to).
-
What are the three logical operators that JavaScript supports? &&, ||, and !, which means And, Or, and Not respectivel. Useful in boolean situations with comparisons of two values or variables.
-
What is the naming convention used for variables? camelCase! Always start with lowercase. If more than one word, make the subsequent words Uppercase without spaces in between.
-
What is the difference between an expression and a statement? A statement (or, declaration) is referring to an action, whereas an expression is referring to a value. A statement can be replaced with an expression (any expression is also a statement), but not vice versa.
-
What are a few JavaScript reserved words, and why are they important to avoid using them for variable names? true, break, var, and this, are all words with pre-assigned meaning in javascript, which is why you don't want to use them for variable names. You can pretty much name variables whatever you want so long as you are consistent, because js sees the variable name as a key to pop in other information that you set it to. But the reserved words have actions accompanying them already, so things can get very confusing.
-
What is control flow, and why is it useful for programming? Control flow is the execution order of statements, and enables adjustments based on other variables. The code is more 'sensitive' and responsive to it's environment. Loops are an example of control flow statements where the code repeats until it is told to stop, and then it moves on.
- If we have a function defined as function sayHello(){console.log("Hello!")}, what is the difference between entering sayHello and sayHello() in the console? The first one is just the name of the function and will return the entire function to you, the second one is calling the function to action.
- What is the keyword return used for? "Do your thing and then stop and give me the value you've got."
- What are function parameters? Parameters are spot- holders for the arguments that give the function inputs it needs to run. It's what the function chews on through to give you a new answer.
- What is the naming convention used for function names? camelCase! And opening bracket after parentheses goes at end of line, closing bracket without any spaces is at the end of the block on its own line.
-
Psychology :) https://www.etsy.com/ Ahh, being here makes me feel crafty and relaxed. Nice colors and easy to get lost without realizing it. :( http://www.10thplanetboulder.com/ But where is your class schedule? And why are the images so big and the content so sparse? And where are you located? (psst inside a windy strip mall! good to know!)
-
Usability :) https://boulder.craigslist.org/ It's ugly but I know how to find what I'm looking for. They aren't playing any tricks on me. Straight-forward. Also no ads is really nice. :( https://www.colorado.gov/pacific/dora/i-want-to The "I Want To" section isn't nearly as useful as they think it is compared to the other sections.
-
Design :) http://www.apple.com/ Sleek, smooth, calm. Makes me want to spend lots of money and become a robot. :( http://www.aol.com So much happening! How do I check my email? So many videos, images, ads, etc. smooshed together.
-
Copywriting :) https://www.blueapron.com/ Fun, informative text, but not too much. Well balanced with images. :( https://www.reddit.com/ How do I find things and other subreddits. Not intuitive. http://www.nycewheels.com/bionx-road-bike.html So much text!! Overwhelming.
-
Analysis (Hard to tell from looking at a site, no? Here are examples of user research companies that seem to communicate well or not. :) https://measuringu.com/ Better information layout and balance of research, output and education. :( http://consumer-research-associates.com/ This site makes me feel sleepy. I wouldn't want to do research with them.