- On a website, what is the purpose of HTML code?
HTML code provides structure - it gives direction to the browser regarding how information should be displayed.
- What is the difference between an element and a tag?
The two terms are often interchangeable; although a tag may refer to an opening or closing tag, an element refers to the pair and content in between.
- 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 head contains information about the website that is not displayed in the main browser. The title is included in the head section - although the title can be displayed at the top of the browser. The body element contains information to be displayed in the browser.
- In your browser (Chrome), how do you view the source of a website?
Simply press f12 to bring up the dev tool and select the source tab.
- 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.
h1 main heading
b bold text
sub subscript text, such as the 2 in CO2
br / line break
q short quote
- What are empty elements?
Empty elements are self-contained tags that do not have text in between.
- What is semantic markup?
Semantic markup is intended to provide amplyfying information, but not intended to change the structure of the page.
- What are three new semantic elements introduced in HTML 5? Use page 431 in the book to find more about these new elements.
The nav element contains navigational blocks, the article element is a container for any section of a page that could stand alone, and the section element groups related content together.
What role does empathy play in your life and how has it helped you?
Empathy is helps with understanding how people think and feel. Its a great tool for helping connect with other people.
How does empathy help you build better software?
Not only is empathy crucial for working with teammates, it is essential to understanding the needs of the customer.
Why is empathy important for working on a team?
Since software can be complex, its important to understand how your teammates approach a problem. Good understanding and connection can help increase communication and teamwork.
Describe a situation in which your ability to empathize with a colleague or teammate was helpful.
Empathy is understanding how someone thinks and feels. If you've walked a mile in their shoes, empathy can be as easy as realling your own experince in their situation. My collegaues and I went through highs and lows in flight school (no pun inteneded), and we were always there to support each other.
When do you find it most difficult to be empathetic in professional settings? How can you improve your skills when faced with these scenarios?
Its difficult to empathize when there are disagreeements. Every scenario is different; as a professional, I need to take a step back and evaluate the best course of action - whether that is understanding what I can do to best help the team, or to get the team on the same page.
Link to Pen: https://codepen.io/BruceChung/pen/wqVNjP
- There are three main types of lists in HTML: ordered, unordered, and definition. What are their differences?
Ordered lists are numbered while unordered lists are bullet point. Definition lists format by term and definition.
- What is the basic structure of an element used to link to another website?
The a element is used followed by href=link source. The text following the opening tag is displayed as the link in the browser. Finally, the closing tag ends the element.
- What attribute should you include in a link to open a new tab when the link is clicked?
The target atttibute should be included.
- How do you link to a specific part of the same page?
The ID attribute of the element you want to link to should begin with # (track symbol).
Chapters 10, 11, and 12 on What is CSS, Color, and Text from HTML and CSS: Design and Build Websites
- What is the purpose of CSS?
The purpose of CSS is to control the appearance of the content.
- What does CSS stand for? What does cascading mean in this case?
The C in CSS, or Cascading Style Sheets, refers to rules governing the appearance of elements to "cascade" from general to specific (least important to most).
- What is the basic structure of a CSS rule?
More specific rules take precedence over more general ones.
- How do you link a CSS stylesheet to your HTML document?
Use the link element and specify href, type, and rel.
- Why is it useful to use external stylesheets as opposed to using interal CSS?
An external stylesheet can be used to control the layout of all the webpages. Furthermore, it is a good practice to separate content and style.
- Describe what a color hex code is.
Color hex code is a six digit code that represents the amount of red, gree, and blue in a color, preceded by a #.
- What are the three parts of an HSL color property?
Hue, saturation, and lightness.
- In the world of typeface, what are the three main categories of fonts? What are the differences between them?
Serif, sans-serif, and monospace. Serif has details on the ends of the main strokes of the letters, while sans-serif has straight ends to letters. Monospace features every letter in the same width.
- When specifiying font-size, what are the main three units used?
The three main units are pixels, percentages, and ems.
- If you're using an input element in a form, what attribute controls the behavior of that input?
In the input element, 'type' dictates the input format displayed in the browser.
- What element is used to create a dropdown list?
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?
It should be set to 'text'.
- What element is used to group similar form items together?
'Fieldset' is used to group similar items.
- Describe the differences between border, margin, and padding.
The border is the boundary of a box; margin is the gap outside the box while padding is the space inside the border before the content contained.
- For a CSS rule padding: 1px 2px 5px 10px, what sides of the content box does each pixel value correspond to?
The values are listed clockwise from top; so top, right, bottom and left respectively.
- Describe the different between block-level and inline elements.
Simply put, block-level elements start on a new line whereas inline elements flow in between surrounding text.
- What is the role of fixed positioning, and why is z-index important in the scenario of using fixed positioning?
Fixed poisitioning allows the element to remain at the same part of the browser window, and z-indexing is useful because it allows the fixed portion to remain on top of the other content (or bottom if desired).
- What is the difference between a fixed and liquid layout?
Because there are different resolutions and screen sizes for different machines, fixed and liquid layouts can provide different advantages. Fixed will remain the same size and the advantage is its content will not warp. Liquid will change to fit the browser size and take advantage of all avaliable space.
- In an image element, why is the alt attribute important?
The alt attribute provides a description of the image and may be handy if the image does not load.
- What determines if an image element is inline or block?
Positioning of the image element in relation to the p element determines inline or block - image before paragraph will result in block, while image added within the p element results in inline.
- What are the benefits of jpg or png image file formats?
JPG files can display subtle colors and are better suited for photographs while PNG is better suited for simple images or logos.
- What is the benefit of specifying the height and width of images in CSS compared to specifying in the HTML?
If you want your images to be a certain size, specifying the class in HTML allows you to set the size for all images in that class at once in CSS.
- What is an image sprite, and why is it useful?
An image sprite is a larger image that may be used in a single location by shifting the background to fit the interaction in the browser. This is useful becasue the browswer only needs to request one image rather than multiple ones.
Chapters 1 and 2 (Data Types, Variables, and Control Flow) from Eloquent JavaScript: A Modern Introduction to Programming
- There are three big data types in JavaScript: numbers, strings, and booleans. Describe what each of them are.
A number is a number. A string is text inclosed in quotes. A boolean is a true or false value.
- What are the three logical operators that JavaScript supports?
The three logical operators are and (&&), or (||), and not (!).
- What is the naming convention used for variables?
The first word is lowercase and the first letter of any following words are uppercase - called camelCase.
- What is the difference between an expression and a statement?
A fragment of code that produces a value is an expression, while a statement is a "full sentence" (in contrast to the "sentence fragment" that is an expression).
- What are a few JavaScript reserved words, and why are they important to avoid using them for variable names?
Some JS reserved words include: switch, case, false, var... they are unusable for variable names because, like their reserved status imples, they are used for other functions.
- What is control flow, and why is it useful for programming?
Control flow is how the machine runs a program - generally from top to bottom. It is useful for programming to understand how flow is controlled to find bugs and execute techniques such as the while or for loop.
- 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() will call the function and execute it while sayHello will bring up the syntax of the function but will not execute.
- What is the keyword return used for?
Return give back the code following the key word and ends the function.
- What are function parameters?
Function parameters are like variables except the caller give them value.
- What is the naming convention used for function names?
Use camelCase
- Psychology
How does this make them feel?
http://www.vervedenver.com/ - good site makes the user feel good about the apartment http://www.suzannecollinsbooks.com/ - terribly designed site of Hunger Games author
- Usability
Is it easy to find (good), hard to miss (better), or subconsciously expected (best)?
http://www.latimes.com/ - easy to navigate http://cloud9walkers.com/ - no idea how to get what I want
- Design
Do they trust it immediately?
http://www.feedmusic.com/ - very well designed http://electrifyingtimes.com/ - terribly designed
- Copywriting
Does it motivate the user to complete their goal?
http://minimums.com/ - motivates me to stay and see what the site is about http://www.pennyjuice.com/htmlPages/whoispj.htm - instantly want to exit the site
- Analysis
Do you know why users do that, or are you interpreting their behaviour?
https://insideabbeyroad.withgoogle.com/en - good showcase on abbey road and give the user a tour http://art.yale.edu/ - difficult to navigate and unclear