Skip to content

Instantly share code, notes, and snippets.

@eoneill23

eoneill23/EricONeill-mod-0-capstone.md

Last active April 25, 2019 23:34
Show Gist options
  • Save eoneill23/7f4b6081d20b20238b87f56a6221f488 to your computer and use it in GitHub Desktop.
Save eoneill23/7f4b6081d20b20238b87f56a6221f488 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
EricONeill-mod-0-capstone.md

Day 1

  1. On a website, the purpose of HTML code is to structure the website by utilizing tags and elements.

  2. An element directs the browser how to structure the page by utilizing an opening <> and closing </> tag with content in between the tags. Tags generally use an opening tag <> and a closing tag </>, and the characters within the angle brackets indicate the tag's purpose. For example <p> is an opening paragraph tag.

  3. Attributes provide additional information to HTML tags. An attribute appears in the opening tag of an element and is comprised of a name and a value, which are separated by an =. An example of an HTML attribute is <a href="www.google.com">Link to Google</a>. "href" is the name and "www.google.com" is the value.

  4. In HTML, the head element contains information about the page and it isn't displayed to the user. You will usually find the head element before the body element on a page. The title element is used in HTML to display content in the top of the page or within a browser's tab. The body element is used to display content on the browser page. Any content within the body element will be displayed on the browser window.

  5. You can view the page source in Chrome by right-clicking and scrolling down to "View Page Source" in the drop down menu.

  6. <p></p> is a paragraph element and displays content within it in paragraph form. <a></a> is a link element and is used to insert hyperlinks. <b></b> is a bold element and bolds the text of any content within it. <h1></h1> is a header 1 element, and is the larges header on the page. <html></html> is an element used to define the entire page as a page utilizing HTML.

  7. HTML elements with no closing tags are referred to as "empty elements." Examples of empty elements include <img>, <meta>, and <br>.

  8. Semantic markup is a method of adding additional information to a webpage with altering its structure. Using elements such as <em> <blockquote> can help programs like screenreaders to emphasize certain words or phrases or to recognize when content should be read as a quotation.

  9. Three new semantic elements introduced in HTML5 are <article>, <aside>, and <footer>.

  10. https://codepen.io/Eoneill23/pen/WWroVo

  11. Gear Up gist: https://gist.github.com/eoneill23/88a3cd33d8bd660680b8cfec5bbcf3bc

Day 2

  1. An ordered list is a list that utilizes numbers, an unordered list is a list that utilizes bullet points, and a definition list is a list that utilizes a set of terms and their corresponding definitions.

  2. The basic structure of a link element is <a href="link">Text that will be hyperlinked</a>.

  3. To open a link in a new tab, use target="_blank". after the closing " for the destination URL.

  4. In order to link to a different part of the same page, you must first add .index files to your HTML page directories. From there, you can utilize relative URLs to navigate to different sections of the same page.

  5. The purpose of CSS is to add style to the HTML. HTML can be thought of as the framework of a website, and CSS can be thought of as the drywall, paint, fixtures, etc. that add color, style, fonts, etc. to the HTML to make it look and function better.

  6. CSS stands for Cascading Style Sheet. Cascading means that the styling you specify can fall from one sheet to another, allowing for multiple style sheets to be used for one HTML document.

  7. The basic structure of a CSS rule is

selector {
declaration;}

  1. To link a CSS stylesheet to your HTML document, in the HTML <head> element, add <link href="link to stylesheet" type="text/css" rel="stylesheet>

  2. It is useful to use an external stylesheet(s) when the page you are building contains more than one page. An internal stylesheet is typically only used on sites that contain only one page.

  3. Hex codes are six-digit codes that specify the amount of red, green, and blue are in a color.

  4. The three components of an HSL color property are hue (H), saturation (S), and lightness (L).

  5. The three main categories of fonts are serif, sans-serif, and monospace.

  • Serif fonts were traditionally used for passages with lots of text because they were considered easier to read. Letters in serif fonts contain extra tags at the ends of main letters, called "serifs."
  • Sans-serif fonts are preferred on screens because screens have a lower resolution than print and the serifs on serif fonts can make them harder to read on screens.
  • Monospace fonts are fonts where every letter has the same width. These fonts are preferred in coding because they align and make the text easier to follow.
  1. When specifying font sizes, the main three units that are used are pixels, percentages, and ems. Using pixels allows developers to control precisely the number of pixels each letter will take up. Using percentages (of the standard browser text sixe of 16pt) allows fonts to appear the same size relative to the display size no matter where the text is displayed. EMS is the equivalent to the width of the letter "m."

Day 3

  1. The attribute that controls the type of form input is the input type="type of input" attribute.

  2. The <select> element is used to create a dropdown menu.

  3. When sending input data to a server, the type attribute should be set to "submit".

  4. The <fieldset> element is used to group related form controls together.

  5. Border -- whether it is visible or invisible -- is what separates one "box" from another. Margin is the space outside of a border that controls how close the gaps between two adjacent boxes are. Padding is the space inside of a box's border and the content contained within the box.

  6. 1px= top, 2px= right, 5px= bottom, 10px= left.

  7. An inline element is an element that exists on the same line as other inline elements. Each new block element exists on its own line.

  8. Fixed positioning is a form of absolute positioning where the element is positioned relative to the browser window, rather than its containing element. When elements are moved from normal flow, they can overlap, and the z-index controls which box appears on top of the other.

  9. Fixed layouts are layouts whose sizes do not change, regardless of the size of the browser window they are being viewed on. Measurements for fized layouts tend to be given in pixels. Liquid layouts, on the other hand, do stretch and shrink depending on the size of the browser windown they are being viewed on. Measurements of liquid layots tend to be given in percentages.

  10. PD prework gist: https://gist.github.com/eoneill23/770551dfb165cc4cae2c1055ab5465b0

Day 4

  1. An alt attribute within an img provides alt text for the image which can be displayed if the viewer is unable to view the image.

  2. If an image is placed within a block level element, it becomes an inline element and any text or other inline elements will wrap around the image. If the image is not placed within another block element, it becomes a block element and exists on its own line.

  3. The jpg image file format is best utilized for images that contain many different colors. The png image file format is best used for images that don't use many colors or for images that have large areas of the same color.

  4. The main benefit of styling image sizes in CSS rather than HTML is that it allows the rest of the page to render without needing to wait for the image to download because HTML and CSS typically load faster than the images.

  5. Image sprites are when multiple images are combined into one image file, reducing the time to download the images, making it more memory and bandwidth-friendly.

Day 5

  1. You declare a variable by giving it a name or identity. For example: var quantity:. In JavaScript, the equals sign is known as an assignment operator and assigns a value to a variable.

  2. Number data is data that contains numbers, i.e. 5. String data is data that is comprised of letters and other characters, and are frequently used to add new content to a page, including HTML markup. Boolean data is data that can have one of two values: true or false.

  3. The six rules for naming variables in JavaScript are:

    1. The variable name must start with a letter, $, or underscore. It cannot start with a number.
    2. The variable name can contain numbers, $, or an underscore. Dashes and periods cannot be used in names
    3. You cannot use keywords or reserved words that tell the interpreter to do something. For example, var is a keyword used to declare a variable, and therefore cannot be used in naming a variable.
    4. Variables are case sensitive, and it is bad practice to create multiple variables with the same name with different cases.
    5. Use a variable name that descrtibes what information the variable stores. For example middleName would contain a person's middle name.
    6. If a variable contains multiple words, use Camel case to name them. This means leave the first letter of the first word lowercase, and capitalize the first letter of each consecutive word. For example: middleName

  4. Arrays are helpful when dealing with multiple related values because it is easier than creating a bunch of variables for a long list and you don't have to know how many values an array will hold. You can access/change a value in an array by specifying the array name, the index number of the value you would like to change, and assigning it a new value.

  5. Roughly speaking, an expression produces a value and a statement performs an action.

  6. Three types of operators in JavaScript are assignment operators, arithmetic operators, and comparison operators. Assignment operators assign a value to a variable. Arithmetic operators perform basic math. Comparison operators compare two values and return either true or false.

Day 6

  1. In order to run a function, parentheses are needed after the function name. If there are no parentheses after the function name, the function won't run.

  2. A parameter is the variable that exists in the declaration of a function, and an argument is the actual value of the variable that the function utilizes.

  3. The keyword return stops the function and returns the value calculated by the function.

  4. When a variable is created inside a function, it is called a local variable. Local variables can only be used within that function. Global variables are variables created outside of a function and can be used anywhere in a script. If you are using a variable that is repeated often throughout your script, you may want to consider scoping it globally rather than locally.

Day 7

  1. How does this make them feel? Psychology good: https://my.charitywater.org/donate/home Psychology bad:https://www.uat.edu/
  2. Is it easy to find? Usability good: https://www.amazon.com/ Usability bad: http://arngren.net/
  3. Do user think it looks good? Design good: https://www.airbnb.com/ Design bad:http://www.suzannecollinsbooks.com/
  4. Does it reduce anxiety? Copywriting good: https://www.hubspot.com/?_ga=2.1298225.1023706696.1556234943-74713956.1556234943 Copywriting bad: https://www.lingscars.com/
  5. How can you use this analysis to make improvements? Analysis good: https://www.kindsnacks.com/ Analysis bad:http://www.mednat.org/
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment