Koos week 2

.gitignore

@@ -0,0 +1,2 @@
+.idea/
+/assets/js/config.js

README.md

@@ -2,10 +2,53 @@
 The course repo for 'Web App From Scratch'
 
 ## Advantages and disadvantages of JavaScript libraries/frameworks
-...
+
+Advantages
+* Less code to write.
+* Quicker to make applications (less costs)
+* Support from communities or development teams
+* More readable code
+* No browser compatibility problems
+* Code is more secure because more people can evaluate it.
+
+Disadvantages
+* Security flaws can be detected easier because it's open source.
+* Limited possibilities because of the framework.
+* You don't learn the underlying code properly
+* They often lack functionality that a project needs. 
+* Less performance because of loading unnecessary code.
+* More new things to learn if framework/library updates it code 
+* Dependent on others work
 
 ## Advantages and disadvantages of client-side single page web apps
-...
+
+Advantages
+* Better user experience because you only have to load once.
+* Quick in use after loading.
+* Back-end and front-end are separated
+* Easier to make mobile app because back-end is reusable.
+
+Disadvantages
+* Hard to implemented SEO properly
+* Bad performance because it's heavy (especially for mobile devices).
+* Heavy client side frameworks are needed to load the app.
+* Site getting slower when data increases
+* JavaScript is often needed use the page (bad accessibility)
+* Analytics tools don't expect single page web apps.
 
 ## Best practices
-...
+* Don't use global variables/objects
+* Declare variables at top of scope
+* Use short clear meaningful names (English)
+* Work in strict mode
+* camelCase your code if(code != Constructor || CONSTANTS)
+* Place external scripts at the bottom of the page
+* Indent your code
+
+## Pull requests
+### Week 1
+* https://github.com/velomovies/wafs/pull/1
+* https://github.com/dipsaus9/wafs/pull/1
+
+### Week 2
+* https://github.com/velomovies/wafs/pull/5

assets/css/style.css

@@ -0,0 +1,113 @@
+* {
+    box-sizing: border-box;
+}
+
+body {
+    font-family: 'Roboto', sans-serif;;
+    margin: 0;
+    color: #212121;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+}
+
+h1 {
+    font-size: 2rem;
+    letter-spacing: 1px;
+}
+
+h2 {
+    font-weight: normal;
+    font-size: 1.5rem;
+    color: rgba(0,0,0,0.6);
+}
+
+nav {
+    //background: #212121;
+    height: 3.5rem;
+    display: flex;
+    align-items: center;
+}
+
+nav ul {
+    max-width: 50rem;
+    display: flex;
+    padding: 0;
+}
+
+nav ul li {
+    list-style: none;
+    padding-right: 1.5rem;
+}
+
+a {
+    text-decoration: none;
+    color: #157EE7;
+}
+
+a:hover {
+    color: #1468c7;
+}
+
+img {
+    border-radius: 0.25rem;
+}
+
+.container {
+    width: 100%;
+    max-width: 50rem;
+    margin: 0 auto;
+    padding: 1.5rem;
+}
+
+.hidden {
+    display: none;
+}
+
+#track-list {
+    padding: 0;
+    display: flex;
+    flex-wrap: wrap;
+}
+
+#track-list li {
+    list-style: none;
+    width: 25%;
+    padding: 0.5rem;
+    transition: all cubic-bezier(0.5, 2.44, 0.6, 1.06) .25s;
+}
+
+#track-list li:hover {
+    transform: scale(1.05);
+}
+
+#track-list img {
+    max-width: 100%;
+}
+
+#track-list li div {
+    position: relative;
+    overflow: hidden;
+}
+
+
+#track-list li a {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    top: 0;
+    display: flex;
+    color: #fff;
+    flex-direction: column;
+    justify-content: flex-end;
+    background-image: linear-gradient(-180deg, rgba(0,0,0,0.00) 0%, rgba(0,0,0,0.40) 68%, rgba(0,0,0,0.59) 100%);
+    padding: 1rem;
+    transform: translateY(5%);
+    opacity: 0;
+    transition: all ease-in-out .15s;
+}
+
+#track-list li:hover a {
+    transform: translateY(0%);
+    opacity: 1;
+}