KOTTANS-FRONTED

About me

Hello! My name is Anton. I'm 32 years old and I'm learning how to become a frontend developer.

This repository is created for study kottans-frontend. Here I will mark my progress and report on the progress of my training.

On this moment i have next skills:

• HTML5, CSS3, SCSS, SASS, LESS, BEM, Flex-box, Grid, Bootstrap, Responsive layout, Git
• Figma, Adobe Photoshop, Avocode, Adobe XD
• English - Upper-Intermediate

I also have several certifications:

• Responsive Web Design of FreeCodeCamp

The certificate of FreeCodeCamp

• IT Fundamentals EPAM/UpSkill me

The certificate of EPAM

---

The Stage 0 course program

• Git Basics
• Linux CLI and Networking
• VCS (hello gitty), GitHub and Collaboration
• Intro to HTML & CSS
• Responsive Web Design
• HTML & CSS Practice
• JavaScript Basics
• Document Object Model - practice
• Building a Tiny JS World (pre-OOP) - practice
• Object oriented JS - practice
• OOP exercise - practice
• Offline Web Applications - optional
• Memory pair game — real project!
• Website Performance Optimization - optional
• Friends App - real project!

---

Git Basics

• lisened Introduction to Git and GitHub

All the material is well and simply presented. Even a person who does not understand anything about it can understand it.

Week 1

Result

Week 2

Result

• passed game learngitbranching.js.org

A very useful simulator for understanding the basics of Git. Made you think for quite a long time on some of the tasks. I liked it very much.

Introduction Sequence

Result

Push & Pull -- remote repositories in Git!

Result

---

Linux CLI, and HTTP

• Take a course Linux Survival (4 modules)

I really liked this course. Simple and accessible presentation of information. I finally learned how to work with Linux without the graphical shell!

My results:

Quiz #1 Result

Quiz #2 Result

Quiz #3 Result

Quiz #4 Result

• Read articles:

  • HTTP: The Protocol Every Web Developer Must Know — Part 1

  • HTTP: The Protocol Every Web Developer Must Know — Part 2

The information given in the articles is quite confusing, I think this is solely due to the translation. The original articles are well written and the information is presented much better than in the translated version, which makes it easier to understand. For me personally, these articles didn't bring anything new to me, but they helped me remember some HTTP peculiarities and querying methods.

---

Git Collaboration

1. Listen to the 3 and 4 week of the course Introduction to Git and GitHub

My results:

Week #3 Result

Week #4 Result

In this course, I learned how to use git more confidently, solve marge conflicts, use fetch and rebase, and use remote repository correctly. I also understand how to build a collaborative workflow with others.

2. Complete the following levels learngitbranching.js.org:
   • Main: Moving Work Around
   • Remote: To Origin And Beyond -- Advanced Git Remotes!

My results:

Result #1

Result #2

This course also introduced an understanding of the development workflow. Such as Cherry Pick and remote repository tracking.

---

Intro to HTML and CSS

1. Listen to Weeks 1 and 2 (to Introduction to Responsive Design) of the course Intro to HTML & CSS

My results:

Week #1 Result

Week #2 Result

Pretty good basic HTML course. I just discovered a new online resource caniuse.com. The course does a good job of describing a basic understanding of html and css. Reminded myself of some properties and tags that will never be redundant. The only pity - the course does not contain practical work, but you can make it up your own.

2. Learn HTML(Eng)

My results:

HTML Result

I haven't gotten around to this particular course in a long time. The presentation of information is pretty primitive, most of the interesting things are only on a subscription basis, which makes no sense at all. Why pay for the subscription when you can get the same information for free on freecodecamp and it is much more interesting? Moreover, there is an updated section of web design and they translate their courses into Ukrainian. In general I did not like this course from Codecademy.

3. Learn CSS(Eng)

My results:

CSS Result

Still convinced that freecodecamp is better in this respect.

---

Responsive Web Design

• Responsive web design basics

Content of the article

A very good article about adaptive web design. Easily explains the basic principles and capabilities of adaptive design. I first learned about Multicol and was pleasantly surprised since I am used to Flexbox and Grid. The article also explains the basic complexities that can arise when designing an adaptive web page.

• FLEXBOX

Playlist

A good playlist that gives a basic understanding of working with Flexbox and a short task/tutorial. What I liked most about this tutorial is that the author shows how to work with such properties as flex: order: flex-basis: and others while even the paid courses from top companies often give you nothing but justify-content: and align-items:.

• Flexbox Froggy - Game

Result

Very cool game. Passed in the same breath for 15 minutes and the last level even made me think for a while. The new thing I came across is the flex-flow: property, which combines the properties flex-direction: and flex-wrap:. The game was surprisingly useful :)

• CSS Grid Layout

Playlist

Such a clear presentation of information on Grid layout I have not yet seen in any course. So I'll just leave this cheat sheet here: CSS Grid Layout

• Grid Garden - Game

Result

Like the Flexbox froggy - Grid garden is fascinating. The whole game passed in the same breath and with great pleasure. The last levels made me think hard. Enjoyed honing my skills in Grid layout in this interesting way.

---

hooli-style-popup

• Demo
• Code
• Task

I'm so used to checkbox styling that I had to remember pretty much everything from scratch. Awesome practice, the big challenge is just the design development.

---

JS Basics

1. Introduction to JS

It's hard for me to say anything about this course, since I'm already familiar with JS. In any case, for people who are new to JS, this is good information for beginners.

Result

2. FreeCodeCamp exercises

• Basic JavaScript

Result

I went through this part quite a long time ago. It was a great pleasure to rerun it all over again.

• ES6 Challenges - JS ES6 features. Perform 17 exercises

