Kottans-Frontend

Info about me:

Hello, my name is Yevhen. I am 23 years old and I'm going to become a fullstack developer in the future. I created this repository to study with Kottans frontend course. I started this course to improve my frontend knowledges.

I had some experience with:

• Python
• Git
• SQL
• HTML
• CSS
• JS

---

Completed sections of Stage 0:

General

0. • Git basics
1. • Linux CLI and Networking
2. • VCS (hello gitty), GitHub and Collaboration

Front-End Basics

3. • Intro to HTML & CSS
4. • Responsive Web Design
5. • HTML & CSS Practice
6. • JavaScript Basics
7. • Document Object Model - practice

Advanced Topics

8. • Building a Tiny JS World (pre-OOP) - practice
9. • Object oriented JS - practice
10. • OOP exercise - practice
11. • Offline Web Applications - optional
12. • Memory pair game - real project
13. • Website Performance Optimization - optional
14. • Friends App - real project

---

Git, GitHub, git flow

• Listened week 1 and week 2 of Introduction to Git and GitHub

I had experience with Git before I took the lectures, but I became more familiar with how the merge command works and how to resolve merge conflicts.

• Completed levels of the game learngitbranching.js.org

The visual examples helped me to understand how branches and HEAD pointer work in Git.

---

Linux CLI and HTTP

1. Completed Linux Survival:

Completed lessons

Quiz

Additionally completed quizes 2, 3, 4

I used to work with Linux bash before this course so actually I just refreshed my current knowledges.

2. Read articles about HTTP protocol:
   • HTTP Part 1
   • HTTP Part 2

   Thanks to these articles, I learned the differences between request methods POST and PUT and this became more clearly to me.
   Also, I owerall improved my understanding of how HTTP protocol works and difference between HTTP and HTTPS.

---

Git Collaboration

1. Listened week 3 and week 4 of Introduction to Git and GitHub:

   Completed lessons of week 3

   

   Overall, these lectures were interesting. I liked the speaker and I got a better understanding of the difference between git merge and git rebase. I will definitely use the git rebase command in the future.
   Also, I almost always use short command git checkout -b branch_name.

   Completed lessons of week 4

   

   In this lectures i gained a lot of information about how to collaborate with other developers.
   Additionaly, I used to work with TravisCI before on my Python project to run tests earlier so I am familiar with CI/CD a bit.

2. Completed levels of Linux Survival:

   Levels completed

   

   

   Tasks about remote branches were quite hard for me to solve. I guess I need more practise with real repositories, but still visual examples of branches helped me a lot too.

---

Intro to HTML & CSS

1. Listened lectures of week 1 and week 2 of HTML, CSS, and Javascript for Web Developers course

   Week 1 - HTML

   

   In general, I was already familiar with HTML before I listened to these lectures, so I refreshed my knowledge. It was fascinating for me to learn how websites worked before the advent of HTML.

   Week 2 - CSS

   

   Due to listening to this course, I learned more deeply how to count CSS selector specificity and how to combine them. It was unexpected for me to know that margin-bottom and margin-top of different elements are not adding to each other.

2. Comleted Learn HTML

3. Completed Learn CSS

   HTML & CSS

   

   Tasks here weren't tough for me, but @font-face is new for me for sure. Also, now I have better understanding of how CSS positioning works. Need more practise, I guess...

---

Responsive Web Design

1. Read article Responsive web design basics

   From this article, I learned what Responsive web design means and what its purpose is. In practice, I did not try to optimize the website for different screens.

2. Watched lectures about Flexbox

   Flexbox

   

   Flexbox is new tool for me. I heard about it before but never used.

3. Completed the game Flexbox Froggy

   Flexbox Froggy

   

   The game wasn't that hard, but it helped me to understand better the difference between justify-content and align-items and to understand how other properties related to flexbox work as well.

4. Watched lectures about CSS Grid

   CSS Grid

   

   I've never used CSS Grid before, so it's all new things to me and still a bit hard to understand because of lack of practise.

5. Completed the game Grid Garden

   Grid Garden

   

   The game helped to realize better how CSS Grid works and what its use case.

To summarize, here I gained a lot of new information since I've never used Flexbox and CSS grid before (except using Bootstrap framework where CSS Grid is predefined so I didn't need to write these CSS rules on my own. I am definetly going to use both Flexbox and CSS Grid in my next task.

---

HTML & CSS Practice

• Demo

• Code base

  This task was so challenging for me to complete. The hardest part for me were CSS Flexbox, CSS Grid and aligning items at all since I never used CSS that much before. I spent a lot of time doing this task but also I learned a lot new stuff to me.

---

JS Basics

1. Listened lectures about JS

   Week 4 - Introduction to JavaScript

   

2. Completed tasks freeCodeCamp

   freeCodeCamp tasks

   

   To begin with, I was familiar with JS before a bit, but here I had a lot of practice with functional programming and algorithms. It was engaging to know that Array in JavaScript is actually not a separate data type as it is in many other programming languages, but just an object. Still, things like algorithms and recursions are not easy to me to understand but I'm sure it comes clearer after more practice.

---

DOM

1. Listened lectures about DOM

   Week 5 - DOM

   

   I've never worked with DOM before, so I need to practise a bit before completing last task of this section. Now I know that unlike CSS, JS is able to get elemnt in any place of the document.

2. Completed tasks 12 - 18 freeCodeCamp

   freeCodeCamp tasks

   

   I could'nt solve tasks like Fibonacci, Steamroller and Smallest common multiple without hints, while actually the others of this six tasks weren't that challenging and I solved them on my own. Still, the hardest concept to understand for me is recursions (and algorithms too, of course), more precisely they are understandable, but I can't implement them yet whithout hints.

3. JS-Dom practice

• Demo
• Code base

  I liked this task, I had a lot of practice here and improved my understanding of DOM manipulation.

---

A Tiny JS World (pre-OOP)

Updated to OOP version with classes (pre-OOP version in index_old.js)

• Demo
• Code base

---

Object Oriented JS

1. Listened lectures about OOP Classes and Prototypes

   OOP Classes and Prototypes

   

   It was unexpected to know that unlike in Python, classes in JavaScript are primarily syntactical sugar over JavaScript's prototype-based inheritance. As for me, classes syntax looks more clear than prototype syntax. The more I learn JavaScript, the more i see difference over Python. It is facinating to learn that both Python and JavaScript look similar but have so much differences in detail.

2. Completed Classic Frogger Game (finally meged (^.^) )

   • Demo
   • Code base

3. Joined Kottans clan on Codewars and reached 7kyu

   OOP Classes and Prototypes

   

   This task felt confused at start. Thanks to bunch of console errors I understood how to deal with this task :)

---

OOP exercise (Tiny JS World)

• Demo
• Code base

  Implementing SOLID principles was the hardest part for me, it's a valuable experience for me. Now I have better understanding of SOLID and what its purpose.

---

Offline Web Applications

Udacity Offline Web Applications

I got a lot of new information in this course. Now I understand how web pages are able to load content even if connection is lost or too slow. Everething in this course was new to me. I heard about caching before but didn't know hot to implement. Some cons of this course is that it is outdated. I wasted some time to make starting files work on my machine and even course repo troubleshooting chapter couldn't help me. For sure, I need to rewatch this course as I still don't quite understood the IndexedDB section. A little practice might help me too, I guess.

---

Memory Pair Game - not merged yet

• Demo
• Code base

---

Website Performance Optimization - ongoing

---

Friends App - not merged yet

• Demo
• Code base