Front-End Course. Stage 0. Self-Study

General

0. Git Basics

• 1. Прослухайте тижні 1 і 2 курсу Introduction to Git and GitHub

Screenshots

• 2. Пройдіть рівні тут learngitbranching.js.org

Screenshots

• 3. З додаткових матеріалів дуже сподобалась стаття "How to Learn and Cope with Negative Thoughts" та навчалка "TypingClub — покращити швидкість набору на клавіатурі"

В принципі з GIT була знайома, але використовувала мабудь лише 10% його можливостей. В основному працювала на GitHub Desktop. Не знала що в GIT можна редагувати та форматувати текст(Basic writing and formatting syntax) буду використовувати :)

1. Linux CLI and Networking

• 1. Linux Survival (4 modules)

Screenshots

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

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

З нового в цьому модулі: користування терміналом. Раніше ніколи не користувалась, а виявляється дуже зручна штука. Здивувало, що можна переглядати/копіювати файли з чужих директорій(звісно якщо відкриті дозволи проте всеодно круто).
Планую в майбутньому частіше користуватись терміналом.
Про HTTP протоколи раніше слухала лекції Просто Web і щиро рекомендую їх для додаткового перегляду, дуже круті!)

2. VCS (hello gitty), GitHub and Collaboration

• 1. Прослухайте тижні 3 і 4 курсу Introduction to Git and GitHub.

Screenshots

Новим для мене був Code Reviews та поради як з ним працювати(він же і здивував). Ніколи з ним не зіштовхувалась, але розумію що потрібний і дуже зручний для роботи процес.
Планую використовувати Pull Request і вирішення конфліктів. Для PR та Conflict Resolution було багато корисних статей, що планую використовувати в разі потреби.

• 2. Пройдіть рівні learngitbranching.js.org.

Screenshots

Front-End Basics

3. Intro to HTML & CSS

• 1. Прослухайте тижні 1 і 2 (до Introduction to Responsive Design) курсу Intro to HTML & CSS

Screenshots

• 2. Learn HTML(Eng)

Screenshots

• 3. Learn CSS(Eng)

Screenshots

Багато часу пішло на опрацювання всіх матеріалів, хоч практично весь матеріал знала раніше.
З нового в HTML: функція target="blank" в посиланнях.
З нового у CSS: підключення декількох зображень у background 😱
Також вперше дізналась про breakpoints в адаптивному дизайні на майбутнє планую вивчити та використовувати адаптив у своїх проектах ☺️

4. Responsive Web Design

• 1. Responsive web design basics

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

• 3. Flexbox Froggy - гра для закріплення

Screenshots

• 4. CSS Grid Layout

• 5. Grid Garden - гра для закріплення

Screenshots

Якщо з Flexbox раніше я була знайома і з ним проблем нби не виникало, а то Grid були для мене мало доступні. Зараз завдяки курсам CSS Grid Layout все стало набагато зрозуміліше. До котанів як раз зупинилась з вивченням CSS на грідах, сподіваюсь тепер я як раз зможу закрити макет по Флексам/Грідам....ну і мене чекає Hooli-style Popup

5. HTML & CSS Practice

Demo | Code

6. JavaScript Basics

• 1. Вступ до JS

Screenshots

2. Вправи FreeCodeCamp.

• Basic JavaScript
• ES6 Challenges. Виконайте початкові 17 вправ.
• Basic Data Structures
• Basic Algorithm Scripting
• Functional Programming
• Algorithm Scripting Challenges. Розв’яжіть початкові 11 задач.

Screenshots

Я не була знайома ні з JavaScript ні з будь якою іншою мовою програмування раніше тож новим було все))) Для мене не достатньо було матеріалу з курсу Coursera та й на FreeCodeCamp не завжди все зрозуміло з першого разу, тож додатково для себе:

• пройшла курс на CodeCademy;
• багато чого читала/вивчала теорії з сайтів javascript.info та developer.mozilla.org;
• пройшла повний курс з JavaScript на FreeCodeCamp (як на мене дуже крутий курс і класна можливість отримати безкоштовний сертифікат );
• та для практики розвязувала задачі на codewars.com.

І нехай я доволі багато часу відвела саме на цей модуль та JavaScript в цілому, щодня я все ще вивчаю щось нове з JS і це круто!)

Тож...

• що було новим: практично все оскільки починала навчання практично з нуля;

• що здивувало: мабудь Passing by Value & Passing by Reference - принаймні найбільше запамяталось;

• що буду використовувати в майбутньому: синтаксис ES6 особливо стрілкові функції(краса і лаконічність - 2 в 1) та продовжувати поглиблювати знання з JS.

7. Document Object Model - practice

Дізнайтеся деякі frontend основи про DOM API:

• 1. Прослухайте тільки розділ Document Object Model Manipulation

Screenshots

• 2. Freecodecamp Algorithm Scripting Challenges. закінчити завдання 12..18 (Sum All Odd Fibonacci Numbers до Everything Be True).

Screenshots

• 3.then() Практичне завдання:

Demo | Code

Advanced Topics

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

Deno | Code

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!

Додаткові матеріали

• Лекція по Git від Олексія Руденка
• Git за 30 хвилин
• Git tips — закріпити свої знання про Git
• About Merge Conflicts
• Resoilving a Merge Conflict
• Communicating using Markdown
• Learn anything front-end
• TypingClub — покращити швидкість набору на клавіатурі 👍
• How to Learn and Cope with Negative Thoughts
• How I taught myself to code in eight weeks
• How JavaScript works: Deep dive into WebSockets and HTTP/2 with SSE + how to pick the right path
• Command Line Power User
• Configuring Linux Web Servers
• Networking for Web Developers
• An Introduction to Git and GitHub by Brian Yu (CS50 course), video, ~40 min.
• Oh shit, git!
• Flight rules for git
• GitHub Skills
• HTML уроки (з 3 по 7 відео)
• CSS уроки (з 9 по 15 відео)
• freecodecamp.org
• Intro to HTML @github
• Can't Unsee - brilliant and useful challenge 👍
• Publish your static web site using GitHub Pages
• Specificity
• Specificity calculator
• 11 things I learned reading the flexbox spec
• Flexbox Zombies (прикольна гра 👍)
• HiDPI Screens and Web Development
• FunFunFunction - Functional programming in JavaScript 👍
• Algorithms Course by Khan Academy
• Visualization of Common Algorithms and Data Structures
• JavaScript Algorithms and Data Structures examples
• You Don't Know JS Yet: Get Started - 2nd Edition
• JavaScript Equality Table Game
• JavaScript-Equality-Table
• The Basics of DOM Manipulation in Vanilla JavaScript (No jQuery)
• JavaScript DOM Crash Course by Brad Traversy