/kottans-frontend

My progress in Kottans frontend course

kottans-frontend

My progress in kottans frontend course

Git and GitHub

In the first self-study part I finished the course How to use Git and GitHub My final progress is in attach below:

Course progress

I'm really proud of completing this useful course, because I acquired there a lot of skills such as:

  • Making commits
  • Cloning and exploring repositories
  • Learning basic git commands
  • Acquainting with concept map
  • Learning how to write good commit messages
  • Working with branches
  • Working with merging
  • Making pull requests

Also I began to read and analyze information in try.github.io/

Thanks organizers for interesting additional materials! Look forward to learn materials from the next lessons :)

Linux CLI, and HTTP

Course progress

After completing course 'Learn the Command Line', reading articles about HTTP and reading extra-materials I learned:

  • How to use basic commands to navigate in file systems, files manipulations, configuring the environment etc.
  • How to use aliases which can help me to save my time in future
  • Using of base HTTP methods
  • Using instruments which were a little obsolete but anyway could describe basic concepts :)
  • HTTP state codes which also can help me to debug my apps in future
  • HTTP headers, messages, responses, requests

Majority of information was not new for me, but for example, knowledge of HTTP caching was new and very interesting. Knowledge of networking is very important for frontend devs, so I also started completing course 'Networking for Web Developers'.

Git Collaboration

I have completed the course 'What is Version Control'. Most of information there is not new for me, but I learned new commands and principles in Git , such as reverting and resetting commits and also worked with command and flags to this operations.

Course progress

Also I completed the course 'GitHub & Collaboration'. There were a lot of useful materials about how to use rebase commands and other information I recently learned.

Course progress

Intro to HTML and CSS

I have finished the course 'Intro to HTML & CSS (Eng)'. Nothing new for me was there, because I am working with creating layouts for more than 2 years, but to my mind for beginners it is nice course to learn basics of building web page layouts.

Course progress

Series of courses of HTML Academy: "Basics of HTML" & "Basics of CSS" I also have completed and all materials were also not new for me, but after completing these courses I would like to thank authors, because courses information was very easy to understand and I also can say that after completing this course people who don't know anything about HTML/CSS before, can create complex layouts of different web pages.

My progress in HTML course

Course progress

My progress in CSS course

Course progress

Responsive Web Design

I have completed the course Responsive Web Design Fundamentals. It was very interesting, especially in making responsive tables and responsive web design patterns.

Course progress

Also I finished very interesting Flexbox Froggy tutorial with tasks. To my mind, mini-courses like this are the most interesting and simple in studying, because all examples there were with amazing illustrations. It was really helpful to understand basics of flexbox technique instead of dozens of boring articles :)

Course progress

JS Basics

I have completed the course Intro to JS. There were a lot of interesting examples with donuts and exercises for understanding how to works with arrays and objects. It's very important fundamentals for working with JavaScript or any programming language.

Course progress

Freecodecamp Algorithm Scripting Challenges were amazing!!! These tasks were the most interesting and the hardest for me in this course, because they need to summarize all my knowledge about basics of JS. After completing this tasks I have got good skills with string and array methods such as indexOf and charAt, also I have practiced with case/switch construction, conditionals and 'for' loops. Also I learned that we can use 'arguments' special variable for working with all function arguments. After completing these challenges I have got more confidence in algorithms tasks and it's really cool!!!

Course progress

DOM

Completed course JavaScript and the DOM was very interesting. There are a lot of useful cases described there. The most important topics:

  • creating elements with createDocumentFragment method;
  • using performance.now() for measuring code performance;
  • difference between textContent and innerText methods;
  • monitoring events with Chrome Monitor Events;
  • event loop, call stack;
  • the most important thing from code performance optimization - events delegation.

Course progress

The second part of algorithms from freecodecamp Algorithm Scripting Challenges was harder than previous. Most of tasks I solved at school or at the university, but sometimes I use google for solving some part of task or got hints and made analysis.

Course progress

The third practical part was quite easy. Also mentor Anastasiia helped me with code optimization and with making logic more clean and simple. Thanks her for it!!!

Link to this subtask. Reviewed and approved by @AMashoshyna

A Tiny JS World

Link to this task. Reviewed and approved by @OleksiyRudenko

It was an easy task, but in process I've learned a lot of fundamental principles of OOP. Also I learned a lot of useful information from pinned articles such as: objects copying, how to use Object.assign method, objects design patterns and how to use ES6 classes.

Object Oriented JS

I have finished this important part of the course. Here I learned a lot of new things from object oriented javascript.

The most interesting in Obejct oriented JS was developing an arcade game Frogger, where I have used all my knowledge from OOP and DOM manipulations. Also I learned how prototype chains work and learned that prototype chain is objects chain used for inheritance and shared parameters. In order to reuse code we can use delegation based inheritance (prototype based inheritance). Superclasses and subclasses were new for me too.

Course progress

Also I practiced algorithmic tasks in Codewars. I registred here more than 3 years ago, but it's still actual for me and other developers for practicing any programming language and algorithmic skills.

Codewars

Codewars screenshot

Frogger game (Demo | Code) is reviewed and approved by @OleksiyRudenko. It was cool practice for OOP JS theory and it was the first game I've developed!!! According to mentor's recommendations I've made some code optimizations and fixes.

OOP exercise

Demo | Code

Reviewed and approved by @OleksiyRudenko

Very useful pratical task. Thanks to the mentor's pieces of advice and recommendations I have learned best practices of how to work with ES6 classes, also how to inherit properties of base class etc.

Offline Web Applications

Course progress

I have finished this task. There were a lot of interesting and new for me instruments such as offline first approach in building web apps, service workers and working with IndexedDB. There were a lot of examples how to create and manage data in IndexedDB and there was interesting information about caching images. Also, 'Serviceworkies mastery games' contained very useful cases about service workers.

Memory pair game

This task is reviewed and approved by @zonzujiro.

Demo | Code

I've finished this task. It was one of the most interesting task on the course. Developing this game is very useful practical task, because it allowed to practice almost all passed course theory topics. Here I practiced array methods, working with date (I created a stopwatch), working with localstorage etc.

Website Performance Optimization

I've finished this task and I have learned a lot of new technologies here. For example, I learned how to work with srcset image property. It's very useful feature for working with responsive layout and with images in Retina screens. Much attention is given to browser profiling tools in Udacity courses. For me also it was very interesting and surprised to calculate layers of some website and inspect full website in 3D view. There were cases about will-change CSS property and how to use it for animations optimizing and full process of displaying webpage in the browser. Also, thanks course developers for useful articles about aspects of browser working and asynchronous JS.

Udacity courses progress is displayed below:

Website performance optimization

Browser rendering optimization

Responsive Images

Friends App

This task is reviewed and approved by @zonzujiro.

Demo | Code

I have finished this interesting task. Here I have practiced with array methods, DOM manipulation, improved my skills with getting data from API using ES6 fetch method. Also I've made this app responsive.