Skip to content
This repository has been archived by the owner on Feb 23, 2024. It is now read-only.

Latest commit

 

History

History
168 lines (104 loc) · 8.49 KB

README.md

File metadata and controls

168 lines (104 loc) · 8.49 KB

kottans-frontend progress

0. Git Basics

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

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

Скриншоти

Основи: Introduction Sequence Віддалені репозиторії: Push & Pull


1. Linux CLI, and HTTP

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

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

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

Скриншоти

Тест 1 Тест 2 Тест 3 Тест 4


2. Git Collaboration

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

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

Скриншоти

Тиждень 3 Тиждень 4 Практика 1 Практика 2


3. Intro to HTML & CSS

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

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

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

Пріорітет css правил


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

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

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

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

Скриншоти

Тиждень 1 Тиждень 2


4. Responsive Web Design

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

Скриншоти

flexbox grid


5. HTML & CSS Practice

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

Code | Demo

6. JS Basics

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

Скриншоти

coursera basic_javascript es6_challenges basic_data_structures basic_algorithm_scripting functional_programming intermediate_algorithm_scripting


7. DOM

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

Code | Demo

Скриншоти

coursera intermediate_algorithm_scripting


8. Building a Tiny JS World

Code | Demo

9. Object Oriented JS

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

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

Code | Demo

Скриншоти

codewars


10. OOP exercise

Code | Demo

12. Memory pair game

Code | Demo

14. Friends App

Code | Demo