Skip to content

Instantly share code, notes, and snippets.

@wheresmytyphone

wheresmytyphone/TylerGarner_Prework.md

Last active March 13, 2017 00:13
Show Gist options
  • Save wheresmytyphone/71c1fb860cffd438fcb187310e4e7d7a to your computer and use it in GitHub Desktop.
Save wheresmytyphone/71c1fb860cffd438fcb187310e4e7d7a to your computer and use it in GitHub Desktop.
Download ZIP
Prework -- Tyler Garner
Raw
TylerGarner_Prework.md

DAY 1

  1. On a website, what is the purpose of HTML code? HTML is the information/instructions for a browser to follow in order to display the website itself.
  2. What is the difference between an element and a tag? Tags are the indicators that specify the type of information within them, and elements are the actual content within the tags.
  3. Why do we use attributes in HTML elements? Attributes are used to specify for the browser more information about the element within a tag.
  4. Describe the purpose of the head, title, and body HTML elements. Head elements are information about the page, similar to the metadata of an MP3 file. The title is a tag used within the head element, that the browser reads to display in the tab/browser window bars, as opposed to being displayed on the website itself. Anything contained as a body element will be used as instructions for what the website will actually display within the man browser window.
  5. In your browser (Chrome), how do you view the source of a website? option+command+U
  6. 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. Used to stress the importance of a portion of text, for use in text readers (and other tools, I assume). The browser will typically put text within this tag in bold, however it is distinct from using the tag. Used similarly to the tag, just to put emphasis on a portion of text. By default the browser will italicize the text. Used to display a strike through the tagged text Indicates that a portion of text is an abbreviation, which when hovered over will display the abbreviated term. Marks a block of text as the source of a citation.
Indicates to the browser that the tagged text is an address or contact info.
  1. What are empty elements? Empty elements are tags that have no content within them, because they indicate a single function, such as a line break or horizontal ruling.
  2. What is semantic markup? Semantic markup is markup that proivides information about the content, which is called structural markup.
  3. What are three new semantic elements introduced in HTML 5? Use page 431 in the book to find more about these new elements.
Designates text on a page as an article and so distinct as its own complete piece of content within a page. Groups multiple headings into one.
Used with an attribute to group together sections of text within an article/webpage.

Day 2

  1. There are three main types of lists in HTML: ordered, unordered, and definition. What are their differences? The differences are in how the browser displays the list. Ordered is a numbered list using numbers, Unordered uses bulletpoints, and definition uses indentations.

  2. What is the basic structure of an element used to link to another website? Within the first tag, you input "href=" as an attribute, then the url, followed by the text the page will display and finally a close tag.

  3. What attribute should you include in a link to open a new tab when the link is clicked? target="_blank"

  4. How do you link to a specific part of the same page? You assign attributes to portions of text within the page, and then after "href=" you type a hashtag and the the name of the attribute.

CSS

  1. What is the purpose of CSS? CSS is used to edit the visual elements/colors of many different aspects in a webpage.

  2. What does CSS stand for? What does cascading mean in this case? Cascading Style Sheet. Cascading refers to how the hierarchy of commands begins defining a large amount of content, and then the "cascades" into more specific commands within it.

  3. What is the basic structure of a CSS rule? A Selector, followed by a delaration that will apply to the selected selector.

  4. How do you link a CSS stylesheet to your HTML document? A CSS file is linked within the element of a page.

  5. What is it useful to use external stylesheets as opposed to using interal CSS? You can use external stylesheets to lay down the rules for every page of a website instead of requiring extra code within every page.

  6. Describe what a color hex code is. A color hex code is a code used to express a particular color within the standardized RGB spectrum.

  7. What are the three parts of an HSL color property? Values given to each of these three components: Hue, Saturation, and Brightness. Optional is Alpha, which represents translucency/opacity.

  8. In the world of typeface, what are the three main categories of fonts? What are the differences between them? There are Serif, Sans-serif, and Monospace fonts. Serif fonts have a little extra detail/flares in them, while Sans-serif fonts consist of clean, straight ends. Monospace fonts are uniform in width, so each character takes up an identical amount of space.

  9. When specifiying font-size, what are the main three units used? Pixels, Percentages, and EMS, which uses the letter "m" as a measurement unit.

DAY 3

  1. If you're using an input element in a form, what attribute controls the behavior of that input? The "type" attribute.

  2. What element is used to create a dropdown list? Using "select" as the type attribute.

  3. If you're using an input element to send form data to a server, what should the type attribute be set to? "post"

  4. What element is used to group similar form items together? "fieldset"

  5. Describe the differences between border, margin, and padding. Borders are the boundaries separating different boxes within a webpage. Margins extend the space outside the box, and padding extends the space inward.

  6. For a CSS rule padding: 1px 2px 5px 10px, what sides of the content box does each pixel value correspond to?

  7. Descirbe the different between block-level and inline elements. Block level elements basically create new boxes for each seperate element, whereas inline elements are elements within other boxes.

  8. What is the role of fixed positioning, and why is z-index important in the scenario of using foxed positioning? Fixed positioning allows a box to stay in one position on a page, even when scrolling. The z-index is used to determine the top-down order of the boxes.

  9. What is the difference between a fixed and liquid layout?

DAY 4

  1. In an image element, why is the alt attribute important? It adds a description for the image, for use in text readers or web crawlers.

  2. What determines if an image element is inline or block?

  3. What are the benefits of jpg or png image file formats?

  4. What is the benefit of specifying the height and width of images in CSS compared to specifying in the HTML?

  5. What is an image sprite, and why is it useful?

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