Skip to content

Instantly share code, notes, and snippets.

@jenPlusPlus

jenPlusPlus/JenniferWoodson_Prework.md

Last active June 22, 2017 22:04
Show Gist options
  • Save jenPlusPlus/509f42e959601de2bc15223f8bd2d986 to your computer and use it in GitHub Desktop.
Save jenPlusPlus/509f42e959601de2bc15223f8bd2d986 to your computer and use it in GitHub Desktop.
Download ZIP
A place to keep up with Turing School prework progress
Raw
JenniferWoodson_Prework.md

Prework progress

Day 1

  1. HTML is used to give web pages a structure, or layout, and to add extra meaning to the words on a webpage.
  2. A tag is an instruction given to content on a webpage, enclosed in angle brackets (<>). The opening and closing tags let websites know where to begin and end each instruction. Each element is usually made up of an opening tag, the content, and the closing tag.
  3. Attributes are used to give further meaning to the content of a webpage, such as color and font.
  4. The head contains information about the webpage. The title contains the title of the page, shown in the browswer bar title or tab. The body contains information shown in the browswer window.
  5. To view a page's source in Chrome, right-click the webpage, and choose View page source.
  6. <title></title> is a title element, and it represents the title of the webpage. <b></b> is a bold element, and it bolds the text between the tags. <i></i> is an italics element, and it italicizes the text between the tags. <br /> is a breakline element, and it enters a line break in the text. <hr /> is a horizontal rule element, and it adds a horizontal line to the webpage.
  7. Empty elements do not have content or a closing bracket. For example, <br /> is used by itself to add a breakline.
  8. Semantic markup does not affect the structure of a webpage, but adds additional information.
  9. Three semantic elements introduced in HTML5 include <header></header>, <footer></footer>, and <nav></nav>.

My Pen: https://codepen.io/jenwoodson/pen/eWLVem

Day 2

Ch. 3-4

  1. The three types of lists include ordered lists, unordered lists, and definition lists. Ordered lists use numbers, such as in numbered instructions in a recipe. Unordered lists do not use numbers, but use bullet points. An example may be ingredients for a recipe. Definition lists use pairs of terms and definitions. An example may be definitions of techniques used in a recipe.
  2. The basic structure of an element used to link to another website is <a href="http://www.linktowebsite.com">link text</a>.
  3. You should use the target attribute with the value set to "_blank" to open a link in a new window.
  4. You link to a specific part of a page by giving the part of the page an id attribute with a value. You then use #value in the URL to link back to that id.

Ch. 10-12

  1. The purpose of CSS is to change the way elements of a webpage appear.
  2. CSS stands for cascading style sheet. In this case, cascading refers to applying general rules to elements and then using more specific rules to override the general rules where necessary. Rules are also applied in order, meaning that when multiple rules apply to an element, the last listed rule is applied, unless a rule using a more specific selector for that element exists.
  3. The basic structure of a CSS rule is selector { property: value;}
  4. To link a CSS stylesheet to an HTML document, a path to the CSS file is used with the <link /> element inside the <head></head> element. The attributes href, type, and rel are used with the <link /> element.
  5. External stylesheets are useful over CSS in the HTML because it makes for easier maintenance for multiple-page websites. All the pages can share the same CSS file. Styles only need to be changed in one CSS file, rather than in multiple HTML files. Additionally, code does not have to be repeated in HTML files, creating smaller, easier-to-read files. It is also good coding practice to separate the page's content from the page's styling rules.
  6. A color hex code is a six-digit code preceded by a # to define a color in terms of amounts of red, blue, and green. The first two characters after the # define the amount of red in the color, the next two characters define the amount of green in a color, and the last two characters define the amount of blue in the color.
  7. An HSL color property is made up of hue (or color), in the range of 0-360, saturation (or amount of grey), in the range of 0%-100%, and lightness (or the amount of white or black), in the range of 0%-100%.
  8. The three main categories of fonts are serif, sans-serif, and monospace. Serif fonts have extra detail on the ends of the main strokes of letters, sans-serif fonts have straight, clean ends to the letters, and monospace fonts are ones in which all the characters in the font have the same width.
  9. The three main units used to specify font size include pixels, percentages, and ems.

Day 3

Ch. 7

  1. When using an input element in a form, the type attribute controls the behavior of the input.
  2. A dropdown list is created using the <select></select> element.
  3. To send form data to a server, they type should be set to text.
  4. The <fieldset></fieldset> element should be used to group similar form items together.

Ch. 13 & 15

  1. The border is the "box" around an HTML element. Margins are spaces between borders that separate the elements. Padding is the space between the border and the content within the element.
  2. 1px: top, 2px: right, 5px :bottom, 10px: left.
  3. Block-level elements always start on a new line. In-line elements are within block-level elements and do not start on a new line; they flow in between surrounding text.
  4. Fixed positioning is used to place elements in relation to the browser window. Elements using fixed positioning do not affect the placement of other elements. Additionally, elements using fixed positioning do not move when the user scrolls. The z-index propertyis important because it determines in which order elements will appear (bottom to top), as fixed-positioned elements can overlap.
  5. Fixed width layouts do not change size as the size of the user's browser window changes. Liquid layouts feature elements that expand and contract as the user's browser window changes size.

Day 4

Ch. 5

  1. The image alt attribute is important for several reasons. It gives a description of the image if it is not able to be displayed. The alt text is also used by screenreaders for the vision impaired and by search engines.
  2. The position of the <img> element in the code determines whether the image is a block-level or inline element. If the element after the <img> element is a block-level element, then the image will also be a block-level element. If the <img> element is inside a block-level element, it will be an inline element.
  3. The JPG file format is good for images containing many different colors, or those containing subtly changing color. The PNG file format is good for images containing few colors or large areas of the same color. Images with flat color are best suited for the PNG format.

Ch. 16

  1. One benefit of specifying image size in CSS rather than HTML is keeping rules that affect the display of the page separate from the HTML markup. Additionally, using classes helps in making future changes to the code. Instead of hunting down each <img> element in the HTML to change the image size, the classes can simply be changed in the CSS. This will likely result in less code having to be updated when image sizes need to change.
  2. An image sprite is a single image that is used on several places on an interface. Sprites are useful because a website only needs to load one image, instead of multiple images. This results in faster load times for the page.

Day 5

  1. Number type values are numeric values, which may be whole or decimal numbers. String type values are text and exist between quotation marks. Boolean type values evaluate to either a value of true or false.
  2. The three logical operators that JavaScript supports are and (&&), or (||), and not (!).
  3. Variable names must not contain spaces and support alphanumeric characters, as well as $ and _. The variable name cannot begin with a number. There are several ways to make multi-word variable names easier to read. Most often, the variable begins with a lower-case letter, and each new word is capitalized, such as thisIsAMultiWordVariableName.
  4. An expression is a piece of code that produces a value. A statement is a standalone piece of code that produces a behavior or side effect. The shortest example of a statement is an expression followed by a semi-colon. You can think of an expression as a sentence fragment and a statement as a complete sentence.
  5. A few JavaScript reserved words include var, typeof, do, else, and this. Such words cannot be used as variable names because they have special meaning. Using these words as variable names can result in unexpected variable values.
  6. Control flow is the order in which statements are executed in a program. Control flow is useful for code to produce different results based on different input or to control how long a block should execute.

Tasks

  • I expect to see "Hello, Turing!"
  • I expect to see 9
  • 5<3
  • Type coercion is why one is false and one is true. When using ==, JS will change types of a variable, if needed. When using ===, the actual types of the variables are used.
  • Yes, "Hey!" will be logged to the console.
  • if(5>7){ console.log("true!"); } else { console.log("false!"); }
  • Fortune Teller var children=0; var job="developer"; var loc="Denver"; var partner ="Dan"; console.log("You will be a "+job+" in " +loc+ ", and married to "+partner+" with "+children+ " kids.");
  • Age Calculator var thisYear = 2017; var birthYear = 1983; var pastDay = thisYear-birthYear; var beforeDay = pastDay-1; console.log("You are either "+beforeDay+" or "+pastDay+".");
  • Lifetime Supply var currAge=33; var limit=85; var dailyAmount=5; var numYears=limit-currAge; var total=numYears*365*dailyAmount; console.log("You will need "+total+" to last you until the ripe old age of "+limit+".");

Ch. 2 Exercises

Looping a Triangle

var hash = "#"; for (var length = 1; length < 8; length=length+1){ console.log(hash); hash = hash + "#"; }

FizzBuzz

for (var num=1; num<101; num=num+1){ if(num%5==0 && num%3==0){ console.log(fizzbuzz); } else if(num%5==0 && num%3!=0){ console.log(buzz); } else if(num%3==0){ console.log(fizz); } else{ console.log(num); } }

Chess Board

var board=""; var size = 4; for (row=0; row<size;row=row+1){ for(col=0;col<size;col=col+1){ if((row+col)%2==0){ board=board+"O"; } else{ board=board+"#"; } } board=board+"\n"; } console.log(board);

Day 6

  1. Entering SayHello() will actually call the function and cause it to execute. Entering SayHello will do nothing. The parentheses are needed to indicate that the name refers to the function.
  2. The keyword return is used to stop the execution of a function and give a value back the code that called the function.
  3. Function parameters are the variables passed to a function and used in the execution of the function. The caller of the function gives the value for the parameter.
  4. Functions should be named according to the task they complete in the code. Functions are named much like variables.

  • Fortune Teller function tellFortune(numChild, jobTitle, located, spouse){ console.log("You will be a "+jobTitle+" in " +located+ ", and married to "+spouse+" with "+numChild+ " kids."); } tellFortune(0,"developer","denver","dan"); tellFortune(2,"salesperson","atlanta","mary"); tellFortune(3,"writer","nashville","allison");

  • Age Calculator function calculateAge(birthYear, currYear){ var ageAfter = currYear-birthYear; var ageBefore = ageAfter-1; console.log("You are either "+ ageBefore+" or "+ageAfter+"."); } calculateAge(1983,2017); calculateAge(1956,2020); calculateAge(1932,2000);

OR function calculateAge(birthYear){ var date = new Date; var currYear = date.getFullYear(); var ageAfter = currYear-birthYear; var ageBefore = ageAfter-1; console.log("You are either "+ ageBefore+" or "+ageAfter+"."); } calculateAge(1983); calculateAge(1956); calculateAge(1932);

  • Lifetime Supply function calculateSupply(age, dailyAmount){ var maxAge=92; var years = maxAge-age; var total = (dailyAmount*365)*years; console.log("You will need "+total+" to last you until the ripe old age of "+maxAge+"."); } calculateSupply(33,5); calculateSupply(15, 2); calculateSupply(50, 10);

OR

function calculateSupply(age, dailyAmount){ var maxAge=92; var years = maxAge-age; var total = (dailyAmount*365)*years; var rndTotal = Math.round(total); console.log("You will need "+rndTotal+" to last you until the ripe old age of "+maxAge+"."); } calculateSupply(33,1.5); calculateSupply(15,2.75); calculateSupply(50, 10.002);

Ch. 3 Exercises

  • Minimum function getMin(x, y){ if(x>y) return y; else return x; }

  • Recursion function isEven(x){ if(x<0){ x=-x; } if(x==0){ return true; } else if(x==1){ return false; } else { return isEven(x-2); } } isEven(-1);

  • Bean Counter function countBs(word){ var numBs=0 for(var count =0;count<word.length;count=count+1){ if (word.charAt(count)==="B"){ numBs++; } } console.log(numBs); } countBs("BumbleBee");

function countChar(word, findChar){ var numChars=0 for(var count =0;count<word.length;count=count+1){ if (word.charAt(count)===findChar){ numChars++; } } console.log(numChars); } countChar("Jennifer Jones","J");

  • W3 exercises

  1. function getDayTime(){ var newDate = new Date(); var today = newDate.getDay(); var todayDay = getDayofWeek(today); var hrs = getCurrTime(); var AMPM = getAMPM(); var min = newDate.getMinutes(); var sec = newDate.getSeconds(); console.log("Today is : "+todayDay+"."); console.log("Current time is : "+hrs+" " +AMPM +" : "+ min+ " : "+sec); } function getDayofWeek(x){ var day ="" switch(x){ case 0: day = "Sunday"; break; case 1: day = "Monday"; break; case 2: day = "Tuesday"; break; case 3: day = "Wednesday"; break; case 4: day = "Thursday"; break; case 5: day = "Friday"; break; case 6: day = "Saturday"; break; } return day; } function getAMPM(){ var newDate = new Date(); var hours = newDate.getHours(); var ampm = ""; if(hours<12){ ampm = "AM" } else{ ampm = "PM" hours = hours-12; } return ampm; } function getCurrTime(){ var newDate = new Date(); var hours = newDate.getHours(); var ampm = ""; if(hours>12){ hours = hours-12; } return hours; } getDayTime();

  2. function printCurrPage(){ window.print(); } printCurrPage();

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