kottans-frontend

Hello! My name is Dmytro. I have previously taken web front-end development courses (including Git basics), but now I want to update and strengthen my knowledge so that I can really try to switch to this new kind of work

---

Stage_0

General ⏬

• Git Basics
• Linux CLI and Networking
• VCS (hello gitty), GitHub and Collaboration

Front-End Basics ⏬

• Intro to HTML & CSS
• Responsive Web Design
• HTML & CSS Practice
• JavaScript Basics
• Document Object Model (Pending, PR not reviewed)

Advanced Topics

• Building a Tiny JS World (pre-OOP) (Pending)
• Object oriented JS (Pending)
• OOP exercise (Pending)
• Offline Web Applications
• Memory pair game
• Website Performance Optimization
• Friends App

---

Here is my steps...

General

Git

1. I've passed Udacity "Version Control with Git" course.

Udacity Version Control with Git Screenshot

I like it and I've learned that when you're learning Git, it's not always good to use just the terminal for better understanding. While taking the Udasity course, I also used the GUI GitKraken, which not only provides a terminal for entering commands, but also visualizes the commit tree and file folders very well, which helps a lot in learning as well. By the way, I didn't really like the GitHub Desktop app, as it seemed to me rather limited in functionality and the visual part of the process demonstration. 😄

Plus, I've passed Coursera Git Intro course and here screens of my first two weeks:

Coursera Git Intro Week 1 Screenshot

Coursera Git Intro Week 2 Screenshot

2. Basic part at learngitbranching.js.org

learngitbranching.js.org Basics Screenshot

learngitbranching.js.org Remote Repositories Screenshot

As it seems to me, although visually all these colored circles look logical and nice, but the level of understanding of these tutorials for me personally is worse than the classical course, as was with Udacity, where everything is shown by real examples. As I see it, even the official Git documentation comes out clearer than these exercises. I guess I'm a bit of a retard.😬

---

Linux CLI, and HTTP

1. Linux Survival Guide

4 Steps of Linux Survival Guide Screenshot

The final window of LinuxSG Screenshot

It was pretty interesting and had an nice old-school charm, like in DOS childhood. Using the command line is not new to me, but here I learned better the basic Linux commands which Coursera's lecturer used in the Git Intro lessons.

2. The HTTP Protocol part 1 / part 2

Although in the 2nd part of this article the authors wrote that it was more complicated than the 1st, I found the second part to be much clearer. Maybe because it was more familiar to me than the first one, which was very dry in its description of the request/response messages. I'm going to take a course on Udacity Networking for Web Developers from the optional materials, where I hope the client-server interaction chain will be described more consistently and with more lively examples.

To be able to say where and how I will use the knowledge from this article, I should probably go deeper into the development process itself. The Linux command line is an understandable scenario that is very similar to using the command line for Git. And the HTTP protocol theory will come in handy, as I expect, when we will move on to JS.

---

Git Collaboration

1. Coursera Git Intro course Weeks 3 & 4

Coursera Git Intro Week 3 Screenshot

Coursera Git Intro Week 4 Screenshot

2. Advanced parts of the learngitbranching.js.org

learngitbranching.js.org Main Advanced Screenshot

learngitbranching.js.org Remote Repositories Advanced Screenshot

Even considering that I took all these classes, of course I can't say that everything made perfect sense to me. Even so, it's not so much clear how exactly I can apply it all right now. I'm pretty sure that I can definitely use the git for my project right now and use the basic functions. Commit, make 1-2 branches and merge them, update my local and remote repository. Participate in the public repository a bit. Probably no more than that for now.

This kung-fu with juggling a lot of colored circles (commits), moving them back and forth and etc. I don't dare to do that in a real project right now. Rather, I'm going to try to go in small and incremental steps.

Often, too much functionality gets you stuck. And on these training exercises, there were activities that I have so far had difficulty imagining in real work. Of course, only practice will strengthen my skills and perhaps trigger the need for more complex operations with Git.

