kottans-frontend

My progress

General

• Git Basics
  
• Linux CLI and Networking
  
• VCS (hello gitty), GitHub and Collaboration

Front-End Basics

• Intro to HTML & CSS
  
• Responsive Web Design
  
• HTML & CSS Practice
  
• JavaScript Basics
  
• Document Object Model – practice

Advanced Topics

• Building a Tiny JS World (pre-OOP) – practice
  
• Object oriented JS – practice
  
• OOP exercise – practice
  
• Offline Web Applications
  
• Memory pair game – real project!
  
• Website Performance Optimization
  
• Friends App – real project!
  

Git Basics

Version Control with Git (Udacity)

Version Control with Git

learngitbranching.js.org

Main

Remote

I already passed these tasks, so it was not difficult for me, but i like to refresh my knowledge.

Linux CLI, and HTTP

Linux Survival (4 modules)

Quiz Number 1

Quiz Number 2

Quiz Number 3

Quiz Number 4

I already passed these modules in the past, so nothing was new for me, but I enjoyed do that again.

Git Collaboration

GitHub & Collaboration

There was nothing new for me in this section, i just went through it again.

Intro to HTML and CSS

Intro to HTML & CSS

Learn HTML

Learn CSS

I didn't use CSS Grid before and all information about Gird was new for me, but I'm sure that will use that in future.

Responsive Web Design

Responsive Web Design Fundamentals

Flexbox Froggy

Responsive patterns was new for me. "Column drop", "mostly fluid", "layout shifter" and "off canvas".

HTML & CSS practice

Popup

JS Basics

Intro to JS

FreeCodeCamp exercises

• In functional programming, changing or altering things is called mutation, and the outcome is called a side effect. A function, ideally, should be a pure function, meaning that it does not cause any side effects.
• Functions are considered first class objects in JavaScript, which means they can be used like any other object. They can be saved in variables, stored in an object, or passed as function arguments.
• The map method iterates over each item in an array and returns a new array containing the results of calling the callback function on each element. It does this without mutating the original array. When the callback is used, it is passed three arguments. The first argument is the current element being processed. The second is the index of that element and the third is the array upon which the map method was called.
• filter calls a function on each element of an array and returns a new array containing only the elements for which that function returns true. In other words, it filters the array, based on the function passed to it. The callback function accepts three arguments. The first argument is the current element being processed. The second is the index of that element and the third is the array upon which the filter method was called.
• The slice method returns a copy of certain elements of an array. It can take two arguments, the first gives the index of where to begin the slice, the second is the index for where to end the slice (and it's non-inclusive). If the arguments are not provided, the default is to start at the beginning of the array through the end, which is an easy way to make a copy of the entire array. The slice method does not mutate the original array, but returns a new one.
• splice takes arguments for the index of where to start removing items, then the number of items to remove. If the second argument is not provided, the default is to remove items through the end. However, the splice method mutates the original array it is called on.
• Concatenation means to join items end to end. JavaScript offers the concat method for both strings and arrays that work in the same way. For arrays, the method is called on one, then another array is provided as the argument to concat, which is added to the end of the first array. It returns a new array and does not mutate either of the original arrays.
• The reduce method iterates over each item in an array and returns a single value (i.e. string, number, object, array). This is achieved via a callback function that is called on each iteration. The callback function accepts four arguments. The first argument is known as the accumulator, which gets assigned the return value of the callback function from the previous iteration, the second is the current element being processed, the third is the index of that element and the fourth is the array upon which reduce is called. In addition to the callback function, reduce has an additional parameter which takes an initial value for the accumulator. If this second parameter is not used, then the first iteration is skipped and the second iteration gets passed the first element of the array as the accumulator.

DOM

JavaScript and the DOM

freecodecamp Algorithm Scripting Challenges

Click here to see some wonderful Mexican places.

A Tiny JS World

Click here to see a Tiny JS World.

Object Oriented JS

codewars

Rank: 6 kyu

Object Oriented JS

Frogger-game Code Frogger-game Demo

OOP exercise

Click here to see a Tiny JS World.

Memory pair game

Demo Code