README.md
February 9, 2021 · View on GitHub
My study log
12 October 2020
0 Stage
Today I've finished both git courses related to git. This helped me a lot to refresh my git knowledge because as usual I use a few basic git commands and almost forgot how to implement them. The 1st course (from Udacity) was quite simple. The 2nd one (from try.github.io) was a little bit tricky especially in the advance section. Hopefully I've managed to complete them both, screenshots are attached. Although I didn't clarify some git advanced commands 100% but wrote them down to dive deeper when I'll encount them.
screenshot_task_0.1
screenshot_task_0.2.1
screenshot_task_0.2.2
13 October 2020
Linux CLI, and HTTP
Today I've refreshed my Linux CLI and HTTP knowledge. As weel created my personal engineer-wiki in Notion. It's gonna help me to structure my knowledge and reveal the most important parts when needed.
Also I've read 2 HTTP articles. I grasped the main concepts, however some details are really hard to understand at this point. My plan is to move futher to complete the main tasks but definetly come back after that to accomplish all optional tasks to get better understanding.
screenshot_quiz1
screenshot_quiz2
screenshot_quiz3
screenshot_quiz4
14 October 2020
Git Collaboration
This task was great to review some core git commands and clarify the collaboration through git.
especially git rebase
1 task screenshot - preview
1 task - GitHub & Collaboration - screenshot
learngitbranching.js.org:
screenshot_task_0.2.1
screenshot_task_0.2.2
Task 4.1 - Intro to HTML & CSS (Eng) - DONE ✅
15 October 2020
Task 4.2 - Learn HTML - DONE ✅
16 October 2020
Intro to HTML and CSS
screenshot_task_1
screenshot_task_2
screenshot_task_3
I've refreshed my CSS knowledge a little bit, especially css transitions section. I'm going to implement the cool chained transition with my next animated element.
17 October 2020
Responsive Web Design
screenshot_task_1
screenshot_task_2
This one was definitly a good refresher. In addition I higly improved my @media understanding. It was a great practice to adjust the layout of different sections of website in lessons 4 & 5 in task 1. Definitly will implement "Off Canvas" responsive design pattern in my next project. I've tried it for the 1st time in this task and it was truly great!
18 October 2020
Today I've started my first study project - pop-up menu, developed using only html and css. I've already did layout part and toggle state. Writing it without JS was a little bit challenging but definitly improved my CSS skill.
19 October 2020
Today I didn't have that much to code but anyway dedicated some time and almost finished my pop-up menu project. It's approximately 90% done. Just some polishing work and moving forward. Today I've reviwed so much stuff! And learn new as well. I'm pretty excited about this exercise!
20 October 2020
Pop-up task finished 98% Trying to figure out for a long time how to implement TAB into sub-menu.
21-29 October 2020
HTML-CSS-Popup
I didn't write here for all these days however I've been coding/stydying every single day. For this period of time I've completed Pop-up task and finished Javascript section (read about this below) Working on this project I've learned so much new HTML/CSS stuff! Something from the list:
- You should check you project in https://validator.w3.org/ (validator)
- BEM methodology (before I've been writing chaotic classes in HTML and selectors in CSS without any structure. Now I know the right way to follow!!)
- :before :after <- extremly useful!
- z-index <- one more important thing into my knowledge base
- pop-up element implementation with :checked - this was really cool to learn!
- adding empty lines at the end of the file
- some unofficial rule of creating header navigation is to use such structure header>ul>li>a
- and many-many more!! I really appreciate all the feedback from mentors that helped me to learn new stuff and become better!
JS Basics
screenshot_task_1
screenshot_task_2
Udacity_preview
codeacademy_preview
After finishing this section I've realized that before my JS knowledge was pretty weak, mostly theoretical and just with a little practical background. Tasks from codeacademy (epsecially Intermidiate Algorythms) helped me a lot to improve my undesrtanding and confidence. Tasks from Intermidiate Algorythms I even did 2 times to better understand and remember ways to solve different kind of problems.
I've learned a lot about RegExp!! Before it was something mystical for me and I was a litlle bit afraid of it. But now, after completing tasks related to RegExp and learning/practicing them for several hours I feel much-much more confident and can operate them without any problems. It's so cool to learn and finally understand some complex topic! Yuhuuuu!
30 October 2020
Today I've completed the initial course from Udacity about JavaScript and the DOM. There was so much new and vital knowledge for me in this course! I've learned the key principles of how Javascript is connected to HTML and CSS, the DOM model, its essential parts (like nodes and elements). I've noted many new properties and methods which I'm going to use in my DOM project. It was useful to learn what's the difference to where you add your
31 October 2020
Today I've done the 2nd part of Intermidiate Algorhytms! This time it was much easier for me. After finishing the first part I've get a solid understanding and practice of how to work with arrays/strings/objects and which methods are better in the given task. This tasks were pretty cool I even get some kind of nostalgy feeling when I've been preparing to Math olympiad in school because some of the tasks were related to Math. Also I've practiced recursion - and that's really great and makes your brain work!
Finally at the end of the day I've started my 2nd project - interacting with DOM elements, navigation without reloading the page. I have a cool idea and will do my best to implement it! So excited) Yuuhuuu!
1 November 2020
Today I've almost finished DOM project. I did all the layout, styling, created the database, added assets (images) to the project folder and resized them. Also I've already implemented interaction with DOM elements without page reloading. (it's the main task) Just to need to improve several aspects and I'm ready to submit my project!
2-5 November 2020
DOM
DOM_preview
JS_preview
This DOM project was extremly helpful, it let me practice my skills that I gained earlier (such as layout, responsive desing, etc) and as well as practice new knowledge related to DOM topic (event listeners, modifying DOM tree and its content, perfomance issues, etc.)
I would like appreciate the review from mentors once more because they've pointed out to weak parts of my code and helped me understand what's the best approach in particular situation.
For example that big functions that do a lot of work much better to separate into smaller ones to increase the readability of my code and to make it easy to test in the future.
Also what was interesting - it's a good approauch to use initApp function and place there all event listeners and different 'load' functions. Then you can pass this function to document.addEventListener('DOMContentLoaded', initApp).
7 November 2020
Completed all theoretical part of OOP course from Udacity.
8 November 2020
pre-OOP 'a Tiny JS World'
Completed pre-OOP project: 'Building a Tiny JS World'. This task was pretty easy however I learned that I can use pre tag to display the text exactly as written in the HTML source code.
9 - 17 November 2020
Object Oriented JS
The same situation: even though I didn't commit in here for a week, I've tried to study every day. For this period of time I've completed 2 sections: #9 (Object oriented JS) and #10 (OOP exercise) and almost completed #12 (Memory pair game). Please find my reflections on these tasks below.
OOP_preview
codewars_preview
The exercises from codewars were pretty simple at this stage and I'll definitly come back to them later to practice more my JS skills. The OOP course from Udacity gave the general understanding of OOP im JS but I did some extra research to expand and structure my knowledge.
Frogger game
At first I was pretty stuck but later on after researching some information I've found the approach to write this game with prototypes. Finally I got the taste for it and added some extra stuff to my game (stars, hearts and score/lives).
OOP Exercise
This task was extremly usefull in terms of understanding the key principles of OOP. After that I watched the video from Optinal section regarding the advantage of Composition over Inheritance, I've decided to accept the challenge and use the composition pattern. At first, my code wasn't that great but with the mentor's help I refractored it several times and recieved pretty nice and well structered code that follows the OOP principles (such as DRY, SOLID etc).
18 - 24 November 2020
Memory Pair Game
This was an extremly interesting and useful task! There are more than a dozen of new topics that I've learned creating this game and which I'm going to use in future: -how to shuffle array using sort() and random number -how to create nice flip animation -that it's better to move literals which are appearing at least two time in the code into constants -how to store information inside data attributes of element -how to use closest selector -practiced more in refractoring code
- and many many more!
And I was incredibly impressed when my work was published to kottans radio.. Another time want to thank for the feedbacks, it really helps me to grow!
25 - 26 November 2020
Offline Web Applications
Offline Web Applications
This task was quiet challenging for me. It was pretty simple to grasp the main concept and idea of SW but not that easy to accomplish practical tasks from Udacity course. Anyway I got the basics of SW and definitely will expand more on this topic after completing Friends App.
Friends App
The last project has helped me to learn and understand the async JS, get the main idea and how to work with it. Also pretty useful was combining multiple filters and sorts to render only required data. This seems really very close to real projects!
Wow! What a trip! The last project is done and it's time to celebrate! Celebrate the finishing Stage 0 and New Year as well!!))
Website Performance Optimization
Responsive Images
Website Perfomance Optimization
Website Perfomance Optimization
And this one is the last one from the Stage 0! At this moment the content of Website Perfomance Optimization part is quiet advanced for me. I've tried to grasp all the main parts and concepts and I will try to expand on my knowledge in my futher studying.