---

Front-End Basics

Intro to HTML and CSS

1. Coursera HTML, CSS, and Javascript for Web Developers Course Weeks 1 & 2

Coursera HTML, CSS, and Javascript for Web Developers Week 1 Screenshot

Coursera HTML, CSS, and Javascript for Web Developers Week 2 Screenshot

Цей розділ для мене виявився повторенням того, що я колись вже вчив декілька років тому. Це безперечно потрібно було зробити, оскільки коли ти не використовуєш знання постійно та й ще з перервою, то навички знижуються.

2. Codecademy Learn HTML

Codacademy Learn HTML Course Screenshot

Поєднання цих базових курсів мені здається вдалим. Після більш теоретичного від Coursera відразу переходиш до того самого матеріалу на Codecademy, але вже використовуєш ці базові речі на практиці та більше закріплюєш матеріал.

3. Codecademy Learn CSS

Codacademy Learn CSS Course Screenshot

В принципі, все, що я тут пройшов, мені було відоме, але деякі аспекти я трохи краще зрозумів. Наприклад, властивість "position" точно потребувала повторення. Безперечно, все що увійшло в цей розділ, я буду використовувати, оскільки це абсолютні основи, на яких тримається HTML та CSS (ну, можливо тільки "float" не дуже часто, знаючи, яка тема попереду і які сучасні тенденції 😉).

Responsive Web Design

1. Responsive web design basics

Принципи, які викладені в цій статті, я теж раніше вивчав (декілька років тому). І побачив, що за ці роки стосовно "viewport" та @media принципових змін не відбулося. "Flexbox" вже тоді був у моді, була тільки відносна складність з сумісністю деяких браузерів. Тепер ще додався "Grid", який став зараз популярним, як я знаю. Тут я додатково побачив, що в панелі розробника Chrome тепер є вбудований інспектор "Lighthouse", який буде корисний, коли інспектуєш свій проєкт з боку Google.

В прогресі навчання потроху починаєш стикатися з наростаючою лавиною кількістю додаткових понять, селекторів, псевдокласів і статей про все це. Коли з однієї статті по ходу читання ти відкриваєш ще суміжних 5-6 сторінок, які ще було б добре почитати. І це починає лякати, як все це запам'ятати? Але треба триматися.:sweat:

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

Цикл уроків, який саме корисний своєю наглядністю та своїм фінальним практичним прикладом. Що особливо запам'яталось - це спосіб розштовхування елементів при побудові основної архетектури сторінки, коли "футер" завжди опиняється внизу сторінки. Плюс корисний і дуже демонстративний конспект від автора.

Avocode, якою користується автор на практиці - така крута штука! Це мені як трохи верстальнику документації і людині знайомою з цими всіма робочими процесами по замірюванню відстаней, кольорів і т.п. Але і недешева, для аматора.

3. Flexbox Froggy

Flexbox Froggy Last Page Screenshot

Гра, в яку грав вже не перший раз. Навіть зараз дитину посадив, проходили разом. Можна вже казати, що це "нестаріюча класика". Добре проходе по принциповим властивостям, але поки що невідомо, як саме легко (чи ні) зможеш цим жонглювати на практиці в перші рази.

4. Відеоуроки CSS Grid Layout

Grid - дуже цікавий, я про нього раніше тільки чув. Особливо, коли в практичному прикладі автор все вже прописав і почав додавати останні @media, як це все запрацювало. Але поки що, Grid здається трохи складнішим за Flexbox. Можливо, тому що дуже багато варіацій різних властивостей, дуже багато різних шляхів їх комбінацій та варіантів. Але, як я розумію, зараз іноді без Grid'у майже ніяк, тому будемо закріплювати.

5. Grid Garden

Grid Garden Last Page Screenshot

Гра дуже схожа на Froggy і сама по собі теж цікава та демонструє Grid простішим, ніж він здається, якщо подивитися вищезгадані уроки. Практика потім покаже, як воно насправді.

HTML & CSS Practice

Demo
Source Files

В цьому проєкті для мене новим стало використання чекбоксів у якості перемикачів відображення інших елементів. Також я вперше сам спробував робити сітку на grid, раніше мав справу тільки з flex.

Що було незвичним - так це вибудовувати вертикальну структуру, яка буде діяти тільки зверху-вниз. Спочатку здається, що в CSS ти зможеш все означити і зробити звязок взаємодії в любому напрямі, але після декількох варіантів усвідомлюєш, що це неможливо. Відносною особливістю мого проєкту вийшло ще те, що я вирішив (на свою голову)) додати кнопку "Less", яка б згортала вікно попапу в початковий стан. Дуже рідко, хто з інших студентів робив її, а якщо і робив, то не розібрався з тим, що фокусування з клавіатури працює в них некоректно у розгорнутому вікні. І виявилося, що ця кнопка додала чимало питань для мене, які саме пов'язані з неможливою зворотньою дією та фокусуванням (фактично чекбокс довелося використовувати один із двома label).

Безперечно grid та flex, думаю, що без них зараз майже ніяк. Взагалі, враховуючи мій невеликий досвід, все з цього проєкту буде мені в нагоді і так чи інакше буде використовуватися в майбутньому.

JS Basics

1. Coursera HTML, CSS, and Javascript for Web Developers Course Week 4

Coursera HTML, CSS, and Javascript for Web Developers Week 4 Screenshot

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

2. Freecodecamp JavaScript Algorithms and Data Structures

Freecodecamp Basic JavaScript Challenges Screenshot

Freecodecamp ES6 Challenges Screenshot

Freecodecamp Basic Data Structures Challenges Screenshot

Freecodecamp Basic Algorithm Scripting Challenges Screenshot

Freecodecamp Functional Programming Challenges Screenshot

Freecodecamp Intermediate Algorithm Scripting Challenges Screenshot

Хоча всі завдання за списком пройдені, але не можна казати, що все зрозуміло та запам'яталося. Більшість завдань зміг зробити самотужки, але було й багатенько, де доводилося шукати рішень та підглядати потім в Hints. Особливо поки що не вистачає розуміння та систематичної репетативної практики у роботі з об'єктами, методами map, reduce та використанням вкладених функцій. Передостаннє завдання Make a Person у Intermediate Algorithm Scripting було наче "баран на нові ворота". Зовсім не зрозуміло, що робити, не те що "як?". Далося й те мабуть, що за нашим списком дій було пропущено поки що розділ ООР, де можна було взяти необхідні зачіпки. Тут все тільки починається і ще вчити та особливо тренуватись ще дуже багато. Посилання на додаткові матеріали точно будуть в нагоді зараз.

UPD: коли дійшов до виконання плану DOM, то помітив, що у Intermediate Algorithm Scripting не треба було робити всі завдання, а тільки перші 11. Так ось чому мені передостаннє завдання було трохи не теє...:grimacing:

DOM

Demo (not reviewed yet) Source Files (not reviewed yet)

1. Coursera HTML, CSS, and Javascript for Web Developers Course Week 5

Coursera HTML, CSS, and Javascript for Web Developers Week 5 Screenshot

2. Freecodecamp JavaScript Algorithms and Data Structures

Freecodecamp Intermediate Algorithm Scripting Challenges Screenshot

Building a Tiny JS World

Demo (not reviewed yet) Source Files (not reviewed yet)

Object Oriented JS

Demo (not reviewed yet) Source Files (not reviewed yet)

Codewars Profile

---

• 7.Document Object Model
• 8.Building a Tiny JS World (pre-OOP)
• 9.Object oriented JS
• 10.OOP exercise 👈 I'm around here somewhere
• 11.Offline Web Applications
• 12.Memory pair game
• 13.Website Performance Optimization
• 14.Friends App