kottans-frontend progress

0. Git Basics

Я уже використовував git у власних проектах. Новими для мене стали команды diff і patch.

У майбутньому планую частіше користуватися гілками, наприклад, при створенні нових фіч.

Скриншоти

1. Linux CLI, and HTTP

Більшість команд, які було роглянуто, я вже знав. Новими для мене стали команди:

• df - перегляд вільного місця на диску
• ps - перегляд процесів (в т.ч. з опцією aux, яка дозволяе переглянути всі системні процеси)
• grep - пошук слів у тексті

Здивувала простота викоритання команди grep, яку я зустрічав раніше, але погано розумів її призначення.

Скриншоти

2. Git Collaboration

Продовжуємо вивчати можливості git. Було цікаво дізнатися про можливості платформи github. Новими для мене стали особливості команд push, fetch і pull.

Раніше я ніколи не використовував команду rebase. І хоч після вивчення матеріалу команда merge мені подобається більше (тому що не перезаписує попередні комміти і історія змін буде виглядати такою, як це і відбувалося насправді, в тій же послідовності), але rebase також може бути корисною. Особливо, коли працюєш над окремою гілкою і за цей час в головній гілці не відбувається ніяких змін. Обов'язково буду користуватися цим у власних проектах.

Скриншоти

3. Intro to HTML & CSS

Я уже добре знаю цю тему, та все ж було корисно освіжити знання по деяким тонкощам. Наприклад, мені сподобалася формула, як порахувати приорітет стилів при їх конфлікті:

style="" => ID => class, pseudo-class, attribuyte => # of elements

Детальніше про пріорітет

Була наочно показана різниця між значеннями властивості box-sizing:

• content-box (значення за замовченням) означає, що підсумковий размір блоку буде дорівнювати вказаному розміру ширини width + внутрішні відступи margin + межа border (те саме для висоти, якщо вона вказана)
• border-box означає, що підсумкова ширина буде дорівнювати вказаній width, а контент буде мати ширина width - border - padding

Зовнішні відступи по ширині додаються, а по висоті - зливаються (підсумковий відступ буде дорівнювати більшому із двух).

Друге та третє завдання (на сайті codecademy) я не робив, оскільки вони занадно прості для мене. "Напишіть тег p після тегу h1" - мого терпіння вистачило лише на виконання першого розділу.

Скриншоти

4. Responsive Web Design

Було цікаво ознайомитися з сітками і застосувати нові знання в ігровій формі.

Скриншоти

5. HTML & CSS Practice

Новим був метод роботи з чекбоксом, коли його можна сховати, а замість вікористовувати стилізований label

Code | Demo

6. JS Basics

Теорія для мене була скоріше повторенням, а от задачі - це те, чого мені не вистачало, а саме застосувати знання до практичних вправ. Особливо спободобалися завдання із останньої группи, довелося помізкувати, але впорався самостійно з усіма.

Скриншоти

7. DOM

Практично всі методи для роботи з dom були для мене новими. Було корисно з ними розібратися і застосувати до виконання практичного завдання.

Code | Demo

Скриншоти

8. Building a Tiny JS World

Code | Demo

9. Object Oriented JS

Раніше вважав prototype дуже складною темою і обходив стороною. Але зараз, щоб застосувати на практиці у завданні, довелося з цим розібратися. Матеріали використовував інші, оскільки приведені пояснють лише початкові відомості про прототипи.

Програмувати гру спочатку було складно, нічого не зрозуміло, але потім "в'їхав" в приведений код і понеслося)

Code | Demo

Скриншоти

10. OOP exercise

Code | Demo

12. Memory pair game

Code | Demo

14. Friends App

Code | Demo