kottans-frontend

Stage 0.

Завдання 0 "Git та GitHub"

---

Враження від вивченого матеріалу:

• цікаво було дізнатись як користуватись файлами diff та patch без використання системи контроля версій та автоматизувати внесення змін на примітивному рівні;
• додатково до цього матеріалу відкрив для себе Markdown і це дуже прикольно, оскільки мені не подобається читати погано структуровані або форматовані тексти (буду точно використовувати у майбутньому);
• цікаво було дізнатись, що команда git commit -a працює тільки з тими файлами, що вже відслідковувались git та не є новими файлами. Нові файли проекту, які жодного разу не попадали в індекс, перед коммітом обов'язково необхідно додавати в staged командою git add;
• тренажер навпаки трохи заплутує ніж документація та навчальні матеріали. Не думав, що на практиці виникнуть складнощі але все ОК;

Завдання 1 "Linux, Command Line, HTTP Tools"

---

Враження від вивченого матеріалу:

• команди linux вивчати для мене досить легко, оскільки трохи знайомий з командами та логікою DOS;
• цікаво було дізнатись, що CLI GIT Bash є аналогом CLI linux (тепер буду використовувати частіше у роботі разом із PowerShell);
• додатково дізнався, що Markdown підтримує HTML :)
• стали логічно зрозумілими команди, які ми використовуємо в GIT та чому саме таке написання вони мають;
• принцип роботи HTTP протоколу також більш-менш зрозумілий але залишились питання щодо його технічного застосування на практиці.

Завдання 2 "Git для командної співпраці"

---

Враження від вивченого матеріалу:

• дізнався для чого потрібні SHH ключі та за яким принципом вони працюють (буду використовувати в роботі);
• нарешті зрозумів у чому принципова різниця між git fetch та git pull але поки що планую в роботі використовувати зв'язку git fetch + перевірка змін, що відбулись на віддаленому репо + git merge;
• розібрався навіщо спочатку робити fork віддаленого репо та чим він відрізняється від прямого git clone;
• дізнався яким чином можна об'єднувати вже існуючі незначні комміти командою git rebase -i та squash в один комміт та таким чином змінювати pull request, що був направлений на розгляд (точно буду використовувати на практиці);
• стало зрозумілим все те, що ми робили для виконання попереднього завдання, щоб свідомо створити pull request не копіюючи запропоновані команди. Супер!!!

Завдання 3 "Вступ до HTML і CSS"

---

Враження від вивченого матеріалу:

• сподобались посилання лектора на ресурси, що допомагають у вивченні нових фіч. Раніше не чув про них;
• вразило те, що заголовки різного рівня хоча і рендеряться по-різному але це не для того, щоб використовувати у стилізації елементів, а для того, щоб дотримуватись семантичного контексту;
• цікаво було дізнатись про нерозривні пробіли &nbsp та специфіку їх використання;
• сподобалась фіча з використанням атрибуту target="_blank", що здійснює перехід за посиланням в окремій вкладці, а не у тому самому вікні;
• цікаве перевизначення стилю за допомогою властивості !important, який стає головним для певного елементу, якщо присутній конфлікт стилей;
• цікаво було дізнатись з чого складається та яким чином вираховується border-box, а також CSS селектор *;
• здивувало вирішення проблеми адаптивного дизайну на мобільних пристроях за допомогою метатегу viewport;
• дуже прикольний та гарно структурований інтерактивний курс по HTML та CSS на CodeCademy.

Завдання 4 "Адаптивний Web Design"

---

Враження від вивченого матеріалу:

• цікаво було дізнатись про сучасні засоби адаптивного дизайну, зокрема про властивості display: flex, display: grid та їх застосування на практиці;
• ігри-тренажери дуже допомогли закріпити отримані знання та візуально ще раз зрозуміти властивості flex та grid;
• ці зручні і зрозумілі інструменти точно буду використовувати в роботі.

Завдання 5 "HTML і CSS практика: Hooli-style Popup"

---

Враження від вивченого матеріалу:

• Здивувало те, що завдання виявилось для мене досить важким і зайняло дуже багато часу, оскільки хотілося все зробити ідеально. Багато чого прийшлось гуглити щоб вирішити ту чи іншу проблему;
• Для мене так і залишилась загадковою поведінка сайту з адаптивним дизайном, хоча все робив за допомогою grig та flex але на смартфоні хедер я так і не зміг оптимізувати як того хотів (є куди рости, щоб знов повернутись і доробити проект);
• Все, що самостійно нагуглив точно буду використовувати у подальшому :)
• Без JS було важко реалізувати функціонал запропонований у завданні.

Посилання на виконане завдання Demo

Завдання 6 "JavaScript Basics"

---

Враження від вивченого матеріалу:

• В подальшому намагатимусь все частіше застосовувати синтаксис ES6 бо він дуже спрощує написання коду;
• деякі задачі були складними з точки зору розуміння алгоритму;
• поки що складно повністю зрозуміти у чому полегшується робота при зміні властивостей об'єктів за допомогою деструкції, а не класичним способом;
• цікаві задачі з основ написання алгоритмів. Було складно, але я був у захваті кожно разу як виходило вирішити задачу і в консолі з'являвся потрібний результат;
• Intermediate Algorithm Scripting Challenges взагалі не зайшло. Одне завдання займало декілька годин. Дуже складно.
• в процесі навчання була деяка плутанина у застосуванні методів масивів та строк бо вони мають схожі синтаксичні назви;
• стрілочні функції дуже крута штука, вже використовую у коді там де це є доречним.

Screenshots

Завдання 7 "Document Object Model"

---

Враження від вивченого матеріалу:

• Найважчим було створити адаптивний дизайн та анімацію кнопок меню. Переробити основне меню у "бургер-меню" для мобільних пристроїв. Витратив на це дуже багато часу. Ніяк не можу порозумітися із версткою стилів щоб робити швидко та не витрачати на це основний час. Доводилось багато гуглити щоб вирішити ту чи іншу проблему. З JS ніяких складностей не було і мені дуже сподобалось писати на JS під власноруч створений дизайн.

Screenshot

Посилання на виконане завдання Demo

Завдання 8 "Building a Tiny JS World"

---

Враження від вивченого матеріалу:

• в принципі великих складнощів не виникло при виконанні цього завдання але трохи не зрозуміло чому саме необхідно використовувати методи масивів, а не більш зрозумілі та прості рішення для перебору властивостей об'єктів;
• потрібно більше практики з методами масивів, щоб вибір потрібного методу спрацьовував на автоматі.

Посилання на виконане завдання Demo

Завдання 9 "Object-Oriented JavaScript"

---

Враження від вивченого матеріалу:

• найважче було зрозуміти, що потрібно робити в першу чергу щоб гра візуально з'явилась у браузері але потім помилки у консолі дали підказку;
• для того щоб створити гру розбив задачі на декілька маленьких - відрендерів персонажа та ворогів, розмістив їх на початкові позиції, налаштував анімацію та швидкість ворогів, налаштував управління персонажем, створив функцію скидання гри при досягненні умов перемоги, створив функцію повернення персонажа на початкову позицію у випадку зіткнення із ворогом, коли все працювало як потрібно - запровадив у гру рандомні дані, щоб було цікавіше;
• програмування на чистом JS виявилось цікавішим ніж верстання сторінок;
• на Codewars цікаві та гарно структуровані задачі. Сподобалось більше ніж Freecodecamp.

Screenshot

Посилання на виконане завдання Demo

Завдання 10 "OOP exercise"

---

Враження від вивченого матеріалу:

• найважче було було зрозуміти наскільки код повинен бути DRY;
• здивувало те, що завдання має більш творчій підхід ніж здається, а тому виникла дилема при вирішенні питання який саме набір властивостей повинен мати базовий клас;
• класи та ООП вже активно використовую у виконанні наступних завдань.
• з технічної точки зору і синтаксису все більш-менш зрозуміло.

Посилання на виконане завдання Demo

Завдання 11 "Memory – Pair Game"

---

Враження від вивченого матеріалу: