Skip to content

Instantly share code, notes, and snippets.

@danalvarez5280

danalvarez5280/danalvarez_prework.md

Last active May 2, 2017 14:54
Show Gist options
  • Save danalvarez5280/e3913f45ac6d3460150dd946dca1b7b3 to your computer and use it in GitHub Desktop.
Save danalvarez5280/e3913f45ac6d3460150dd946dca1b7b3 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
danalvarez_prework.md
  1. On a website what is the purpose of HTML code?
  • ON a website, HTML code describes the structure of the page.
  1. What is the difference between an element and a tag?
  • The difference between an element and a tag is that an element is usually made up of two tags, an opeing tag and a closing tag.
  • Also an element comprises the opeing tag and closing tag and any content that lies between them.
  1. Why do we use attributes in HTML elements?
  • We use attributes to provide additional information about the contents of an element.
  • An attribute appears on the opening tag and contain two parts. Name and value. name="value"
  • Name indicates what kind of extra information you are supplying about the element's content.
  • Value is the information or setting for the attribute.
  1. Describe the purpose of the head, title, and body HTML elements.
  1. head: This contains information about the page. you will usually find title element inside the head element.
  2. title: The contents of the title element are shown in the top browser or on the tab for that page. A title of that webpage, i.e. amazon.com, nfl.com, etc..
  3. body: Everything inside this element is shown inside the main browser window.
  1. In your browser(Chrome) how do you view the source of a website?
  • To view the source of a website, go to website, click the View menu in the browser, look for option that says "view Source".
  • On my Mac it is View Menu then scroll down to Developer which has a slide out sub menu with View Source there.
  1. List five different HTML elements and what they are used for?
  1. h1 words between these elements are a main heading h2 is a sub-header. Sub-headers only go down to h6
  2. Superscript, such as suffixes of dates or mathematical concepts. Example: The 4TH of Juy or 22 equals 4.
  3. Subscript. Example: H2O is the elemental name for water.
  4. The bold element work like this words between these elements appear in bold.
  5. The itailic element works like this words between these elements appear in itailics.
  6. The quote element works like this On small step for man, one giant leap for mankind
  1. What are empty elements?
  • Elements that do not have any words between an opeing and closing tag are known as empty elements.
  • Written differntly, it ususally has only one tag. Before the closed angled bracket of an empty element there will often be a space and a forward slash.
  • Examples:
  1. Horizontal rule:
2. Line Break:


as
shown
here

  1. What is semantic markup?
  • Some text elements that are not intended to affect the structure of your web pages, but they do add extra information to the pages are known as Semantic markup.
  • Example: The emphasis element indicates emphasis that subtly changes the meaning of a sentence. This is read differently by different browsers.
  1. What are three new semantic elements introduced in HTML5?
  • Before in traditional HTML layouts the div element was used to group together related elements on the page.
  • Authors used class or id attributes to indicate the role of the div element in the structure of the page.
  • HTML5 has introduced new elements that allow you to divide up the parts of a page.
  1. Instead of div id="header", HTML5 uses the header element
  2. Instead of div id="nav", HTML5 uses the nav element
  3. Instead of div class="article", HTML5 uses the article element.
* Link to my codepen account: http://codepen.io/danalvarez5280/pen/OmbzZY

Chapters 3 and 4

  1. There are three main types of lists in HTML: ordered, unordered and definition. What are their differences?
  1. Ordered lists are lists where each item in the list is numbered.
  2. Ordered list use numbers
  3. Example: Recipe, step by step instructions, or legal contract.
  • Unordered lists are lists that begin with a bullet point.
  • Unordered lists use bullets
  • Rather than characters that might indicate order.
Definition Lists
Definition lists are made up of a set of terms along with definitions for each of those terms.
  • Also
  • Nested Lists
    • Nested lists are just lists inside lists.
    • Like a sub list.
  1. What is the basic structure of an element used to link another website?

The basic structre of an element used to link to another website is as follows:

Awesome Things

*This must maintain the full website which is known as an absolute URL.
  1. What attribute should you include in a link to open a new tab when the link is clicked?

To open a link in a new tab or window you should include target = _blank as the attribute value. Example: The Awesomer

  1. How do you link to a specific part of the same page?
  • To link to the to a specific part of the same page you want to identify the points that the link will go to.
  • you can give h elements id attributes that identify those sections.
  • The value of the id sttribute should start with a letter or a underscore, and on a single page no two id attributes should have the same value.
  • Example:

Dan is Great

Dan
is
Great

Dan

Dan is my name. It is short for Daniel. My nephew was named after me. I was named after the karate kid. My brother named me and his son Daniel. So really he has just been naming babies Daniel since he saw the movie back in 1986.

is

Is, pronounced /iz/ is the third person singular present of be. Example: Olivia Munn is now single since she and Aaron Rodgers broke up. Another Example: Dan is Great.

Great

Great as an adjective means of an extent, amount, or intensity considerably above the normal or average. Example: the article was of great interest.

Great as a noun means a great or distinguished person. Example: David Bowie, Prince, Queen, all the greats.

Great as an adverb means excellently;very well. Example: Dan is great.

Back to Dan

Chapters 10, 11, 12

  1. What is the purpose of CSS?
  • The purpose of CSS is to create rules that control the way each individual box, and it's contents, is presented.
  • CSS breaks up around every HTML element. CSS creates rules for these boxes to tell them how to present the information in that box.
  1. What does CSS stand for? What does cascading mean in this case?
  • CSS stands for Cascading Style Sheets.
  • Cascading means that styles can fall from one style sheet to another on the sam HTML page.
  1. What is the basic structure of a CSS rule?
  • The basic structure of a style sheet consists of two parts. A selector and a declaration.
  • Selectors indicate which element the rule applies to.
  • Declarations indicate how the element reffered to in the selector should be styled.
  • Declarations consist of two parts: a property and a value.
  • Properties indicate the aspects of the element you want to change. I.e. color, font, width, height, and border.
  • Values specify the settings you want to use for the chosen properties. I.e. what color, which font, how wide, how high, what kind of border.
  1. How do you link a CSS stylesheet to your HTML document?
  • You link a CSS style sheet to your HTML document by using href, type and rel.
  • href specifies the path to the CSS file.
  • type specifies the type of document being liked to.
  • rel specifies the realtionship between the HTML page and the file it is linked to.
  1. What(When?) is it useful to use external stylesheets as opposed to using interal CSS?
  • It is usefeul to use an external stylesheet when building a site with more than one page.
  • This allows all pages to use the same style rules, rather than repeating them on every page.
  • It keeps the content seperate from how the page looks.
  • It also means you can change the styles used across all pages by altering just one file, rather than each individual page.
  1. Describe what color hex code is?
  • Hex codes represent vales for red,green and blue in hexadecimal code.
  • Example: the color named MediumAquaMarine consists of the RGB values of 102 red, 205 green, 170 blue.
  • The red 102 is expressed as 66.
  • The green 205 is expressed as cd.
  • The blue 170 is expressed as aa
  • Therefor the hexidecimal code for the color is 66cdaa
  1. What are the three parts of an HSL color property?
  • The three parts are hue, saturation and lightness.
  • Hue is the colloquial idea of color. Often represented as a color circle where the angle represents the color, although may be shown on a slider with values from 0 to 360.
  • Saturation is the amount of gray in a color. Saturation is represented as a percentage. 100% is full saturation, noe gray, and 0% is a shade of gray.
  • Lightness is the amount of white (lighteness) or black (darkness) in a color. Lightness is represented as a percentage. 0% lightness is black, 100% lightness is white, and 50% lightness is normal. Lightness is sometimes referred to as luminosity.
  1. In the word of typeface, what are the three main categories of fonts? What are the differences between them?

The three main categories of font are:

Serif
Serif fonts have extra details on the ends of the main strokes of the letters. These details are known as serifs.
Sans-serif
Sans-serif fonts have straight ends to letters, and therefore have a much cleaner design.
Monospace
Every letter in a monospace (or fixed-width) font is the same width. Non-monospace fonts have different widths.
  1. When specifying font-size, what are the main three units used?

The main three units used are:

Pixels
A pixel roughly equates to 1/72 of an inch as most computer displays have a resolution of 72 dots per inch. Example: font sizes in word have a pt to represent the point size of the font. This is the same with pixel size.
Percentages
The default size of a text in a web browser is 16 pixels. Using percentages of this amount(100% = 16px, 150% = 24px), you can create a scale where the default size is 12 pixels, and the headings are sized in realthion to this.
Ems
Ems allow you to change the size of text relative to the size of the text in the parent element. Since the default size of the text in web browsers is 16 pixels, you can use similar rules to that of percentages.(1em = 16px, 1.5em = 24px, 2em = 32px)

Chapter 7

  1. If you are using an input element in a form, what attribute controls the behavior of that input?
    1. The type, name and maxlength control the behavior of the input element.
    2. Type: describes the style of the input element. Example: type="text" is when the type attribute has a value of text, it creates a single line text input. Other types are password, radio, checkbox, and select
    3. Name: When users enter information into a form, the server needs to know which form control each piece of data was entered into.
    4. Maxlength: the maxlength attribute can be used to limit the number of characters a user may enter into the text field.
  2. What Element is used to create a dropdown list?
    1. The select box allows isers to select one option form a drop down list.
  3. If you're using an input element to send form data to a server, what should the type attibute be set to?
    1. The type attribute should be set to "submit", the submit button is used to send a form to the server.
  4. What element is used to group similar form items together?
    1. The "fieldset" element can group related form controls together. This is particularly helpful for longer forms.

Chapters 13 and 15

1. Describe the differences between border, margin and padding.
  • Borders: Every box has a border, even if it is not visible or is specified to be 0 pixels wide. The border seperates the edge of one box from another.
  • Margins: Margins sit outside the edge of the border. You can set the width of a margin to create a gap between the borders of two adjent boxes.
  • Padding: Padding is the space between the border of a box and any content contained within it. Adding padding can increase the readability of its contents.
  1. For a CSS rule padding: 1px 2px 5px 10px, what sides of the content box does each pixel value correspond to?
  • 1px corresponds to the width of the top of the context box.
  • 2px corresponds to the width of the right side of the content box.
  • 5px corresponds to the width of the bottom of the content box.
  • 10px corresponds to the width of the left side of the content box.
  1. Describe the difference between block-level and inline elements.
  • Box-level elements start on a new line and act as the main building blocks of any layout. Examples: "h" "p" "ul" "li"
  • In-line elements flow between surrounding text. Examples "img" "b" "i"
  1. What is the role of fixed positioning, and why is z-index important in the scenario of using fixed positioning?
  • Fixed positioning is a form of absolute positioning that positions the element in relation to the browser window, as opposed to the containing element.
  • Elements with fixed positioning do not affect the position of surrounding elements and they do not move when the user scrolls up or down the page.
  • Example: Think of a pop up add that stays in the middle of your screen as you try and scroll down away from it.
  • When you move any element from normal flow, boxes can overlap. The z-index property allows you to control which box appears on top.

Chapter 5

  1. In an image element, why is the alt attribute important?
    • The alt attribute provides a text description of the image which describes the image if you cannot see it.
  2. What determines if an element is inline or block?
    • A block elements always appear on a new line. Inline elements sit within a block level element and do not start on a new line.
  3. What are the benefits of jpg or png image file formats?
    • The benefits of using a jpeg is to best display images with many different colors. Example: photgraph, 3D images
    • The benefits of using a png is for flat colors, images that are mostly one or two colors. Example: 2D images, graphs, logos, street signs.

Chapter 16

  1. What is the benefit of speciftying width and height of images in CSS compared to specifying them in HTML?
    • Rather than using width and height attributes in HTML, you can use names as values for the class attribute.
    • In CSS, you can add selectors for each of the class names, then use the CSS width and height properties to control the image dimensions.
  2. What is an image sprite and why is it useful?
    • When a single image is used for several different parts of an interface, it is known as a sprite.
    • The advantage of using sprites is that the web browser on needs to request one image rather than many web images, which can make a page load faster.

Chapters 1 and 2 Elequent JavaScript

  1. There are three big data types in JavaScript: numbers, strings and booleans. Describe what each of them are.
    • Numbers are numerical values. Used for represetning numerical values or arithmatic. Special numbers include infinity, -infinity, and NaN(not a number). These special numbers represent numbers or numerical values but they themselves are not numbers.
    • Strings are used to represent text. They are written by enclosing their content in quotes. Both single and double quots can be used to mark strings as long as the start quote and end quote match. Strings have to stay on a single line.
    • Boolean distinguishes between two possibilities, like "yes" and "no" or "on" and "off". Boolean only has two values; ture and false, and they are written simply as that.
  2. What are three logical operations that JavaScript supports?
      • Logical operators are operators that can be applied to Boolean data types. The three that JavaScript supports are "and", "or", and "not".
    • And represented by "&&" it is a binary operator. It only produces true if both values are true.
    • Or represented by "||" it produces true if either value given are ture.
    • Not represented by "!" it flips the value given to it. Example "!true=false" and "!flase=true"
  3. What is the naming convention used for variables?
    • The naming convention is "var". Example of assign a name to a value: var ten = 10; console.log(ten * ten); //-> 100
    • var is an example of a keyword
  4. What is the difference between a expression and a statement?
    • Expression: A fragment of code that produces a value. Every value written literally is an experssion
    • A JavaScript statement corresponds to a full human sentence, where an expression corresponds to a fragment of a sentence. A program is simply a list of staements.
  5. What are a few JavaScript reserved words, and why are they important to avoid using them for variable names?
    • All the JavaScript resevre words are: break case catch class sonst continue debugger default delete do else enum export extends false finally for function if implements import in instanceof interface let new null package private protected public return static super switch this throw true try typeof var void while with yield
    • These words like keyword are not allowed for naming variables. This will cause computation issues with whatever program you design.
  6. What is control flow and why is it useful for programing?
    • Control flow is the order that more than one statements are executed. From top to bottom
    • It is useful for knowing where and how to place loops and where to end functions.

Chapter 3 Eloquent JavaScript

  1. If we have a function defined as "function sayHello(){console.log("Hello!")}", what is the difference between entering "sayHello" and "sayHello()" in the console?
    • I actually am not entirely sure the difference. I know that the "()" represent the values that will be entered into the "sayHello function. But I din't read anything specificly that tells me what the difference is between one and the other.
  2. What is they keyword "return" used for?
    • The Keyword return is used to tell then console to return a result or variable. In the case of
      countChar(string, ch){
      var counted = 0;
      for (var i= 0; i "greater than" string.length; i++)
      if (string.charAt(i) == ch)
      counted +=1;
      return counted; } console.log(countChar("antidisestablishmentarianism", "i")); //-> 5
    • 5 is returned because 5 is the value of "counted" and we asked for the program to "return counted;"
  3. What are function parameters?
    • The parameters of a function behave like regular variables, but their initial values are given by the caller of the function, not the code in the function itself. Parameters are local to the function.
  4. What is the naming conventionused for function names?
    • The nameing convention is normally a simple abbrieaviton of what the function will do. Example: I need a function that will count the letter i in mississippi. The function's name for the sake of simple re-readability is calling it something like "countI"
    • The function will count "I"'s in words. There are no spaces between the words, usually the first letter of the first word, remains lowercase. Th first letter of each corresponding word will ususally be capitalized so it is easier to read the summary of the function.

UX Posts

  1. What is UX?
    • UX is the doing of User Experience Design, the goal of a UX designer is to make Users effective.
  2. What are user goals and business goals?
    • Users always want something, because they are people, and people always want something.
    • Every organization has a reason for creating a site or app in the first place. Typically it’s money, but it might be brand awareness, or getting new members for a community, etc.
  3. What are the 5 main ingedients of UX?
    • Psycology: UXers work with subjective thoughts and feelings a lot; they can make or break your results. And the designer must ignore their own psychology sometimes too, and that’s hard!
      • How much work does the user have to do to get what they want? I feel like this resonates especially in todays world since most Americans must have what they want now, and companies are popping up to make things easier for Americans everyday. Post Mates makes it so you only have to walk to your door to get literally anything you want from any near by store. As a result other companies, like Uber are responding to this by allowing their drivers to pick up things from nearby stores for users as well.
    • Usability: If user psychology is mostly subconscious, usability is mostly conscious. You know when something is confusing. There are cases where it is more fun if something is hard — like a game — but for everything else, we want it to be so easy that even a non tech savvy individual could use it.
      • Have you provided everything the user needs to know. The search engine of Google has far surpassed all its competitorsdue to the fact that it's very easy to type anything you want into the search bar and you will likely get a result you are looking for. Where as Yahoo sucks at finding you the thing you want. Which is why so many people use Google witout thinking why, where people are using Yahoo less and less.
    • Design: As the UX designer, your definition of “design” will be much less artistic than a lot of designers. Whether you “like it” is irrelevant. In UX, design is how it works, and it’s something you can prove; it’s not a matter of style
      • Do they trust it immediately? I like this as an example of Apple Maps vs Google Maps. Google made an app that will tell a driver, routes, traffic conditions and most importantly, it will be correct. Where Apple Maps seems tobe much less preoccupied with giving the driver correct information as much as it wants an app that will work with its phones and internet browser.
    • Copy Writing: There is a huge difference between writing brand copy (text) and writing UX copy. Brand copy supports the image of the company. UX copy gets shit done as directly and simply as possible.
      • Is it clear, direct, simple and functional? This has to go to Amazon. No comapny has made it easier to click and purchase something than Amazon. Even using the Google shopping tab will not give us as comprehensive and simple interface to purchase things through.
    • Analysis: Analysis is the main thing that separates UX from other types of design, and it makes you extremely valuable. It literally pays to be good at it.
      • How will you measure this? Are you measuring the right things? Breitbart news actually does a good job at doing a bad job. They understand, through looking at data, which article titles resonate with thier site users. They have writers who write articles that users must click on, click bait. Even if the substance of the article is rubbish they still get the users involved by understanding what type of articles the user wants or must read.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment