<!doctype html>
<html>
<head>
<link href='http://fonts.googleapis.com/css?family=Oswald:400,300' rel='stylesheet'>
<link href="http://s3.amazonaws.com/codecademy-content/courses/ltp2/css/bootstrap.min.css" rel="stylesheet">
<link href="style.css" rel="stylesheet">
<title>Home</title>
</head>
<body>
<div class="header">
<div class="container">
<a href="#" class="logo-icon">
<img src="">
</a>
<ul class="menu">
<li><a href="index.html"><b>Home</b></a> </li>
<li><a href="thematize_progress.html">Thematize progress</a></li>
<li><a href="link_to_research.html">Link to research</a></li>
<li><a href="./future.html">The future</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle">Assignments <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="assignment1.html">Assignment 1</a></li>
<li><a href="assignment2.html">Assignment 2</a></li>
<li><a href="assignment3.html">Assignment 3</a></li>
<li><a href="assignment4.html">Assignment 4</a></li>
</ul>
</li>
</ul>
</div>
</div>
<div class="slider">
<div class="slide active-slide">
<div class="container">
<div class="row">
<div class="slide-copy col-xs-5">
<h1>Welcome to the joint portfolio of David de Bie and Chaïm Wijnberg</h1>
<p>Please use the navigation in the header to view the different sections of this portfolio. Use the
navigation dots below to slide through each section. In the dropdown menu you can find the assignments</p>
</div>
</div>
</div>
</div>
<div class="slide slide-feature">
<div class="container">
<div class="row">
<div class="col-xs-12">
<blockquote>
For me, this course has been a lot of fun so far. BLalbla
<cite>David</cite>
</blockquote>
</div>
</div>
</div>
</div>
<div class="slide">
<div class="container">
<div class="row">
<div class="slide-copy col-xs-5">
<blockquote>
To code or not to code that is the question
<cite>Chaïm</cite>
</blockquote>
</div>
</div>
</div>
</div>
<div class="slide">
<div class="container">
<div class="row">
<div class="slide-copy col-xs-5">
</div>
<div class="slide-img col-xs-7">
</div>
</div>
</div>
</div>
</div>
<div class="slider-nav">
<a href="#" class="arrow-prev"><img src="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/arrow-prev.png"></a>
<ul class="slider-dots">
<li class="dot active-dot">•</li>
<li class="dot">•</li>
<li class="dot">•</li>
<li class="dot">•</li>
</ul>
<a href="#" class="arrow-next"><img src="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/arrow-next.png"></a>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="script.es6.js"></script>
</body>
</html>
var main = function() {
$('.dropdown-toggle').click(function() {
$('.dropdown-menu').toggle();
});
$('.arrow-next').click(function() {
var currentSlide = $('.active-slide');
var nextSlide = currentSlide.next();
var currentDot = $('.active-dot');
var nextDot = currentDot.next();
if(nextSlide.length === 0) {
nextSlide = $('.slide').first();
nextDot = $('.dot').first();
}
currentSlide.fadeOut(600).removeClass('active-slide');
nextSlide.fadeIn(600).addClass('active-slide');
currentDot.removeClass('active-dot');
nextDot.addClass('active-dot');
});
$('.arrow-prev').click(function() {
var currentSlide = $('.active-slide');
var prevSlide = currentSlide.prev();
var currentDot = $('.active-dot');
var prevDot = currentDot.prev();
if(prevSlide.length === 0) {
prevSlide = $('.slide').last();
prevDot = $('.dot').last();
}
currentSlide.fadeOut(600).removeClass('active-slide');
prevSlide.fadeIn(600).addClass('active-slide');
currentDot.removeClass('active-dot');
prevDot.addClass('active-dot');
});
}
$(document).ready(main);
var dropdown = document.querySelectorAll('.dropdown');
var dropdownArray = Array.prototype.slice.call(dropdown,0);
dropdownArray.forEach(function(el){
var button = el.querySelector('a[data-toggle="dropdown"]'),
menu = el.querySelector('.dropdown-menu'),
arrow = button.querySelector('i.icon-arrow');
button.onclick = function(event) {
if(!menu.hasClass('show')) {
menu.classList.add('show');
menu.classList.remove('hide');
arrow.classList.add('open');
arrow.classList.remove('close');
event.preventDefault();
}
else {
menu.classList.remove('show');
menu.classList.add('hide');
arrow.classList.remove('open');
arrow.classList.add('close');
event.preventDefault();
}
};
})
Element.prototype.hasClass = function(className) {
return this.className && new RegExp("(^|\\s)" + className + "(\\s|$)").test(this.className);
};
/* General */
.container {
width: 1960px;
text-align: center;
}
/* Header */
.header {
background-color: rgba(255, 255, 255, 0.95);
border-bottom: 1px solid #ddd;
font-family: 'Oswald', sans-serif;
font-weight: 300;
font-size: 17px;
padding: 15px;
}
/* Menu */
.header .menu {
float: left;
list-style: none;
margin-top: 5px;
}
.menu > li {
display: inline;
padding-left: 20px;
padding-right: 20px;
}
.menu a {
color: #898989;
}
/* Dropdown */
.dropdown-menu {
font-size: 16px;
margin-top: 5px;
min-width: 105px;
}
.dropdown-menu li a {
color: #898989;
padding: 6px 20px;
font-weight: 300;
}
/* Carousel */
.slider {
position: relative;
width: 100%;
height: 600px;
border-bottom: 1px solid #ddd;
padding: 15px;
}
.slide {
background: transparent url('http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/feature-gradient-transparent.png') center center no-repeat;
background-size: cover;
display: none;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.active-slide {
display: block;
}
.slide-copy h1 {
color: #363636;
font-family: 'Oswald', sans-serif;
font-weight: 400;
font-size: 40px;
margin-top: 10px;
margin-bottom: 0px;
}
.slide-copy h2 {
color: #b7b7b7;
font-family: 'Oswald', sans-serif;
font-weight: 400;
font-size: 40px;
margin: 5px;
}
.slide-copy p {
color: #959595;
font-family: Georgia, "Times New Roman", serif;
font-size: 1.15em;
line-height: 1.75em;
margin-bottom: 10px;
margin-top: 16px;
}
.slide-img {
text-align: left;
}
/* Slide feature */
.slide-feature {
text-align: center;
/* background-image: url('http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/ac.png'); */
height: 47px;
}
.slide-feature img {
margin-top: 112px;
margin-bottom: 28px;
}
.slide-feature a {
display: block;
color: #6fc5e0;
font-family: "HelveticaNeueMdCn", Helvetica, sans-serif;
font-family: 'Oswald', sans-serif;
font-weight: 400;
font-size: 20px;
}
.slider-nav {
position: relative;
text-align: center;
margin-top: 20px;
}
.arrow-prev {
margin-right: 45px;
display: inline-block;
vertical-align: top;
margin-top: 9px;
}
.arrow-next {
margin-left: 45px;
display: inline-block;
vertical-align: top;
margin-top: 9px;
}
.slider-dots {
list-style: none;
display: inline-block;
padding-left: 0;
margin-bottom: 0;
}
.slider-dots li {
color: #bbbcbc;
display: inline;
font-size: 30px;
margin-right: 5px;
}
.slider-dots li.active-dot {
color: #363636;
}
/* Blockquote */
blockquote {
font-family: Georgia, serif;
font-size: 18px;
font-style: italic;
width: 500px;
margin: 0.25em 0;
padding: 0.25em 40px;
line-height: 1.45;
position: relative;
color: #383838;
}
blockquote:before {
display: block;
content: "\201C";
font-size: 80px;
position: absolute;
left: 0px;
top: -20px;
color: #7a7a7a;
}
blockquote cite {
color: #999999;
font-size: 14px;
display: block;
margin-top: 5px;
}
blockquote cite:before {
content: "\2014 \2009";
}
/* Texts */
#textfutureChaim {
text-align: left;
font-family: Georgia, serif;
font-size: 14px;
font-style: italic;
width: 500px;
padding: 0.25em 40px;
position: relative;
color: #383838;
}
#textBody {
text-align: left;
font-family: Georgia, serif;
font-size: 12px;
font-style: italic;
width: 500px;
padding-top: 10px;
line-height: 1.45;
position: relative;
color: #383838
}
#p1 {
text-align: left;
font-family: Georgia, serif;
font-size: 12px;
font-style: italic;
width: 500px;
height: 120px;
line-height: 1.45;
position: relative;
color: #383838;
}
#p2 {
text-align: left;
font-family: Georgia, serif;
font-size: 12px;
font-style: italic;
width: 500px;
height: 120px;
line-height: 1.45;
position: relative;
color: #383838;
}
<!doctype html>
<html>
<head>
<link href='http://fonts.googleapis.com/css?family=Oswald:400,300' rel='stylesheet'>
<link href="http://s3.amazonaws.com/codecademy-content/courses/ltp2/css/bootstrap.min.css" rel="stylesheet">
<link href="style.css" rel="stylesheet">
<title>Assignment 1</title>
</head>
<body>
<div class="header">
<div class="container">
<a href="#" class="logo-icon">
<img src="">
</a>
<ul class="menu">
<li><a href="index.html">Home</a> </li>
<li><a href="thematize_progress.html">Thematize progress</a></li>
<li><a href="link_to_research.html">Link to research</a></li>
<li><a href="future.html">The future</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle">Assignments<b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="./assignment1.html">Assignment 1</a></li>
<li><a href="./assignment2.html">Assignment 2</a></li>
<li><a href="./assignment3.html">Assignment 3</a></li>
<li><a href="./assignment4.html">Assignment 4</a></li>
</ul>
</li>
</ul>
</div>
</div>
<div class="slider">
<div class="slide active-slide">
<div class="container">
<div class="row">
<div class="slide-copy col-xs-5">
<div id="textBody">
<h1>Assignment 1</h1>
<p>
Where it all began...
</p>
</div>
</div>
<div class="slide-img col-xs-7">
</div>
</div>
</div>
</div>
<div class="slide slide-feature">
<div class="container">
<div class="row">
<div class="slide-copy col-xs-5">
<blockquote>
It was fun and allowed me to be creative and focus on the content
<cite>David de Bie</cite>
</blockquote>
<div id="textBody">
<p>As the first assignment only addressed html and css, there were no really new things for me.
However, it was fun and allowed me to be creative and focus on the content. I also think it was
a good starting point towards designing web pages, since it all starts with adding content in
html and polishing it up with css..
<ul>
<li><b><a href="http://plnkr.co/edit/x88jNbaTEfcVoKyMQn3W?p=preview">David's assignment</a></b></li>
</ul>
</p>
</div>
</div>
</div>
</div>
</div>
<div class="slide">
<div class="container">
<div class="row">
<div class="slide-copy col-xs-5">
<blockquote>
The first assignment was for me a very easy one.
<cite>Chaïm Wijnberg</cite>
</blockquote>
<div id="textBody">
<p>For me, the first assignment was a very easy one. Because I already
have worked and played with html and css. It was for me a very fun assignment
because my goal was to create a kind of 90's website with a lot og gif's and humour.
<ul>
<li><b><a href="http://embed.plnkr.co/8rlHhP12TjXzWsxlcS2q/preview">Chaïm's assignment</a></b></li>
</ul>
</p>
</div>
</div>
<div class="slide-img col-xs-7">
</div>
</div>
</div>
</div>
<div class="slide">
<div class="container">
<div class="row">
<div class="slide-copy col-xs-5">
</div>
<div class="slide-img col-xs-7">
</div>
</div>
</div>
</div>
</div>
<div class="slider-nav">
<a href="#" class="arrow-prev"><img src="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/arrow-prev.png"></a>
<ul class="slider-dots">
<li class="dot active-dot">•</li>
<li class="dot">•</li>
<li class="dot">•</li>
<li class="dot">•</li>
</ul>
<a href="#" class="arrow-next"><img src="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/arrow-next.png"></a>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="script.es6.js"></script>
</body>
</html>
<!doctype html>
<html>
<head>
<link href='http://fonts.googleapis.com/css?family=Oswald:400,300' rel='stylesheet'>
<link href="http://s3.amazonaws.com/codecademy-content/courses/ltp2/css/bootstrap.min.css" rel="stylesheet">
<link href="style.css" rel="stylesheet">
<title>Assignment 2</title>
</head>
<body>
<div class="header">
<div class="container">
<a href="#" class="logo-icon">
<img src="">
</a>
<ul class="menu">
<li><a href="index.html">Home</a> </li>
<li><a href="thematize_progress.html">Thematize progress</a></li>
<li><a href="link_to_research.html">Link to research</a></li>
<li><a href="future.html">The future</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle">Assignments<b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="./assignment1.html">Assignment 1</a></li>
<li><a href="./assignment2.html">Assignment 2</a></li>
<li><a href="./assignment3.html">Assignment 3</a></li>
<li><a href="./assignment4.html">Assignment 4</a></li>
</ul>
</li>
</ul>
</div>
</div>
<div class="slider">
<div class="slide active-slide">
<div class="container">
<div class="row">
<div class="slide-copy col-xs-5">
<div id="textBody">
<h1>Assignment 2</h1>
<p>
It was the second week when...
</p>
</div>
</div>
<div class="slide-img col-xs-7">
</div>
</div>
</div>
</div>
<div class="slide slide-feature">
<div class="container">
<div class="row">
<div class="col-xs-12">
<blockquote>
The second assignment was a bit harder than the first one.
<cite>David de Bie</cite>
</blockquote>
<div id="textBody">
<p>The second assignment was a bit harder than the first one. Working with html templates was new to me
and it took a while to get the hang of it. It was also a bit unclear what templates are
exactly and when and why to use them. But in the end, I got a nice template example working
and it made more sense.
<ul>
<li><b><a href="http://plnkr.co/edit/x88jNbaTEfcVoKyMQn3W?p=preview">David's assignment</a></b></li>
</ul>
</p>
</div>
</div>
</div>
</div>
</div>
<div class="slide">
<div class="container">
<div class="row">
<div class="slide-copy col-xs-5">
<blockquote>
This was much harder than the previous one
<cite>Chaïm Wijnberg</cite>
</blockquote>
<div id="textBody">
<p>For me this was a much harder assignment than the previous one. Mainly because
we needed to use variables and containers.
<ul>
<li><b><a href="http://embed.plnkr.co/V596Jv/preview">Chaïm's assignment</a></b></li>
</ul>
</p>
</div>
</div>
<div class="slide-img col-xs-7">
</div>
</div>
</div>
</div>
<div class="slide">
<div class="container">
<div class="row">
<div class="slide-copy col-xs-5">
</div>
<div class="slide-img col-xs-7">
</div>
</div>
</div>
</div>
</div>
<div class="slider-nav">
<a href="#" class="arrow-prev"><img src="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/arrow-prev.png"></a>
<ul class="slider-dots">
<li class="dot active-dot">•</li>
<li class="dot">•</li>
<li class="dot">•</li>
<li class="dot">•</li>
</ul>
<a href="#" class="arrow-next"><img src="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/arrow-next.png"></a>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="script.es6.js"></script>
</body>
</html>
<!doctype html>
<html>
<head>
<link href='http://fonts.googleapis.com/css?family=Oswald:400,300' rel='stylesheet'>
<link href="http://s3.amazonaws.com/codecademy-content/courses/ltp2/css/bootstrap.min.css" rel="stylesheet">
<link href="style.css" rel="stylesheet">
<title>Assignment 3</title>
</head>
<body>
<div class="header">
<div class="container">
<a href="#" class="logo-icon">
<img src="">
</a>
<ul class="menu">
<li><a href="index.html">Home</a> </li>
<li><a href="thematize_progress.html">Thematize progress</a></li>
<li><a href="link_to_research.html">Link to research</a></li>
<li><a href="future.html">The future</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle">Assignments<b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="./assignment1.html">Assignment 1</a></li>
<li><a href="./assignment2.html">Assignment 2</a></li>
<li><a href="./assignment3.html">Assignment 3</a></li>
<li><a href="./assignment4.html">Assignment 4</a></li>
</ul>
</li>
</ul>
</div>
</div>
<div class="slider">
<div class="slide active-slide">
<div class="container">
<div class="row">
<div class="slide-copy col-xs-5">
<div id="textBody">
<h1>Assignment 3</h1>
<p>
Then came the Wu-Tang Clan...
</p>
</div>
</div>
<div class="slide-img col-xs-7">
</div>
</div>
</div>
</div>
<div class="slide slide-feature">
<div class="container">
<div class="row">
<div class="col-xs-12">
<blockquote>
The Wu-Tang Clan is awesome, great lyrics.
<cite>David de Bie</cite>
</blockquote>
<div id="textBody">
<p>The level of the third assignment was comparable to the second one. Some new stuff
that took a while to get used to, but eventually it worked out nicely. I really liked the
idea of using the great lyrics of the Wu-Tang Clan to see how programming can take away
repetitive tasks that seem senseless. Dolla dolla bill y'allll!
<ul>
<li><b><a href="http://plnkr.co/edit/G2dE7ths2x8SnMeEwhrE?p=preview">David's assignment</a></b></li>
</ul>
</p>
</div>
</div>
</div>
</div>
</div>
<div class="slide">
<div class="container">
<div class="row">
<div class="slide-copy col-xs-5">
<blockquote>
I do not like the Wu-Tan Clan
<cite>Chaïm Wijnberg</cite>
</blockquote>
<div id="textBody">
<p>This also was not a very easy assignment. Also because I am not a fan of
Wu-Tan Clan. But the idea was to end the lyrics using basic javascript.
It turned out ok, and I was struggling bacause I also was in the middle
of the codecademy javascript lessons. Also looking more closely to the coded
of others I managed to do it.
<ul>
<li><b><a href="http://plnkr.co/edit/IgZ0fRuznY18M75C2lxL?p=preview">Chaïm's assignment</a></b></li>
</ul>
</p>
</div>
</div>
<div class="slide-img col-xs-7">
</div>
</div>
</div>
</div>
<div class="slide">
<div class="container">
<div class="row">
<div class="slide-copy col-xs-5">
</div>
<div class="slide-img col-xs-7">
</div>
</div>
</div>
</div>
</div>
<div class="slider-nav">
<a href="#" class="arrow-prev"><img src="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/arrow-prev.png"></a>
<ul class="slider-dots">
<li class="dot active-dot">•</li>
<li class="dot">•</li>
<li class="dot">•</li>
<li class="dot">•</li>
</ul>
<a href="#" class="arrow-next"><img src="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/arrow-next.png"></a>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="script.es6.js"></script>
</body>
</html>
<!doctype html>
<html>
<head>
<link href='http://fonts.googleapis.com/css?family=Oswald:400,300' rel='stylesheet'>
<link href="http://s3.amazonaws.com/codecademy-content/courses/ltp2/css/bootstrap.min.css" rel="stylesheet">
<link href="style.css" rel="stylesheet">
<title>Assignment 4</title>
</head>
<body>
<div class="header">
<div class="container">
<a href="#" class="logo-icon">
<img src="">
</a>
<ul class="menu">
<li><a href="index.html">Home</a> </li>
<li><a href="thematize_progress.html">Thematize progress</a></li>
<li><a href="link_to_research.html">Link to research</a></li>
<li><a href="future.html">The future</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle">Assignments<b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="./assignment1.html">Assignment 1</a></li>
<li><a href="./assignment2.html">Assignment 2</a></li>
<li><a href="./assignment3.html">Assignment 3</a></li>
<li><a href="./assignment4.html">Assignment 4</a></li>
</ul>
</li>
</ul>
</div>
</div>
<div class="slider">
<div class="slide active-slide">
<div class="container">
<div class="row">
<div class="slide-copy col-xs-5">
<div id="textBody">
<h1>Assignment 4</h1>
<p>
The last thing before the break
</p>
</div>
</div>
<div class="slide-img col-xs-7">
</div>
</div>
</div>
</div>
<div class="slide slide-feature">
<div class="container">
<div class="row">
<div class="col-xs-12">
<blockquote>
The testing syntax always seems so different from the rest of the syntax.
<cite>David de Bie</cite>
</blockquote>
<div id="textBody">
<p>This was the hardest assignment of the course for me. I had used testing before (with Ruby),
but that didn't really help me. The testing syntax always seems so different from the rest of the
syntax (either in Ruby or JavaScript), that it remained very hard for me to write my own test
scenarios. Also I don't like testing because it takes a lot of time you could also spend on actual
coding (although I also see the advantages of testing). Getting the failing tests to pass was somehow
easier than I expected, and to be honest I think my code passed because of Plunker, and not because it conformed all tests.
<ul>
<li><b><a href="http://plnkr.co/edit/l3B595yksgM1VUl423RV?p=preview">David's assignment</a></b></li>
</ul>
</p>
</div>
</div>
</div>
</div>
</div>
<div class="slide">
<div class="container">
<div class="row">
<div class="slide-copy col-xs-5">
<blockquote>
Testing the mistakes
<cite>Chaïm Wijnberg</cite>
</blockquote>
<div id="textBody">
<p>The first assignment was for me a very easy one. Because I already
have worked as played with html and css. It was for me a very fun assignment
because my goal was to create a kind of 90's website with a lot og gif's and humour.
<ul>
<li><b><a href="http://plnkr.co/edit/XbjmT1Tc9kHyLg43gJ3p?p=preview">Chaïm's assignment</a></b></li>
</ul>
</p>
</div>
</div>
<div class="slide-img col-xs-7">
</div>
</div>
</div>
</div>
<div class="slide">
<div class="container">
<div class="row">
<div class="slide-copy col-xs-5">
</div>
<div class="slide-img col-xs-7">
</div>
</div>
</div>
</div>
</div>
<div class="slider-nav">
<a href="#" class="arrow-prev"><img src="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/arrow-prev.png"></a>
<ul class="slider-dots">
<li class="dot active-dot">•</li>
<li class="dot">•</li>
<li class="dot">•</li>
<li class="dot">•</li>
</ul>
<a href="#" class="arrow-next"><img src="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/arrow-next.png"></a>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="script.es6.js"></script>
</body>
</html>
<!doctype html>
<html>
<head>
<link href='http://fonts.googleapis.com/css?family=Oswald:400,300' rel='stylesheet'>
<link href="http://s3.amazonaws.com/codecademy-content/courses/ltp2/css/bootstrap.min.css" rel="stylesheet">
<link href="style.css" rel="stylesheet">
<title>Thematize progress</title>
</head>
<body>
<div class="header">
<div class="container">
<a href="#" class="logo-icon">
<img src="">
</a>
<ul class="menu">
<li><a href="index.html">Home</a> </li>
<li><a href="thematize_progress.html"><b>Thematize progress</b></a></li>
<li><a href="link_to_research.html">Link to research</a></li>
<li><a href="future.html">The future</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle">Assignments <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="assignment1.html">Assignment 1</a></li>
<li><a href="assignment2.html">Assignment 2</a></li>
<li><a href="assignment3.html">Assignment 3</a></li>
<li><a href="assignment4.html">Assignment 4</a></li>
</ul>
</li>
</ul>
</div>
</div>
<div class="slider">
<div class="slide active-slide">
<div class="container">
<div class="row">
<div class="slide-copy col-xs-5">
<blockquote>
To code or not to code, that's the question
<cite>Chaïm</cite>
</blockquote>
</div>
<div class="slide-img col-xs-7">
</div>
</div>
</div>
</div>
<div class="slide slide-feature">
<div class="container">
<div class="row">
<div class="col-xs-12">
<blockquote>
For my masters' thesis, I'm looking into tools to capture and analyze social
media posts. Combined with an internship for the Institute for Social Research
Netherlands, who are looking to use social media posts as a data source, I'm
investigating if, and how, capture and analysis tools can be suitable for analyzing
social media posts in the light of social research. As I have worked with and
compared different tools, I can condlude that no tool is perfect, which has set
me with an additional goal for my thesis: describing the perfect tool to analyze
social media posts for use in social research.
<cite>David</cite>
</blockquote>
</div>
</div>
</div>
</div>
<div class="slide">
<div class="container">
<div class="row">
<div class="slide-copy col-xs-5">
<blockquote>
This is very unlogical for me to do...
<cite>Chaïm</cite>
</blockquote>
</div>
<div class="slide-img col-xs-7">
</div>
</div>
</div>
</div>
<div class="slide">
<div class="container">
<div class="row">
<div class="slide-copy col-xs-5">
</div>
<div class="slide-img col-xs-7">
</div>
</div>
</div>
</div>
</div>
<div class="slider-nav">
<a href="#" class="arrow-prev"><img src="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/arrow-prev.png"></a>
<ul class="slider-dots">
<li class="dot active-dot">•</li>
<li class="dot">•</li>
<li class="dot">•</li>
<li class="dot">•</li>
</ul>
<a href="#" class="arrow-next"><img src="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/arrow-next.png"></a>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="script.es6.js"></script>
</body>
</html>
<!doctype html>
<html>
<head>
<link href='http://fonts.googleapis.com/css?family=Oswald:400,300' rel='stylesheet'>
<link href="http://s3.amazonaws.com/codecademy-content/courses/ltp2/css/bootstrap.min.css" rel="stylesheet">
<link href="style.css" rel="stylesheet">
<title>Link to research</title>
</head>
<body>
<div class="header">
<div class="container">
<a href="#" class="logo-icon">
<img src="">
</a>
<ul class="menu">
<li><a href="index.html">Home</a> </li>
<li><a href="thematize_progress.html">Thematize progress</a></li>
<li><a href="link_to_research.html"><b>Link to research</b></a></li>
<li><a href="future.html">The future</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle">Assignments <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="assignment1.html">Assignment 1</a></li>
<li><a href="assignment2.html">Assignment 2</a></li>
<li><a href="assignment3.html">Assignment 3</a></li>
<li><a href="assignment4.html">Assignment 4</a></li>
</ul>
</li>
</ul>
</div>
</div>
<div class="slider">
<div class="slide active-slide">
<div class="container">
<div class="row">
<div class="slide-copy col-xs-5">
<blockquote>
Where to search for research...
<cite>Unknown</cite>
</blockquote>
</div>
<div class="slide-img col-xs-7">
</div>
</div>
</div>
</div>
<div class="slide slide-feature">
<div class="container">
<div class="row">
<div class="col-xs-12">
<blockquote>
The progress I've made during this course
helps me to understand software better, and to see the logic behind different functionalities.
<cite>David de Bie</cite>
</blockquote>
<div id="textBody">
<p> For my masters' thesis, I'm looking into tools to capture and analyze social
media posts. Combined with an internship for the Netherlands Institute for Social Research,
who are looking to use social media posts as a data source, I'm
investigating if, and how, capture and analysis tools can be suitable for analyzing
social media posts in the light of social research. As I have worked with and
compared different tools, I can conclude that no tool is perfect, which has set
me with an additional goal for my thesis: describing the perfect tool to analyze
social media posts for use in social research. The progress I've made during this course
helps me to understand software better, and to see the logic behind different functionalities.
Ideally, this course would have allowed me to build my own tool to perfectly fit my needs, but
I know that's way too much to ask for in only a few months time.
</p>
</div>
</div>
</div>
</div>
</div>
<div class="slide">
<div class="container">
<div class="row">
<div class="slide-copy col-xs-5">
<blockquote>
The wunderfull system of app-marketing
<cite>Chaïm</cite>
</blockquote>
<div id="textfuturechaimBody">
<p id="p1">For my masters' thesis, I am looking more closley to online advertising. It would be very interesting to
see a for instance how a coockie worked and process the data that is deriving from it, and thus making a
complete profile of someone. In order wordt making a program that processes the data automaticly.
</p>
</div>
</div>
<div class="slide-img col-xs-7">
</div>
</div>
</div>
</div>
<div class="slide">
<div class="container">
<div class="row">
<div class="slide-copy col-xs-5">
</div>
<div class="slide-img col-xs-7">
</div>
</div>
</div>
</div>
</div>
<div class="slider-nav">
<a href="#" class="arrow-prev"><img src="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/arrow-prev.png"></a>
<ul class="slider-dots">
<li class="dot active-dot">•</li>
<li class="dot">•</li>
<li class="dot">•</li>
<li class="dot">•</li>
</ul>
<a href="#" class="arrow-next"><img src="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/arrow-next.png"></a>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="script.es6.js"></script>
</body>
</html>
<!doctype html>
<html>
<head>
<link href='http://fonts.googleapis.com/css?family=Oswald:400,300' rel='stylesheet'>
<link href="http://s3.amazonaws.com/codecademy-content/courses/ltp2/css/bootstrap.min.css" rel="stylesheet">
<link href="style.css" rel="stylesheet">
<title>Future</title>
</head>
<body>
<div class="header">
<div class="container">
<a href="#" class="logo-icon">
<img src="">
</a>
<ul class="menu">
<li><a href="index.html"><b>Home</b></a> </li>
<li><a href="thematize_progress.html">Thematize progress</a></li>
<li><a href="link_to_research.html">Link to research</a></li>
<li><a href="future.html"><b>The future</b></a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle">Assignments<b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="assignment1.html">Assignment 1</a></li>
<li><a href="assignment2.html">Assignment 2</a></li>
<li><a href="assignment3.html">Assignment 3</a></li>
<li><a href="assignment4.html">Assignment 4</a></li>
</ul>
</li>
</ul>
</div>
</div>
<div class="slider">
<div class="slide active-slide">
<div class="container">
<div class="row">
<div class="slide-copy col-xs-5">
<blockquote>
The future is already past...
<cite>Unknown</cite>
</blockquote>
</div>
<div class="slide-img col-xs-7">
</div>
</div>
</div>
</div>
<div class="slide slide-feature">
<div class="container">
<div class="row">
<div class="col-xs-12">
<blockquote>
I know where they have very nice bitterballen!
<cite>David</cite>
</blockquote>
<div id="textBody">
<h1>The tasks one needs to finish</h1>
<p id="p1">To me, the ideal course should start with setting up a decent development environment.
This should also include learning the basics of Git(hub) and using the terminal during coding.
Although using Plunker has a lot of advantages, it's limits are easily reached and I think it stands
in the way of what we're really here to do: write code and make stuff.
After that, the first homework should consist of following a number of selected online courses.
For example, learning how to use JavaScript, jQuery and JSON to build interactive websites.
In class, we can then discuss the difficulties everyone has encountered and try to clear everything
up. As everyone has now worked with a few languages, each should think of his or her dream project,
and discuss in class if these projects would be feasible. Also, hints on what to learn in order to
begin with the project should be given. Every following class should be a session in which everyone
can work on their project, ask questions, and get guidance. At the end of the course, everyone should
present their projects, after which we'll all have a drink at Café van Zuylen, right around the corner.
Rumour has it that they have the best bitterballs in town.</p>
</br></br></br></br>
<h1>The resources one needs to find</h1>
<p id="p2">As mentioned above, we should make use of free online courses in order to get familiar with
a few different languages. Codecademy, codeschool, tuts+, etc. are great ways of getting familiar
with coding and see immediate results on the output screen. The book of Haverbeke is a useful additional
source, especially when everyone starts working on their own projects.</p>
</div>
</div>
</div>
</div>
</div>
<div class="slide">
<div class="container">
<div class="row">
<div class="slide-copy col-xs-5">
<blockquote>
Being the cookiemonster is alot of fun!
<cite>Chaim</cite>
</blockquote>
<div id="textfutureChaim">
</div>
<div id="textBody">
<h1>The tasks one needs to finish</h1>
<p id="p1">The task consists of different parts. First of all, all the students should start researching on what a cookie is,
what is does and how is it made. You should start looking below at the different resources in order to really
Doing this, wil make comprehension of the cookie a lot easier and making one more fun. The second step consists of making a coockie of your own.
After this, a program needs to be made in order to process all incoming information. Students shoudl think of different categories. The next and final step
is showing a profile of the person's cookie. It would also be nice if in some way there could be a program where you can generate a profile of somebody else.
</p>
<h1>The resources one needs to find</h1>
<p id="p2">Please take the time to analyse and read the different resources listed below.
I expect you to familiarize yourself with the different codes and how a cookie actually works. Also think about the possibilities of cookies.</p>
<ul>
<li><a href="http://en.wikipedia.org/wiki/HTTP_cookiew">A Wikipedia cookie</a></li>
<li><a href="http://www.w2spconf.com/2011/papers/session-integrity.pdf">Origin of Cookies by A. Bortz et. al. /a></li>
<li><a href="http://webdesign.about.com/od/cookies/a/aa083198.htm">How to write a cookie</a></li>
<li><a href="hhttp://stackoverflow.com/questions/14573223/set-cookie-and-get-cookie-with-javascript">How to write a cookie</a></li>
<li><a href="http://www.htmlgoodies.com/beyond/javascript/article.php/3470821">How to write a cookie</a></li>
</ul>
</div>
</div>
<div class="slide-img col-xs-7">
</div>
</div>
</div>
</div>
<div class="slide">
<div class="container">
<div class="row">
<div class="slide-copy col-xs-5">
</div>
<div class="slide-img col-xs-7">
</div>
</div>
</div>
</div>
</div>
<div class="slider-nav">
<a href="#" class="arrow-prev"><img src="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/arrow-prev.png"></a>
<ul class="slider-dots">
<li class="dot active-dot">•</li>
<li class="dot">•</li>
<li class="dot">•</li>
<li class="dot">•</li>
</ul>
<a href="#" class="arrow-next"><img src="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/arrow-next.png"></a>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="script.es6.js"></script>
<script src="scripttexts.js"></script>
</body>
</html>
var div = document.getElementById("textfutureChaim");
div.textContent = "Below is my dreamsession";
var text = div.textContent;
var para = document.createElement("p");
var element = document.getElementById("textBody");