Result

I was already somewhat familiar with ES6 syntax, but this part of the tasks I found something new. I learned about Destructuring Assignment, Rest Parameter, Spread Operator. I learned how and where to apply them and for what purpose. I will keep some cheat sheets for the future.

Prevent Object Mutation

let obj = {
  name:"FreeCodeCamp",
  review:"Awesome"
};
Object.freeze(obj);
obj.review = "bad";
obj.newProp = "Test";
console.log(obj);

Object.freeze(); - to prevent data mutation.

Arrow function syntax

const myFunc = () => {
  const myVar = "value";
  return myVar;
}

When there is no function body, and only a return value, arrow function syntax allows you to omit the keyword return as well as the brackets surrounding the code.

const myFunc = () => "value";

It is possible to pass more than one argument into an arrow function.

const multiplier = (item, multi) => item * multi;
multiplier(4, 2);

Set Default Parameters for Functions

const greeting = (name = "Anonymous") => "Hello " + name;

console.log(greeting("John"));
console.log(greeting());

Use the Rest Parameter

With the rest parameter, you can create functions that take a variable number of arguments. These arguments are stored in an array that can be accessed later from inside the function.

function howMany(...args) {
  return "You have passed " + args.length + " arguments.";
}
console.log(howMany(0, 1, 2));
console.log(howMany("string", null, [1, 2, 3], { }));

Use the Spread Operator to Evaluate Arrays In-Place

const arr = [6, 89, 3, 45];
const maximus = Math.max(...arr);

Spread and Rest - allow to simply combine several arrays into one or pass values of individual array elements as function arguments. Interestingly, both of these operators look exactly the same in appearance - a ternary (...), but are used in different cases, not only for arrays, but also for objects.

Destructuring Assignment

• Extract Values from Objects

const HIGH_TEMPERATURES = {
  yesterday: 75,
  today: 77,
  tomorrow: 80
};

const {today, tomorrow} = HIGH_TEMPERATURES;

• Assign Variables from Objects

const HIGH_TEMPERATURES = {
  yesterday: 75,
  today: 77,
  tomorrow: 80
};
  
const { today : highToday, tomorrow : highTomorrow } = HIGH_TEMPERATURES;

• Assign Variables from Nested Objects

const LOCAL_FORECAST = {
  yesterday: { low: 61, high: 75 },
  today: { low: 64, high: 77 },
  tomorrow: { low: 68, high: 80 }
};

const { today : {low : lowToday, high : highToday}} = LOCAL_FORECAST;

• Assign Variables from Arrays

Destructuring an array lets us do exactly that:

const [a, b] = [1, 2, 3, 4, 5, 6];
console.log(a, b);

The console will display the values of a and b as 1, 2.

The variable a is assigned the first value of the array, and b is assigned the second value of the array. We can also access the value at any index in an array with destructuring by using commas to reach the desired index:

const [a, b,,, c] = [1, 2, 3, 4, 5, 6];
console.log(a, b, c);

The console will display the values of a, b, and c as 1, 2, 5.

• Reassign Array Elements with the Rest Parameter

const [a, b, ...arr] = [1, 2, 3, 4, 5, 7];
console.log(a, b);
console.log(arr);

The console would display the values 1, 2 and [3, 4, 5, 7].

Variables a and b take the first and second values from the array. After that, because of the rest parameter's presence, arr gets the rest of the values in the form of an array.

• Pass an Object as a Function's Parameters

In some cases, you can destructure the object in a function argument itself.

const stats = {
  max: 56.78,
  standard_deviation: 4.34,
  median: 34.54,
  mode: 23.87,
  min: -0.75,
  average: 35.85
};

const half = ({max, min}) => (max + min) / 2.0; 

Create Strings using Template Literals

const person = {
  name: "Zodiac Hasbro",
  age: 56
};

const greeting = `Hello, my name is ${person.name}! I am ${person.age} years old.`;

console.log(greeting);

• Object Literal Declarations Using Object Property Shorthand

const getMousePosition = (x, y) => ({ x, y });

• Concise Declarative Functions

With ES6, we can remove the function keyword and colon altogether when defining functions in objects. Here's an example of this syntax:

const person = {
  name: "Taylor",
  sayHello() {
    return `Hello! My name is ${this.name}.`;
  }
};

• Basic Data Structures

Result

In this Basic Data Structures course, I learned more about the differences between arrays and objects and which ones to use in different situations. I also learned how to use useful JS methods like splice() and Object.keys() to access and manipulate data. I'll also leave a little cheat sheet here.

.push() - adds elements to the end of an array.

.pop() - removes an element from the end of an array.

.unshift() - adds elements to the beginning of an array.

.shift() - removes an element from the beginning of an array.

.splice() - remove or add any number of consecutive elements from anywhere in an array.

.slice() - copies or extracts a given number of elements to a new array, leaving the array it is called upon untouched.

.indexOf() - allows us to quickly and easily check for the presence of an element on an array.

-Basic Algorithm Scripting

Result

Very interesting and simple tasks to understand the structures of algorithms. Of course, some tasks took some time to think about, but in general all the tasks were solved pretty quickly.

• Functional Programming

Result

In this task, I learned the core concepts of Functional Programming including pure functions, how to avoid mutations, and how to write cleaner code with methods like .map() and .filter(). At first the tasks were quite difficult at first glance. But after parsing and understanding the principles of their work the solution to most of the problems was about 1-2 lines of code.

• Algorithm Scripting Challenges

Result

Great tasks for understanding working with arrays and objects. There are both easy and quite tricky problems that make you work the creative part of the brain. I liked it in general, I can not understand why the course did not give information on regular expressions, as they are built on quite a lot of tasks.