Stage 0. Self-Study Kottans 2022

Tasks

General

• 0. Git Basics
• 1. Linux CLI and Networking
• 2. VCS (hello gitty), GitHub and Collaboration

Front-End Basics

• 3. Intro to HTML & CSS
• 4. Responsive Web Design
• 5. HTML & CSS Practice
• 6. JavaScript Basics
• 7. Document Object Model - practice

Advanced Topics

• 8. Building a Tiny JS World (pre-OOP) - practice
• 9. Object oriented JS - practice
• 10. OOP exercise - practice
• 11. Offline Web Applications - optional
• 12. Memory pair game — real project!
• 13. Website Performance Optimization - optional
• 14. Friends App - real project!

General

0. Git Basics

Coursera Introduction to Git and GitHub 1 & 2 weeks

Перший тиждень

Другий тиждень

learngitbranching.js.org

Основи: Introduction Sequence, Ramping Up

Віддалені репозиторії: Push & Pull

Раніше Git не використовував. Завдяки курсу вже почав працювати над своїм проектом у двух гілках, зберігаючі у master налагоджену версію. Курс добре збалансований. Лекції Coursera та додаток learngitbranching.js.org добре доповнюють один одного.

---

1. Linux CLI, and HTTP

Linux Survival (4 modules)

Quiz Number 1

Quiz Number 2

Quiz Number 3

Quiz Number 4

HTTP: Протокол, який повинен розуміти кожний веб-розробник - Частина 1

HTTP: Протокол, який повинен розуміти кожний веб-розробник - Частина 2

Попрактикувався у роботі з командним рядком Linux.

---

2. Git Collaboration

Coursera Introduction to Git and GitHub 3 & 4 weeks

Третій тиждень

Четвертий тиждень

learngitbranching.js.org

Основи: Переміщуємо роботу туди-сюди

Віддалені репозиторії: Через origin – до зірок

Звернувши увагу на коментарі в course channel, пройшов тиждень 3 та початок 4 до того, як робити форк. Скоротив час при форканні kottans/mock-repo .

---

Front-End Basics

3. Intro to HTML & CSS

Intro to HTML & CSS (Coursera 1 & 2 week)

HTML

CSS

Learn HTML & CSS (codecademy)

HTML & CSS

Після перерви вирішив закінчити (пройти до кінця) Stage 0.

Довідався про quirks mode. Також раніше не використовував Entity References, може бути доцільним.

---

4. Responsive Web Design

Responsive web design basics

Тепер я знаю навішо раніше у кожні "шапці" писав: <meta name="viewport" content="width=device-width, initial-scale=1">

FLEXBOX. Вчимося верстати на флексах

YouTube_flex

Flexbox Froggy

Постійно дивлюся відео Жені Андріканіча. Ввважаю його кращім викладачем з верстки для початківців і не тільки. Нічого нового не дізнався бо раніше дивився вже кілька разів.

CSS Grid Layout

YouTube_grid

Grid Garden

Технології Grid та Flex добре доповнюють одна одну. Чув що на грідах пишуть лайаути а на флексах - компоненти. Як на мене, то все залежить від конкретного макета. Буду дивитися "по ходу життя".

---

5. HTML & CSS Practice

Demo | Code base | PR

---

6. JavaScript Basics

introduction to JavaScript

Coursera: week 4

FreeCodeCamp

Basic JavaScript

ES6 Challenges

Basic Data Structures

Basic Algorithm Scripting

Functional Programming

Algorithm Scripting Challenges

---

7. Document Object Model

Demo | Code base | PR

Document Object Model Manipulation

Coursera: week 5

FreeCodeCamp

Intermediate Algorithm Scripting

---

8. Building a Tiny JS World (pre-OOP)

Demo | Code base | PR

---