├── portfolio_JH ├── js │ └── app.js ├── images │ └── Lynda_mock_homepage.jpg ├── style.css └── index.html ├── new-git-project ├── js │ └── app.js ├── css │ └── app.css └── index.html ├── course-ajax ├── .gitignore ├── practice │ └── tth-exercise │ │ ├── udacity.js │ │ ├── index.html │ │ └── ajaxTTH.js ├── lesson-1-async-w-xhr │ ├── app.js │ └── index.html ├── lesson-3-async-w-fetch │ ├── app.js │ └── index.html ├── lesson-2-async-w-jQuery │ ├── app.js │ └── index.html ├── README.md ├── .stylelintrc ├── .eslintrc └── css │ └── styles.css ├── fend-project-memory-game ├── .gitignore ├── .gitattributes ├── CONTRIBUTING.md ├── README.md ├── js │ └── app.js ├── css │ └── app.css └── index.html ├── RWDF_L2_Start ├── images │ └── dog.jpg └── index.html ├── tree-to-html ├── sample-tree.png └── index.html ├── figures ├── redwoods_state_park.jpg └── index.html ├── mockup-to-article ├── blog-mockup.pdf ├── reflections.txt └── index.html ├── HTML_Syntax ├── html_research.html ├── make_list.html ├── treeToHTML.html ├── make_headers.html ├── make_a_button.html ├── mk_1st_elm.html ├── insertFig.html └── mockupWebsite.html ├── writing-selectors ├── img │ └── clay-pot.jpg └── index.html ├── fend-animal-trading-cards-master ├── Fluid.jpg ├── dolphin.jpg ├── jQueryAPI.jpg ├── Column_Drop.jpg ├── Off_canvas.jpg ├── portfolio1.jpg ├── Layout_shifter.jpg ├── jQueryMethods.jpg └── trading-card │ ├── Princess.jpg │ ├── card.html │ └── styles.css ├── .gitignore ├── DOM_jQuery_basics ├── select_by_id │ ├── app.js │ └── index.html ├── select_by_tags │ ├── app.js │ └── index.html ├── select_by_class │ ├── app.js │ └── index.html └── filters_quiz │ ├── app.js │ └── index.html ├── DOM_manipulation ├── modifyCSS │ ├── app.js │ └── index.html ├── togglingClassesQuiz │ ├── app.js │ └── index.html ├── collectValues │ ├── app.js │ └── index.html ├── toggleClassQuiz │ ├── app.js │ └── index.html ├── removeDOMel │ ├── app.js │ └── index.html ├── buildDOMFamilyTree │ ├── index.html │ └── app.js ├── changingAttr │ ├── app.js │ └── index.html └── iteratingEachQuiz │ ├── app.js │ └── index.html ├── ES6 ├── spread_op.js ├── shell_workshop.md ├── destruct_arrays.js ├── forOfLoop.js └── restParam.js ├── arrays_quiz ├── udacyfamily.js ├── rightPrice.js ├── rainbowColors.js ├── harryPotter.js ├── joinTheCrew.js ├── buildingCrew.js ├── anotherTypeLoop.js ├── nestedLoops.js └── gotBills.js ├── loops_quiz ├── fixError.js ├── changingLoop.js ├── juliaJames.js ├── findSeat.js ├── countdownLiftoff.js ├── bottlesOfJuice.js └── factorial.js ├── link-to-a-stylesheet ├── css │ └── styles.css └── index.html ├── func_quiz ├── laugh.js ├── cry.js ├── anonLaugh.js ├── inline.js ├── laughNum.js └── triangle.js ├── jQuery-eventListeners ├── jQueryEventListener │ ├── app.js │ └── index.html └── project-pixel-art-maker-starter-master │ ├── README.md │ ├── styles.css │ ├── index.js │ └── index.html ├── object_quiz ├── menuItems.js ├── bankAccount2.js ├── donutsRevisited.js ├── bankAccount1.js ├── facebookFriends.js └── umbrella.js ├── make_a_list └── index.html ├── jQuerySampleSite ├── app.js └── index.html ├── make_all_headers └── index.html ├── flexbox ├── index.html ├── flexbox_layout.html └── style.css ├── package.json ├── .eslintrc.json ├── conditionals_quiz ├── checking_balance.js ├── foodChain.js ├── index.js ├── icecream.js ├── backToSchool.js └── whatWear.js ├── keyboard-shortcuts ├── finish.html └── start.html ├── web-dev-blog └── index.html ├── practice-keyboard-shortcuts ├── index.html └── css │ └── main.css ├── udacity-site-header └── index.html ├── todo-list └── index.html ├── media-queries ├── deconstructing_flexbox.html └── whichStyle.html ├── patterns └── pattern-mostly-fluid-quiz-blankcss.html └── slack-card └── index.html /portfolio_JH/js/app.js: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /new-git-project/js/app.js: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /course-ajax/.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | -------------------------------------------------------------------------------- /new-git-project/css/app.css: -------------------------------------------------------------------------------- 1 | body { 2 | background-color: #00cae4; 3 | } -------------------------------------------------------------------------------- /fend-project-memory-game/.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | .htmlhintrc 3 | .stylelintrc 4 | .eslintrc.json 5 | -------------------------------------------------------------------------------- /RWDF_L2_Start/images/dog.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/juliehutchinson001/udacity_google_scholarship/HEAD/RWDF_L2_Start/images/dog.jpg -------------------------------------------------------------------------------- /tree-to-html/sample-tree.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/juliehutchinson001/udacity_google_scholarship/HEAD/tree-to-html/sample-tree.png -------------------------------------------------------------------------------- /figures/redwoods_state_park.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/juliehutchinson001/udacity_google_scholarship/HEAD/figures/redwoods_state_park.jpg -------------------------------------------------------------------------------- /mockup-to-article/blog-mockup.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/juliehutchinson001/udacity_google_scholarship/HEAD/mockup-to-article/blog-mockup.pdf -------------------------------------------------------------------------------- /HTML_Syntax/html_research.html: -------------------------------------------------------------------------------- 1 |

This text should be bold.

2 |

And this text should have emphasis (italics).

3 | -------------------------------------------------------------------------------- /writing-selectors/img/clay-pot.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/juliehutchinson001/udacity_google_scholarship/HEAD/writing-selectors/img/clay-pot.jpg -------------------------------------------------------------------------------- /fend-animal-trading-cards-master/Fluid.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/juliehutchinson001/udacity_google_scholarship/HEAD/fend-animal-trading-cards-master/Fluid.jpg -------------------------------------------------------------------------------- /portfolio_JH/images/Lynda_mock_homepage.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/juliehutchinson001/udacity_google_scholarship/HEAD/portfolio_JH/images/Lynda_mock_homepage.jpg -------------------------------------------------------------------------------- /fend-animal-trading-cards-master/dolphin.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/juliehutchinson001/udacity_google_scholarship/HEAD/fend-animal-trading-cards-master/dolphin.jpg -------------------------------------------------------------------------------- /fend-animal-trading-cards-master/jQueryAPI.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/juliehutchinson001/udacity_google_scholarship/HEAD/fend-animal-trading-cards-master/jQueryAPI.jpg -------------------------------------------------------------------------------- /fend-animal-trading-cards-master/Column_Drop.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/juliehutchinson001/udacity_google_scholarship/HEAD/fend-animal-trading-cards-master/Column_Drop.jpg -------------------------------------------------------------------------------- /fend-animal-trading-cards-master/Off_canvas.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/juliehutchinson001/udacity_google_scholarship/HEAD/fend-animal-trading-cards-master/Off_canvas.jpg -------------------------------------------------------------------------------- /fend-animal-trading-cards-master/portfolio1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/juliehutchinson001/udacity_google_scholarship/HEAD/fend-animal-trading-cards-master/portfolio1.jpg -------------------------------------------------------------------------------- /fend-animal-trading-cards-master/Layout_shifter.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/juliehutchinson001/udacity_google_scholarship/HEAD/fend-animal-trading-cards-master/Layout_shifter.jpg -------------------------------------------------------------------------------- /fend-animal-trading-cards-master/jQueryMethods.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/juliehutchinson001/udacity_google_scholarship/HEAD/fend-animal-trading-cards-master/jQueryMethods.jpg -------------------------------------------------------------------------------- /fend-animal-trading-cards-master/trading-card/Princess.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/juliehutchinson001/udacity_google_scholarship/HEAD/fend-animal-trading-cards-master/trading-card/Princess.jpg -------------------------------------------------------------------------------- /fend-project-memory-game/.gitattributes: -------------------------------------------------------------------------------- 1 | # Set the default behavior, in case people don't have core.autocrlf set. 2 | # https://help.github.com/articles/dealing-with-line-endings/ 3 | * text=auto 4 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | */*.DS_Store 2 | *.DS_Store 3 | 4 | */*.vscode 5 | *.vscode 6 | 7 | 8 | **/node_modules/ 9 | **/web-dev-blog/web-dev-blog.png 10 | web-dev-blog/web-dev-blog.png 11 | 12 | **/*.png 13 | */*.png 14 | *.png -------------------------------------------------------------------------------- /fend-project-memory-game/CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | # How to contribute 2 | 3 | The files in this repository are used as the starting point for all students. Because we want students to write the majority of the code themselves, pull requests (most likely) will _not_ be merged into the project. 4 | -------------------------------------------------------------------------------- /DOM_jQuery_basics/select_by_id/app.js: -------------------------------------------------------------------------------- 1 | /* 2 | For this quiz, use a jQuery class selector to grab all the element with 3 | id 'nav' on the page! 4 | */ 5 | 6 | // don't change this variable! 7 | let nav; 8 | 9 | // your code goes here! 10 | nav = $('#nav'); 11 | 12 | console.log(nav); -------------------------------------------------------------------------------- /DOM_jQuery_basics/select_by_tags/app.js: -------------------------------------------------------------------------------- 1 | /* 2 | For this quiz, use a jQuery tag selector to grab all of the
  • s on the page! 3 | */ 4 | 5 | // Start with this variable! (don't delete it!) 6 | let listElements; 7 | 8 | // your code goes here! 9 | listElements = $('li'); 10 | 11 | console.log(listElements); -------------------------------------------------------------------------------- /DOM_jQuery_basics/select_by_class/app.js: -------------------------------------------------------------------------------- 1 | /* 2 | For this quiz, use a jQuery class selector to grab all of the 3 | elements of class 'article-item' on the page! 4 | */ 5 | 6 | // don't change this variable! 7 | let articleItems; 8 | 9 | // your code goes here! 10 | articleItems = $('.article-item'); 11 | 12 | console.log(articleItems); -------------------------------------------------------------------------------- /DOM_manipulation/modifyCSS/app.js: -------------------------------------------------------------------------------- 1 | /* 2 | * For this quiz, change the font-size of all the 3 | * article-items to 20px! 4 | * 5 | * You must use jQuery's css() method! 6 | */ 7 | 8 | // Start with this variable! 9 | var articleItems; 10 | 11 | // your code goes here! 12 | articleItems = $('.article-item').css('font-size', '20px'); -------------------------------------------------------------------------------- /ES6/spread_op.js: -------------------------------------------------------------------------------- 1 | /* 2 | * Instructions: Use the spread operator to combine the 3 | * `fruits` and `vegetables` arrays into the `produce` array. 4 | */ 5 | 6 | const fruits = ["apples", "bananas", "pears"]; 7 | const vegetables = ["corn", "potatoes", "carrots"]; 8 | 9 | const produce = [...fruits, ...vegetables]; 10 | 11 | console.log(produce); 12 | -------------------------------------------------------------------------------- /arrays_quiz/udacyfamily.js: -------------------------------------------------------------------------------- 1 | /* 2 | * Programming Quiz: UdaciFamily (6-1) 3 | * Directions: 4 | * Create an array called udaciFamily and add "Julia", "James", and your 5 | * name to the array. Then, print the udaciFamily to the console using 6 | * console.log. 7 | */ 8 | 9 | // your code goes here 10 | let udaciFamily = ["Julia", "James", "Julie"]; 11 | 12 | console.log(udaciFamily); -------------------------------------------------------------------------------- /loops_quiz/fixError.js: -------------------------------------------------------------------------------- 1 | /* 2 | * Programming Quiz: Fix the Error 1 (4-5) 3 | * 4 | * 5 | * 6 | * 7 | * Directions: 8 | * Here is a for loop that's supposed to print the numbers 5 through 9. Fix the error! 9 | * 10 | * for (x < 10; x++) { 11 | * console.log(x); 12 | * } 13 | */ 14 | 15 | // fix the for loop 16 | for (var x = 5; x < 10; x++) { 17 | console.log(x); 18 | } 19 | -------------------------------------------------------------------------------- /ES6/shell_workshop.md: -------------------------------------------------------------------------------- 1 | 2 | Download `dictionary.txt` 3 | Enter a shell command to download https://tinyurl.com/zeyq9vc and save it as the file dictionary.txt. Remember to use the option to follow web redirects. 4 | 5 | Run this command on your own computer, too! You'll need to download this file for the next exercise. 6 | 7 | --- 8 | 9 | curl -o dictionary.txt -L 'https://tinyurl.com/zeyq9vc' 10 | 11 | -------------------------------------------------------------------------------- /loops_quiz/changingLoop.js: -------------------------------------------------------------------------------- 1 | /* 2 | * Programming Quiz: Changing the Loop (4-4) 3 | */ 4 | 5 | 6 | 7 | // rewrite the while loop as a for loop 8 | var x = 9; 9 | while (x >= 1) { 10 | console.log("hello " + x); 11 | x = x - 1; 12 | } 13 | 14 | // ------------------------------------ 15 | 16 | 17 | 18 | for (var x = 9; x >= 1 ; x--) { 19 | console.log("hello " + x); 20 | 21 | } 22 | 23 | -------------------------------------------------------------------------------- /HTML_Syntax/make_list.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 6 | 7 |

    Create an unordered list! Make a list of the three web languages: HTML, CSS and JavaScript.

    8 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /course-ajax/practice/tth-exercise/udacity.js: -------------------------------------------------------------------------------- 1 | const searchedForText = 'hippos'; 2 | const unsplashRequest = new XMLHttpRequest(); 3 | 4 | unsplashRequest.open('GET', `https://api.unsplash.com/search/photos?page=1&query=${searchedForText}`); 5 | unsplashRequest.onload = addImage; 6 | unsplashRequest.setRequestHeader('Authorization', 'Client-ID '); 7 | unsplashRequest.send(); 8 | 9 | function addImage(){ 10 | } -------------------------------------------------------------------------------- /link-to-a-stylesheet/css/styles.css: -------------------------------------------------------------------------------- 1 | body { 2 | font-family: 'Roboto', sans-serif; 3 | } 4 | .container { 5 | display: flex; 6 | flex-wrap: wrap; 7 | } 8 | .menu { 9 | width: 15%; 10 | } 11 | .portfolio { 12 | width: 85%; 13 | } 14 | .item { 15 | width: 100%; 16 | clear: both; 17 | } 18 | .item img { 19 | float: left 20 | } 21 | .item span { 22 | display: table-cell; 23 | vertical-align: middle; 24 | height: 240px; 25 | } -------------------------------------------------------------------------------- /DOM_manipulation/togglingClassesQuiz/app.js: -------------------------------------------------------------------------------- 1 | /* 2 | For this quiz, remove the class 'featured' from Article #2 3 | and add it to Article #3! 4 | 5 | You must use jQuery's toggleClass method! 6 | */ 7 | 8 | // don't change these variable! 9 | let article2, article3; 10 | 11 | // your code goes here! 12 | article2 = $('.featured'); 13 | article3 = article2.next(); 14 | 15 | article2.toggleClass('featured'); 16 | article3.toggleClass('featured'); 17 | 18 | -------------------------------------------------------------------------------- /func_quiz/laugh.js: -------------------------------------------------------------------------------- 1 | /* 2 | * Programming Quiz: Laugh it Off 1 (5-1) 3 | * 4 | * Directions: 5 | * Declare a function called laugh() that returns "hahahahahahahahahaha!". 6 | * Print the value returned from the laugh() function to the console. 7 | * 8 | */ 9 | 10 | // your code goes here 11 | 12 | function laugh() { 13 | var astring = "hahahahahahahahahaha!"; 14 | return astring; 15 | } 16 | 17 | /* call the laugh function */ 18 | console.log(laugh()); 19 | -------------------------------------------------------------------------------- /func_quiz/cry.js: -------------------------------------------------------------------------------- 1 | /* 2 | * Programming Quiz: Cry (5-5) 3 | * Directions: 4 | * Write a named function expression that stores the function in a 5 | * variable called cry and returns "boohoo!". Don't forget to call the 6 | * function using the variable name, not the function name: 7 | * 8 | * cry(); 9 | * Returns: boohoo! 10 | */ 11 | 12 | // your code goes here 13 | 14 | var cry = function test(boo) { 15 | boo = "boohoo!"; 16 | 17 | return boo; 18 | }; 19 | 20 | cry(); -------------------------------------------------------------------------------- /course-ajax/lesson-1-async-w-xhr/app.js: -------------------------------------------------------------------------------- 1 | (function () { 2 | const form = document.querySelector('#search-form'); 3 | const searchField = document.querySelector('#search-keyword'); 4 | let searchedForText; 5 | const responseContainer = document.querySelector('#response-container'); 6 | 7 | form.addEventListener('submit', function (e) { 8 | e.preventDefault(); 9 | responseContainer.innerHTML = ''; 10 | searchedForText = searchField.value; 11 | }); 12 | })(); 13 | -------------------------------------------------------------------------------- /HTML_Syntax/treeToHTML.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 10 | 11 |

    This is a test

    12 |
    13 |

    Did you pass the test?

    14 |

    Great Job! you passed all tests

    15 |
    16 | 17 | -------------------------------------------------------------------------------- /course-ajax/lesson-3-async-w-fetch/app.js: -------------------------------------------------------------------------------- 1 | (function () { 2 | const form = document.querySelector('#search-form'); 3 | const searchField = document.querySelector('#search-keyword'); 4 | let searchedForText; 5 | const responseContainer = document.querySelector('#response-container'); 6 | 7 | form.addEventListener('submit', function (e) { 8 | e.preventDefault(); 9 | responseContainer.innerHTML = ''; 10 | searchedForText = searchField.value; 11 | }); 12 | })(); 13 | -------------------------------------------------------------------------------- /jQuery-eventListeners/jQueryEventListener/app.js: -------------------------------------------------------------------------------- 1 | /* 2 | For this quiz, use jQuery to set up an event listener. Your event listener must: 3 | 1. listen to the #my-button element 4 | 2. listen for a `click` event 5 | 3. perform the following actions when the button is clicked: 6 | a. remove the #my-button element from the DOM 7 | b. add the `success` class to the body 8 | */ 9 | 10 | $('#my-button').on('click', function() { 11 | $('button').remove(); 12 | $('body').addClass('success'); 13 | }); -------------------------------------------------------------------------------- /DOM_manipulation/collectValues/app.js: -------------------------------------------------------------------------------- 1 | /* 2 | * For this quiz, use jQuery's val method to make live 3 | * changes to the 'Cool Articles'

    ! 4 | * 5 | * The starter code below creates an event listener that 6 | * will run any time the input changes. 7 | * For more on events, check the instructor notes. 8 | */ 9 | 10 | $('#input').on('change', function() { 11 | let val; 12 | let h1; 13 | 14 | // Your code goes here! 15 | val = $('#input').val(); 16 | h1 = $('.articles').children('h1').text(val); 17 | }); -------------------------------------------------------------------------------- /course-ajax/lesson-2-async-w-jQuery/app.js: -------------------------------------------------------------------------------- 1 | /* eslint-env jquery */ 2 | 3 | (function () { 4 | const form = document.querySelector('#search-form'); 5 | const searchField = document.querySelector('#search-keyword'); 6 | let searchedForText; 7 | const responseContainer = document.querySelector('#response-container'); 8 | 9 | form.addEventListener('submit', function (e) { 10 | e.preventDefault(); 11 | responseContainer.innerHTML = ''; 12 | searchedForText = searchField.value; 13 | }); 14 | })(); 15 | -------------------------------------------------------------------------------- /object_quiz/menuItems.js: -------------------------------------------------------------------------------- 1 | /* 2 | * Programming Quiz: Menu Items (7-2) 3 | * 4 | * Directions: 5 | * Create a breakfast object to represent the following menu item: 6 | * 7 | * The Lumberjack - $9.95 8 | * eggs, sausage, toast, hashbrowns, pancakes 9 | * The object should contain properties for the name, price, and ingredients. 10 | * 11 | */ 12 | 13 | // your code goes here 14 | let breakfast = { 15 | name: "The Lumberjack", 16 | price: 9.95, 17 | ingredients: ["eggs", "sausage", "toast", "hashbrowns", "pancakes"] 18 | }; 19 | -------------------------------------------------------------------------------- /loops_quiz/juliaJames.js: -------------------------------------------------------------------------------- 1 | /* 2 | * Programming Quiz: JuliaJames (4-1) 3 | */ 4 | 5 | var x = 1; 6 | 7 | while (x <= 20) { 8 | // check divisibility 9 | if (x % 3 === 0 && x % 5 === 0) { 10 | // print JuliaJames 11 | console.log("JuliaJames"); 12 | } else if (x % 3 === 0) { 13 | // print Julia 14 | console.log("Julia"); 15 | } else if (x % 5 === 0) { 16 | // print James 17 | console.log("James"); 18 | } else { 19 | console.log(x); 20 | } 21 | // increment x 22 | x++; 23 | } -------------------------------------------------------------------------------- /DOM_manipulation/toggleClassQuiz/app.js: -------------------------------------------------------------------------------- 1 | /* 2 | For this quiz, use a jQuery class selector and featuredArticle 3 | variable to toggle the 'featured' class! 4 | */ 5 | 6 | // don't change this variable! 7 | let featuredArticle; 8 | 9 | // your code starts here! 10 | featuredArticle = $('li').toggleClass('featured'); //my soln 11 | 12 | // -------------------------------------------------- // 13 | 14 | // don't change this variable! 15 | let featuredArticle; 16 | 17 | featuredArticle = $('.featured') //udacity's soln 18 | 19 | featuredArticle.toggleClass('featured'); -------------------------------------------------------------------------------- /func_quiz/anonLaugh.js: -------------------------------------------------------------------------------- 1 | /* 2 | * Programming Quiz: Laugh (5-4) 3 | * 4 | * Directions: 5 | * Write an anonymous function expression that stores a function in a variable called "laugh" and outputs the number of "ha"s that you pass in as an argument. 6 | * 7 | * laugh(3); 8 | * 9 | * >>> hahaha! 10 | * 11 | */ 12 | 13 | var laugh = function(num) { 14 | var finalR = ""; 15 | 16 | for(var i = 1 ; i <= num ; i++) { 17 | finalR += "ha"; 18 | } 19 | return finalR + "!"; 20 | } /* finish the function expression */ 21 | 22 | console.log(laugh(10)); 23 | -------------------------------------------------------------------------------- /HTML_Syntax/make_headers.html: -------------------------------------------------------------------------------- 1 | 2 | 5 | 6 |

    Add your headers below this paragraph element! Add an h1, h2, h3, and h4. You should see your new headers displayed in the preview pane. 7 |

    8 |

    Hello

    9 |

    How are you?

    10 |

    How's your day going

    11 |

    I hope you have a nice day!

    12 |

    Don't forget to add some text to your headers. They won't display anything otherwise. 13 |

    14 | 15 | 16 | -------------------------------------------------------------------------------- /course-ajax/practice/tth-exercise/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | AJAX with JavaScript 6 | 7 | 8 | 9 |
    10 |

    AJAX!

    11 | 12 |
    13 | 14 | 21 | 22 | 23 | -------------------------------------------------------------------------------- /jQuery-eventListeners/project-pixel-art-maker-starter-master/README.md: -------------------------------------------------------------------------------- 1 | # Pixel Art Maker Project 2 | 3 | ## Table of Contents 4 | 5 | * [Instructions](#instructions) 6 | * [Contributing](#contributing) 7 | 8 | ## Instructions 9 | 10 | To get started, open `designs.js` and start building out the app's functionality. 11 | 12 | For specific, detailed instructions, look at the project instructions in the [Udacity Classroom](https://classroom.udacity.com/me). 13 | 14 | ## Contributing 15 | 16 | This repository is the starter code for _all_ Udacity students. Therefore, we most likely will not accept pull requests. 17 | -------------------------------------------------------------------------------- /new-git-project/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Blog Project 6 | 7 | 8 | 9 | 10 | 11 | 12 |
    13 |

    Expedition

    14 |
    15 | 16 |
    17 |
    18 | 19 |
    20 |
    21 | 22 |
    23 | Made with ♥ @ Udacity 24 |
    25 | 26 | 27 | -------------------------------------------------------------------------------- /make_a_list/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Lists Quiz 7 | 8 | 9 | 10 | 11 | 12 |

    Create an unordered list! Make a list of the three web languages: HTML, CSS and JavaScript.

    13 | 14 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /jQuerySampleSite/app.js: -------------------------------------------------------------------------------- 1 | /* 2 | * 3 | * For this quiz, can you use this script, which is linked in the 4 | * of index.html, to change the boring placeholder image to 5 | * a picture of a cute animal? 6 | * 7 | * Remember, you'll need to pass a function into the jQuery object 8 | * to run when the document is ready. 9 | * 10 | * Unfortunately, placepuppy is no longer available. Here's a link 11 | * to a random animal image on lorempixel.com: 12 | * 13 | * http://lorempixel.com/350/150/animals/ 14 | * 15 | * Good luck! 16 | * 17 | */ 18 | 19 | 20 | $(() => { 21 | $('img').attr('src', "http://lorempixel.com/350/150/animals/"); 22 | }); -------------------------------------------------------------------------------- /arrays_quiz/rightPrice.js: -------------------------------------------------------------------------------- 1 | /* 2 | * Programming Quiz: The Price is Right (6-3) 3 | * 4 | * Directions: 5 | * Starting with this array of prices, change the prices of the 1st, 3rd, 6 | * and 7th elements in the array. 7 | * 8 | * var prices = [1.23, 48.11, 90.11, 8.50, 9.99, 1.00, 1.10, 67.00]; 9 | * TIP: The 1st element of any array has an index of 0. 10 | * 11 | * Afterwards, print out the prices array to the console. 12 | * 13 | * 14 | */ 15 | 16 | var prices = [1.23, 48.11, 90.11, 8.50, 9.99, 1.00, 1.10, 67.00]; 17 | 18 | // your code goes here 19 | 20 | prices[0] = 2.34; 21 | prices[2] = 89.22; 22 | prices[6] = 2.21; 23 | 24 | console.log(prices); -------------------------------------------------------------------------------- /DOM_jQuery_basics/filters_quiz/app.js: -------------------------------------------------------------------------------- 1 | /* 2 | For this quiz, use articleList and DOM navigation methods to collect articleList's 3 | sibling

    (let h1), children (let kids), and parent
    s (var parents). 4 | 5 | You must use articleList to navigate to the element(s)! 6 | */ 7 | 8 | // Start with these variable! 9 | let articleList, h1, kids, parents; 10 | 11 | articleList = $('.article-list'); 12 | 13 | // Your code goes here! 14 | h1 = articleList.siblings('h1'); 15 | 16 | // Your code goes here! 17 | kids = articleList.children(); 18 | kids = articleList.find('*'); 19 | 20 | // Your code goes here! 21 | parents = articleList.parents('div'); 22 | 23 | console.log(h1, kids, parents); -------------------------------------------------------------------------------- /DOM_manipulation/removeDOMel/app.js: -------------------------------------------------------------------------------- 1 | /* 2 | * For this quiz, remove the
      from the first article 3 | * item! 4 | * 5 | * You must use jQuery's remove() method. 6 | */ 7 | 8 | // Start with this variable! 9 | let articleItems; 10 | 11 | // your code goes here! 12 | articleItems = $('.article-list').find('ul').remove(); 13 | 14 | 15 | /* ---------------------------------------------------- */ 16 | 17 | // Start with this variable! 18 | let articleItems; 19 | let ul; 20 | 21 | //UDACITY's code goes here! 22 | articleItems = $('.article-list') 23 | 24 | ul = articleItems.find('ul'); 25 | 26 | ul.remove(); //a selector can be passed to remove() method 27 | //ul.remove('.bold'); 28 | -------------------------------------------------------------------------------- /make_all_headers/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Headers Quiz 7 | 8 | 9 | 10 | 11 | 12 |

      Add your headers below this paragraph element! Add an h1, h2, h3, and h4 to finish the quiz. And make sure every header has text content :)

      13 |

      Julie's Website

      14 |

      Content/Index

      15 |

      Animals

      16 |

      Dogs: Princess

      17 | 18 | 19 | -------------------------------------------------------------------------------- /ES6/destruct_arrays.js: -------------------------------------------------------------------------------- 1 | 2 | /* 3 | * Use array destructuring to pull out the three colors from 4 | * the array of things and store them into the variables one, 5 | * two, and three. 6 | * 7 | * Programming Quiz: Destructuring Arrays (1-3) 8 | * 9 | * Use destructuring to initialize the variables `one`, `two`, 10 | * and `three` with the colors from the `things` array. 11 | */ 12 | 13 | const things = ['red', 'basketball', 'paperclip', 'green', 14 | 'computer', 'earth', 'udacity', 'blue', 'dogs']; 15 | 16 | const [one, , , two, , , , ] = things; 17 | 18 | const colors = `List of Colors 19 | 1. ${one} 20 | 2. ${two} 21 | 3. ${three}`; 22 | 23 | console.log(colors); 24 | -------------------------------------------------------------------------------- /ES6/forOfLoop.js: -------------------------------------------------------------------------------- 1 | /* Directions: 2 | * Write a for...of loop that: 3 | * 4 | * loops through each day in the days array 5 | * capitalizes the first letter of the day 6 | * and prints the day out to the console 7 | * Your code should log the following to the console: 8 | * 9 | * Sunday 10 | * Monday 11 | * Tuesday 12 | * Wednesday 13 | * Thursday 14 | * Friday 15 | * Saturday 16 | * 17 | */ 18 | 19 | const days = ['sunday', 'monday', 'tuesday', 'wednesday', 20 | 'thursday', 'friday', 'saturday']; 21 | 22 | // your code goes here 23 | 24 | for(let day of days) { 25 | let capsDay = `${day.charAt(0).toUpperCase()}${day.slice(1)}`; 26 | console.log(capsDay); 27 | } 28 | -------------------------------------------------------------------------------- /flexbox/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 |
      11 |
      1
      12 |
      2
      13 |
      3
      14 |
      4
      15 |
      5
      16 |
      ipsun lorem ipsun lorem ipsun lorem ipsun lorem ipsun lorem
      17 |
      18 | 19 | -------------------------------------------------------------------------------- /course-ajax/README.md: -------------------------------------------------------------------------------- 1 | # Ajax 2 | 3 | This is the repo for [Udacity's Ajax course](). The course covers making asynchronous requests using three different methods: 4 | 5 | * the XHR object 6 | * jQuery's `.ajax()` method 7 | * the Fetch API 8 | 9 | The same project is built with each of these techniques. You'll find one folder for each. 10 | 11 | ## Table of Contents 12 | 13 | * [Instructions](#instructions) 14 | * [Creator](#creators) 15 | 16 | ## Instructions 17 | 18 | There are no special instructions for this project. 19 | 20 | ## Creators 21 | 22 | **Richard Kalehoff** 23 | 24 | * [https://twitter.com/richardkalehoff](https://twitter.com/richardkalehoff) 25 | * [https://github.com/richardkalehoff](https://github.com/richardkalehoff) 26 | -------------------------------------------------------------------------------- /jQuery-eventListeners/project-pixel-art-maker-starter-master/styles.css: -------------------------------------------------------------------------------- 1 | body { 2 | text-align: center; 3 | background-image:url("http://tropicalsailin.wpengine.netdna-cdn.com/wp-content/uploads/2012/03/sunset08.jpg"); 4 | } 5 | 6 | h1 { 7 | font-family: Monoton; 8 | font-size: 70px; 9 | margin: 0.2em; 10 | } 11 | 12 | h2 { 13 | margin: 1em 0 0.25em; 14 | } 15 | 16 | h2:first-of-type { 17 | margin-top: 0.5em; 18 | } 19 | 20 | table, 21 | tr, 22 | td { 23 | border: 1px solid black; 24 | } 25 | 26 | table { 27 | border-collapse: collapse; 28 | margin: 0 auto; 29 | } 30 | 31 | tr { 32 | height: 20px; 33 | } 34 | 35 | td { 36 | width: 20px; 37 | } 38 | 39 | input[type=number] { 40 | width: 6em; 41 | } 42 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "udacity_directory", 3 | "version": "1.0.0", 4 | "description": "udacity notes from scholarship", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "repository": { 10 | "type": "git", 11 | "url": "git+https://github.com/juliehutchinson001/udacity_google_scholarship.git" 12 | }, 13 | "author": "Julie Hutchinson", 14 | "license": "ISC", 15 | "bugs": { 16 | "url": "https://github.com/juliehutchinson001/udacity_google_scholarship/issues" 17 | }, 18 | "homepage": "https://github.com/juliehutchinson001/udacity_google_scholarship#readme", 19 | "dependencies": { 20 | "npm": "^6.2.0", 21 | "simple-debug.css": "^1.0.1" 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "env": { 3 | "browser": true, 4 | "commonjs": true, 5 | "es6": true 6 | }, 7 | "extends": "eslint:recommended", 8 | "parserOptions": { 9 | "ecmaFeatures": { 10 | "jsx": true 11 | }, 12 | "ecmaVersion": 2018 13 | }, 14 | "plugins": [ 15 | "react" 16 | ], 17 | "rules": { 18 | "indent": [ 19 | "error", 20 | "tab" 21 | ], 22 | "linebreak-style": [ 23 | "error", 24 | "unix" 25 | ], 26 | "quotes": [ 27 | "error", 28 | "double" 29 | ], 30 | "semi": [ 31 | "error", 32 | "always" 33 | ] 34 | } 35 | } -------------------------------------------------------------------------------- /DOM_manipulation/buildDOMFamilyTree/index.html: -------------------------------------------------------------------------------- 1 | 2 | 8 | 9 | 10 | 11 | 12 | 13 | 14 |
      15 |
      16 |
      17 |

      Family1

      18 |
      19 |

      Alex

      20 |
      21 |

      Jane

      22 |
      23 |
      24 |
      25 |

      Taylor

      26 |
      27 |

      Bob

      28 |
      29 |
      30 |
      31 |
      32 |
      33 | -------------------------------------------------------------------------------- /flexbox/flexbox_layout.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 |
      14 | 15 |
      16 |

      Title

      17 |
      1
      18 |
      2
      19 |
      footer
      20 |
      21 | 22 |
      3
      23 |
      24 | 25 | 26 | -------------------------------------------------------------------------------- /func_quiz/inline.js: -------------------------------------------------------------------------------- 1 | /* 2 | * Programming Quiz: Inline Functions (5-6) 3 | * 4 | * Directions: 5 | * Call the emotions() function so that it prints the output you see below, 6 | * but instead of passing the laugh() function as an argument, pass an 7 | * inline function expression instead. 8 | * 9 | * emotions("happy", laugh(2)); // you can use your laugh function from 10 | * the previous quizzes 11 | * Prints: "I am happy, haha!" 12 | */ 13 | 14 | // don't change this code 15 | function emotions(myString, myFunc) { 16 | console.log("I am " + myString + ", " + myFunc(2)); 17 | } 18 | 19 | emotions("happy", function laugh(num) { 20 | var final = ""; 21 | var funny = "ha"; 22 | 23 | for(var i = 1 ; i <= num ; i++) { 24 | final += funny; 25 | } 26 | return final + "!"; 27 | }); -------------------------------------------------------------------------------- /conditionals_quiz/checking_balance.js: -------------------------------------------------------------------------------- 1 | /* 2 | * Programming Quiz - Checking Your Balance (3-5) 3 | */ 4 | 5 | // change the values of `balance`, `checkBalance`, and `isActive` to test your code 6 | var balance = 325.00; 7 | var checkBalance = true; 8 | var isActive = false; 9 | 10 | // your code goes here 11 | if(checkBalance === true) { 12 | if(isActive === true && balance > 0) { 13 | console.log("Your balance is $" + balance.toFixed(2) + "."); 14 | } else if (isActive !== true) { 15 | console.log("Your account is no longer active."); 16 | } else if (balance === 0) { 17 | console.log("Your account is empty."); 18 | } else { 19 | console.log("Your balance is negative. Please contact bank."); 20 | } 21 | } else { 22 | console.log("Thank you. Have a nice day!"); 23 | } -------------------------------------------------------------------------------- /loops_quiz/findSeat.js: -------------------------------------------------------------------------------- 1 | /* 2 | * Programming Quiz: Find my Seat (4-8) 3 | * 4 | * Write a nested for loop to print out all of the different seat combinations in the theater. 5 | * The first row-seat combination should be 0-0 6 | * The last row-seat combination will be 25-99 7 | * 8 | * Things to note: 9 | * - the row and seat numbers start at 0, not 1 10 | * - the highest seat number is 99, not 100 11 | */ 12 | 13 | // Write your code here 14 | for (var row = 25 ; row > 0 ; row--) { 15 | for (var seat = 99 ; seat > 0 ; seat--) { 16 | console.log(row + '-' + seat); 17 | } 18 | } 19 | 20 | /* ---------------------------------------------------- */ 21 | 22 | // Write your code here 23 | for (var row = 0 ; row < 26 ; row++) { 24 | for (var seat = 0 ; seat < 100 ; seat++) { 25 | console.log(row + '-' + seat); 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /tree-to-html/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Tree to HTML 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 |

      Princess

      15 |
      16 |

      Princess is an 18 year old french poodle. She lives in Miami with my mom and dad

      17 |

      She was originally my pet, but because of the unavailability of a stable place to stay, I had to leave her behind.

      18 |
      19 | 20 | 21 | -------------------------------------------------------------------------------- /HTML_Syntax/make_a_button.html: -------------------------------------------------------------------------------- 1 | 23 | 24 | -------------------------------------------------------------------------------- /HTML_Syntax/mk_1st_elm.html: -------------------------------------------------------------------------------- 1 | 5 | 6 | 15 | 16 | 20 | 21 | 22 |

      Julie Hutchinson was born in Bogota, Colombia but at the age of 18, she moved to Miami United States with her parents.

      23 |       24 | 25 |

      Then, in 2018, she decided to follow her career in the State of California, so she moved to San Francisco.

      26 |       27 | -------------------------------------------------------------------------------- /flexbox/style.css: -------------------------------------------------------------------------------- 1 | .root { 2 | display: flex; 3 | height: 500px; 4 | flex-wrap: wrap; 5 | width: 100%; 6 | border: solid black; 7 | justify-content: space-around; 8 | } 9 | 10 | .game__main { 11 | display: flex; 12 | flex-wrap: wrap; 13 | order: 1; 14 | width: 69%; 15 | border: solid grey; 16 | } 17 | 18 | .game-title { 19 | order: 1; 20 | width: 100%; 21 | margin: 10px 50%; 22 | } 23 | 24 | .navigation { 25 | border: solid red; 26 | width: 29%; 27 | height: 320px; 28 | order: 2; 29 | } 30 | 31 | .interface { 32 | border: solid blue; 33 | width: 69%; 34 | order: 3; 35 | } 36 | 37 | .game__tips { 38 | order: 2; 39 | width: 29%; 40 | border: solid green; 41 | } 42 | 43 | .game__footer { 44 | order: 4; 45 | margin: 5% 0 5% 0; 46 | height: 80px; 47 | width: 100%; 48 | border: solid coral; 49 | } 50 | -------------------------------------------------------------------------------- /arrays_quiz/rainbowColors.js: -------------------------------------------------------------------------------- 1 | /* 2 | * Programming Quiz: Colors of the Rainbow (6-4) 3 | * 4 | * Directions: 5 | * James was creating an array with the colors of the rainbow, and he 6 | * forgot some colors. The standard rainbow colors are usually listed in 7 | * this order: 8 | * 9 | * let rainbow = ["Red", "Orange", "Yellow", "Green", "Blue", "Purple"]; 10 | * but James had this: 11 | * 12 | * let rainbow = ["Red", "Orange", "Blackberry", "Blue"]; 13 | * Using only the splice() method, insert the missing colors into the array, and remove the color "Blackberry" by following these steps: 14 | * 15 | * Remove "Blackberry" 16 | * Add "Yellow" and "Green" 17 | * Add "Purple" 18 | * 19 | * 20 | */ 21 | 22 | let rainbow = ["Red", "Orange", "Blackberry", "Blue"]; 23 | 24 | // your code goes here 25 | rainbow.splice(2,1, "Yellow", "Green"); 26 | rainbow.push("Purple"); 27 | 28 | console.log(rainbow); -------------------------------------------------------------------------------- /func_quiz/laughNum.js: -------------------------------------------------------------------------------- 1 | /* 2 | * Programming Quiz: Laugh it Off 2 (5-2) 3 | * 4 | * Write a function called `laugh` with a parameter named `num` that 5 | * represents the number of "ha"s to return. 6 | * 7 | * Note: 8 | * - make sure your the final character is an exclamation mark ("!") 9 | * - make sure that your function produces the correct results when it 10 | * is called multiple times 11 | */ 12 | 13 | function laugh(num) { 14 | 15 | //initial string to be printed 16 | var astring = "ha"; 17 | //final result variable 18 | var finalChars = ""; 19 | 20 | //number of repetitions of the initial string 21 | for(var rept = 1 ; rept <= num ; rept++){ 22 | //concatenate the final string 23 | finalChars += astring; 24 | } 25 | 26 | //return final string with the exclamation mark 27 | return finalChars + "!"; 28 | } 29 | 30 | console.log(laugh(5)); -------------------------------------------------------------------------------- /fend-project-memory-game/README.md: -------------------------------------------------------------------------------- 1 | # Memory Game Project 2 | 3 | ## Table of Contents 4 | 5 | * [Instructions](#instructions) 6 | * [Contributing](#contributing) 7 | 8 | ## Instructions 9 | 10 | The starter project has some HTML and CSS styling to display a static version of the Memory Game project. You'll need to convert this project from a static project to an interactive one. This will require modifying the HTML and CSS files, but primarily the JavaScript file. 11 | 12 | To get started, open `js/app.js` and start building out the app's functionality 13 | 14 | For specific, detailed instructions, look at the project instructions in the [Udacity Classroom](https://classroom.udacity.com/me). 15 | 16 | ## Contributing 17 | 18 | This repository is the starter code for _all_ Udacity students. Therefore, we most likely will not accept pull requests. 19 | 20 | For details, check out [CONTRIBUTING.md](CONTRIBUTING.md). 21 | -------------------------------------------------------------------------------- /conditionals_quiz/foodChain.js: -------------------------------------------------------------------------------- 1 | /* 2 | * Programming Quiz - Navigating the Food Chain (3-8) 3 | * 4 | * Use a series of ternary operator to set the category to one of the following: 5 | * - "herbivore" if an animal eats plants 6 | * - "carnivore" if an animal eats animals 7 | * - "omnivore" if an animal eats plants and animals 8 | * - undefined if an animal doesn't eat plants or animals 9 | * 10 | * Notes 11 | * - use the variables `eatsPlants` and `eatsAnimals` in your ternary expressions 12 | * - `if` statements aren't allowed ;-) 13 | */ 14 | 15 | // change the values of `eatsPlants` and `eatsAnimals` to test your code 16 | var eatsPlants = true; 17 | var eatsAnimals = false; 18 | 19 | var category = ( 20 | eatsPlants && eatsAnimals 21 | ? "omnivore" : eatsAnimals 22 | ? "carnivore" : eatsPlants 23 | ? "herbivore" : undefined 24 | ); 25 | 26 | console.log(category); 27 | -------------------------------------------------------------------------------- /func_quiz/triangle.js: -------------------------------------------------------------------------------- 1 | /* 2 | * Programming Quiz: Build A Triangle (5-3) 3 | */ 4 | 5 | // creates a line of * for a given length 6 | function makeLine(length) { 7 | var line = ""; 8 | for (var j = 1; j <= length; j++) { 9 | line += "* "; 10 | } 11 | return line + "\n"; 12 | } 13 | 14 | // Define the function to build the triangle 15 | function buildTriangle(num) { 16 | 17 | //this variable concatenates my stars 18 | var piramid = ""; 19 | 20 | // looping through each new line of the triangle 21 | for (var aCounter = 1 ; aCounter <= num ; aCounter++) { 22 | 23 | //concatenate the stars when makeLine is invoked in each iteration 24 | piramid += makeLine(aCounter); 25 | } 26 | 27 | //return final result once the loop ends 28 | return piramid; 29 | } 30 | // test your code by uncommenting the following line 31 | console.log(buildTriangle(10)); -------------------------------------------------------------------------------- /object_quiz/bankAccount2.js: -------------------------------------------------------------------------------- 1 | /* 2 | * Quiz: Bank Accounts 2 (7-4) 3 | * 4 | * Directions: 5 | * Using the object from the previous quiz, answer the following quiz question: 6 | * 7 | * let savingsAccount = { 8 | * balance: 1000, 9 | * interestRatePercent: 1, 10 | * deposit: function addMoney(amount) { 11 | * if (amount > 0) { 12 | * savingsAccount.balance += amount; 13 | * } 14 | * }, 15 | * withdraw: function removeMoney(amount) { 16 | * let verifyBalance = savingsAccount.balance - amount; 17 | * if (amount > 0 && verifyBalance >= 0) { 18 | * savingsAccount.balance -= amount; 19 | * } 20 | * } 21 | * }; 22 | * 23 | * Your Code: 24 | * QUIZ QUESTION 25 | * Which of the following are valid ways to access properties and call 26 | * methods from the savingsAccount object? 27 | * 28 | */ 29 | 30 | savingsAccount.balance; 31 | savingsAccount["balance"]; 32 | savingsAccount.withdraw(50); -------------------------------------------------------------------------------- /DOM_manipulation/buildDOMFamilyTree/app.js: -------------------------------------------------------------------------------- 1 | /* 2 | * For this quiz, you'll need to add to the DOM tree that 3 | * already exists. 4 | * 5 | * '#family2' should be a sibling of and come after 6 | * '#family1'. '#bruce' should be the only immediate child 7 | * of '#family2'. '#bruce' should have two
      s as 8 | * children, '#madison' and '#hunter'. 9 | */ 10 | 11 | // Your code goes here! 12 | let family1 = $('#family1'); 13 | let family2 = $('

      Family 2

      '); 14 | let bruce = $('

      Bruce

      '); 15 | let madison = $('

      Madison

      '); 16 | let hunter = $('

      Hunter

      '); 17 | 18 | family2.insertAfter(family1); //root of family 2 or sibling of family 1 19 | 20 | family2.append(bruce); // Bruce is the immediate child of family 2 21 | 22 | bruce.append(madison); // Madison is the first child of Bruce 23 | 24 | bruce.append(hunter); // Hunter is the second child of Bruce 25 | -------------------------------------------------------------------------------- /keyboard-shortcuts/finish.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Typing Challenge 6 | 7 | 8 |
      9 | 15 |
      16 |
      17 |
      18 |

      Knight Rider

      19 |

      Michael Knight a young loner on a crusade to champion the cause of the innocent.

      20 | Read more + 21 |
      22 |
      23 |

      Robin Hood

      24 |

      Fightin' the system like a true modern day Robin Hood.

      25 | Read more + 26 |
      27 |
      28 |

      Addams Family

      29 |

      They really are a scream the Addams Family.

      30 | Read more + 31 |
      32 |
      33 | 34 | -------------------------------------------------------------------------------- /loops_quiz/countdownLiftoff.js: -------------------------------------------------------------------------------- 1 | /* 2 | * Programming Quiz: Countdown, Liftoff! (4-3) 3 | * 4 | * Using a while loop, print out the countdown output above. 5 | */ 6 | 7 | // your code goes here 8 | var countdown = 60; 9 | 10 | while (countdown >= 0) { 11 | if (countdown === 50) { 12 | console.log("Orbiter transfers from ground to internal power"); 13 | } else if (countdown === 31) { 14 | console.log("Ground launch sequencer is go for auto sequence start"); 15 | } else if (countdown === 16) { 16 | console.log("Activate launch pad sound suppression system"); 17 | } else if (countdown === 10) { 18 | console.log("Activate main engine hydrogen burnoff system"); 19 | } else if (countdown === 6) { 20 | console.log("Main engine start"); 21 | } else if (countdown === 0) { 22 | console.log("Solid rocket booster ignition and liftoff!"); 23 | } else { 24 | console.log("T-" + countdown + " seconds"); 25 | } 26 | countdown -= 1; 27 | } -------------------------------------------------------------------------------- /conditionals_quiz/index.js: -------------------------------------------------------------------------------- 1 | /* 2 | * Programming Quiz: Murder Mystery (3-4) 3 | */ 4 | 5 | // change the value of `room` and `suspect` to test your code 6 | var room = "dining room"; 7 | var suspect = "Mr. Parkes"; 8 | 9 | var weapon = ""; 10 | var solved = false; 11 | 12 | if (room === 'ballroom') { 13 | var weapon = "poison"; 14 | if (suspect === 'Mr. Kalehoff') { 15 | var solved = true; 16 | } 17 | } else if (room === 'gallery') { 18 | var weapon = "trophy"; 19 | if (suspect === 'Ms. Van Cleve') { 20 | var solved = true; 21 | } 22 | } else if (room === 'billiards room') { 23 | var weapon = "pool stick"; 24 | if (suspect === 'Mrs. Sparr') { 25 | var solved = true; 26 | } 27 | } else { 28 | var weapon = "knife"; 29 | room = 'dining room'; 30 | if (suspect === 'Mr. Parkes') { 31 | var solved = true; 32 | } 33 | } 34 | 35 | if (solved) { 36 | console.log(suspect + " did it in the " + room + " with the " + weapon + "!"); 37 | } 38 | -------------------------------------------------------------------------------- /conditionals_quiz/icecream.js: -------------------------------------------------------------------------------- 1 | /* 2 | * Programming Quiz: Ice Cream (3-6) 3 | * 4 | * Write a single if statement that logs out the message: 5 | * 6 | * "I'd like two scoops of __________ ice cream in a __________ with __________." 7 | * 8 | * ...only if: 9 | * - flavor is "vanilla" or "chocolate" 10 | * - vessel is "cone" or "bowl" 11 | * - toppings is "sprinkles" or "peanuts" 12 | * 13 | * We're only testing the if statement and your boolean operators. 14 | * It's okay if the output string doesn't match exactly. 15 | */ 16 | 17 | // change the values of `flavor`, `vessel`, and `toppings` to test your code 18 | var flavor = "strawberry"; 19 | var vessel = "cone"; 20 | var toppings = "cookies"; 21 | 22 | // Add your code here 23 | 24 | if ((flavor === "vanilla" || flavor === "chocolate") && (vessel === "cone" || vessel === "bowl") && (toppings === "sprinkles" || toppings === "peanuts")) { 25 | console.log("I'd like two scoops of " + flavor + " ice cream in a " + vessel + " with " + toppings); 26 | } -------------------------------------------------------------------------------- /HTML_Syntax/insertFig.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 9 | 10 | 11 |
      12 | Redwoods state park 13 | 14 |
      Stout Memorial Grove in Jedediah Smith Redwoods 15 | State Park in 2011 by Chmee2 (Own work) GFDL or CC BY-SA 16 | 3.0, via Wikimedia Commons - 17 | Source 18 |
      19 |
      20 | 21 | 22 | -------------------------------------------------------------------------------- /conditionals_quiz/backToSchool.js: -------------------------------------------------------------------------------- 1 | /* 2 | * Programming Quiz: Back to School (3-9) 3 | */ 4 | 5 | // change the value of `education` to test your code 6 | var education = "no high school diploma"; 7 | 8 | // set the value of this based on a person's education 9 | var salary; 10 | 11 | // your code goes here 12 | 13 | switch (education) { 14 | case "no high school diploma": 15 | salary = "$25,636"; 16 | break; 17 | case "a high school diploma": 18 | salary = "$35,256"; 19 | break; 20 | case "an Associate's degree": 21 | salary = "$41,496"; 22 | break; 23 | case "a Bachelor's degree": 24 | salary = "$59,124"; 25 | break; 26 | case "a Master's degree": 27 | salary = "$69,732"; 28 | break; 29 | case "a Professional degree": 30 | salary = "$89,960"; 31 | break; 32 | case "a Doctoral degree": 33 | salary = "$84,396"; 34 | break; 35 | } 36 | 37 | console.log( 38 | "In 2015, a person with " + education + 39 | " earned an average of " + salary + "/year." 40 | ); 41 | -------------------------------------------------------------------------------- /writing-selectors/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Writing Selectors Quiz 6 | 7 | 8 | 25 | 26 | 27 | 28 | 33 | 34 | 35 | -------------------------------------------------------------------------------- /course-ajax/lesson-1-async-w-xhr/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Make Asynchronous Requests 6 | 7 | 8 | 9 | 10 | 11 |
      12 |

      What are you interested in today?

      13 | 14 |
      15 |
      16 | 17 | 18 | 19 |
      20 |
      21 |
      22 | 23 |
      24 |
      25 |
      26 | 27 | 28 | 29 | 30 | -------------------------------------------------------------------------------- /course-ajax/lesson-3-async-w-fetch/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Make Asynchronous Requests 6 | 7 | 8 | 9 | 10 | 11 |
      12 |

      What are you interested in today?

      13 | 14 |
      15 |
      16 | 17 | 18 | 19 |
      20 |
      21 |
      22 | 23 |
      24 |
      25 |
      26 | 27 | 28 | 29 | 30 | -------------------------------------------------------------------------------- /jQuery-eventListeners/project-pixel-art-maker-starter-master/index.js: -------------------------------------------------------------------------------- 1 | $(document).ready(() => { 2 | $('#sizePicked').submit((event) => { 3 | wipeGrid(); 4 | displayNewGrid(); 5 | event.preventDefault(); 6 | }); 7 | }); 8 | 9 | const displayNewGrid = () => { 10 | let makeColumns = $('#inputHeight').val(); 11 | let makeRows = $('#inputWidth').val(); 12 | let gridBody = ''; 13 | 14 | for (x = 1; x <= makeColumns; x++) { 15 | gridBody += ''; 16 | 17 | for (y = 1; y <= makeRows; y++) { 18 | gridBody += ' '; 19 | } 20 | 21 | gridBody += ''; 22 | } 23 | 24 | $('#pixelCanvas').html(gridBody); 25 | }; 26 | 27 | const wipeGrid = () => { 28 | $('#pixelCanvas').children().remove(); 29 | } 30 | 31 | $('#pixelCanvas').delegate('td', 'click', function(event) { 32 | let currentColor = $('#colorPicked').val(); 33 | 34 | if (event.shiftKey) { 35 | $(this).css('background', 'none'); 36 | } else { 37 | $(this).css('background-color', currentColor); 38 | }; 39 | }); 40 | 41 | -------------------------------------------------------------------------------- /ES6/restParam.js: -------------------------------------------------------------------------------- 1 | /* 2 | * Directions: 3 | * Use the rest parameter to create an average() function 4 | * that calculates the average of an unlimited amount of 5 | * numbers. 6 | * 7 | * TIP: Make sure to test your code with different values. 8 | * For example, 9 | * 10 | * average(2, 6) should return 4 11 | * average(2, 3, 3, 5, 7, 10) should return 5 12 | * average(7, 1432, 12, 13, 100) should return 312.8 13 | * average() should return 0 14 | * 15 | * Programming Quiz: Using the Rest Parameter (1-5) 16 | */ 17 | 18 | // your code goes here 19 | 20 | function average(...nums) { 21 | 22 | let addn = 0; 23 | 24 | for (const num of nums) { 25 | addn += num; 26 | } 27 | 28 | if (average.arguments.length > 0) { 29 | 30 | let total = addn / average.arguments.length; 31 | 32 | return total; 33 | } else { 34 | return 0; 35 | } 36 | } 37 | 38 | console.log(average(2, 6)); 39 | console.log(average(2, 3, 3, 5, 7, 10)); 40 | console.log(average(7, 1432, 12, 13, 100)); 41 | console.log(average()); 42 | 43 | -------------------------------------------------------------------------------- /jQuery-eventListeners/project-pixel-art-maker-starter-master/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Pixel Art Maker! 8 | 9 | 10 | 11 | 12 |

      Lab: Pixel Art Maker

      13 | 14 |

      Choose Grid Size

      15 |
      16 | Grid Height: 17 | 18 | Grid Width: 19 | 20 | 21 |
      22 | 23 |

      Pick A Color

      24 | 25 | 26 |

      Design Canvas

      27 |
      28 | 29 | 30 | 31 | 32 | -------------------------------------------------------------------------------- /DOM_manipulation/changingAttr/app.js: -------------------------------------------------------------------------------- 1 | /* 2 | * For this quiz, set the href of the in the first nav 3 | * item to "#1". 4 | * 5 | * You must use jQuery's attr() method! 6 | */ 7 | 8 | // Start with this variable! 9 | let navList; 10 | 11 | // your code goes here! 12 | navList = $('li:first-child'); 13 | navList.attr("href", "#1"); 14 | 15 | /* ---------------------------------------------------- */ 16 | // Start with this variable! 17 | let navList; 18 | 19 | // your code goes here! 20 | navList = $('a:first'); 21 | navList.attr("href", "#1"); 22 | 23 | /* ---------------------------------------------------- */ 24 | // Start with this variable! 25 | let navList; 26 | 27 | // your code goes here! 28 | navList = $('a'); 29 | navList.attr("href", "#1"); 30 | 31 | /* ---------------------------------------------------- */ 32 | // Start with this variable! 33 | let navList; 34 | let firstItem; 35 | let link; 36 | 37 | // UDACITY's code goes here! 38 | navList = $('.nav-list'); 39 | firstItem = navList.children().first(); 40 | link = firstItem.find('a'); 41 | link.attr("href", "#1"); -------------------------------------------------------------------------------- /course-ajax/lesson-2-async-w-jQuery/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Make Asynchronous Requests 6 | 7 | 8 | 9 | 10 | 11 |
      12 |

      What are you interested in today?

      13 | 14 |
      15 |
      16 | 17 | 18 | 19 |
      20 |
      21 |
      22 | 23 |
      24 |
      25 |
      26 | 27 | 28 | 29 | 30 | 31 | -------------------------------------------------------------------------------- /object_quiz/donutsRevisited.js: -------------------------------------------------------------------------------- 1 | /* 2 | * Programming Quiz: Donuts Revisited (7-6) 3 | * 4 | * Here is an array of donut objects. 5 | * 6 | * let donuts = [ 7 | * { type: "Jelly", cost: 1.22 }, 8 | * { type: "Chocolate", cost: 2.45 }, 9 | * { type: "Cider", cost: 1.59 }, 10 | * { type: "Boston Cream", cost: 5.99 } 11 | * ]; 12 | * 13 | * Directions: 14 | * Use the forEach() method to loop over the array and print out the following donut summaries using console.log. 15 | * 16 | * Jelly donuts cost $1.22 each 17 | * Chocolate donuts cost $2.45 each 18 | * Cider donuts cost $1.59 each 19 | * Boston Cream donuts cost $5.99 each 20 | * 21 | */ 22 | 23 | let donuts = [ 24 | { type: "Jelly", cost: 1.22 }, 25 | { type: "Chocolate", cost: 2.45 }, 26 | { type: "Cider", cost: 1.59 }, 27 | { type: "Boston Cream", cost: 5.99 } 28 | ]; 29 | 30 | // your code goes here 31 | donuts.forEach( (element) => { 32 | console.log(element.type + " donuts cost $" + element.cost + " each"); 33 | console.log(element["type"] + " donuts cost $" + element["cost"] + " each"); 34 | }); 35 | -------------------------------------------------------------------------------- /DOM_manipulation/iteratingEachQuiz/app.js: -------------------------------------------------------------------------------- 1 | /* 2 | * For this quiz, use jQuery's each() method to iterate 3 | * through the

      s, calculate the length of each one, 4 | * and add each length to the end of each

      . 5 | * 6 | * Also, make sure you don't change the text inside each 7 | *

      except to add the length, otherwise your length 8 | * numbers won't be correct! 9 | */ 10 | 11 | // Your code goes here! 12 | $('.article-item > p').each (function(ind) { 13 | let chars = $(this).text().length; 14 | 15 | $(this).append("( " + chars + " characters long)"); 16 | }); 17 | 18 | /* --------------------------------------------------- */ 19 | 20 | // UDACITY's code goes here! 21 | 22 | function numberAdder() { 23 | let text; 24 | let number; 25 | 26 | text = $(this).text(); //this function finds the text 27 | 28 | number = text.length; //this finds the length of the text 29 | 30 | //this changes the element to the same text + ' ' + total length 31 | $(this).text(text + " " + number); 32 | 33 | } 34 | 35 | $('p').each(numberAdder); //this is iterating through all of the p tags -------------------------------------------------------------------------------- /object_quiz/bankAccount1.js: -------------------------------------------------------------------------------- 1 | /* 2 | * Programming Quiz: Bank Accounts 1 (7-3) 3 | * 4 | * Directions: 5 | * Using the given object: 6 | * 7 | * add a printAccountSummary() method that returns the 8 | * following account message: 9 | * 10 | * Welcome! 11 | * Your balance is currently $1000 and your interest 12 | * rate is 1%. 13 | * 14 | */ 15 | 16 | let savingsAccount = { 17 | balance: 1000, 18 | interestRatePercent: 1, 19 | deposit: function addMoney(amount) { 20 | if (amount > 0) { 21 | savingsAccount.balance += amount; 22 | } 23 | }, 24 | withdraw: function removeMoney(amount) { 25 | let verifyBalance = savingsAccount.balance - amount; 26 | if (amount > 0 && verifyBalance >= 0) { 27 | savingsAccount.balance -= amount; 28 | } 29 | }, 30 | // your code goes here 31 | printAccountSummary: function() { 32 | return ("Welcome!" + "\n" + "Your balance is currently $" + savingsAccount.balance + " and your interest rate is " + savingsAccount.interestRatePercent + "%."); 33 | } 34 | }; 35 | 36 | console.log(savingsAccount.printAccountSummary()); 37 | -------------------------------------------------------------------------------- /HTML_Syntax/mockupWebsite.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Web Dev Blog Post 6 | 7 | 8 | 10 |

      Hottest Jobs in 2016 #2: Web Developer

      11 | 12 |

      By Christopher Watkins

      13 | 14 |

      January 19, 2016

      15 | 16 |
      17 | job posting 18 | 19 |
      is a simple reason why Web Developer is such a hot job right now. Put simply, what Web Developers do is create how we experience … the web. If you proceed from the notion that every person who engages with the web would prefer a great experience, then you can say that everyone who engages with the web would prefer that a Web Developer have done a great job. Companies of course know this, so they hire Web Developers to ensure their sites provide great experiences. So, lots of websites and lots of users means lots of demand. LOTS of demand. 🔥
      20 |
      21 | 22 | -------------------------------------------------------------------------------- /mockup-to-article/reflections.txt: -------------------------------------------------------------------------------- 1 | You've learned a lot about web development so far. I want you to take a moment to write down your thoughts about web development here. Answer the following questions: 2 | * What new skills have you learned? 3 | * What has been easy? 4 | * What has been difficult? 5 | * How have you used the problem solving strategies from the first project to overcome challenges so far? 6 | 7 | --- 8 | 9 | Your response goes here! 10 | 11 | * What new skills have you learned?: What the DOCTYPE does to an html document 12 | 13 | * What has been easy? Understanding the challenges so far 14 | 15 | * What has been difficult? 16 | 17 | What CSS property is used to italicize text? font-style 18 | What CSS property is used to underline text? text-decoration 19 | What CSS property is used to uppercase text? text-transform 20 | What CSS property is used to bold text? font-weight 21 | 22 | Which HTML elements match the given CSS statement? 23 | .right { 24 | text-align: right; 25 | } 26 |
      27 |

      28 | 29 | 30 | 31 | 32 | 33 | * How have you used the problem solving strategies from the first project to overcome challenges so far? Yes -------------------------------------------------------------------------------- /arrays_quiz/harryPotter.js: -------------------------------------------------------------------------------- 1 | /* 2 | * Programming Quiz: Quidditch Cup (6-5) 3 | * 4 | * In the Harry Potter novels, children attending the Hogwarts 5 | * School of Witchcraft and Wizardry belong to one of four houses: 6 | * Gryffindor, Hufflepuff, Ravenclaw, or Slytherin. Each year, the 7 | * houses assemble a Quidditch team of seven players to compete for 8 | * the coveted Quidditch Cup. 9 | * 10 | * Consider the following array. 11 | * 12 | * var team = ["Oliver Wood", "Angelina Johnson", "Katie Bell", 13 | * "Alicia Spinnet", "George Weasley", "Fred Weasley", 14 | * "Harry Potter"]; 15 | * 16 | * Directions: 17 | * Create a function called hasEnoughPlayers() that takes the team 18 | * array as an argument and returns true or false depending on if 19 | * the array has at least seven players. 20 | * 21 | */ 22 | 23 | // your code goes here 24 | 25 | 26 | function hasEnoughPlayers(teamArr) { 27 | let verify = (teamArr.length >= 7) ? true : false; 28 | 29 | return verify; 30 | } 31 | 32 | 33 | let team = ["Oliver Wood", "Angelina Johnson", "Katie Bell", "Alicia Spinnet", "George Weasley", "Fred Weasley", "Harry Potter"]; 34 | 35 | console.log(hasEnoughPlayers(team)); 36 | -------------------------------------------------------------------------------- /arrays_quiz/joinTheCrew.js: -------------------------------------------------------------------------------- 1 | 2 | /* 3 | * Programming Quiz: Joining the Crew (6-6) 4 | * 5 | * Directions: 6 | * In an earlier exercise, you created a crew array to represent Mal’s crew 7 | * from the hit show Firefly. 8 | * 9 | * let captain = "Mal"; 10 | * let second = "Zoe"; 11 | * let pilot = "Wash"; 12 | * let companion = "Inara"; 13 | * let mercenary = "Jayne"; 14 | * let mechanic = "Kaylee"; 15 | * 16 | * let crew = [captain, second, pilot, companion, mercenary, mechanic]; 17 | * Later in the show, Mal takes on three new crew members named "Simon", 18 | * "River", and "Book". Use the push() method to add the three new crew 19 | * members to the crew array. 20 | * 21 | * let doctor = "Simon"; 22 | * let sister = "River"; 23 | * let shepherd = "Book"; 24 | * 25 | */ 26 | 27 | let captain = "Mal"; 28 | let second = "Zoe"; 29 | let pilot = "Wash"; 30 | let companion = "Inara"; 31 | let mercenary = "Jayne"; 32 | let mechanic = "Kaylee"; 33 | 34 | let crew = [captain, second, pilot, companion, mercenary, mechanic]; 35 | 36 | let doctor = "Simon"; 37 | let sister = "River"; 38 | let shepherd = "Book"; 39 | 40 | // your code goes here 41 | 42 | crew.push(doctor, sister, shepherd); 43 | 44 | console.log(crew); -------------------------------------------------------------------------------- /arrays_quiz/buildingCrew.js: -------------------------------------------------------------------------------- 1 | /* 2 | * Programming Quiz: Building the Crew (6-2) 3 | * 4 | * The space western TV drama Firefly premiered in the United States on 5 | * September 20, 2002. Although the show only featured fourteen episodes 6 | * and was canceled during its first season, it continues to remain popular 7 | * today with a growing fan base. In the show, the captain Mal, played by 8 | * Nathan Fillion, leads a crew of renegades on the spaceship Serenity. 9 | * 10 | * Directions: 11 | * Create an array called crew to organize the Serenity’s crew and set it 12 | * equal to the variables below . You don't need to type out the actual 13 | * strings, just use the provided variables. 14 | * 15 | * let captain = "Mal"; 16 | * let second = "Zoe"; 17 | * let pilot = "Wash"; 18 | * let companion = "Inara"; 19 | * let mercenary = "Jayne"; 20 | * let mechanic = "Kaylee"; 21 | * Then, print the crew array to the console. 22 | */ 23 | 24 | let captain = "Mal"; 25 | let second = "Zoe"; 26 | let pilot = "Wash"; 27 | let companion = "Inara"; 28 | let mercenary = "Jayne"; 29 | let mechanic = "Kaylee"; 30 | 31 | // your code goes here 32 | 33 | let crew = [captain, second, pilot, companion, mercenary, mechanic]; 34 | 35 | console.log(crew); 36 | -------------------------------------------------------------------------------- /arrays_quiz/anotherTypeLoop.js: -------------------------------------------------------------------------------- 1 | /* 2 | * Programming Quiz: Another Type of Loop (6-8) 3 | * 4 | * Directions: 5 | * Use the array's forEach() method to loop over the following array and add 6 | * 100 to each of the values if the value is divisible by 3. 7 | * 8 | * let test = [12, 929, 11, 3, 199, 1000, 7, 1, 24, 37, 4, 19, 300, 3775, 9 | * 299, 36, 209, 148, 169, 299, 6, 109, 20, 58, 139, 59, 3, 1, 139]; 10 | * Remember that the "Test Run" button will display any logged content, so 11 | * feel free to use console.log() to test your code. 12 | * 13 | * Use the existing `test` variable and write a `forEach` loop 14 | * that adds 100 to each number that is divisible by 3. 15 | * 16 | * Things to note: 17 | * - you must use an `if` statement to verify code is divisible by 3 18 | * - you can use `console.log` to verify the `test` variable when you're 19 | * finished looping 20 | */ 21 | 22 | let test = [12, 929, 11, 3, 199, 1000, 7, 1, 24, 37, 4, 23 | 19, 300, 3775, 299, 36, 209, 148, 169, 299, 24 | 6, 109, 20, 58, 139, 59, 3, 1, 139 25 | ]; 26 | 27 | // Write your code here 28 | 29 | test.forEach(function (element, indx, array) { 30 | if (element % 3 === 0) { array[indx] = element + 100;} 31 | }); 32 | 33 | console.log(test); -------------------------------------------------------------------------------- /keyboard-shortcuts/start.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Typing Challenge 10 | 11 | 12 |
      13 | 20 |
      21 |
      22 | 23 |
      24 |

      Knight Rider

      25 |

      Michael Knight a young loner on a crusade to champion the cause of the innocent.

      26 | Read more + 27 |
      28 | 29 | 30 |
      31 |

      Robin Hood

      32 |

      Fightin' the system like a true modern day Robin Hood.

      33 | Read more + 34 |
      35 | 36 |
      37 |

      Addams Family

      38 |

      They really are a scream the Addams Family.

      39 | Read more + 40 |
      41 |
      42 | 43 | 44 | -------------------------------------------------------------------------------- /loops_quiz/bottlesOfJuice.js: -------------------------------------------------------------------------------- 1 | /* 2 | * Programming Quiz: 99 Bottles of Juice (4-2) 3 | * 4 | * Use the following `while` loop to write out the song "99 bottles of juice". 5 | * Log the your lyrics to the console. 6 | * 7 | * Note 8 | * - Each line of the lyrics needs to be logged to the same line. 9 | * - The pluralization of the word "bottle" changes from "2 bottles" to "1 bottle" to "0 bottles". 10 | */ 11 | 12 | var num = 99; 13 | 14 | while (num >= 1 /* your stop condition goes here */) { 15 | // check value of num 16 | if (num > 2) { 17 | // print lyrics using num 18 | console.log(num + " bottles of juice on the wall! " + num + " bottles of juice! Take one down, pass it around... " + (num - 1) + " bottles of juice on the wall!"); 19 | } else if (num === 2) { 20 | // don't forget to check pluralization on the last line! 21 | console.log(num + " bottles of juice on the wall! " + num + " bottles of juice! Take one down, pass it around... " + (num - 1) + " bottle of juice on the wall!"); 22 | } else { 23 | console.log(num + " bottle of juice on the wall! " + num + " bottle of juice! Take one down, pass it around... " + (num - 1) + " bottles of juice on the wall!"); 24 | } 25 | // decrement num 26 | num --; 27 | } -------------------------------------------------------------------------------- /conditionals_quiz/whatWear.js: -------------------------------------------------------------------------------- 1 | /* 2 | * Programming Quiz: What do I Wear? (3-7) 3 | */ 4 | 5 | // change the values of `shirtWidth`, `shirtLength`, and `shirtSleeve` to test your code 6 | var shirtWidth = 23; 7 | var shirtLength = 30; 8 | var shirtSleeve = 8.71; 9 | 10 | // your code goes here 11 | if((shirtWidth >= 18 && shirtWidth < 20) && (shirtLength >= 28 && shirtLength < 29) && (shirtSleeve >= 8.13 && shirtSleeve < 8.38)) { 12 | console.log("S"); 13 | } else if((shirtWidth >= 20 && shirtWidth < 22) && (shirtLength >= 29 && shirtLength < 30) && (shirtSleeve >= 8.38 && shirtSleeve < 8.63)) { 14 | console.log("M"); 15 | } else if((shirtWidth >= 22 && shirtWidth < 24) && (shirtLength >= 30 && shirtLength < 31) && (shirtSleeve >= 8.63 && shirtSleeve < 8.88)) { 16 | console.log("L"); 17 | } else if((shirtWidth >= 24 && shirtWidth < 26) && (shirtLength >= 31 && shirtLength < 33) && (shirtSleeve >= 8.88 && shirtSleeve < 9.63)) { 18 | console.log("XL"); 19 | } else if((shirtWidth >= 26 && shirtWidth < 28) && (shirtLength >= 33 && shirtLength < 34) && (shirtSleeve >= 9.63 && shirtSleeve < 10.13)) { 20 | console.log("2XL"); 21 | } else if((shirtWidth >= 28) && (shirtLength >= 34) && (shirtSleeve >= 10.13)) { 22 | console.log("3XL"); 23 | } else { 24 | console.log("N/A"); 25 | } -------------------------------------------------------------------------------- /web-dev-blog/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Web Dev Blog Post 7 | 8 | 9 | 10 | 11 | 12 |

      Hottest Jobs in 2016 #2: Web Developer

      13 | 14 |

      By Christopher Watkins

      15 | 16 |

      January 19, 2016

      17 | 18 | 19 |
      20 |

      There is a simple reason why Web Developer is such a hot job right now. Put simply, what Web Developers do is create how we experience … the web. If you proceed from the notion that every person who engages with the web would prefer a great experience, 21 | then you can say that everyone who engages with the web would prefer that a Web Developer have done a great job. Companies of course know this, so they hire Web Developers to ensure their sites provide great experiences. So, lots of websites 22 | and lots of users means lots of demand. LOTS of demand. 🔥 23 |

      24 |
      25 | 26 | 27 | -------------------------------------------------------------------------------- /object_quiz/facebookFriends.js: -------------------------------------------------------------------------------- 1 | /* 2 | * Programming Quiz: Facebook Friends (7-5) 3 | * 4 | * Directions: 5 | * Create an object called facebookProfile. The object should have 3 properties: 6 | * 7 | * your name 8 | * the number of friends you have, and 9 | * an array of messages you've posted (as strings) 10 | * The object should also have 4 methods: 11 | * 12 | * postMessage(message) - adds a new message string to the array 13 | * deleteMessage(index) - removes the message corresponding to the index provided 14 | * addFriend() - increases the friend count by 1 15 | * removeFriend() - decreases the friend count by 1 16 | * 17 | */ 18 | 19 | // your code goes here 20 | 21 | let facebookProfile = { 22 | name: "Julie", 23 | numberOfFriends: 99, 24 | messages: ["Hi there!", "No todos son malos", "Happy Birthday!", "What's up!"], 25 | postMessage: function(message) { 26 | message = "Welcome to facebook"; 27 | facebookProfile["messages"].push(message); 28 | }, 29 | deleteMessage: function(index) { 30 | if(index >= 0 && index < facebookProfile["messages"].length) { 31 | facebookProfile["messages"].splice(index, 1); 32 | } 33 | }, 34 | addFriend: function() { 35 | ++facebookProfile["numberOfFriends"] 36 | }, 37 | removeFriend: function() { 38 | --facebookProfile["numberOfFriends"] 39 | } 40 | }; -------------------------------------------------------------------------------- /object_quiz/umbrella.js: -------------------------------------------------------------------------------- 1 | /* 2 | * Programming Quiz: Umbrella (7-1) 3 | * 4 | * Directions: 5 | * Using the umbrella example from the previous video, see if you can follow the 6 | * example open() method and create the close() method. It's alright if you have 7 | * trouble at first! We'll go into more detail later in this lesson. 8 | * 9 | * TIP: Remember to put all of your object's properties and methods inside curly 10 | * braces: var myObject = { greeting: "hello", name: "Julia" };. Also, remember that 11 | * an object is just another data type. Just like how you would put a semicolon after 12 | * a string variable declaration var myString = "hello";, don't forget to put a 13 | * semi-colon at the end of your object's declaration. 14 | * 15 | * 16 | */ 17 | 18 | var umbrella = { 19 | color: "pink", 20 | isOpen: true, 21 | open: function() { 22 | if (umbrella.isOpen === true) { 23 | return "The umbrella is already opened!"; 24 | } else { 25 | umbrella.isOpen = true; 26 | return "Julia opens the umbrella!"; 27 | } 28 | }, 29 | // your code goes here 30 | close: function() { 31 | if (umbrella.isOpen === false) { 32 | return "The umbrella is already closed!"; 33 | } else { 34 | umbrella.isOpen = false; 35 | return "Julia closes the umbrella!"; 36 | } 37 | } 38 | }; 39 | -------------------------------------------------------------------------------- /link-to-a-stylesheet/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 11 | 12 | 13 | 14 | Link to a Stylesheet Quiz 15 | 16 | 17 | 18 | 19 | 20 | 21 |
      22 |
      23 |

      My Portfolio

      24 |
      25 | 26 | This specific design features a 3D floating mountain above a weathered, rugged font to insinuate a winter outdoor theme. This logo would be a perfect fit for an outdoor product company or ski resort. 27 |
      28 |
      29 | 30 | This specific design features a beach-themed fading sunset with palm trees. The fading vertical bars in the sun resemble warmth as it fades away into the sunset. 31 |
      32 |
      33 |
      34 | 35 | 36 | -------------------------------------------------------------------------------- /fend-animal-trading-cards-master/trading-card/card.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Animal Trading Cards 6 | 7 | 8 | 9 |
      10 |
      11 |
      12 |

      Princess

      13 |
      14 | Princess 15 |
      16 |
      17 |
      18 |

      Princess's favorite hobby was to spend time in the sun and lay down in the warm pavement.

      19 |
        20 |
      • Treats: Baked Cookies
        • 21 |
      • Weight: 10lbs - 12lbs
        • 22 |
      • Exercise: Chasing after lizards and squirrels
        • 23 |
      • DOB & Place: 09/05/2001 Bogota (Colombia)
        • 24 |
      25 |

      Princess became a citizen of the US in 2007 when she came with my mom and adopted my dad as hers as well. She was loved by anyone and everyone who knew her, and lived a happy life to her last minute (RIP my baby 02/10/18).

      26 | 27 |

      With love,

      28 |

      Julie Hutchinson

      29 |
      30 |
      31 |
      32 | 33 | 34 | 35 | -------------------------------------------------------------------------------- /arrays_quiz/nestedLoops.js: -------------------------------------------------------------------------------- 1 | /* 2 | * Programming Quiz: Nested Numbers (6-10) 3 | * 4 | * Directions: 5 | * Use a nested for loop to take the numbers array below and replace all of 6 | * the values that are divisible by 2 (even numbers) with the string "even" 7 | * and all other numbers with the string "odd". 8 | * 9 | * - The `numbers` variable is an array of arrays. 10 | * - Use a nested `for` loop to cycle through `numbers`. 11 | * - Convert each even number to the string "even" 12 | * - Convert each odd number to the string "odd" 13 | */ 14 | 15 | let numbers = [ 16 | [243, 12, 23, 12, 45, 45, 78, 66, 223, 3], 17 | [34, 2, 1, 553, 23, 4, 66, 23, 4, 55], 18 | [67, 56, 45, 553, 44, 55, 5, 428, 452, 3], 19 | [12, 31, 55, 445, 79, 44, 674, 224, 4, 21], 20 | [4, 2, 3, 52, 13, 51, 44, 1, 67, 5], 21 | [5, 65, 4, 5, 5, 6, 5, 43, 23, 4424], 22 | [74, 532, 6, 7, 35, 17, 89, 43, 43, 66], 23 | [53, 6, 89, 10, 23, 52, 111, 44, 109, 80], 24 | [67, 6, 53, 537, 2, 168, 16, 2, 1, 8], 25 | [76, 7, 9, 6, 3, 73, 77, 100, 56, 100] 26 | ]; 27 | 28 | // your code goes here 29 | 30 | for(let fistCycle = 0 ; fistCycle < numbers.length ; fistCycle++) { 31 | for(let innerArr = 0 ; innerArr < numbers[fistCycle].length ; innerArr++) { 32 | if (numbers[fistCycle][innerArr] % 2 === 0) { 33 | numbers[fistCycle][innerArr] = "even"; 34 | } else { 35 | numbers[fistCycle][innerArr] = "odd"; 36 | } 37 | } 38 | } 39 | 40 | console.log(numbers); -------------------------------------------------------------------------------- /arrays_quiz/gotBills.js: -------------------------------------------------------------------------------- 1 | /* 2 | * Programming Quiz: I Got Bills (6-9) 3 | * 4 | * Directions: 5 | * Use the map() method to take the array of bill amounts shown below, and create a second array of 6 | * numbers called totals that shows the bill amounts with a 15% tip added. 7 | * 8 | * let bills = [50.23, 19.12, 34.01, 100.11, 12.15, 9.90, 29.11, 12.99, 10.00, 99.22, 102.20, 9 | * 100.10, 6.77, 2.22]; 10 | * 11 | * Print out the new totals array using console.log. 12 | * 13 | * TIP: Check out the toFixed() method for numbers to help with rounding the values to a maximum of 14 | * 2 decimal places. Note, that the method returns a string to maintain the "fixed" format of the 15 | * number. So, if you want to convert the string back to a number, you can cast it or convert it 16 | * back to a number: 17 | * 18 | * Number("1"); 19 | * >>> 1 20 | * 21 | * Use the .map() method to take the bills array below and create a second array 22 | * of numbers called totals. The totals array should contains each amount from the 23 | * bills array but with a 15% tip added. Log the totals array to the console. 24 | * 25 | * For example, the first two entries in the totals array would be: 26 | * 27 | * [57.76, 21.99, ... ] 28 | * 29 | * Things to note: 30 | * - each entry in the totals array must be a number 31 | * - each number must have an accuracy of two decimal points 32 | */ 33 | 34 | let bills = [50.23, 19.12, 34.01, 35 | 100.11, 12.15, 9.90, 29.11, 12.99, 36 | 10.00, 99.22, 102.20, 100.10, 6.77, 2.22 37 | ]; 38 | 39 | let tippedBills = bills.map(function(amountBilled) { 40 | let tipPercent = amountBilled*0.15; 41 | let totalTipped = amountBilled + tipPercent; 42 | 43 | return Number(totalTipped.toFixed(2)); 44 | }); 45 | 46 | console.log(tippedBills); -------------------------------------------------------------------------------- /figures/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Figures Quiz 7 | 8 | 9 | 10 | 11 | 12 | 20 | 21 | 22 | Stout Memorial Grove in Jedediah Smith Redwoods State Park 23 |

      Stout Memorial Grove in Jedediah Smith Redwoods State Park in 2011 by Chmee2 (Own work) GFDL or CC BY-SA 3.0, via Wikimedia Commons - 24 | Source 25 |

      26 | 27 | 28 |
      29 | Stout Memorial Grove in Jedediah Smith Redwoods State Park 30 |
      Stout Memorial Grove in Jedediah Smith Redwoods State Park in 2011 by Chmee2 (Own work) GFDL or CC BY-SA 3.0, via Wikimedia Commons - 31 | Source 32 |
      33 |
      34 | 35 | 36 | 37 | -------------------------------------------------------------------------------- /fend-project-memory-game/js/app.js: -------------------------------------------------------------------------------- 1 | /* 2 | * Create a list that holds all of your cards 3 | */ 4 | 5 | 6 | /* 7 | * Display the cards on the page 8 | * - shuffle the list of cards using the provided "shuffle" method below 9 | * - loop through each card and create its HTML 10 | * - add each card's HTML to the page 11 | */ 12 | 13 | // Shuffle function from http://stackoverflow.com/a/2450976 14 | function shuffle(array) { 15 | var currentIndex = array.length, temporaryValue, randomIndex; 16 | 17 | while (currentIndex !== 0) { 18 | randomIndex = Math.floor(Math.random() * currentIndex); 19 | currentIndex -= 1; 20 | temporaryValue = array[currentIndex]; 21 | array[currentIndex] = array[randomIndex]; 22 | array[randomIndex] = temporaryValue; 23 | } 24 | 25 | return array; 26 | } 27 | 28 | 29 | /* 30 | * set up the event listener for a card. If a card is clicked: 31 | * - display the card's symbol (put this functionality in another function that you call from this one) 32 | * - add the card to a *list* of "open" cards (put this functionality in another function that you call from this one) 33 | * - if the list already has another card, check to see if the two cards match 34 | * + if the cards do match, lock the cards in the open position (put this functionality in another function that you call from this one) 35 | * + if the cards do not match, remove the cards from the list and hide the card's symbol (put this functionality in another function that you call from this one) 36 | * + increment the move counter and display it on the page (put this functionality in another function that you call from this one) 37 | * + if all cards have matched, display a message with the final score (put this functionality in another function that you call from this one) 38 | */ 39 | -------------------------------------------------------------------------------- /loops_quiz/factorial.js: -------------------------------------------------------------------------------- 1 | /* 2 | * Programming Quiz: Factorials (4-7) 3 | * 4 | * Directions: 5 | * Write a for loop that prints out the factorial of the number 12: 6 | * 7 | * A factorial is calculated by multiplying a number by all the numbers below it. For instance, 3! or "3 factorial" is 3 * 2 * 1 = 6 8 | * 9 | * 3! = 3 * 2 * 1 = 6 3!=3∗2∗1=6 10 | * 4! = 4 * 3 * 2 * 1 = 24 4!=4∗3∗2∗1=24 11 | * 5! = 5 * 4 * 3 * 2 * 1 = 120 5!=5∗4∗3∗2∗1=120 12 | * 13 | */ 14 | 15 | // your code goes here 16 | let factorialIterative = (n) => { 17 | // one liner 18 | // return reduce((x, y) => { x * y, range(1, n + 1) }); 19 | 20 | // check for edge case because the factorial of 0 is 1 21 | if (n == 0) { return 1 } 22 | 23 | //set counter 24 | let counter = n - 1; 25 | 26 | //set result 27 | let finalFactResult = n; 28 | 29 | //loop until all of the factorial numbers have been calculated 30 | while (counter > 0) { 31 | //multiply result by the next factorial number 32 | finalFactResult *= counter; 33 | //set next factorial number 34 | counter -= 1; 35 | } 36 | 37 | console.log(finalFactResult); 38 | }; factorialIterative (8); 39 | 40 | /* ------------------------------------------------------------------- */ 41 | 42 | let factorialForLoop = (n) => { 43 | // one liner 44 | // return reduce((x, y) => { x * y, range(1, n + 1) }); 45 | 46 | // check for edge case because the factorial of 0 is 1 47 | if (n == 0) { return 1 } 48 | 49 | //set result 50 | let finalFactResult = n; 51 | 52 | //loop until all of the factorial numbers have been calculated 53 | for (var counter = n - 1 ; counter > 0 ; counter --) { 54 | //multiply result by the next factorial number 55 | finalFactResult *= counter; 56 | } 57 | 58 | console.log(finalFactResult); 59 | }; factorialForLoop (5); -------------------------------------------------------------------------------- /course-ajax/practice/tth-exercise/ajaxTTH.js: -------------------------------------------------------------------------------- 1 | /* 2 | * Add the code to open the AJAX request using the 3 | * GET method and pointing to the 'footer.html' file. 4 | * Then, send the ajax request. 5 | * 6 | * You can break the AJAX programming process into four steps. 7 | * First, create an XMLHTTP Request object. 8 | * This step tells the web browser to get ready. 9 | * The web browser needs to create an object that has 10 | * all the methods you'll need to send and receive data. 11 | * Two, define a callback function. 12 | * This is the programming you want to run when the server returns its response. 13 | * The callback is where you process the returned 14 | * data and update the HTML on the page. 15 | * Third, open a request. 16 | * you give the browser two pieces of information here, 17 | * the method the browser will use 18 | * to send the request, usually either get or 19 | * post, and the URL where the request is sent. 20 | * Four, send the request. 21 | * The last step is finally sending off the request. 22 | * The previous three steps gave the web browser all the information it 23 | * needs so we can finally send off the request to the web server. 24 | */ 25 | 26 | let request = new XMLHttpRequest(); 27 | 28 | request.onreadystatechange = () => { 29 | if (request.readyState === 4) { 30 | let content = document.getElementById("footer"); 31 | 32 | content.innerHTML = request.responseText; 33 | } 34 | } 35 | 36 | request.open('GET', "footer.html"); 37 | request.send(); 38 | 39 | 40 | // ---------------------------------------- 41 | 42 | const xhr = new XMLHttpRequest(); 43 | xhr.onreadystatechange = () => { 44 | if (xhr.readyState === 4 && xhr.status === 200) { 45 | const sidebar = document.getElementById('sidebar'); 46 | sidebar.innerHTML = xhr.responseText; 47 | } 48 | }; 49 | xhr.open('GET', 'sidebar.html'); 50 | xhr.send(); 51 | 52 | 53 | -------------------------------------------------------------------------------- /practice-keyboard-shortcuts/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Keyboard Shortcuts - Practice 6 | 7 | 12 | 13 | 14 |

      HTML Ipsum Presents

      15 | 16 |

      Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis.

      17 | 18 |

      Header Level 2

      19 | 20 |
        21 |
      1. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
        2. 22 |
      2. Aliquam tincidunt mauris eu risus.
        3. 23 |
      24 | 25 |

      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.

      26 | 27 |

      Header Level 3

      28 | 29 |
        30 |
      • Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
        • 31 |
      • Aliquam tincidunt mauris eu risus.
        • 32 |
      33 | 34 | 
      
35 |     #header h1 a { 
36 |         display: block; 
37 |         width: 300px; 
38 |         height: 80px; 
39 |     }
40 |
      41 | 42 | -------------------------------------------------------------------------------- /course-ajax/.stylelintrc: -------------------------------------------------------------------------------- 1 | { 2 | "rules": { 3 | "block-closing-brace-newline-after": "always", 4 | "block-closing-brace-newline-before": "always-multi-line", 5 | "block-no-empty": true, 6 | "block-opening-brace-newline-after": "always-multi-line", 7 | "block-opening-brace-space-before": "always", 8 | "color-hex-case": "lower", 9 | "color-hex-length": "long", 10 | "color-no-invalid-hex": true, 11 | "comment-empty-line-before": "always", 12 | "comment-whitespace-inside": "always", 13 | "declaration-block-no-shorthand-property-overrides": true, 14 | "declaration-block-semicolon-newline-after": "always", 15 | "declaration-block-semicolon-space-before": "never", 16 | "declaration-block-trailing-semicolon": "always", 17 | "declaration-colon-space-after": "always", 18 | "declaration-colon-space-before": "never", 19 | "declaration-no-important": true, 20 | "function-calc-no-unspaced-operator": true, 21 | "function-comma-space-after": "always", 22 | "function-comma-space-before": "never", 23 | "function-parentheses-space-inside": "never", 24 | "function-whitespace-after": "always", 25 | "indentation": 4, 26 | "media-feature-colon-space-after": "always", 27 | "media-feature-colon-space-before": "never", 28 | "media-feature-name-no-vendor-prefix": true, 29 | "media-feature-range-operator-space-after": "always", 30 | "media-feature-range-operator-space-before": "always", 31 | "media-query-list-comma-space-after": "always-single-line", 32 | "media-query-list-comma-space-before": "never", 33 | "no-eol-whitespace": true, 34 | "number-leading-zero": "always", 35 | "number-no-trailing-zeros": true, 36 | "length-zero-no-unit": true, 37 | "rule-non-nested-empty-line-before": ["always", { "except": ["after-single-line-comment"] }], 38 | "selector-combinator-space-after": "always", 39 | "selector-combinator-space-before": "always", 40 | "selector-list-comma-newline-after": "always", 41 | "selector-list-comma-space-before": "never", 42 | "selector-pseudo-element-colon-notation": "double", 43 | "value-list-comma-space-after": "always", 44 | "value-list-comma-space-before": "never" 45 | } 46 | } 47 | -------------------------------------------------------------------------------- /fend-project-memory-game/css/app.css: -------------------------------------------------------------------------------- 1 | html { 2 | box-sizing: border-box; 3 | } 4 | 5 | *, 6 | *::before, 7 | *::after { 8 | box-sizing: inherit; 9 | } 10 | 11 | html, 12 | body { 13 | width: 100%; 14 | height: 100%; 15 | margin: 0; 16 | padding: 0; 17 | } 18 | 19 | body { 20 | background: #ffffff url('../img/geometry2.png'); /* Background pattern from Subtle Patterns */ 21 | font-family: 'Coda', cursive; 22 | } 23 | 24 | .container { 25 | display: flex; 26 | justify-content: center; 27 | align-items: center; 28 | flex-direction: column; 29 | } 30 | 31 | h1 { 32 | font-family: 'Open Sans', sans-serif; 33 | font-weight: 300; 34 | } 35 | 36 | /* 37 | * Styles for the deck of cards 38 | */ 39 | 40 | .deck { 41 | width: 660px; 42 | min-height: 680px; 43 | background: linear-gradient(160deg, #02ccba 0%, #aa7ecd 100%); 44 | padding: 32px; 45 | border-radius: 10px; 46 | box-shadow: 12px 15px 20px 0 rgba(46, 61, 73, 0.5); 47 | display: flex; 48 | flex-wrap: wrap; 49 | justify-content: space-between; 50 | align-items: center; 51 | margin: 0 0 3em; 52 | } 53 | 54 | .deck .card { 55 | height: 125px; 56 | width: 125px; 57 | background: #2e3d49; 58 | font-size: 0; 59 | color: #ffffff; 60 | border-radius: 8px; 61 | cursor: pointer; 62 | display: flex; 63 | justify-content: center; 64 | align-items: center; 65 | box-shadow: 5px 2px 20px 0 rgba(46, 61, 73, 0.5); 66 | } 67 | 68 | .deck .card.open { 69 | transform: rotateY(0); 70 | background: #02b3e4; 71 | cursor: default; 72 | } 73 | 74 | .deck .card.show { 75 | font-size: 33px; 76 | } 77 | 78 | .deck .card.match { 79 | cursor: default; 80 | background: #02ccba; 81 | font-size: 33px; 82 | } 83 | 84 | /* 85 | * Styles for the Score Panel 86 | */ 87 | 88 | .score-panel { 89 | text-align: left; 90 | width: 345px; 91 | margin-bottom: 10px; 92 | } 93 | 94 | .score-panel .stars { 95 | margin: 0; 96 | padding: 0; 97 | display: inline-block; 98 | margin: 0 5px 0 0; 99 | } 100 | 101 | .score-panel .stars li { 102 | list-style: none; 103 | display: inline-block; 104 | } 105 | 106 | .score-panel .restart { 107 | float: right; 108 | cursor: pointer; 109 | } 110 | -------------------------------------------------------------------------------- /udacity-site-header/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Udacity Site Header 6 | 7 | 8 | 59 | 60 | 61 |
      62 |
      63 |
      64 |
      65 | 66 | 67 | 68 |
      69 |
      70 |
        71 |
      • Nanodegree
        • 72 |
      • Catalog
        • 73 |
      • Classroom
        • 74 |
      75 |
      76 |
      77 |
      78 |
      79 |
      80 |

      Ewww. The header looks weird.

      81 | 82 |

      83 | You need to use Developer Tools to edit this website and pass this quiz. Make sure you read the criteria carefully because they contain the exact CSS properties that you need to change! 84 |

      85 |
      86 | 87 | 88 | -------------------------------------------------------------------------------- /todo-list/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Using Attributes Quiz 10 | 42 | 43 | 44 | 45 |
      46 |

      My To-Do List

      47 |

      Chores

      48 |
        49 |
      • load the diswasher
        • 50 |
      • vacuum living room
        • 51 |
      • take out garbage
        • 52 |
      • sweep the garage
        • 53 |
      54 |

      Homework

      55 |
        56 |
      • brainstorm ideas for Science project
        • 57 |
      • finish Calculus 2 problems
        • 58 |
      • study for Programming midterm :P
        • 59 |
      • finish Project 0 on Udacity FEND
        • 60 |
      • find sources for Biology research paper
        • 61 |
      • read first two chapters of The Art of War
        • 62 |
      63 |

      Party

      64 |
        65 |
      • send out invitations
        • 66 |
      • reserve party room at restaurant
        • 67 |
      • order the cake!
        • 68 |
      69 |
      70 | 71 | 72 | -------------------------------------------------------------------------------- /media-queries/deconstructing_flexbox.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | Deconstructing Flexbox 11 | 91 | 92 | 93 | 94 | 95 | 96 |
      97 | 98 |
      99 |
      100 |
      101 |
      102 |
      103 |
      104 |
      105 | 106 |
      107 | 108 | 109 | -------------------------------------------------------------------------------- /course-ajax/.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "eslint:recommended", 3 | "parserOptions": { 4 | "ecmaVersion": 6 5 | }, 6 | "env": { 7 | "browser": true 8 | }, 9 | "rules": { 10 | "curly": [ 11 | "error", 12 | "all" 13 | ], 14 | "eqeqeq": [ 15 | "error", 16 | "allow-null" 17 | ], 18 | "no-alert": "error", 19 | "no-caller": "error", 20 | "no-console": "off", 21 | "no-empty-function": "error", 22 | "no-eval": "error", 23 | "no-multi-spaces": "error", 24 | "no-multi-str": "error", 25 | "no-global-assign": "error", 26 | "no-new": "error", 27 | "no-new-func": "error", 28 | "no-new-wrappers": "error", 29 | "no-return-assign": "error", 30 | "no-script-url": "error", 31 | "no-sequences": "error", 32 | "no-unused-expressions": "error", 33 | "no-with": "error", 34 | "yoda": "error", 35 | "array-bracket-spacing": [ 36 | "error", 37 | "never" 38 | ], 39 | "brace-style": [ 40 | "error", 41 | "1tbs" 42 | ], 43 | "no-shadow": "error", 44 | "no-shadow-restricted-names": "error", 45 | "no-undef-init": "error", 46 | "camelcase": "error", 47 | "comma-spacing": "error", 48 | "eol-last": "error", 49 | "quotes": [ 50 | "error", 51 | "single", 52 | { 53 | "avoidEscape": true, 54 | "allowTemplateLiterals": true 55 | } 56 | ], 57 | "indent": [ 58 | "error", 59 | 4, 60 | { 61 | "SwitchCase": 1 62 | } 63 | ], 64 | "key-spacing": [ 65 | "error", 66 | { 67 | "beforeColon": false, 68 | "afterColon": true 69 | } 70 | ], 71 | "keyword-spacing": "error", 72 | "new-cap": "error", 73 | "new-parens": "error", 74 | "no-array-constructor": "error", 75 | "no-multiple-empty-lines": [ 76 | "error", 77 | { 78 | "max": 2 79 | } 80 | ], 81 | "no-new-object": "error", 82 | "func-call-spacing": [ 83 | "error", 84 | "never" 85 | ], 86 | "no-trailing-spaces": "error", 87 | "semi": [ 88 | "error", 89 | "always" 90 | ], 91 | "semi-spacing": [ 92 | "error", 93 | { 94 | "before": false, 95 | "after": true 96 | } 97 | ], 98 | "space-before-blocks": [ 99 | "error", 100 | "always" 101 | ], 102 | "space-before-function-paren": [ 103 | "error", 104 | { 105 | "anonymous": "always", 106 | "named": "never" 107 | } 108 | ], 109 | "space-in-parens": [ 110 | "error", 111 | "never" 112 | ], 113 | "space-infix-ops": "error" 114 | } 115 | } 116 | -------------------------------------------------------------------------------- /patterns/pattern-mostly-fluid-quiz-blankcss.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Mostly Fluid - Quiz 5 | 6 | 7 | 59 | 111 | 112 | 113 |
      114 |
      115 |
      116 |
      117 |
      118 |
      119 |
      120 | 121 | 122 | -------------------------------------------------------------------------------- /fend-project-memory-game/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Matching Game 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 |
      14 |
      15 |

      Matching Game

      16 |
      17 | 18 |
      19 |
        20 |
        • 21 |
        • 22 |
        • 23 |
      24 | 25 | 3 Moves 26 | 27 |
      28 | 29 |
      30 |
      31 | 32 |
        33 |
      • 34 | 35 |
        • 36 |
      • 37 | 38 |
        • 39 |
      • 40 | 41 |
        • 42 |
      • 43 | 44 |
        • 45 |
      • 46 | 47 |
        • 48 |
      • 49 | 50 |
        • 51 |
      • 52 | 53 |
        • 54 |
      • 55 | 56 |
        • 57 |
      • 58 | 59 |
        • 60 |
      • 61 | 62 |
        • 63 |
      • 64 | 65 |
        • 66 |
      • 67 | 68 |
        • 69 |
      • 70 | 71 |
        • 72 |
      • 73 | 74 |
        • 75 |
      • 76 | 77 |
        • 78 |
      • 79 | 80 |
        • 81 |
      82 |
      83 | 84 | 85 | 86 | 87 | -------------------------------------------------------------------------------- /portfolio_JH/style.css: -------------------------------------------------------------------------------- 1 | 2 | * { 3 | border: 0; 4 | box-sizing: border-box; 5 | 6 | 7 | font-size: 100%; 8 | font: inherit; 9 | font-family: sans-serif; 10 | 11 | 12 | margin: 0; 13 | padding: 0; 14 | 15 | text-decoration: none; 16 | 17 | } 18 | 19 | a:visited { 20 | color: inherit; 21 | } 22 | 23 | :root { 24 | --light_blue: #8dbfe8; 25 | --primary_color: #2D384B; 26 | --dark_blue: #3D4F69; 27 | --dark_grey: #2A2828; 28 | --light_grey: #E1E5E8; 29 | 30 | } 31 | 32 | html { 33 | font-size: 18px; 34 | } 35 | 36 | .main-header { 37 | /* background-image: url('/images/header_img.png'); */ 38 | background-image: linear-gradient(rgba(25, 32, 42, 0.65), rgba(25, 32, 42, 0.75)), url('/images/header_img.png'); 39 | background-attachment: fixed; 40 | height: 95vh; 41 | background-size: cover; 42 | padding: 2rem 2.5rem; 43 | -webkit-clip-path: polygon(0 0, 100% 0, 100% 90%, 50% 100%, 0 90%); 44 | clip-path: polygon(0 0, 100% 0, 100% 90%, 50% 100%, 0 90%); 45 | background-repeat: no-repeat; 46 | background-position: center; 47 | display: flex; 48 | color: white; 49 | flex-wrap: wrap; 50 | align-items: flex-start; 51 | text-transform: uppercase; 52 | letter-spacing: 4px; 53 | } 54 | 55 | .top-nav { 56 | display: flex; 57 | justify-content: flex-end; 58 | align-items: center; 59 | width: 100%; 60 | 61 | 62 | } 63 | 64 | .top-nav > a { 65 | margin-left: 2.5rem; 66 | color: white; 67 | transition: color .3s; 68 | border-bottom: 1px solid transparent; 69 | } 70 | 71 | .top-nav > a:hover { 72 | color: var(--light_blue); 73 | border-bottom: 1px solid var(--light_blue); 74 | 75 | } 76 | 77 | .header-content { 78 | margin: 0 auto; 79 | text-align: center; 80 | line-height: 2; 81 | } 82 | 83 | .header-content i { 84 | font-size: 3rem; 85 | position: relative; 86 | top: 100px; 87 | } 88 | 89 | .port-header-title { 90 | font-size: 3rem; 91 | letter-spacing: 6px; 92 | } 93 | 94 | .port-header-subtitle { 95 | font-size: 2rem; 96 | color: #B7B5B9; 97 | font-weight: 300; 98 | } 99 | 100 | @media screen and (max-width: 1680px) { 101 | 102 | 103 | 104 | } 105 | 106 | @media screen and (max-width: 1280px) { 107 | 108 | 109 | 110 | 111 | } 112 | 113 | @media screen and (max-width: 736px) { 114 | .top-nav { 115 | font-size: 1.3rem; 116 | } 117 | 118 | .top-nav { 119 | display: flex; 120 | flex-direction: column; 121 | position: absolute; 122 | top: 3rem; 123 | left: 0; 124 | } 125 | 126 | .main-header { 127 | justify-content: center; 128 | align-items: center; 129 | } 130 | 131 | } 132 | 133 | @media screen and (max-width: 480px) { 134 | 135 | 136 | } 137 | 138 | @media screen and (max-width: 360px) { 139 | 140 | 141 | } 142 | -------------------------------------------------------------------------------- /media-queries/whichStyle.html: -------------------------------------------------------------------------------- 1 | 10 | 11 | 12 | 13 | 14 | min AND max-width Media Queries 15 | 16 | 17 | 52 | 53 | 54 |
      55 |

      Media Queries

      56 |

      Watch the background colors change!

      57 |
      58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | min AND max-width Media Queries 68 | 69 | 70 | 92 | 93 | 94 |
      95 |

      Media Queries

      96 |

      Watch the background colors change!

      97 |
      98 | 99 | 100 | -------------------------------------------------------------------------------- /course-ajax/css/styles.css: -------------------------------------------------------------------------------- 1 | html { 2 | box-sizing: border-box; 3 | } 4 | 5 | *, 6 | *::before, 7 | *::after { 8 | box-sizing: inherit; 9 | } 10 | 11 | body { 12 | background: #fafbfc; 13 | font-family: OpenSans, sans-serif; 14 | margin: 0; 15 | padding: 0; 16 | } 17 | 18 | .site-container { 19 | margin: auto; 20 | max-width: 1200px; 21 | width: 80%; 22 | } 23 | 24 | .masthead { 25 | background: #2e3d49; 26 | padding: 2em 0; 27 | } 28 | 29 | .masthead h1 { 30 | color: #ffffff; 31 | font-weight: normal; 32 | margin: 0; 33 | margin-bottom: 0.2em; 34 | text-align: center; 35 | } 36 | 37 | /*** Search Form ***/ 38 | #search-form { 39 | display: flex; 40 | padding: 1em 0; 41 | } 42 | 43 | #search-keyword { 44 | border: none; 45 | border-radius: 4px; 46 | flex-grow: 1; 47 | margin-right: 1.5em; 48 | padding: 1.25em 2em; 49 | } 50 | 51 | #submit-btn { 52 | background-color: #15c26b; 53 | border: none; 54 | border-radius: 4px; 55 | color: #ffffff; 56 | cursor: pointer; 57 | padding: 1em 4em; 58 | text-transform: uppercase; 59 | } 60 | 61 | #submit-btn:hover { 62 | background-color: #12a159; 63 | } 64 | 65 | 66 | /*** Response Container ***/ 67 | #response-container { 68 | margin-top: 2em; 69 | } 70 | 71 | /*** Image Styline ***/ 72 | figure { 73 | margin: 0; 74 | margin-bottom: 2em; 75 | position: relative; 76 | text-align: center; 77 | } 78 | 79 | figure img { 80 | box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1); 81 | max-width: 100%; 82 | width: 100%; 83 | } 84 | 85 | figcaption { 86 | bottom: 5px; 87 | background: rgba(0, 0, 0, 0.5); 88 | color: #ffffff; 89 | font-size: 14px; 90 | padding: 0.8em 1.4em; 91 | position: absolute; 92 | width: 100%; 93 | } 94 | 95 | /*** Article Styling ***/ 96 | ul { 97 | list-style: none; 98 | padding: 0; 99 | } 100 | 101 | .article { 102 | background: url('../images/icon-article.png'), #ffffff; 103 | background-position: 1.5em 1.2em; 104 | background-repeat: no-repeat; 105 | background-size: 1.8em; 106 | border: solid 1px #dbe2e8; 107 | box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1); 108 | margin-bottom: 0.5em; 109 | padding: 1em 2em 1em 4.8em; 110 | } 111 | 112 | .article:hover { 113 | box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2); 114 | } 115 | 116 | .article h2 { 117 | font-size: 18px; 118 | font-weight: 600; 119 | margin: 0; 120 | } 121 | 122 | .article h2 a { 123 | color: #02b3e4; 124 | text-decoration: none; 125 | } 126 | 127 | .article h2 a:hover { 128 | text-decoration: underline; 129 | } 130 | 131 | .article p { 132 | font-size: 0.9em; 133 | line-height: 1.4; 134 | } 135 | 136 | 137 | /*** Error State Styling ***/ 138 | .error-no-image { 139 | background: url(../images/icon-no-image.png) no-repeat 50% top; 140 | margin-bottom: 3em; 141 | padding-top: 8em; 142 | text-align: center; 143 | } 144 | 145 | .error-no-articles { 146 | background: url('../images/icon-no-articles.png') no-repeat 50% top; 147 | margin-top: 3em; 148 | padding-top: 8em; 149 | text-align: center; 150 | } 151 | 152 | /*** Helpers ***/ 153 | .visuallyhidden { 154 | border: 0; 155 | clip: rect(0 0 0 0); 156 | height: 1px; 157 | margin: -1px; 158 | overflow: hidden; 159 | padding: 0; 160 | position: absolute; 161 | width: 1px; 162 | white-space: nowrap; /* 1 */ 163 | } 164 | -------------------------------------------------------------------------------- /fend-animal-trading-cards-master/trading-card/styles.css: -------------------------------------------------------------------------------- 1 | :root { 2 | 3 | /* Variables */ 4 | /* Darker Blue Colors */ 5 | --dark-blue: #333A67; 6 | --dark-mid-blue: #2D67C3; 7 | --dark-lighter-blue: #2A62C4; 8 | 9 | /* Lighter Blue Colors */ 10 | --mid-blue: #3E8BAB; 11 | --middler-blue: #5BA4BD; 12 | --mid-lighter-blue: #4B8AA4; 13 | 14 | /* Green Colors */ 15 | --darker-light-green: #4FAD8B; 16 | --light-green: #6FEF69; 17 | --mid-green: #5CC681; 18 | 19 | } 20 | 21 | body { 22 | 23 | /* Layout */ 24 | display: flex; 25 | 26 | /* Margin */ 27 | height: 800px; 28 | 29 | /* Position */ 30 | align-items: center; 31 | flex-direction: column; 32 | justify-content: center; 33 | } 34 | 35 | .card { 36 | 37 | /* Animations */ 38 | animation-duration: 7s; 39 | animation-iteration-count: infinite; 40 | animation-name: borderChange; 41 | animation-timing-function: ease-in-out; 42 | transform: rotate(35deg) rotateX(20deg) rotateY(-30deg); 43 | 44 | /* Margin */ 45 | margin-top: 10em; 46 | 47 | /* Outline */ 48 | border: 5px solid rgb(212, 212, 212); 49 | box-shadow: 9px 7px var(--dark-blue); 50 | 51 | background-image: url("https://www.shutterbug.com/images/styles/960-wide/public/photo_post/%5Buid%5D/DSC_6480_1.jpg"); 52 | 53 | } 54 | 55 | .card:hover { 56 | transform: none; 57 | } 58 | 59 | .card, 60 | .card:hover { 61 | transition: all 0.8s ease-in-out; 62 | } 63 | 64 | .top-card { 65 | padding: 0 1em; 66 | } 67 | 68 | .container-name-prof { 69 | 70 | /* Animation */ 71 | animation-duration: 7s; 72 | animation-iteration-count: infinite; 73 | animation-name: borderChange; 74 | animation-timing-function: ease-in-out; 75 | 76 | /* Layout */ 77 | display: flex; 78 | justify-content: center; 79 | 80 | /* Margin */ 81 | margin-bottom: 1em; 82 | margin-top: 1em; 83 | 84 | /* Color */ 85 | border: 5px solid rgb(212, 212, 212); 86 | background-color: var(--dark-blue); 87 | color: white; 88 | } 89 | 90 | .profile-name { 91 | font-style: italic; 92 | } 93 | 94 | .picture { 95 | width: 300px; 96 | } 97 | 98 | .bottom-card { 99 | 100 | /* Animation */ 101 | animation-duration: 7s; 102 | animation-iteration-count: infinite; 103 | animation-name: borderChange; 104 | animation-timing-function: ease-in-out; 105 | 106 | /* Color */ 107 | border: 2px solid rgb(212, 212, 212); 108 | background-color: var(--dark-blue); 109 | color: white; 110 | 111 | /* Margin */ 112 | margin: 1em; 113 | width: 300px; 114 | } 115 | 116 | .bottom-container { 117 | 118 | /* Font */ 119 | font-size: 16px; 120 | 121 | /* Margin */ 122 | padding: 1em; 123 | } 124 | 125 | .fact-title { 126 | font-style: italic; 127 | } 128 | 129 | .profile-facts { 130 | 131 | /* Decorations */ 132 | list-style: none; 133 | 134 | /* Margin */ 135 | padding-left: 0; 136 | } 137 | 138 | span { 139 | font-weight: bold; 140 | } 141 | 142 | @keyframes borderChange { 143 | 0% {border-color: var(--dark-blue);} 144 | 16.6% {border-color: var(--dark-mid-blue);} 145 | 32.6% {border-color: var(--dark-lighter-blue);} 146 | 48.6% {border-color: var(--mid-blue);} 147 | 64.6% {border-color: var(--darker-light-green);} 148 | 80.6% {border-color: var(--mid-green);} 149 | 90.6% {border-color: var(--light-green);} 150 | 96.8% {border-color: var(--middler-blue);} 151 | 100% {border-color: var(--mid-lighter-blue);} 152 | } -------------------------------------------------------------------------------- /mockup-to-article/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | <h1>Humans vs Machines Blog</h1> 7 | 8 | 9 | 10 | 11 | 12 |

      Humans vs. Machines: An AI Odyssey

      13 | 14 |

      By Christopher Watkins

      15 | 16 |

      ***Breaking News: AlphaGo has won the first two matches!*** In this, the third in our series on the epic Go matches being played between AlphaGo (Google’s Artificial Intelligence software) and Lee Se-Dol (Current Go World Champion), 17 | we look at the history of Humans vs. Machines, and the innovations that have led us to this incredible moment in time. 18 |

      19 | 20 | animated game of Go 22 | 23 |

      For as long as humans have built things, we’ve wrestled with the implications of what we’ve built. In many cases, these philosophical and ethical wrestlings have made for great drama—think Frankenstein, or 2001: A Space Odyssey. Often, the hypothetical 24 | scenarios we envision come remarkably close to true, and the discoveries we’ve made in the fields of Artificial Intelligence and Machine Learning make clear that a “computer with a mind of its own” is going to take over the world not such 25 | a fantastic thing to imagine any longer.

      26 | 27 |

      The Triumph Of Deep Blue

      28 |

      Perhaps this is why we are so captivated by human vs. machine competitions, because the idea of being overcome by that which we’ve created speaks to something very deep within our collective consciousness. When IBM’s Deep Blue faced off against Garry 29 | Kasparov 30 | 1, the event resulted in more than three billion impressions around the world, and when IBM’s later creation Watson challenged the champions on Jeopardy, millions 31 | of viewers were glued to the proceedings.

      32 | 33 |

      DeepMind’s AlphaGo

      34 | 35 |

      Taking place right now, there is an event that, while not likely to scale the same media heights, may in fact have far greater implications when it comes to the future of “intelligent” machines. On March 9, in Seoul, South Korea, a computing system 36 | know as AlphoGo (built by researchers at DeepMind—a Google Artificial Intelligence lab) began a five-game match against 37 | Lee Se-dol, one of the very best players in the world at the ancient game of Go.

      38 | 39 |

      Why is this so significant?

      40 |

      Here is how the DeepMind team explained it in their paper Mastering the Game of Go with Deep Neural Networks and Tree Search:

      41 | 42 |

      The game of Go has long been viewed as the most challenging of classic games for artificial intelligence due to its enormous search space and the difficulty of evaluating board positions and moves.

      43 | 44 |

      Put another way, winning at Go is a kind of Holy Grail for those who strive to create machines that can “think” on their own, because success at this uniquely complex game seems to require something more than just skill, knowledge, and experience. 45 | It requires intuition. Feel. Style. Characteristics we associate with humans, not with machines.

      46 | 47 |
      48 | 1

      Garry Kasparov is a Russian chess Grandmaster and former World Chess Champion

      49 | 50 | 51 | -------------------------------------------------------------------------------- /DOM_jQuery_basics/filters_quiz/index.html: -------------------------------------------------------------------------------- 1 | 2 | 7 | 8 | 9 | 10 | 11 | 12 | 13 |
      14 |
      15 | 26 |
      27 |
      28 | 29 |

      Cool Articles

      30 |
        31 |
      • 32 |
        Article #1
        33 |

        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita sapiente officiis beatae, ut consequuntur. Quos minus neque eius, nemo sunt excepturi eveniet amet veritatis voluptatibus corporis ea, blanditiis porro ad!

        34 |

        Sample Image Title here

        35 | Placeholder Image 36 |
          37 |
        • James
          • 38 |
        • Lily
          • 39 |
        • Harry
          • 40 |
        41 |

        Magnam ex autem doloremque, tempore mollitia atque aut delectus corporis rem similique voluptates omnis reiciendis vitae impedit exercitationem unde quaerat, doloribus voluptatibus molestias et veritatis sed optio repudiandae? Provident, voluptates.

        42 |
        • 43 |
      • 44 |
        Article #2
        45 |

        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil animi ipsum, incidunt mollitia modi cum, eum ex doloremque rerum quod, maiores quisquam, enim quam unde cumque! Quam, doloremque. Voluptatum, maxime!

        46 |

        Numquam et quae, quasi. Reiciendis nemo mollitia eveniet alias, debitis facere atque excepturi et beatae laudantium commodi optio unde amet vitae libero quas cupiditate, nam porro minus. Quisquam, odit non.

        47 |
        • 48 |
      • 49 |
        Article #3
        50 |

        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt ratione, cum doloremque molestias labore amet at dicta reiciendis repudiandae fuga atque adipisci pariatur distinctio suscipit perferendis provident, facere ad aut.

        51 |

        Temporibus sapiente odio eveniet enim perferendis maxime, ratione, accusantium suscipit alias, soluta architecto culpa pariatur. Cupiditate nam eaque dolore voluptatem necessitatibus corporis iusto adipisci, dignissimos error, vitae quam, aliquid eius!

        52 |
        • 53 |
      • 54 |
        Article #4
        55 |

        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate commodi, est soluta eos voluptates eum! Modi sit quia ipsum fugiat nesciunt, assumenda deleniti consequuntur molestias reprehenderit. Voluptate corporis illum nam?

        56 |

        Quia, omnis. Quasi necessitatibus, ducimus, deserunt ipsa, reprehenderit sit a dolore fuga placeat magni culpa ipsam quas id aut veniam rerum pariatur enim harum recusandae quo odio consequuntur. Maxime, aperiam.

        57 |
        • 58 |
      59 |
      60 |
      61 | 62 | -------------------------------------------------------------------------------- /DOM_jQuery_basics/select_by_id/index.html: -------------------------------------------------------------------------------- 1 | 2 | 7 | 8 | 9 | 10 | 11 | 12 | 13 |
      14 |
      15 | 26 |
      27 |
      28 | 29 |

      Cool Articles

      30 |
        31 |
      • 32 |
        Article #1
        33 |

        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita sapiente officiis beatae, ut consequuntur. Quos minus neque eius, nemo sunt excepturi eveniet amet veritatis voluptatibus corporis ea, blanditiis porro ad!

        34 |

        Sample Image Title here

        35 | Placeholder Image 36 |
          37 |
        • James
          • 38 |
        • Lily
          • 39 |
        • Harry
          • 40 |
        41 |

        Magnam ex autem doloremque, tempore mollitia atque aut delectus corporis rem similique voluptates omnis reiciendis vitae impedit exercitationem unde quaerat, doloribus voluptatibus molestias et veritatis sed optio repudiandae? Provident, voluptates.

        42 |
        • 43 |
      • 44 |
        Article #2
        45 |

        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil animi ipsum, incidunt mollitia modi cum, eum ex doloremque rerum quod, maiores quisquam, enim quam unde cumque! Quam, doloremque. Voluptatum, maxime!

        46 |

        Numquam et quae, quasi. Reiciendis nemo mollitia eveniet alias, debitis facere atque excepturi et beatae laudantium commodi optio unde amet vitae libero quas cupiditate, nam porro minus. Quisquam, odit non.

        47 |
        • 48 |
      • 49 |
        Article #3
        50 |

        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt ratione, cum doloremque molestias labore amet at dicta reiciendis repudiandae fuga atque adipisci pariatur distinctio suscipit perferendis provident, facere ad aut.

        51 |

        Temporibus sapiente odio eveniet enim perferendis maxime, ratione, accusantium suscipit alias, soluta architecto culpa pariatur. Cupiditate nam eaque dolore voluptatem necessitatibus corporis iusto adipisci, dignissimos error, vitae quam, aliquid eius!

        52 |
        • 53 |
      • 54 |
        Article #4
        55 |

        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate commodi, est soluta eos voluptates eum! Modi sit quia ipsum fugiat nesciunt, assumenda deleniti consequuntur molestias reprehenderit. Voluptate corporis illum nam?

        56 |

        Quia, omnis. Quasi necessitatibus, ducimus, deserunt ipsa, reprehenderit sit a dolore fuga placeat magni culpa ipsam quas id aut veniam rerum pariatur enim harum recusandae quo odio consequuntur. Maxime, aperiam.

        57 |
        • 58 |
      59 |
      60 |
      61 | 62 | -------------------------------------------------------------------------------- /DOM_manipulation/modifyCSS/index.html: -------------------------------------------------------------------------------- 1 | 2 | 8 | 9 | 10 | 11 | 12 | 13 | 14 |
      15 |
      16 | 27 |
      28 |
      29 | 30 |

      Cool Articles

      31 |
        32 |
      • 33 |
        Article #1
        34 |

        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita sapiente officiis beatae, ut consequuntur. Quos minus neque eius, nemo sunt excepturi eveniet amet veritatis voluptatibus corporis ea, blanditiis porro ad!

        35 |

        Sample Image Title here

        36 | Placeholder Image 37 |
          38 |
        • James
          • 39 |
        • Lily
          • 40 |
        • Harry
          • 41 |
        42 |

        Magnam ex autem doloremque, tempore mollitia atque aut delectus corporis rem similique voluptates omnis reiciendis vitae impedit exercitationem unde quaerat, doloribus voluptatibus molestias et veritatis sed optio repudiandae? Provident, voluptates.

        43 |
        • 44 |
      • 45 |
        Article #2
        46 |

        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil animi ipsum, incidunt mollitia modi cum, eum ex doloremque rerum quod, maiores quisquam, enim quam unde cumque! Quam, doloremque. Voluptatum, maxime!

        47 |

        Numquam et quae, quasi. Reiciendis nemo mollitia eveniet alias, debitis facere atque excepturi et beatae laudantium commodi optio unde amet vitae libero quas cupiditate, nam porro minus. Quisquam, odit non.

        48 |
        • 49 |
      • 50 |
        Article #3
        51 |

        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt ratione, cum doloremque molestias labore amet at dicta reiciendis repudiandae fuga atque adipisci pariatur distinctio suscipit perferendis provident, facere ad aut.

        52 |

        Temporibus sapiente odio eveniet enim perferendis maxime, ratione, accusantium suscipit alias, soluta architecto culpa pariatur. Cupiditate nam eaque dolore voluptatem necessitatibus corporis iusto adipisci, dignissimos error, vitae quam, aliquid eius!

        53 |
        • 54 |
      • 55 |
        Article #4
        56 |

        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate commodi, est soluta eos voluptates eum! Modi sit quia ipsum fugiat nesciunt, assumenda deleniti consequuntur molestias reprehenderit. Voluptate corporis illum nam?

        57 |

        Quia, omnis. Quasi necessitatibus, ducimus, deserunt ipsa, reprehenderit sit a dolore fuga placeat magni culpa ipsam quas id aut veniam rerum pariatur enim harum recusandae quo odio consequuntur. Maxime, aperiam.

        58 |
        • 59 |
      60 |
      61 |
      62 | 63 | -------------------------------------------------------------------------------- /DOM_manipulation/toggleClassQuiz/index.html: -------------------------------------------------------------------------------- 1 | 2 | 7 | 8 | 9 | 10 | 11 | 12 | 13 |
      14 |
      15 | 26 |
      27 |
      28 | 29 |

      Cool Articles

      30 |
        31 |
      • 32 |
        Article #1
        33 |

        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita sapiente officiis beatae, ut consequuntur. Quos minus neque eius, nemo sunt excepturi eveniet amet veritatis voluptatibus corporis ea, blanditiis porro ad!

        34 |

        Sample Image Title here

        35 | Placeholder Image 36 |
          37 |
        • James
          • 38 |
        • Lily
          • 39 |
        • Harry
          • 40 |
        41 |

        Magnam ex autem doloremque, tempore mollitia atque aut delectus corporis rem similique voluptates omnis reiciendis vitae impedit exercitationem unde quaerat, doloribus voluptatibus molestias et veritatis sed optio repudiandae? Provident, voluptates.

        42 |
        • 43 |
      • 44 |
        Article #2
        45 |

        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil animi ipsum, incidunt mollitia modi cum, eum ex doloremque rerum quod, maiores quisquam, enim quam unde cumque! Quam, doloremque. Voluptatum, maxime!

        46 |

        Numquam et quae, quasi. Reiciendis nemo mollitia eveniet alias, debitis facere atque excepturi et beatae laudantium commodi optio unde amet vitae libero quas cupiditate, nam porro minus. Quisquam, odit non.

        47 |
        • 48 |
      • 49 |
        Article #3
        50 |

        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt ratione, cum doloremque molestias labore amet at dicta reiciendis repudiandae fuga atque adipisci pariatur distinctio suscipit perferendis provident, facere ad aut.

        51 |

        Temporibus sapiente odio eveniet enim perferendis maxime, ratione, accusantium suscipit alias, soluta architecto culpa pariatur. Cupiditate nam eaque dolore voluptatem necessitatibus corporis iusto adipisci, dignissimos error, vitae quam, aliquid eius!

        52 |
        • 53 |
      • 54 |
        Article #4
        55 |

        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate commodi, est soluta eos voluptates eum! Modi sit quia ipsum fugiat nesciunt, assumenda deleniti consequuntur molestias reprehenderit. Voluptate corporis illum nam?

        56 |

        Quia, omnis. Quasi necessitatibus, ducimus, deserunt ipsa, reprehenderit sit a dolore fuga placeat magni culpa ipsam quas id aut veniam rerum pariatur enim harum recusandae quo odio consequuntur. Maxime, aperiam.

        57 |
        • 58 |
      59 |
      60 |
      61 | 62 | -------------------------------------------------------------------------------- /DOM_manipulation/changingAttr/index.html: -------------------------------------------------------------------------------- 1 | 2 | 8 | 9 | 10 | 11 | 12 | 13 | 14 |
      15 |
      16 | 27 |
      28 |
      29 | 30 |

      Cool Articles

      31 |
        32 |
      • 33 |
        Article #1
        34 |

        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita sapiente officiis beatae, ut consequuntur. Quos minus neque eius, nemo sunt excepturi eveniet amet veritatis voluptatibus corporis ea, blanditiis porro ad!

        35 |

        Sample Image Title here

        36 | Placeholder Image 37 |
          38 |
        • James
          • 39 |
        • Lily
          • 40 |
        • Harry
          • 41 |
        42 |

        Magnam ex autem doloremque, tempore mollitia atque aut delectus corporis rem similique voluptates omnis reiciendis vitae impedit exercitationem unde quaerat, doloribus voluptatibus molestias et veritatis sed optio repudiandae? Provident, voluptates.

        43 |
        • 44 |
      • 45 |
        Article #2
        46 |

        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil animi ipsum, incidunt mollitia modi cum, eum ex doloremque rerum quod, maiores quisquam, enim quam unde cumque! Quam, doloremque. Voluptatum, maxime!

        47 |

        Numquam et quae, quasi. Reiciendis nemo mollitia eveniet alias, debitis facere atque excepturi et beatae laudantium commodi optio unde amet vitae libero quas cupiditate, nam porro minus. Quisquam, odit non.

        48 |
        • 49 |
      • 50 |
        Article #3
        51 |

        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt ratione, cum doloremque molestias labore amet at dicta reiciendis repudiandae fuga atque adipisci pariatur distinctio suscipit perferendis provident, facere ad aut.

        52 |

        Temporibus sapiente odio eveniet enim perferendis maxime, ratione, accusantium suscipit alias, soluta architecto culpa pariatur. Cupiditate nam eaque dolore voluptatem necessitatibus corporis iusto adipisci, dignissimos error, vitae quam, aliquid eius!

        53 |
        • 54 |
      • 55 |
        Article #4
        56 |

        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate commodi, est soluta eos voluptates eum! Modi sit quia ipsum fugiat nesciunt, assumenda deleniti consequuntur molestias reprehenderit. Voluptate corporis illum nam?

        57 |

        Quia, omnis. Quasi necessitatibus, ducimus, deserunt ipsa, reprehenderit sit a dolore fuga placeat magni culpa ipsam quas id aut veniam rerum pariatur enim harum recusandae quo odio consequuntur. Maxime, aperiam.

        58 |
        • 59 |
      60 |
      61 |
      62 | 63 | -------------------------------------------------------------------------------- /DOM_manipulation/collectValues/index.html: -------------------------------------------------------------------------------- 1 | 2 | 8 | 9 | 10 | 11 | 12 | 13 | 14 |
      15 |
      16 | 27 |
      28 |
      29 | 30 |

      Cool Articles

      31 |
        32 |
      • 33 |
        Article #1
        34 |

        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita sapiente officiis beatae, ut consequuntur. Quos minus neque eius, nemo sunt excepturi eveniet amet veritatis voluptatibus corporis ea, blanditiis porro ad!

        35 |

        Sample Image Title here

        36 | Placeholder Image 37 |
          38 |
        • James
          • 39 |
        • Lily
          • 40 |
        • Harry
          • 41 |
        42 |

        Magnam ex autem doloremque, tempore mollitia atque aut delectus corporis rem similique voluptates omnis reiciendis vitae impedit exercitationem unde quaerat, doloribus voluptatibus molestias et veritatis sed optio repudiandae? Provident, voluptates.

        43 |
        • 44 |
      • 45 |
        Article #2
        46 |

        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil animi ipsum, incidunt mollitia modi cum, eum ex doloremque rerum quod, maiores quisquam, enim quam unde cumque! Quam, doloremque. Voluptatum, maxime!

        47 |

        Numquam et quae, quasi. Reiciendis nemo mollitia eveniet alias, debitis facere atque excepturi et beatae laudantium commodi optio unde amet vitae libero quas cupiditate, nam porro minus. Quisquam, odit non.

        48 |
        • 49 |
      • 50 |
        Article #3
        51 |

        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt ratione, cum doloremque molestias labore amet at dicta reiciendis repudiandae fuga atque adipisci pariatur distinctio suscipit perferendis provident, facere ad aut.

        52 |

        Temporibus sapiente odio eveniet enim perferendis maxime, ratione, accusantium suscipit alias, soluta architecto culpa pariatur. Cupiditate nam eaque dolore voluptatem necessitatibus corporis iusto adipisci, dignissimos error, vitae quam, aliquid eius!

        53 |
        • 54 |
      • 55 |
        Article #4
        56 |

        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate commodi, est soluta eos voluptates eum! Modi sit quia ipsum fugiat nesciunt, assumenda deleniti consequuntur molestias reprehenderit. Voluptate corporis illum nam?

        57 |

        Quia, omnis. Quasi necessitatibus, ducimus, deserunt ipsa, reprehenderit sit a dolore fuga placeat magni culpa ipsam quas id aut veniam rerum pariatur enim harum recusandae quo odio consequuntur. Maxime, aperiam.

        58 |
        • 59 |
      60 |
      61 |
      62 | 63 | -------------------------------------------------------------------------------- /DOM_manipulation/removeDOMel/index.html: -------------------------------------------------------------------------------- 1 | 2 | 8 | 9 | 10 | 11 | 12 | 13 | 14 |
      15 |
      16 | 27 |
      28 |
      29 | 30 |

      Cool Articles

      31 |
        32 |
      • 33 |
        Article #1
        34 |

        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita sapiente officiis beatae, ut consequuntur. Quos minus neque eius, nemo sunt excepturi eveniet amet veritatis voluptatibus corporis ea, blanditiis porro ad!

        35 |

        Sample Image Title here

        36 | Placeholder Image 37 |
          38 |
        • James
          • 39 |
        • Lily
          • 40 |
        • Harry
          • 41 |
        42 |

        Magnam ex autem doloremque, tempore mollitia atque aut delectus corporis rem similique voluptates omnis reiciendis vitae impedit exercitationem unde quaerat, doloribus voluptatibus molestias et veritatis sed optio repudiandae? Provident, voluptates.

        43 |
        • 44 |
      • 45 |
        Article #2
        46 |

        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil animi ipsum, incidunt mollitia modi cum, eum ex doloremque rerum quod, maiores quisquam, enim quam unde cumque! Quam, doloremque. Voluptatum, maxime!

        47 |

        Numquam et quae, quasi. Reiciendis nemo mollitia eveniet alias, debitis facere atque excepturi et beatae laudantium commodi optio unde amet vitae libero quas cupiditate, nam porro minus. Quisquam, odit non.

        48 |
        • 49 |
      • 50 |
        Article #3
        51 |

        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt ratione, cum doloremque molestias labore amet at dicta reiciendis repudiandae fuga atque adipisci pariatur distinctio suscipit perferendis provident, facere ad aut.

        52 |

        Temporibus sapiente odio eveniet enim perferendis maxime, ratione, accusantium suscipit alias, soluta architecto culpa pariatur. Cupiditate nam eaque dolore voluptatem necessitatibus corporis iusto adipisci, dignissimos error, vitae quam, aliquid eius!

        53 |
        • 54 |
      • 55 |
        Article #4
        56 |

        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate commodi, est soluta eos voluptates eum! Modi sit quia ipsum fugiat nesciunt, assumenda deleniti consequuntur molestias reprehenderit. Voluptate corporis illum nam?

        57 |

        Quia, omnis. Quasi necessitatibus, ducimus, deserunt ipsa, reprehenderit sit a dolore fuga placeat magni culpa ipsam quas id aut veniam rerum pariatur enim harum recusandae quo odio consequuntur. Maxime, aperiam.

        58 |
        • 59 |
      60 |
      61 |
      62 | 63 | -------------------------------------------------------------------------------- /DOM_jQuery_basics/select_by_tags/index.html: -------------------------------------------------------------------------------- 1 | 2 | 8 | 9 | 10 | 11 | 12 | 13 | 14 |
      15 |
      16 | 27 |
      28 |
      29 | 30 |

      Cool Articles

      31 |
        32 |
      • 33 |
        Article #1
        34 |

        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita sapiente officiis beatae, ut consequuntur. Quos minus neque eius, nemo sunt excepturi eveniet amet veritatis voluptatibus corporis ea, blanditiis porro ad!

        35 |

        Sample Image Title here

        36 | Placeholder Image 37 |
          38 |
        • James
          • 39 |
        • Lily
          • 40 |
        • Harry
          • 41 |
        42 |

        Magnam ex autem doloremque, tempore mollitia atque aut delectus corporis rem similique voluptates omnis reiciendis vitae impedit exercitationem unde quaerat, doloribus voluptatibus molestias et veritatis sed optio repudiandae? Provident, voluptates.

        43 |
        • 44 |
      • 45 |
        Article #2
        46 |

        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil animi ipsum, incidunt mollitia modi cum, eum ex doloremque rerum quod, maiores quisquam, enim quam unde cumque! Quam, doloremque. Voluptatum, maxime!

        47 |

        Numquam et quae, quasi. Reiciendis nemo mollitia eveniet alias, debitis facere atque excepturi et beatae laudantium commodi optio unde amet vitae libero quas cupiditate, nam porro minus. Quisquam, odit non.

        48 |
        • 49 |
      • 50 |
        Article #3
        51 |

        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt ratione, cum doloremque molestias labore amet at dicta reiciendis repudiandae fuga atque adipisci pariatur distinctio suscipit perferendis provident, facere ad aut.

        52 |

        Temporibus sapiente odio eveniet enim perferendis maxime, ratione, accusantium suscipit alias, soluta architecto culpa pariatur. Cupiditate nam eaque dolore voluptatem necessitatibus corporis iusto adipisci, dignissimos error, vitae quam, aliquid eius!

        53 |
        • 54 |
      • 55 |
        Article #4
        56 |

        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate commodi, est soluta eos voluptates eum! Modi sit quia ipsum fugiat nesciunt, assumenda deleniti consequuntur molestias reprehenderit. Voluptate corporis illum nam?

        57 |

        Quia, omnis. Quasi necessitatibus, ducimus, deserunt ipsa, reprehenderit sit a dolore fuga placeat magni culpa ipsam quas id aut veniam rerum pariatur enim harum recusandae quo odio consequuntur. Maxime, aperiam.

        58 |
        • 59 |
      60 |
      61 |
      62 | 63 | -------------------------------------------------------------------------------- /DOM_manipulation/iteratingEachQuiz/index.html: -------------------------------------------------------------------------------- 1 | 2 | 8 | 9 | 10 | 11 | 12 | 13 | 14 |
      15 |
      16 | 27 |
      28 |
      29 | 30 |

      Cool Articles

      31 |
        32 |
      • 33 |
        Article #1
        34 |

        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita sapiente officiis beatae, ut consequuntur. Quos minus neque eius, nemo sunt excepturi eveniet amet veritatis voluptatibus corporis ea, blanditiis porro ad!

        35 |

        Sample Image Title here

        36 | Placeholder Image 37 |
          38 |
        • James
          • 39 |
        • Lily
          • 40 |
        • Harry
          • 41 |
        42 |

        Magnam ex autem doloremque, tempore mollitia atque aut delectus corporis rem similique voluptates omnis reiciendis vitae impedit exercitationem unde quaerat, doloribus voluptatibus molestias et veritatis sed optio repudiandae? Provident, voluptates.

        43 |
        • 44 |
      • 45 |
        Article #2
        46 |

        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil animi ipsum, incidunt mollitia modi cum, eum ex doloremque rerum quod, maiores quisquam, enim quam unde cumque! Quam, doloremque. Voluptatum, maxime!

        47 |

        Numquam et quae, quasi. Reiciendis nemo mollitia eveniet alias, debitis facere atque excepturi et beatae laudantium commodi optio unde amet vitae libero quas cupiditate, nam porro minus. Quisquam, odit non.

        48 |
        • 49 |
      • 50 |
        Article #3
        51 |

        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt ratione, cum doloremque molestias labore amet at dicta reiciendis repudiandae fuga atque adipisci pariatur distinctio suscipit perferendis provident, facere ad aut.

        52 |

        Temporibus sapiente odio eveniet enim perferendis maxime, ratione, accusantium suscipit alias, soluta architecto culpa pariatur. Cupiditate nam eaque dolore voluptatem necessitatibus corporis iusto adipisci, dignissimos error, vitae quam, aliquid eius!

        53 |
        • 54 |
      • 55 |
        Article #4
        56 |

        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate commodi, est soluta eos voluptates eum! Modi sit quia ipsum fugiat nesciunt, assumenda deleniti consequuntur molestias reprehenderit. Voluptate corporis illum nam?

        57 |

        Quia, omnis. Quasi necessitatibus, ducimus, deserunt ipsa, reprehenderit sit a dolore fuga placeat magni culpa ipsam quas id aut veniam rerum pariatur enim harum recusandae quo odio consequuntur. Maxime, aperiam.

        58 |
        • 59 |
      60 |
      61 |
      62 | 63 | -------------------------------------------------------------------------------- /DOM_manipulation/togglingClassesQuiz/index.html: -------------------------------------------------------------------------------- 1 | 2 | 8 | 9 | 10 | 11 | 12 | 13 | 14 |
      15 |
      16 | 27 |
      28 |
      29 | 30 |

      Cool Articles

      31 |
        32 |
      • 33 |
        Article #1
        34 |

        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita sapiente officiis beatae, ut consequuntur. Quos minus neque eius, nemo sunt excepturi eveniet amet veritatis voluptatibus corporis ea, blanditiis porro ad!

        35 |

        Sample Image Title here

        36 | Placeholder Image 37 |
          38 |
        • James
          • 39 |
        • Lily
          • 40 |
        • Harry
          • 41 |
        42 |

        Magnam ex autem doloremque, tempore mollitia atque aut delectus corporis rem similique voluptates omnis reiciendis vitae impedit exercitationem unde quaerat, doloribus voluptatibus molestias et veritatis sed optio repudiandae? Provident, voluptates.

        43 |
        • 44 |
      • 45 |
        Article #2
        46 |

        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil animi ipsum, incidunt mollitia modi cum, eum ex doloremque rerum quod, maiores quisquam, enim quam unde cumque! Quam, doloremque. Voluptatum, maxime!

        47 |

        Numquam et quae, quasi. Reiciendis nemo mollitia eveniet alias, debitis facere atque excepturi et beatae laudantium commodi optio unde amet vitae libero quas cupiditate, nam porro minus. Quisquam, odit non.

        48 |
        • 49 |
      • 50 |
        Article #3
        51 |

        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt ratione, cum doloremque molestias labore amet at dicta reiciendis repudiandae fuga atque adipisci pariatur distinctio suscipit perferendis provident, facere ad aut.

        52 |

        Temporibus sapiente odio eveniet enim perferendis maxime, ratione, accusantium suscipit alias, soluta architecto culpa pariatur. Cupiditate nam eaque dolore voluptatem necessitatibus corporis iusto adipisci, dignissimos error, vitae quam, aliquid eius!

        53 |
        • 54 |
      • 55 |
        Article #4
        56 |

        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate commodi, est soluta eos voluptates eum! Modi sit quia ipsum fugiat nesciunt, assumenda deleniti consequuntur molestias reprehenderit. Voluptate corporis illum nam?

        57 |

        Quia, omnis. Quasi necessitatibus, ducimus, deserunt ipsa, reprehenderit sit a dolore fuga placeat magni culpa ipsam quas id aut veniam rerum pariatur enim harum recusandae quo odio consequuntur. Maxime, aperiam.

        58 |
        • 59 |
      60 |
      61 |
      62 | 63 | -------------------------------------------------------------------------------- /jQuerySampleSite/index.html: -------------------------------------------------------------------------------- 1 | 2 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 |
      15 |
      16 | 27 |
      28 |
      29 | 30 |

      Cool Articles

      31 |
        32 |
      • 33 |
        Article #1
        34 |

        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita sapiente officiis beatae, ut consequuntur. Quos minus neque eius, nemo sunt excepturi eveniet amet veritatis voluptatibus corporis ea, blanditiis porro ad!

        35 |

        Sample Image Title here

        36 | Placeholder Image 37 |
          38 |
        • James
          • 39 |
        • Lily
          • 40 |
        • Harry
          • 41 |
        42 |

        Magnam ex autem doloremque, tempore mollitia atque aut delectus corporis rem similique voluptates omnis reiciendis vitae impedit exercitationem unde quaerat, doloribus voluptatibus molestias et veritatis sed optio repudiandae? Provident, voluptates.

        43 |
        • 44 |
      • 45 |
        Article #2
        46 |

        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil animi ipsum, incidunt mollitia modi cum, eum ex doloremque rerum quod, maiores quisquam, enim quam unde cumque! Quam, doloremque. Voluptatum, maxime!

        47 |

        Numquam et quae, quasi. Reiciendis nemo mollitia eveniet alias, debitis facere atque excepturi et beatae laudantium commodi optio unde amet vitae libero quas cupiditate, nam porro minus. Quisquam, odit non.

        48 |
        • 49 |
      • 50 |
        Article #3
        51 |

        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt ratione, cum doloremque molestias labore amet at dicta reiciendis repudiandae fuga atque adipisci pariatur distinctio suscipit perferendis provident, facere ad aut.

        52 |

        Temporibus sapiente odio eveniet enim perferendis maxime, ratione, accusantium suscipit alias, soluta architecto culpa pariatur. Cupiditate nam eaque dolore voluptatem necessitatibus corporis iusto adipisci, dignissimos error, vitae quam, aliquid eius!

        53 |
        • 54 |
      • 55 |
        Article #4
        56 |

        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate commodi, est soluta eos voluptates eum! Modi sit quia ipsum fugiat nesciunt, assumenda deleniti consequuntur molestias reprehenderit. Voluptate corporis illum nam?

        57 |

        Quia, omnis. Quasi necessitatibus, ducimus, deserunt ipsa, reprehenderit sit a dolore fuga placeat magni culpa ipsam quas id aut veniam rerum pariatur enim harum recusandae quo odio consequuntur. Maxime, aperiam.

        58 |
        • 59 |
      60 |
      61 |
      62 | 63 | -------------------------------------------------------------------------------- /DOM_jQuery_basics/select_by_class/index.html: -------------------------------------------------------------------------------- 1 | 2 | 8 | 9 | 10 | 11 | 12 | 13 | 14 |
      15 |
      16 | 27 |
      28 |
      29 | 30 |

      Cool Articles

      31 | 32 |
        33 |
      • 34 |
        Article #1
        35 |

        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita sapiente officiis beatae, ut consequuntur. Quos minus neque eius, nemo sunt excepturi eveniet amet veritatis voluptatibus corporis ea, blanditiis porro ad!

        36 |

        Sample Image Title here

        37 | Placeholder Image 38 |
          39 |
        • James
          • 40 |
        • Lily
          • 41 |
        • Harry
          • 42 |
        43 |

        Magnam ex autem doloremque, tempore mollitia atque aut delectus corporis rem similique voluptates omnis reiciendis vitae impedit exercitationem unde quaerat, doloribus voluptatibus molestias et veritatis sed optio repudiandae? Provident, voluptates.

        44 |
        • 45 |
      • 46 |
        Article #2
        47 |

        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil animi ipsum, incidunt mollitia modi cum, eum ex doloremque rerum quod, maiores quisquam, enim quam unde cumque! Quam, doloremque. Voluptatum, maxime!

        48 |

        Numquam et quae, quasi. Reiciendis nemo mollitia eveniet alias, debitis facere atque excepturi et beatae laudantium commodi optio unde amet vitae libero quas cupiditate, nam porro minus. Quisquam, odit non.

        49 |
        • 50 |
      • 51 |
        Article #3
        52 |

        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt ratione, cum doloremque molestias labore amet at dicta reiciendis repudiandae fuga atque adipisci pariatur distinctio suscipit perferendis provident, facere ad aut.

        53 |

        Temporibus sapiente odio eveniet enim perferendis maxime, ratione, accusantium suscipit alias, soluta architecto culpa pariatur. Cupiditate nam eaque dolore voluptatem necessitatibus corporis iusto adipisci, dignissimos error, vitae quam, aliquid eius!

        54 |
        • 55 |
      • 56 |
        Article #4
        57 |

        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate commodi, est soluta eos voluptates eum! Modi sit quia ipsum fugiat nesciunt, assumenda deleniti consequuntur molestias reprehenderit. Voluptate corporis illum nam?

        58 |

        Quia, omnis. Quasi necessitatibus, ducimus, deserunt ipsa, reprehenderit sit a dolore fuga placeat magni culpa ipsam quas id aut veniam rerum pariatur enim harum recusandae quo odio consequuntur. Maxime, aperiam.

        59 |
        • 60 |
      61 |
      62 |
      63 | 64 | -------------------------------------------------------------------------------- /slack-card/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 79 | 80 | 81 | 82 |
      83 |
      84 |
      85 | profile-image 86 |

      Udacity Student

      87 |

      Learner Extraordinaire

      88 |
      89 |
      90 |
      12:34 PM local time
      91 |
      92 |
      93 | 94 | 95 | 96 | 97 | 98 |
      99 |
      100 |
      101 |
      102 |

      103 | Note: the buttons have class profile-action 104 |

      105 |
      106 | 107 | 108 | -------------------------------------------------------------------------------- /jQuery-eventListeners/jQueryEventListener/index.html: -------------------------------------------------------------------------------- 1 | 2 | 8 | 9 | 10 | 11 | 12 | 13 | 14 |
      15 |
      16 | 27 |
      28 |
      29 | 30 |
      31 |
      32 | 33 |

      Cool Articles

      34 |
        35 |
      • 36 |
        Article #1
        37 |

        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita sapiente officiis beatae, ut consequuntur. Quos minus neque eius, nemo sunt excepturi eveniet amet veritatis voluptatibus corporis ea, blanditiis porro ad!

        38 |

        Sample Image Title here

        39 | Placeholder Image 40 |
          41 |
        • James
          • 42 |
        • Lily
          • 43 |
        • Harry
          • 44 |
        45 |

        Magnam ex autem doloremque, tempore mollitia atque aut delectus corporis rem similique voluptates omnis reiciendis vitae impedit exercitationem unde quaerat, doloribus voluptatibus molestias et veritatis sed optio repudiandae? Provident, voluptates.

        46 |
        • 47 |
      • 48 |
        Article #2
        49 |

        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil animi ipsum, incidunt mollitia modi cum, eum ex doloremque rerum quod, maiores quisquam, enim quam unde cumque! Quam, doloremque. Voluptatum, maxime!

        50 |

        Numquam et quae, quasi. Reiciendis nemo mollitia eveniet alias, debitis facere atque excepturi et beatae laudantium commodi optio unde amet vitae libero quas cupiditate, nam porro minus. Quisquam, odit non.

        51 |
        • 52 |
      • 53 |
        Article #3
        54 |

        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt ratione, cum doloremque molestias labore amet at dicta reiciendis repudiandae fuga atque adipisci pariatur distinctio suscipit perferendis provident, facere ad aut.

        55 |

        Temporibus sapiente odio eveniet enim perferendis maxime, ratione, accusantium suscipit alias, soluta architecto culpa pariatur. Cupiditate nam eaque dolore voluptatem necessitatibus corporis iusto adipisci, dignissimos error, vitae quam, aliquid eius!

        56 |
        • 57 |
      • 58 |
        Article #4
        59 |

        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate commodi, est soluta eos voluptates eum! Modi sit quia ipsum fugiat nesciunt, assumenda deleniti consequuntur molestias reprehenderit. Voluptate corporis illum nam?

        60 |

        Quia, omnis. Quasi necessitatibus, ducimus, deserunt ipsa, reprehenderit sit a dolore fuga placeat magni culpa ipsam quas id aut veniam rerum pariatur enim harum recusandae quo odio consequuntur. Maxime, aperiam.

        61 |
        • 62 |
      63 |
      64 |
      65 | 66 | 67 | 68 | 87 | -------------------------------------------------------------------------------- /practice-keyboard-shortcuts/css/main.css: -------------------------------------------------------------------------------- 1 | html { 2 | font-family: sans-serif; 3 | -ms-text-size-adjust: 100%; 4 | -webkit-text-size-adjust: 100%; 5 | } 6 | body { 7 | margin: 0; 8 | } 9 | a { 10 | background-color: transparent; 11 | } 12 | b, 13 | strong { 14 | font-weight: bold; 15 | } 16 | dfn { 17 | font-style: italic; 18 | } 19 | h1 { 20 | font-size: 2em; 21 | margin: 0.67em 0; 22 | } 23 | mark { 24 | background: #ff0; 25 | color: #000; 26 | } 27 | small { 28 | font-size: 80%; 29 | } 30 | sub, 31 | sup { 32 | font-size: 75%; 33 | line-height: 0; 34 | position: relative; 35 | vertical-align: baseline; 36 | } 37 | sup { 38 | top: -0.5em; 39 | } 40 | sub { 41 | bottom: -0.25em; 42 | } 43 | img { 44 | border: 0; 45 | } 46 | figure { 47 | margin: 1em 40px; 48 | } 49 | hr { 50 | -webkit-box-sizing: content-box; 51 | -moz-box-sizing: content-box; 52 | box-sizing: content-box; 53 | height: 0; 54 | } 55 | pre { 56 | overflow: auto; 57 | } 58 | code, 59 | kbd, 60 | pre, 61 | samp { 62 | font-family: monospace, monospace; 63 | font-size: 1em; 64 | } 65 | fieldset { 66 | border: 1px solid #c0c0c0; 67 | margin: 0 2px; 68 | padding: 0.35em 0.625em 0.75em; 69 | } 70 | legend { 71 | border: 0; 72 | padding: 0; 73 | } 74 | textarea { 75 | overflow: auto; 76 | } 77 | optgroup { 78 | font-weight: bold; 79 | } 80 | table { 81 | border-collapse: collapse; 82 | border-spacing: 0; 83 | } 84 | td, 85 | th { 86 | padding: 0; 87 | } 88 | * { 89 | -webkit-box-sizing: border-box; 90 | -moz-box-sizing: border-box; 91 | box-sizing: border-box; 92 | } 93 | html { 94 | font-size: 10px; 95 | -webkit-tap-highlight-color: rgba(0, 0, 0, 0); 96 | } 97 | body { 98 | font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; 99 | font-size: 14px; 100 | line-height: 1.42857143; 101 | color: #333333; 102 | background-color: #ffffff; 103 | } 104 | input, 105 | button, 106 | select, 107 | textarea { 108 | font-family: inherit; 109 | font-size: inherit; 110 | line-height: inherit; 111 | } 112 | a { 113 | color: #337ab7; 114 | text-decoration: none; 115 | } 116 | figure { 117 | margin: 0; 118 | } 119 | img { 120 | vertical-align: middle; 121 | } 122 | hr { 123 | margin-top: 20px; 124 | margin-bottom: 20px; 125 | border: 0; 126 | border-top: 1px solid #eeeeee; 127 | } 128 | h1, 129 | h2, 130 | h3, 131 | h4, 132 | h5, 133 | h6 { 134 | font-family: inherit; 135 | font-weight: 500; 136 | line-height: 1.1; 137 | color: inherit; 138 | } 139 | h1, 140 | h2, 141 | h3 { 142 | margin-top: 20px; 143 | margin-bottom: 10px; 144 | } 145 | h4, 146 | h5, 147 | h6 { 148 | margin-top: 10px; 149 | margin-bottom: 10px; 150 | } 151 | h1 { 152 | font-size: 36px; 153 | } 154 | h2 { 155 | font-size: 30px; 156 | } 157 | h3 { 158 | font-size: 24px; 159 | } 160 | h4 { 161 | font-size: 18px; 162 | } 163 | h5 { 164 | font-size: 14px; 165 | } 166 | h6 { 167 | font-size: 12px; 168 | } 169 | p { 170 | margin: 0 0 10px; 171 | } 172 | ul, 173 | ol { 174 | margin-top: 0; 175 | margin-bottom: 10px; 176 | } 177 | ul ul, 178 | ol ul, 179 | ul ol, 180 | ol ol { 181 | margin-bottom: 0; 182 | } 183 | blockquote { 184 | padding: 10px 20px; 185 | margin: 0 0 20px; 186 | font-size: 17.5px; 187 | border-left: 5px solid #eeeeee; 188 | } 189 | address { 190 | margin-bottom: 20px; 191 | font-style: normal; 192 | line-height: 1.42857143; 193 | } 194 | code, 195 | kbd, 196 | pre, 197 | samp { 198 | font-family: Menlo, Monaco, Consolas, "Courier New", monospace; 199 | } 200 | code { 201 | padding: 2px 4px; 202 | font-size: 90%; 203 | color: #c7254e; 204 | background-color: #f9f2f4; 205 | border-radius: 4px; 206 | } 207 | kbd { 208 | padding: 2px 4px; 209 | font-size: 90%; 210 | color: #ffffff; 211 | background-color: #333333; 212 | border-radius: 3px; 213 | -webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.25); 214 | box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.25); 215 | } 216 | kbd kbd { 217 | padding: 0; 218 | font-size: 100%; 219 | font-weight: bold; 220 | -webkit-box-shadow: none; 221 | box-shadow: none; 222 | } 223 | pre { 224 | display: block; 225 | padding: 9.5px; 226 | margin: 0 0 10px; 227 | font-size: 13px; 228 | line-height: 1.42857143; 229 | word-break: break-all; 230 | word-wrap: break-word; 231 | color: #333333; 232 | background-color: #f5f5f5; 233 | border: 1px solid #cccccc; 234 | border-radius: 4px; 235 | } 236 | pre code { 237 | padding: 0; 238 | font-size: inherit; 239 | color: inherit; 240 | white-space: pre-wrap; 241 | background-color: transparent; 242 | border-radius: 0; 243 | } 244 | table { 245 | background-color: transparent; 246 | } 247 | caption { 248 | padding-top: 8px; 249 | padding-bottom: 8px; 250 | color: #777777; 251 | text-align: left; 252 | } 253 | th { 254 | text-align: left; 255 | } -------------------------------------------------------------------------------- /portfolio_JH/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Julie Hutchinson's Portfolio 9 | 10 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 34 | 35 |
      36 | 37 |

      About Me

      38 | 39 |

      Julie is a front-end developer that is familiar in in front-end and back-end development She is a current student 40 | in the Udacity front-end nanodegree interested in finding an entry level position as a web or UI developer. She 41 | has worked with Javascript, CSS3, HTML5, ES6, jQuery, MERN stack, Sass and Python.

      42 | 43 |

      Julie's greatest interests from the moment she inquired into web development are focused on semantic application 44 | of design and proper layout of websites. In her free time she designs code snippets to test her CSS/HTML abilities 45 | and expand them.

      46 | 47 |

      Previous to becoming a student of Udacity, she graduated as a BS Electronics Engineer. She discovered her true passion 48 | for coding by building an autonomous robot and programming it as well as programming a robotic arm for her thesis.

      49 | 50 |
      51 | 52 |
      53 | 54 |

      Projects

      55 | 56 | 57 |
      58 | 59 |
      60 | 61 |
      62 | 63 | 64 | /> 65 | 66 |
      67 |

      Blogz 68 | 69 |

      70 |

      Blog site built using CSS, Javascript, Python /Flask as the server and MYSQL for the database.

      71 |

      Features: Password hashing, Username

      72 |
      73 |
      74 | 75 |
      76 | 77 | 78 | alt="project-two" /> 79 | 80 |
      81 |

      Random Sentence Generator 82 | 83 |

      84 |

      Randomly generate words from a dictionary. Sample words from a Markov grammar model. Collect a corpus 85 | and analyze word frequency to text processing natural (human) language and develop a random sentence.

      86 |
      87 |
      88 | 89 |
      90 | 91 | 92 | 93 |
      94 |

      Asana's API Feature 95 | 96 |

      97 |

      This is a feature built for a take home project utilizing asana API. It was developed with Javascript, 98 | CRUD model and Sass

      99 |
      100 |
      101 | 102 |
      103 | 104 |
      105 | 106 |
      107 | 108 | 127 | 128 | 129 | 130 | 131 | 132 | 133 | 134 | -------------------------------------------------------------------------------- /RWDF_L2_Start/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Brighton Times 8 | 9 | 10 | 11 | 12 | 13 | 14 |
      15 |
      16 | 17 |

      18 | The Brighton Times 19 |

      20 | 21 |
      22 |
      23 | 24 | 32 | 33 |
      34 |
      35 |
      36 |
      37 |

      Absolutely astonishing breaking news!

      38 |

      Organic raw denim Vice keffiyeh lomo Kickstarter art lomo Kickstarter art four loko. Organic raw denim Vice keffiyeh lomo Kickstarter art lomo Kickstarter art four loko.

      39 |
      40 |
      41 | 42 |
      43 |

      Top news + more

      44 | 58 |
      59 | 60 |
      61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | 90 | 91 | 92 | 93 | 94 | 95 | 96 | 97 | 98 | 99 | 100 | 101 | 102 | 103 | 104 | 105 | 106 | 107 | 108 |
      dateteamscoreteam
      FridayBears95109Cubs
      FridayOtters31Cubs
      SaturdayWolves70Panthers
      SundayHawks1112Capons
      SundayStags62Foxes
      109 |
      110 | 111 |
      112 | Brighton, UK 113 | Sunny 114 | 115 | icon of a partially sunny day13°C 116 | 117 |
        118 |
      • 119 | Mon 120 | icon of a sunny day 121 | 13 °C 122 |
      • 123 | Tues 124 | icon of a cloudy day 125 | 13 °C 126 |
      • 127 | Wed 128 | icon of a cloudy day 129 | 13 °C 130 |
      • 131 | Thu 132 | icon of a rainy day 133 | 13 °C 134 |
      • 135 | Fri 136 | icon of a sunny day 137 | 13 °C 138 |
        • 139 |
      140 |
      141 | 142 |
      143 |

      Latest news + more

      144 |
        145 |
      • 146 | picture of a girl with a large, stuffed dog toy 147 |

        Gastropub distillery Marfa farm-to-table

        148 |

        Gastropub distillery Marfa farm-to-table, Etsy Truffaut fingerstache. 149 | Squid lomo Kickstarter art party cronut scenester. Organic raw denim Vice keffiyeh four loko. Squid lomo Kickstarter art party cronut scenester. Organic raw denim Vice keffiyeh four loko.Vice keffiyeh four loko. Squid lomo Kickstarter art party cronut scenester. Organic raw denim Vice keffiyeh four loko.Vice keffiyeh four loko. Squid lomo Kickstarter art party cronut scenester. Organic raw denim Vice keffiyeh four loko. 150 |

        151 |
        • 152 |
      • 153 | picture of a girl with a large, stuffed dog toy 154 |

        Organic raw keffiyeh four loko.

        155 |

        Vice keffiyeh four loko. Squid lomo Kickstarter art party cronut scenester. Organic raw denim Vice keffiyeh four loko.Vice keffiyeh four loko. Squid lomo Kickstarter art party cronut scenester. Organic raw denim Vice loko. 156 |

        157 |
        • 158 |
      • 159 | picture of a girl with a large, stuffed dog toy 160 |

        Kickstarter art party cronut scenester.

        161 |

        Gastropub distillery Marfa farm-to-table, Etsy Truffaut fingerstache. 162 | Squid lomo Kickstarter art party cronut scenester. Organic raw denim Vice keffiyeh four loko. Squid lomo Kickstarter art party cronut scenester. Organic raw denim Vice keffiyeh four loko.Vice keffiyeh four loko. 163 |

        164 |
        • 165 |
      • 166 | picture of a girl with a large, stuffed dog toy 167 |

        Squid lomo Kickstarter art party cronut

        168 |

        Gastropub distillery Marfa farm-to-table, Etsy Truffaut fingerstache. 169 | Squid lomo Kickstarter art party cronut scenester. Organic raw denim Vice keffiyeh four loko. Squid lomo Kickstarter art party cronut scenester. Organic raw denim Vice keffiyeh four loko.Vice keffiyeh four loko. 170 |

        171 |
        • 172 |
      173 |
      174 |
      175 | 182 |
      183 | 184 | 185 | --------------------------------------------------------------------------------