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
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)
- 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...
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.😬
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.
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.
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
Цей розділ для мене виявився повторенням того, що я колись вже вчив декілька років тому. Це безперечно потрібно було зробити, оскільки коли ти не використовуєш знання постійно та й ще з перервою, то навички знижуються.
Codacademy Learn HTML Course Screenshot
Поєднання цих базових курсів мені здається вдалим. Після більш теоретичного від Coursera відразу переходиш до того самого матеріалу на Codecademy, але вже використовуєш ці базові речі на практиці та більше закріплюєш матеріал.
Codacademy Learn CSS Course Screenshot
В принципі, все, що я тут пройшов, мені було відоме, але деякі аспекти я трохи краще зрозумів. Наприклад, властивість
"position"точно потребувала повторення. Безперечно, все що увійшло в цей розділ, я буду використовувати, оскільки це абсолютні основи, на яких тримається HTML та CSS (ну, можливо тільки"float"не дуже часто, знаючи, яка тема попереду і які сучасні тенденції 😉).
1. Responsive web design basics
Принципи, які викладені в цій статті, я теж раніше вивчав (декілька років тому). І побачив, що за ці роки стосовно
"viewport"та@mediaпринципових змін не відбулося. "Flexbox" вже тоді був у моді, була тільки відносна складність з сумісністю деяких браузерів. Тепер ще додався "Grid", який став зараз популярним, як я знаю. Тут я додатково побачив, що в панелі розробника Chrome тепер є вбудований інспектор "Lighthouse", який буде корисний, коли інспектуєш свій проєкт з боку Google.
В прогресі навчання потроху починаєш стикатися з наростаючою лавиною кількістю додаткових понять, селекторів, псевдокласів і статей про все це. Коли з однієї статті по ходу читання ти відкриваєш ще суміжних 5-6 сторінок, які ще було б добре почитати. І це починає лякати, як все це запам'ятати? Але треба триматися.:sweat:
2. Відеоуроки FLEXBOX. Вчимося верстати на флексах
Цикл уроків, який саме корисний своєю наглядністю та своїм фінальним практичним прикладом. Що особливо запам'яталось - це спосіб розштовхування елементів при побудові основної архетектури сторінки, коли "футер" завжди опиняється внизу сторінки. Плюс корисний і дуже демонстративний конспект від автора.
Avocode, якою користується автор на практиці - така крута штука! Це мені як трохи верстальнику документації і людині знайомою з цими всіма робочими процесами по замірюванню відстаней, кольорів і т.п. Але і недешева, для аматора.
Flexbox Froggy Last Page Screenshot
Гра, в яку грав вже не перший раз. Навіть зараз дитину посадив, проходили разом. Можна вже казати, що це "нестаріюча класика". Добре проходе по принциповим властивостям, але поки що невідомо, як саме легко (чи ні) зможеш цим жонглювати на практиці в перші рази.
4. Відеоуроки CSS Grid Layout
Grid - дуже цікавий, я про нього раніше тільки чув. Особливо, коли в практичному прикладі автор все вже прописав і почав додавати останні
@media, як це все запрацювало. Але поки що, Grid здається трохи складнішим за Flexbox. Можливо, тому що дуже багато варіацій різних властивостей, дуже багато різних шляхів їх комбінацій та варіантів. Але, як я розумію, зараз іноді без Grid'у майже ніяк, тому будемо закріплювати.
5. Grid Garden
Grid Garden Last Page Screenshot
Гра дуже схожа на Froggy і сама по собі теж цікава та демонструє Grid простішим, ніж він здається, якщо подивитися вищезгадані уроки. Практика потім покаже, як воно насправді.
В цьому проєкті для мене новим стало використання чекбоксів у якості перемикачів відображення інших елементів. Також я вперше сам спробував робити сітку на
grid, раніше мав справу тільки зflex.
Що було незвичним - так це вибудовувати вертикальну структуру, яка буде діяти тільки зверху-вниз. Спочатку здається, що в CSS ти зможеш все означити і зробити звязок взаємодії в любому напрямі, але після декількох варіантів усвідомлюєш, що це неможливо. Відносною особливістю мого проєкту вийшло ще те, що я вирішив (на свою голову)) додати кнопку "Less", яка б згортала вікно попапу в початковий стан. Дуже рідко, хто з інших студентів робив її, а якщо і робив, то не розібрався з тим, що фокусування з клавіатури працює в них некоректно у розгорнутому вікні. І виявилося, що ця кнопка додала чимало питань для мене, які саме пов'язані з неможливою зворотньою дією та фокусуванням (фактично чекбокс довелося використовувати один із двома
label).
Безперечно
gridтаflex, думаю, що без них зараз майже ніяк. Взагалі, враховуючи мій невеликий досвід, все з цього проєкту буде мені в нагоді і так чи інакше буде використовуватися в майбутньому.
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:
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
Demo (not reviewed yet) Source Files (not reviewed yet)
Demo (not reviewed yet) Source Files (not reviewed yet)
- 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