Skip to content

Instantly share code, notes, and snippets.

@mike-duke
Last active November 21, 2017 05:43
Show Gist options
  • Save mike-duke/95269f436e5f80ffc5c18b2de4195e6c to your computer and use it in GitHub Desktop.
Save mike-duke/95269f436e5f80ffc5c18b2de4195e6c to your computer and use it in GitHub Desktop.
@mike-duke
Copy link
Author

mike-duke commented Nov 15, 2017

Chap 1 and 2 of HTML and CSS questions:

  1. The purpose of HTML code is to provide structure to the content of a web page.
  2. An element refers to opening and closing tags as well as the content in-between.
  3. Attributes provide additional information about the contents of an element.
  4. The "head" contains information about the website. The "title" contains the name of that site that will appear on the top bar of the browser or the tab. The "body" contains the content of the site that appears in the browser window.
  5. To see a web page's source code, open the View menu, select "Developer" and select "View Source" or use the keyboard shortcut "Option, Command, U."
  6. body></body: contains the content of the site that will appear in the browser. "em></em": used for emphasis. Appears in most browsers as italicized. Screen readers will know to emphasize this content. "strong></strong": used to show importance. Appears in most browsers as bold. "i></i": Italicize. Not the same as emphasis. "h1></h1": used to create headings. Structural element to delineate the beginning of a portion of content or the beginning of a section of content.
  7. An empty element requires no content to operate and is usually only 1 tag.
  8. Semantic markup does not effect page structure but does add information to page content.
  9. Three new semantic elements in HTML5: header></header, footer></footer, aside></aside

@mike-duke
Copy link
Author

Chap 3 and 4 HTML and CSS questions:

  1. An ordered list is in a certain order with numbers. An unordered list is in no particular order with bullets or some other delineation. A definition list usually consists of a series of terms and their definitions.
    2.<a href: "(website address/URL)">(Description or title of website)
  2. A link element should include the "target='_blank'" attribute in order to open in a new tab.
  3. In order to link to a specific part of the same page, the specific part first needs to be named with the "id" attribute. Then, a link element can be added with the id name in place of a URL (with a preceding #.)

@mike-duke
Copy link
Author

Chap 10, 11, 12 HTML and CSS questions:

  1. The purpose of CSS is to control the appearance of a website.
  2. CSS stands for Cascading Style Sheets. Cascading in this context means that a browser will choose the latest of any duplicate or conflicting rules.
  3. A CSS rule is structured as a selector followed by a declaration, with the declaration broken down into a property followed by a value.
  4. A CSS stylesheet is linked to an HTML document via the "link" tag in the HTML document, which indicates the location and name of the CSS file to be used.
  5. An external file is more useful for websites with multiple HTML pages because it will control the appearance of all the pages from a single file, making changes to the appearance much easier and the overall appearance more uniform.
  6. Color hex code is a six digit alpha-numeric string that translates to a browser as a color by indicating the values of red, green, and blue in the color.
  7. An HSL color property is comprised of hue, saturation, and lightness.
  8. The three main categories of fonts are serif, sans-serif, and monospace. A serif font will have an extra detail on the end of the main stroke of the letters. A sans-serif font will not have this extra detail, and a monospace font is one where every letter is the same width.
  9. For font size, pixels, percentages, or ems are the typical units used.

@mike-duke
Copy link
Author

Chap 7 HTML and CSS questions:

  1. The "type" of the input controls how the input will behave.
  2. The "select" element is used to create a drop-down list.
  3. Using an input element to send data to a server would require the "submit" type.
  4. Similar form items can be grouped together using the "fieldset" element.

@mike-duke
Copy link
Author

Chap 13 and 15 HTML and CSS questions:

  1. A border surrounds an HTML element and separates the edge of one box from another. A margin is the area outside of the border that can be adjusted to create a gap between elements. Padding is the area between the border and the content of the element.
  2. In a CSS rule, the content box is described clockwise from the top, so top, right, bottom, left.
  3. Block-level elements always start on a new line. Inline elements do not.
  4. When an element is in a fixed position, it stays in position relative to the browser window, not the surrounding content. The z-index is important because fixed positioning can cause elements to overlap. Z-index controls which elements are "in front" of which other elements.
  5. A fixed layout is usually set in pixels and does not change with a change in the screen size. A liquid layout is usually set in percentages and does change with different screen sizes.

@mike-duke
Copy link
Author

Chap 5 HTML and CSS questions:

  1. The "alt" attribute for an image is important because it allows for a text description that can be used by screen readers for the visually impaired as well as search engines.
  2. The "img" html element is inherently and inline element. It would need to be altered using CSS to make it a block element.
  3. The JPG file format is typically used for photographs while the png file format is typically used for simpler, monochromatic images, like logos.

@mike-duke
Copy link
Author

Chap 16 HTML and CSS questions:

  1. The benefit of specifying height and width of any image is so that the browser will render the image correctly as it loads. However, the benefit of using CSS over HTML to specify this is so that a class of images can be created and all images in that class can be specified at once.
  2. A sprite is a single image used for several different parts of an interface. This is useful because the browser only needs to load the one image for several uses, thus speeding up load times.

@mike-duke
Copy link
Author

Chap 1 and 2 Eloquent JavaScript questions:

  1. In JavaScript, a number is just a number. It's presented in a statement without quotes. A string is a line of text, presented in quotes. Boolean data consists of true and false.
  2. The three logical operators of JavaScript are: and, or, and not, represented by &&, ||, and !, respectively.
  3. With the exception of some reserved words that JavaScript uses as keywords, a variable can be called almost anything. Typically, variable names are not capitalized, but multiple word names can be for clarity, though it is common to leave the first word uncapitalized. No spaces are allowed.
  4. An expression is a fragment of code that produces a value. A statement is a complete instruction to be executed by the web browser.
  5. With, Yield, Interface, Function, If, and False, are examples of reserved words in JavaScript. They are to be avoided for variable names because the language sees them as keywords that have meaning beyond whatever value given by the variable.
  6. Control flow is the order in which JavaScript statements are executed--from top to bottom--which allows for predicability and consistency in execution.

@mike-duke
Copy link
Author

Chap 3 Eloquent JavaScript Questions:

  1. Typing "sayHello ()" will call the function, whereas typing "sayHello" will not.
  2. The "return" keyword determines the value a function returns to the console.
  3. Function Parameters are the names listed in the function definition. Like variables, but their values come from elsewhere.
  4. Function names, like variable names, can be just about anything other than JavaScript's reserved names. However, it's also advisable to keep names short and concise in order to contribute to readability.

@mike-duke
Copy link
Author

UI/UX Questions and websites:
Do clickable things look different than non-clickable things? YES: https://4rsmokehouse.com/
NO:
Do users think it looks good? Do they trust it immediately?: YES: http://www.cobbpediatric.com/
NO: http://www.suzannecollinsbooks.com/
Does it reduce anxiety? YES: https://www.airbnb.com/
NO: http://www.007museum.com/
How does this make them feel? GOOD: https://www.kindsnacks.com/
NOT GOOD: art.yale.edu
Could you solve this just as well with something more common?: NO: https://www.indeed.com/
YES: https://www.amazon.com/

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment