Skip to content

Instantly share code, notes, and snippets.

@dsdunn

dsdunn/dsdunn_prework.md

Last active February 18, 2018 00:57
Show Gist options
  • Save dsdunn/8fe83e9dd4585604e4abfbbc2b4dfe6d to your computer and use it in GitHub Desktop.
Save dsdunn/8fe83e9dd4585604e4abfbbc2b4dfe6d to your computer and use it in GitHub Desktop.
Download ZIP
Raw
dsdunn_prework.md

Day 1 Prework:

Chapters 1 & 2 Answers:

  1. HTML code represents the actual contents of the page and it's organization.
  2. An HTML element is a piece of content that lives on the page. A tag is what surrounds the contents of the element in the HTML code and defines what kind of element it is for the browser.
  3. Attributes give us more information about specific elements.
    • The <head> contains information about the page. Its contents will not be displayed on the page itself.
    • The <title> of the page is usually displayed at the top of the browser, or on the page's tab. It serves as the name of the page, describing it's contents and/or purpose.
    • The <body> contains the page's content to be displayed in the browser window.
  5. In chrome, I can right click in the window and select "inspect", or click "View", "Developer", "View Source".
    • <h1> through h6 are heading elements that range from most prominent (h1) to least prominent (h6), and usually take up they're own line on the page.
    • <p> elements are paragraphs containing text.
    • <br> elements indicate that content should continue on a new line.
    • <strong> elements indicate extra importance.
    • <q> elements are used for short quotes within a paragraph.
  7. An empty element does not have words between the opening and closing tags, often written without closing tags.
  8. Semantic markup adds extra information to the page, but is not intended to alter the page's structure.
  9. Three new semantic elements introduced with HTML5 are header, footer, and nav.

Code-Pen page link: https://codepen.io/dsdunn/pen/PQbJeJ

Day 2 Prework:

Chapters 3 & 4 Answers:

    • <ol> is an ordered list, containing numbered list items.
    • <ul> is an unordered list, containing list items and displaying them without numbers.
    • <dl> is a definition list, containing term/definition pairs
  2. a is an anchor element and will contain an href attribute describing the destination of the link, and usually some text that will be displayed on the page to be clicked.
  3. A target = "_blank" attribute should be included to open a new tab when the link is clicked.
  4. Id attributes can be used to identify certain parts of the page, and an anchor element can point to that id by setting its href attribute to equal a poundsign followed by the specified id value: href="#id".

Chapters 10-12 Answers:

  1. CSS tells the browser how to display the content of the page.
  2. CSS stands for Cascading Style Sheets. Cascading refers to the way multiple rules can "stack" on top of eachother and will apply to the elements they are targeting according to precedence.
  3. A CSS rule consists of a selector identifying which element(s) are affected, and a declaration of property/value pairs describing the style to be applied to the selected element.
  4. In the head of the page, add a link element with the href attribute set to the address of the css file, along with type and relationship attributes: <link href="css/styles.css" type="text/css" rel="stylesheet"/>
  5. External stylesheets are easier to work with and maintain, keeping a clear distinction between css and html markup.
  6. A hex color code is a six digit combination of numbers and/or letters a-F representing values of red, green, and blue, and describing a specific color.
  7. Hue (base color), Saturation (how much grey), Lightness (amount of white or black)
    • Serif text contains little details at the end of letter strokes.
    • Sans-Serif text ommits these details.
    • Monospace describes text in which each character takes up the same amount of space.
  9. Pixels, Percentages, and EMS

Day 3 Prework:

Chapter 7 Answers:

  1. The type attribute will determine the behavior of the form.
  2. The select element is used to create a dropdown list.
  3. Type="submit" is used to send form data to the server
  4. The fieldset element groups similar form items together.

Chapter 13 and 15 Answers:

    • The border is the outer edge of the box.
    • The margin is the space outside the border of the box.
    • The padding is the space between the border and the content of the box itself.
  2. 1px (top), 2px (right side), 5px (bottom), 10px (left side)
  3. Block level elements each start on their own line of the page, while inline elements flow between surrounding text.
  4. Fixed positioning places elements in relation to the browser window and z-index is important in this case because it determines which elements will be displayed on top of others.
  5. A fluid layout will change in appearance with varying view port sizes, while a fixed layout will not change as users' windows are resized.

Day 4 Prework:

Chapter 5 Answers:

  1. Alt attributes on image elements are important for search engines and for screen readers for the visually impaired.
  2. Img elements are inline, unless they are followed by block elements.
  3. Jpegs are suited for images with lots of colors, while png format lends itself to images with few colors or large areas of the same color.

Chapter 16 Answers:

  1. Using CSS, you can specify various classes of image sizes for use accross your site, versus having to specify the size of each image individually in html.
  2. An imag sprite is a background image that has several versions of the same image on it, but will only display one version at a time by changing the position of the background image.

Day 5 Prework:

EJS Chapters 1 and 2 Answers:

    • Numbers are numerical values
    • Strings are series' of characters surrounded by quotes.
    • Booleans are either true or false.
  2. The three logical operators in JavaScript are && (and), || (or), and ! (not).
  3. The variable naming convention in JavaScript is camelCase.
    • An expression is a fragment of code that produces a value.
    • A statement is a complete line of code that stands alone and performs some action.
  5. "Break", "while", "this", "for", and "case" are some reserved words in JavaScript. Reserved words are not to be used as variable names because these words have specific meaning/purposes in the JS language.
  6. Control flow is the order in which each statement of a program is executed. It's important to understand as it represents the protocol for how the program will work to achieve its purpose.

Day 6 Prework:

EJS Chapter 3 Answers:

  1. The function name without the parentheses returns the language of the function itself, while the function name followed by () executes the function.
  2. The return keyword determines the resulting value of the function.
  3. Function parameters are like variables who's initial values are provided by the caller of the function.
  4. Functions are named just like variables in camelCase, and are defined either with var myFunction = function(){...}, or simply with function myFunction(){...};

Day 7 Prework:

UX Questions with good and bad examples:

  1. How does this make the user feel?
  • http://www.therooster.com/ This site feels modern and hip, organized and informative without being cluttered. The site itself feels like a culture magazine you could peruse through for entertainment.
  • http://www.colomusicbuzz.com/ Another online version of a local culture periodical, this site feels cheap and cluttered. It's not inviting and the content feels unorganized.
  1. Is it easy to find (good), hard to miss (better), or subconsciously expected (best)?
  • https://www.tagburgerbar.com/ This site seems to satisfy users expectations right off the bat. Users land right on the menu with a picture of the food as well very clear navigation options. The site requires almost no scrolling and all its information sits a click away.
  • http://www.stoneysbarandgrill.com/menu.html While this site may not be terrible, it doesn't match the ease of usability of the first one. On the landing page, users have to scroll down to see the food menu losing the site's navigation menu in doing so. The information is still accessible, but it's just not as clearly spoonfed to the user. If I imagine a hungry drunk person looking for info, the first site gets the job done more efficiently, with less room for error or frustration.
  1. Do users think it looks good? Do they trust it immediately?
  • http://theband.hiof.no/ This looks like a leftover fan site from the 90s, with very little thought put into the style. Despite that this is the first result on google for an iconic American rock act, and the site contains tons of information and could be a great recource, the fact that it's so outdated is discrediting. The design of this site makes it look like your uncle's cover band playing at the local bar on Saturday night, instead of the subject of Scorcese's "The Last Waltz" concert film!
  • http://www.thebyrds.com/ Without being fancy, this site is much more thoughtfully put together. It looks like something that fans the band would be more inclined to engage with. The branding is immediately recognizable, and there is lots of different content accessible on the same page. This page has a "by fans for fans" feel, like an opportunity to get to know the band and their music versus a catalogue of statistics or an encyclopedia entry.
  1. Is it clear, direct, simple, and functional?
  • http://www.ballparkdispensary.com/ The copy on this page is clear and readable, easily skimmed, and fits within a relaxing layout/ design scheme.
  • http://www.medicinemandenver.com/ This site is full of text in various sizes and in different positions on the page. It gives a sort of "too many messages!" impression, and is much less clear to navigate. The cluttered feel makes the copy less affective and fatigues the eye.
  1. How can you use this analysis to make improvements?
  • http://www.musiciansfriend.com/ While it's hard for me to tell what kind of data analysis has gone into designing various websites, it seems that this one for example makes clear choices about what to emphasize and what to recommend. Many sites like this have "frequently bought together" bundles and recommendations, as well as strong marketing for promotional offers.
  • http://www.fullcompass.com/ This site doesn't seem to sell as hard, or have a specific order of presentation of the products. Perhaps the company could benefite from deeper analysis of what people want to buy most, or how to entice consumers away from competitors.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment