Skip to content

Instantly share code, notes, and snippets.

@Ggoering

Ggoering/GeorgeG_prework.md

Last active March 15, 2017 03:22
Show Gist options
  • Save Ggoering/568e8b46d8016fb2c05ef6817c706d92 to your computer and use it in GitHub Desktop.
Save Ggoering/568e8b46d8016fb2c05ef6817c706d92 to your computer and use it in GitHub Desktop.
Download ZIP
Turing prework
Raw
GeorgeG_prework.md

GG Prework

Day 1

HTML

  1. On a website, what is the purpose of HTML code?
  • HTML Code is a way to communicate with a browser how you want the features of the webpage to be formatted.
  1. What is the difference between an element and a tag?
  • An element is composed of tags, attributes & their respective values, and content between the tags. A tag is a recognized piece of the HTML code contained within symbols '< >' that has intrinsic properties which will tell the browser to display the content a certain way.
  1. Why do we use attributes in HTML elements?
  • Attributes give specific modifications to tags, and can control (for example) exactly what font should be used, or color to display.
  1. Describe the purpose of the head, title, and body HTML elements.
  • The head is an element which contains meta data relevant to the webpage. By default this is not actually displayed in the webpage. This can be useful for site organization as well as search results. It's possible to omit the head as long as the title element is present.
  • The title element should go within the head element. The title element is the name of that specific webpage. This is useful for search results and site organization. This is the text that will show up on the tab in the browser Possibly also useful for screen readers? *Body element is used for containing the actual content of the webpage that the user is supposed to view and/or interact with
  1. In your browser (Chrome), how do you view the source of a website?
  • View --> Developer --> View Source
  1. List five different HTML elements and what they are used for. For example,

    is a paragraph element, and it is used to represent a paragraph of text.  * div is an element that creates a group out of all the elements contained within it. This element will start on a new line by default
  • span is an element that will keep whatever is contained between its tags inline with the element it is contained within.
  • a short for anchor, the a element will contain a hyperlink either to other sites, different pages to the same site, and/or a specific location to the linked page or current page
  • p are used to contain text information which is presented by the webpage
  • form
  1. What are empty elements?
    *Empty elements are essentially an element that has no customizable content between the two tags. Everything is self contained within the one tag, such as an img.
  2. What is semantic markup? *Semantic markup is the use of semantic elements such as em that add additional meaning to the text. This can be used to display to the user any important details visually without the need for further explaining. It is also useful for browsers and search engines to further define the purpose of the text between the two tags, such as using the cite element.
  3. What are three new semantic elements introduced in HTML 5? Use page 431 in the book to find more about these new elements.
  • article Defines an article in the document
  • aside Defines content aside from the page content
  • bdi Defines a part of text that might be formatted in a different direction from other text

Empathy Gear-Up

  1. What role does empathy play in your life and how has it helped you?
  • I believe that empathy is necessary in order to build deep, intimate friendships. I have an amazing group of friends who I share a deep and rich connection with. I believe very few people have friendships to this degree. I believe that empathy between us has helped develop such a wonderful social circle.
  1. How does empathy help you build better software?
  • Most software is built for a user base other than the developer. This means that the developer(s) should be trying to think and feel like their user base in order to provide a product that best meets their needs/desires. A developer who builds software for an audience that is just like themselves may easily ignore critical useability aspects which are necessary to a successful product.
  1. Why is empathy important for working on a team?
  • Empathy is critical to ensuring that the work environment remains positive. Real life plagues every last one of us, and unempathetic views on how individuals in the work place are feeling would likely lead to a workplace that is hostile. Co-workers might find that they are filled with bitterness and judgemental attitudes towards one another.
  1. Describe a situation in which your ability to empathize with a colleague or teammate was helpful.
  • I had a colleague who was going through some health issues and could not put in the same amount of time in the workplace as before as their condition left them with much less energy throughout the day. I had to step up and pull some extra weight while they received treatment. Had I been unempathetic this would have likely lead to me complaining about the co-worker and losing respect for them, instead we are friends to this day.
  1. 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 most difficult to be empathetic towards mean or toxic people. I would prefer to be able to interact with them in a productive manner at all times, regardless of how irritated their behavior makes me.

Day 2

HTML

  1. There are three main types of lists in HTML: ordered, unordered, and definition. What are their differences?
  • Ordered lists put numbers before things, unordered lists put bullet points, and definitions are a semantic markup of unordered lists
  1. What is the basic structure of an element used to link to another website?
  • a href="SITEURL"[LINK TEXT AS IT APPEARS IN THE BROWSER] /a
  1. What attribute should you include in a link to open a new tab when the link is clicked?
  • attribute is target format looks like: target="_blank"
  1. How do you link to a specific part of the same page?
  • #idofelementyou'relinkingto

CSS

  1. What is the purpose of CSS?
  • Define the visual style of the web page
  1. What does CSS stand for? What does cascading mean in this case?
  • Cascading Style Sheets. Cascading means that the rules overlap each other with precedence towards rules later on in the code.
  1. What is the basic structure of a CSS rule?
  • [element] {[property:value]; [...:...;]}
  1. How do you link a CSS stylesheet to your HTML document?
  • reference in the head element **link rel="stylesheet" type="text/css" href="fileLocation". **
  1. Describe what a color hex code is.
  • Hexadecimal 6-digits that can define any color possible with 256 bits
  1. What are the three parts of an HSL color property?
  • Hue, Saturation, and Brightness
  1. In the world of typeface, what are the three main categories of fonts? What are the differences between them? When specifiying font-size, what are the main three units used?
  • Serif is used for long text passages because it is easier to read, especially if print is available, Sans-Serif is stylstically simple in design, and also works well in low resolution displays, and monospace is used for code because the letters are all equally wide so text lines up neatly.

Day 3

HTML

  1. If you're using an input element in a form, what attribute controls the behavior of that input?
  • the method attribute
  1. What element is used to create a dropdown list? form attribute is option
  2. If you're using an input element to send form data to a server, what should the type attribute be set to?
  • post
  1. What element is used to group similar form items together?
  • div

CSS

  1. Describe the differences between border, margin, and padding.
  • border is the box around the element, such as with a text box. Margin is the space between the element and the neighboring elements. Padding is the space between the contents of the element and the border around it.
  1. 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
  1. Descirbe the different between block-level and inline elements.
  • Block-level elements are on a separate line. Inline elements will fit within the current line on the element.
  1. What is the role of fixed positioning, and why is z-index important in the scenario of using fixed positioning?
  • fixed positioning is used to force an element to be at the same place in the browser window regardless of screen size or where the user has scrolled to in the page. Z-index is used to determine which elements are on top if they happen to overlap due to the use of something like fixed positioning.
  1. What is the difference between a fixed and liquid layout?
  • a fixed layout will remain as it is regardless of screen size. This would force the user to scroll left or right to view all the content of the page if it's been shrunk. A liquid layout will cause the elements to fit next to one another depending on the screen size.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment