Skip to content

Instantly share code, notes, and snippets.

@KVeitch
Last active June 12, 2019 06:41
Show Gist options
  • Save KVeitch/45fdf4d171f23aab74377569d712f868 to your computer and use it in GitHub Desktop.
Save KVeitch/45fdf4d171f23aab74377569d712f868 to your computer and use it in GitHub Desktop.
KirkVeitch-mod-0-capstone

Kirk Veitch Mod-0 Capstone Day 1

Click to expand
  • Install Xcode
  • Install Chrome Canary
  • Install Sublime Text
  • Create CodePen Account
  • Complete reading and questions.

On a website, what is the purpose of HTML code?
HTML describes the structure of the website and makes content understandable to viewers.

What is the difference between an element and a tag?
HTML element is the collection of start tag, its attributes, an end tag. HTML tag either opening or closing is used to mark the start or end of an element.

Why do we use attributes in HTML elements?
Attributes provide additional information about the contents of an element.

Describe the purpose of the head, title, and body HTML elements.
The <head> element can contain other HTML tags that contain metadata. This metadata provides information about the document such as title, description, keywords etc. A typical HTML <head> element might contain a <title> tag, one or more <meta> tags, a <script> tag, and a <style> tag - all enclosed within the <head> element.

In your browser (Chrome), how do you view the source of a website?
Option - Command - I, for a split screen view
Option + Command + U, for a new tab view
Control + Click, select inspect

List five different HTML elements and what they are used for. For example, <p></p> is a paragraph element, and it is used to represent a paragraph of text.
The <body></body> element is the main area for your content. This is where most of your code and viewable elements go.
The <h1></h1> element define a level one heading. Making the text target and bold.
The <button></button> element creates a user intractable button within the document.
The <div></div> elements creates a generic section within an HTML document. It allows the grouping of HTML elements together for formatting with CSS
The <table></table> element is used with the <td></td> and <tr></tr> elements to create tables within HTML documents.

What are empty elements?
Empty elements are elements that would have no words between their opening and closing tags. These elements are written differently from others elements and have just one tag.

What is semantic markup?
Semantic markup is the use of elements in HTML that convey information about the meaning of the content of each element. These elements do not always affect the structure of the document.

What are three new semantic elements introduced in HTML 5?
<article> Defines an article in a document
<aside> Defines content aside from the page content
<bdi> Isolates a part of text that might be formatted in a different direction from other text outside it
<details> Defines additional details that the user can view or hide
<dialog> Defines a dialog box or window
<figcaption> Defines a caption for a <figure> element
<figure> Defines self-contained content
<footer> Defines a footer for a document or section
<header> Defines a header for a document or section
<main> Defines the main content of a document
<mark> Defines marked/highlighted text
<meter> Defines a scalar measurement within a known range (a gauge)
<nav> Defines navigation links
<progress> Represents the progress of a task
<rp> Defines what to show in browsers that do not support ruby annotations
<rt> Defines an explanation/pronunciation of characters (for East Asian typography)
<ruby> Defines a ruby annotation (for East Asian typography)
<section> Defines a section in a document
<summary> Defines a visible heading for a <details> element
<time> Defines a date/time
<wbr> Defines a possible line-break


CodePen

Kirk Veitch Mod-0 Capstone Day 2

Click to expand
  • Typing.io

There are three main types of lists in HTML: ordered, unordered, and definition. What are their differences?

Ordered lists are lists where each item in the list is numbered.

<ol>  
    <li>Item one goes here.</li>  
    <li>Item two</li>  
    <li>Item three</li>  
    <li>etc.</li>  
</ol>

The results would look like this:

  1. Item one goes here.
  2. Item two
  3. Item three
  4. etc.

Unordered lists are lists that begin with a bullet point.

<ul>
       <li>an item goes here</li>  
       <li>another item here</li>  
       <li>yet another item</li>  
       <li>etc.</li>
</ul>  

The results would look like this:

  • an item goes here
  • another item here
  • yet another item
  • etc.

Definition lists are made up of a set of terms along with the definitions for each of those terms.

