kottans-frontend

December 27, 2020 · View on GitHub

Content:

  1. Git and GitHub
  2. Linux, Command Line, HTTP Tools
  3. Git for Team Collaboration
  4. Intro to HTML and CSS
  5. Responsive Web Design
  6. HTML & CSS practice: Hooli-style Popup
  7. JavaScript Basics
  8. Document Object Model
  9. Building a Tiny JS World
  10. Object-Oriented JavaScript
  11. OOP exercise
  12. Memory-pair-game
  13. Friends App

Git and Github

I've learned a lot of new Git features:

  • Branches and commands that help work with them
  • Commands which help to move between commits
  • Work with remote repositories

Also I refreshed my knowledge about main principles of version control system and how version control works. I repeated the most common and basic commands: git add, git commit, git push, etc.

I can make conclusion that Git is very useful and powerful tool for developer.

Linux CLI, and HTTP

I have finished a Linux CLI, and HTTP part of course and now I can make some conclusions.I can confidently say lessons were very interesting and useful for me!

  • I have learned many new basic and the most common commands for Linux CLI. Also, I've read two helpful articles about HTTP. I have found out more detailed information about HTTP, which has helped me structured my own knowledges.
  • I was surprised by differences between Windows and Linux CLI. As for me Linux CLI is more comfortable and ease for understanding than Windows CLI.
  • I confidently say I've started using Linux CLI for my daily activities on computer. Also I wish I started use grep command for improve my work and make it easy.

Screenshots of lessons =D

Git Collaboration

I have finished Git Collaboration lessons and I can say that they was wery useful.

  • I have already understood difference between origin and upstream branches and how remote repo works.Also It is very useful understand difference between fork and clone repositories. Thank you for this!!!
  • I was surprised by realizing how branches ease and difficulte work at the same time. It seems so difficulte at the first time but if you try it out to understand the most basic and useful features everything will become more clear.
  • I hope I will use all my new knowledges, which will help me optimize my work and make it easier, in future!

Screenshots of lessons =D

Intro to HTML and CSS

I have finished Intro to HTML and CSS lessons and I can make some conclusions now.

  • I have learned more useful that refer to semantic HTML. I have improved my knowledges about Grid layout. Also I have repeated my HTML and CSS knowledges.
  • I was surprised by <figure> and <figcaption> tags. I hadn't known about them before I completed this lesson. Also I was surprised by grid-auto-flow property. It is very useful and I am going to use the tag in future.
  • I confidently say that I'm going to implement all my new knowledges in practice in future!

Screenshots of lessons =D

Responsive Web Design

I have finished responsive Web Design lesson and I can make some conclusion.

  • I've learned a lot of useful information about responsive markup. For example, I have learned new tags and properties such as picture,flex-flow and srcset. All of them are extrimely helpful when you create responsive markup.
  • I was surprised how difficult create responsive markup with adaptive images. I was amazed how much tools can be used for create responsive layout. The same result can be represented by different ways.
  • I hope and believe I will understand responsive web more clear and try it out in my future projects.

Screenshots of lessons =D

HTML & CSS practice: Hooli-style Popup

Code Sourse || Demo

JavaScript Basics

I have finished JavaScript Basics not so long ago and I have improved my js skills step by step solving this task! If absolutely be honest sometimes I thought that they have never ended.

  • I've repeated all my knowledge about js and I have learned more information about arrays functions such as reduce,splice.Aslo I have started better understent ... and ES6's features. I got a lot of practice doing exersices.
  • I was surprised by ES6's features. They make some ordinary things more easy and quickly.Aslo I was surprised by fact that it is possiple return function more than one time and can call them like this funName(1)(2)(123);
  • I confidently say that I'm going to implement all my new knowledges in practice in future!

Screenshots of lessons =D

Document Object Model

I have finished Document Object Model section and I have improved my js practical skills and learned new knowladge.

  • I've repeated all my knowledge about DOM and I have learned about tokens and interfaces, Document Fragment,Reflow & Repaint and Call Stack. A lot of useful and new information! WOW!
  • I was surprised by fact that Node and Element have interfaces and Element interface inherits Node interface that inherits Event Target interface. Also I was surprised by principle of work Call Stack.
  • I confidently say that I'm going to implement all my new knowledges in practice in future!

Demo || Code

Screenshots of lessons =D

Building a Tiny JS World

I finished Building a Tiny JS World and met with pre-opp =) Demo || Code base

Object-Oriented JavaScript

I have finished Object-Oriented JavaScript section and I have improved my opp knowladge and implemented them into real project.

  • I've repeated all my knowledge about OOP in JS and learn a lot of useful information such as scope, prototypes, closure and oop patterns.
  • I was surprised by how ES6 makes code more clearly and understantable for human. Also prototypes are so powerful and I realized that every FE developer must now how it works.
  • I have gotten a lot of useful advices from my mentor - OleksiyRudenko. I hope that I will code which more easier to read and meet DRY requirements.

Screenshots of lessons =D

Frogger

Codewars profile

OOP exercise

The first I want to say - thank you,Oleksiy Rudenko, for all notes, advices and patience! I took a lot of useful practical advices:

  • Declare all common variables in parent class
  • When you pass parameters to the constructor use named arguments constructur(name, age, city)instead of objects constructor({name:'Anna', age:21, city:Kiyv}). It makes code more clear to understand and you avoid repeat yourself
  • Try to take out all the common functionality to parent class
  • Make the method to work with properties known to this class
  • If 2 child have the same property you should create parent class for them and inherits it

Demo | Code base

Memory – Pair Game

I created Memory – Pair Game using classes. Thanks a lot to MaxKalashnyk. With his help and advices I find out that I should use constant variables as much as possible. Also I can use function({target}) instead of event.target and I use element.closest('selector') instead of element.parentElement.

Demo | Code base

Friends App

I created Friends App using classes. Thanks so much Ivan Tytarenko for his advices and notes) Now I understand how correcte handle fetch errors and how make my code more readable.

Demo | Code base