Skip to content

zhenyakornilov/kottans-frontend

Repository files navigation

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

Front-End Basics

Advanced Topics


Git, GitHub, git flow

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.

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

screenshot

screenshot

screenshot

screenshot

screenshot

screenshot

screenshot

screenshot

screenshot

screenshot

screenshot

screenshot

screenshot

screenshot

Quiz

screenshot

Additionally completed quizes 2, 3, 4

screenshot screenshot screenshot

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

  1. Read articles about HTTP protocol:

    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

    learngitbranching

    learngitbranching

    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

    screenshot_codecademy

    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

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

  3. Completed the game Flexbox Froggy

    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

    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

    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

    JS Basics ES6 Data Structures Basic algorithms Functional programming Intermediate algorithms

    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

    screenshot_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)


Object Oriented JS

  1. Listened lectures about OOP Classes and Prototypes

    OOP Classes and Prototypes

    screenshot_lesson1 screenshot_lesson1

    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 (^.^) )

  3. Joined Kottans clan on Codewars and reached 7kyu

    OOP Classes and Prototypes

    screenshot_codewars

    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

complete_course_screenshot

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


Website Performance Optimization - ongoing


Friends App - not merged yet

About

Kottans course tasks

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published