<dl>
    <dt>First Term</dt>
    <dd>Definition of first term</dd>
    <dt>Second Term</dt>
    <dd>Definition of second term</dd>
    <dt>Third Term</dt>
    <dd>Definition of third term</dd>
    <dt>Fourth Term</dt>
    <dd>Definition of fourth term</dd>
</dl>

The results would look like this:

First Term
Definition of first term
Second Term
Definition of second term
Third Term
Definition of third term
Fourth Term
Definition of fourth term
  1. What is the basic structure of an element used to link to another website?
    The anchor element <a></a> with an href attribute is used to link to other webpages.
<a href="www.turing.io">Text for the link goes here, can also be and image</a>
  1. What attribute should you include in a link to open a new tab when the link is clicked?
    The attribute included should be target and the value should be _blank.
<a href="www.turing.io" target="_blank">Turing.io</a>
  1. How do you link to a specific part of the same page?
    Including an id atribute in a tag and then including a # and the id in the href attribute of the link will allow you to link to that location on a page.
    <h1 id="header_id">Big words here</h1>
    With a link:
    <a href="#header_id">This goes to the header</a>

With the page you created in CodePen on Day 1 (that included Structure and Text), add to it:
  • Two lists: ordered and unordered.
  • A link to your GitHub account.
  • A link to the Turing website.

When is it useful to use external stylesheets as opposed to using internal CSS?
If the style will be used on multiple pages then an external CSS should be used. It will prevent you from having to code the same thing multiple times and makes changes easier to complete and track.

Describe what a color hex code is.
A color hex code is a six-digit code in base 16 that is used to assign colors in many programming languages. The first two digits control the amount of red; the second pair of digits controls the amount of blue and the final pair control the amount of green. The six-digit code is preceded by a #. i.e. #123abc

What are the three parts of an HSL color property?
The three parts of HSL color are Hue, Saturation, and Lightness.

In the world of typeface, what are the three main categories of fonts? What are the differences between them?
The three main categories of fonts are serif, sans-serif and monospace. Serif fonts have extra details on the ends of main strokes, known as serifs. Sans-serif (without serif) fonts lack these details and have straight ends to letters. In a monospaced font all letters are the same width. Monospaced fonts can have and can lack serifs.

When specifying font-size, what are the main three units used?
The three font-size units are: pixels: This offers precise control over a font-size. percentage: This is written as 50% and results in a font size that is the given percent of a 16px font.
EMS: This is equivalent to the width of a letter m.


With the page you created in CodePen, add to it:
  • Add a color to the text of all of your headings (using hex codes).
  • For your h1 heading, add a background color.
  • Make your headings a serif font, and make the paragraph text a sans-serif font.
  • Change a snipet of paragraph text to be italic using the font-style property (do not use the in this case).

Kirk Veitch Mod-0 Capstone Day 3

Click to expand

Daily Warm Up

  • typing.io

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

What element is used to create a dropdown list?
The element is used to create dropdown lists.

<form>
    <select name="varName">
        <option value="choice1">choice1</option>
        <option value="choice2">choice2</option>
        <option value="choice3">choice3</option>
  </select>
</form

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

What element is used to group similar form items together?
The <fieldset></fieldset> elements should be used to group similar form items together.

<fieldset>
   <legend>Contact details</legend> <label>Email:<br />
        <input type="text" name="email" /></label><br /> <label>Mobile:<br />
        <input type="text" name="mobile" /></label><br /> <label>Telephone:<br />
        <input type="text" name="telephone" /></label>
</fieldset>

With the page you created in CodePen, add a form that could be used to submit your top three music artists. It should include:
  • Text boxes for each artist (three artists total).

  • Labels for each text box.

  • Dropdowns for the genre of each artist.

  • Submit button.


Describe the differences between border, margin, and padding.

  • Borders go around the edge of every box. The width, color, and style of a border can be changed.
  • Margins are the space/distance between the box edge and content outside the box.
  • Padding is the space/distance between the edge of the box and the content inside the box.

For a CSS rule padding: 1px 2px 5px 10px, what sides of the content box does each pixel value correspond to?
The values appear in clockwise order starting with the top: top=1px, right=2px, bottom=5px, left=10px.

Describe the difference between block-level and inline elements.
Block elements can contain another block level as well as inline elements. Block elements behind new lines.
Inline can contain data and other inline elements. Inline elements do not begin on new lines.
Block level elements create larger structures than inline elements.

What is the role of fixed positioning, and why is z-index important in the scenario of using fixed positioning?
Fixed positioning places elements in relation to the browser window. When a user scrolls a page the elements will stay in the same relative location in the browser window and will not scroll with the rest of the page.

Without a z-index overlapping boxes both appear with the elements that appear later in the code appearing on top. With a z-index you can control the order in which element appear when they overlap.

What is the difference between a fixed and liquid layout?
Fixed width layouts do not change size when the browser window size is increased or decreased. Liquid layouts do change size when a browser window is resized.


Continue working with the page you created in CodePen, add some styling with boxes and adjusting the layout. This should include:
  • Add a border and background color to your headings. Pay attention to the contrast between the text and background colors.

  • Divide your paragraph text into two vertical columns.

Professional Development

Kirk Veitch Mod-0 Capstone Day 4

Click to expand

Daily Warm Up

  • typing.io

In an image element, why is the alt attribute important?
The alt attribute is used to describe the image if you cannot see it. This can be used by the visually impaired and understand the image through the use of a screen reader.

What determines if an image element is inline or block?
This is dependent on where the image element is placed within the html structure. If the image elements is placed before a block element such as <p></p> or <hr> then the image will be treated as block. If the image element is inside a block element then the image element is treated as an inline element.

What are the benefits of jpg or png image file formats?
PNG is a lossless compression file format. It is a good choice for images that are line art, logos, or made of a few flat colors. JPG format is a lossy compressed file format. It is useful for storing photographs. The main benefit of the two types of image files are smaller file size.


What is the benefit of specifying the height and width of images in CSS compared to specifying in the HTML?
The image size can be applied to multiple images across multiple pages when it is specified in CSS. This would allow you to make one change and impact multiple images and pages. If you did thin in HTML you would need to make the change on each image on each page, which if you are an e-commerce site that could be millions of changes.

What is an image sprite, and why is it useful?
An image sprite is multiple images merged into a single image file for use on a website, to help with performance. Combining multiple images into a single file reduces file size, reduces the number of server requests, and save bandwidth.


Continue working with the page you created in CodePen, and add a couple relevant images to your paragraph text.
  • Read the Introduction and Chapter 1 from JavaScript & jQuery: Interactive Front-End Web Development

  • watch this short video about the Chrome Developer Tools. We'll be using the console to write some JavaScript code on Day 5 and Day 6.

Kirk Veitch Mod-0 Capstone Day 5

Click to expand

Daily Warm Up

  • typing.io

How do you declare a variable. What does the equals sign really mean in JavaScript? What is it called in JavaScript?
Declare a variable using the var keyword followed by the variable name then a semicolon. var variableName; Variables can be declared and assigned a value in the same line, var variableName = variableValue;

The equal sign is an assignment operator in JavaScript. It assigns a value to a variable. variableName = variableValue;

There are three big data types in JavaScript: numbers, strings, and booleans. Describe what each of them are.
Numeric data type consists of numbers they can be integers of decimal numbers.
String data type consists of text (letters, numbers and other characters). Although numbers can be included in a string the numbers would not be available for calculations with out operation performed on the string data type.
Boolean data type has two values, true and false.

What are the six rules for naming variables? What are a few JavaScript reserved words that you should avoid using for variable names?

  1. Variable names cannot start with a number. They can begin with a letter, dollar sign or underscore.
  2. Variable names cannot contain dashes or periods in their name. Letters, numbers, dollar signs, and underscores are acceptable.
  3. Variable names cannot be keywords or reserved words.
  4. Variable names are case sensitive.
  5. Use a name that describes what information the variable will contain.
  6. Use camel case when naming variables that have multi-word names.

Reserved words: abstract, else, instanceof, super, boolean, enum, int, switch, break, export, interface, synchronized, byte, extends, let, this, case, false, long, throw, catch, final, native, throws, char, finally, new, transient, class, float, null, true, const, for, package, try, continue, function, private, typeof, debugger, goto, protected, var, default, if, public, void, delete, implements, return, volatile, do, import, short, while, double, in, static, with

How can an array be useful when dealing with multiple related values? How do you access/change a value in an array?

An array is a variable that can store multiple values. This is useful when dealing with a list or multiple related values by storing them all under one variable even if you do not know how many items will be included.

Accessing a specific value in an array is done by using the index number of the value. Index numbers start with 0 and count up until the last value in an array.

In the array stored in reservedWords:

var reservedWords 
reservedWords = [‘abstract’,
			‘else’,
			‘super’,
			‘boolean’]; 

Abstract has an index of 0, else has an index of 1, super has an index of 2, and boolean has an index of 3. Accessing the super value could be done by assigning a variable itemTwo

var reservedWords 
var itemTwo 
reservedWords = [‘abstract’,
			‘else’,
			‘super’,
			‘boolean’]; 

itemTwo = reservedWords[2]

The value, super, would now be stored in the variable: itemTwo. Changing a value in an array is done by using variable name, the index of the array value, and the assignment operator. The code reserveWords[2] = “false” would replace the value of super with the value false.

What is the difference between an expression and a statement?
An expression produces a value and can be written wherever a value is expected. Expression have operators: assignment operators, arithmetic operators, string operators, comparison operators, and logical operators.

A statement performs an action. A program is a sequence of statements, forgoing declarations.

When JavaScript expects a statement, and expression can also be used. This is usually called and expression statement. A statement cannot be used where JavaScript expects an expression.

What are three types of operators and how are they used?
Three types of operators are: assignment operators, arithmetic operators, and string operators. There are two more operators: comparison operators and logical operators.

Operators create a single value from one ore more values.

The assignment operator places a value in a variable.
Arithmetic operators are used to perform basic math and store the new value in a variable.
String operators combine two or more strings together and store the new string in a variable.


  • Open up the Chrome Developer Tools, and open the Console tab.

For each task listed below, enter it in the console:

25
"this is my string" (notice the output's color difference between a number and a string)
var myNewString = "Hello Turing!";
myNewString Before you hit Enter, what do you expect to see in the console?

I expect the console to print "Hellow Turing!" with red letters and black quotes.

var myNum = 9;
myNum Before you hit Enter, what do you expect to see in the console?

I expect to see a blue 9.

var anotherString = "How are You?"
"Connect" + " " + "these" + " " + "strings." What happened? This is called string concatenation. Notice the strings with spaces.

myNewString + anotherString This is also string concatenation using variables.
5 > 3 returns a boolean value of true. How could you change this expression to return false?

Changing the greater than sign to a less than or swap the placement of the 5 and 3 would cause the expression to return a false.

"2" === 2 and "2" == 2 Why does one of those expressions return true and one return false?

In the case with the three equal signs, "2" === 2, JavaScript is checking to see is the items have the same type and value. They do not, the first is a string and the second is a number.

In the case with two equal signs, "2" == 2, JavaScript is checking for loose equality. Double equals causes JavaScript to performs type coercion. The comparison is made after an attempt to convert the values to a common type.


if (8 < 9) {console.log("Hey!")} Before you enter this code in the console, what do you think will happen? Will it log Hey to the console?

I believe that a black Hey! will appear in the console log. It did log Hey! in the console. It is even presistant when you close the dev tools and open them back up.

  • Write an if/else statement where the code in the else block is executed. For example: if (3 < 1){console.log("if block")} else {console.log("else block")}

Use the console to solve these problems.

The Fortune Teller
Why pay a fortune teller when you can just program your fortune yourself?

Store the following into variables: number of children, partner's name, geographic location, job title. Output your fortune to the screen like so: "You will be a X in Y, and married to Z with N kids."

var numKids = 4
undefined
var partnerName = "Jessica"
undefined
var geoLocation = "Denver, Colorado"
undefined
var jobTitle = "Software Developer"
undefined
"You will be a" + " " + jobTitle + " " + "in" + " " + geoLocation + ", and married to" + " " + partnerName + " with " + numKids + " kids."
"You will be a Software Developer in Denver, Colorado, and married to Jessica with 4 kids."

The Age Calculator
Forgot how old you are? Calculate it!

Store the current year in a variable.
Store your birth year in a variable.
Calculate your 2 possible ages based on the stored values.
Output them to the screen like so: "You are either NN or NN", substituting the values.

var currentYear = new Date().getFullYear()
undefined
var birthYear = 1976
undefined
var age = currentYear - birthYear
undefined
age
43

The Lifetime Supply Calculator
Ever wonder how much a "lifetime supply" of your favorite snack is? Wonder no more!

Store your current age into a variable.
Store a maximum age into a variable.
Store an estimated amount per day (as a number).
Calculate how many you would eat total for the rest of your life.
Output the result to the screen like so: "You will need NN to last you until the ripe old age of X".

var currentAge = 43
undefined
var maxAge = 96
undefined
var dailySnack = 3
undefined
var eaten = dailySnack * (maxAge - currentAge) * 365.25
undefined
"You will need " + eaten + " to last you intil the ripe old age of " + maxAge
"You will need 58074.75 to last you intil the ripe old age of 96"

Kirk Veitch Mod-0 Capstone Day 6

Click to expand

Daily Warm Up

  • typing.io

If we have a function defined as function sayHello(){console.log("Hello!")}, what is the difference between entering sayHello and sayHello() in the console?
Typing in sayHello() in to the console will call the function sayHello() and put Hello! Into the console log. Typing sayHello into the console produces a script f on the next line. Pressing the return key again prints: sayHello and sayHello() in the console. It appear that after defining a function, typing the name of the function without the parenthesis at the end causes the console to print out the function.

What is the difference between function parameters and arguments?
Parameters are variables listed as a part of the function definition. Arguments are values passed to the function when it is invoked.

What is the keyword return used for?
The return statement ends function execution and specifies a value to be returned to the function caller.
The following function: myFunction(p1,p2) {return p1 * p2} would return the product of p1 and p2. Calling myFunction(2,7) would return 14.

How are local variables better than global variables? Are there instances you can think of where you might want to use a variable that is globally scoped over local?
If the function runs multiple times, a local variable can have different values each time. Two different functions can use local variables with the same name without a naming conflict. Local variables are removed from memory as soon as the function has completed its task.

You may wish to use a global variable when the variable is used in multiple functions or scripts.



The Fortune Teller Why pay a fortune teller when you can just program your fortune yourself? Write a function named tellFortune that: takes 4 arguments: number of children, partner's name, geographic location, job title. outputs your fortune to the screen like so: "You will be a X in Y, and married to Z with N kids." Call that function 3 times with 3 different values for the arguments.

function tellFortune(kidsNumb, partnerName, geographicLocation, jobTitle){ var tell = 'You will be a ' + jobTitle + ' in ' + geographicLocation + ', and married to ' + partnerName + ' with ' + kidsNumb + ' kids.'; console.log(tell)}
undefined
tellFortune(4, 'Jessica', 'Denver', 'Developer')
VM1432:1 You will be a Developer in Denver, and married to Jessica with 4 kids.
undefined

The Age Calculator Forgot how old you are? Calculate it! Write a function named calculateAge that: takes 2 arguments: birth year, current year. calculates the 2 possible ages based on those years. outputs the result to the screen like so: "You are either NN or NN" Call the function three times with different sets of values. Bonus: Figure out how to get the current year in JavaScript instead of passing it in.

 function calculateAge(birthYear, currentYear) { var ageOne = birthYear - currentYear;
var ageTwo = currentYear - birthYear;
var ageStatement = 'You are either ' + ageOne + ' or ' + ageTwo;
console.log(ageStatement)}
undefined
calculateAge(1976, 2019)
VM1890:4 You are either -43 or 43

Bonus

 function calculateAge(birthYear) { var currentYear = new Date().getFullYear();
var age = currentYear - birthYear;
var ageStatement = 'You are ' + age + ' years old.';
console.log(ageStatement)}
undefined
calculateAge(1976)
VM2068:4 You are 43 years old.

The Lifetime Supply Calculator Ever wonder how much a "lifetime supply" of your favorite snack is? Wonder no more! Write a function named calculateSupply that: takes 2 arguments: age, amount per day. calculates the amount consumed for rest of the life (based on a constant max age). outputs the result to the screen like so: "You will need NN to last you until the ripe old age of X" Call that function three times, passing in different values each time. Bonus: Accept floating point values for amount per day, and round the result to a round number.

function calculateSupply(age, dailyAmount) { var maxAge = 99;
var lifeAmount = (maxAge - age) * dailyAmount *365;
var supplyMsg = 'You will need ' + lifeAmount + ' to last you to the ripe old age of ' + maxAge;
console.log(supplyMsg)}
undefined
calculateSupply(43, 13)
VM739:4 You will need 265720 to last you to the ripe old age of 99

Bonus

function calculateSupply(age, dailyAmount) { var maxAge = 99;
var lifeAmount = (maxAge - age) * dailyAmount *365;
var supplyMsg = 'You will need ' + Math.round(lifeAmount) + ' to last you to the ripe old age of ' + maxAge;
console.log(supplyMsg)}
undefined
calculateSupply(43, 13.4)
VM812:4 You will need 273896 to last you to the ripe old age of 99

Practice through some JavaScript basics exercises on w3resource and check your code against their solutions.


Git and GitHub These are tools that you will use often during your time here at Turing. Let's practice using them!

Complete this Tutorial We want you to git really good at Git and Github, please read through the the Git handbook from GitHub here.

Also, this blog has references to commands and their meaning that might be helpful.

Kirk Veitch Mod-0 Capstone Day 7

Click to expand

Daily Warm Up

  • typing.io

  • Sublime Videos

  • Make A New Webpage Using Sublime Text! Instead of using CodePen to create this webpage, let's use Sublime Text - our text editor. Create a folder (also known as a directory) on your computer to hold your site's files.

Within your folder, create two files:

index.html to hold your HTML code style.css to hold your CSS code Your site should contain (but is not limited to):

Content about a subject you are passionate about! (something not about coding) Headings Text in paragraphs (include two different fonts) Links Images A list (ordered or unordered) A form Usage of color To see the HTML code that you've written in the browser, find the index.html file in Finder, and open it using Chrome. Don't forget to link your stylesheet in your index.html file!

User Interface/User Experience (UI/UX) There is a great series of UI/UX posts called UX Crash Course: 31 Fundamentals. Read the first three, short posts: What is UX?, User Goals & Business Goals, and The 5 Main Ingredients of UX. After you're done reading the third post, read through the each section of questions again: Psychology, Usability, Design, Copywriting, and Analysis. Choose one question from each of these sections (so 5 total questions), and find one site that is good at supporting that question, and find another site that violates that question.

Psychology
How does this make them feel?

Good:https://www.google.com/
I feel like I intuitively know what to do and where things go.

Bad:http://www.suzannecollinsbooks.com/
Initially the site make my eyes jump all over the page. I feel uncomfortable, like I don’t know which way to go or where to look.

Usability
Are you being clear and direct, or is this a little too clever?

Good:https://www.google.com/
The layout is clean with one graphic and a large box for what you want to search for.

Bad:https://www.uat.edu/
Quick try to catch the floating picture that you want to click on. I can hardly find any information I am looking for and the animations took the page longer the expected to load.

Design
Do users think it looks good? Do they trust it immediately?

Good:https://www.amazon.com/
There is a lot of information on the page but it is well laid out. It greets me by name and offers information about things I have done/ordered. It has an almost personal feeling it.

Bad:http://www.arngren.net/
No one thinks this looks good. The page is so full of items. It as if they tried to recreate the ads in the back of 1970’s comic books. I immediately want nothing to do with this page. As a bonus it also scrolls left and right not just up and down. If it wasn’t for the half of an add peeking from the right side of my screen I never would have tried to scroll to the right.

Analysis
Good:https://www.amazon.com/
I it harder to know exactly what Amazon does with their site data. I have read a few articles about it and aside from showing related projects to items that you have looked at and purchased.

Bad:http://www.fayuniversity.com/
Despite having access to Google analytic, Fay Engineering does not use the data to drive any changes to their site. They do use the data to track site visits in correspondence to other marketing efforts.

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