Минулого тижня мав нагоду вчергове відвідати голосовий чат ДОУ | Programming Mentor

Минулого тижня мав нагоду вчергове відвідати голосовий чат ДОУ і поговорити на цікаву тему - дорожня карта для вивчення фронтенду.

Ось його запис, клікаєте і слухаєте, на каналі ДОУ є таймкоди https://t.me/junior_dou_ua/3972

Взагалі, дорожня карта (roadmap) - то один з найбільш важливих чинників що забезпечують успіх чи невдачу навчання. Дуже часто люди намагаються вчити “хоч щось”, але це приблизно як замість того щоб в ралі-рейді їхати куди треба, просто рухатися “куди-небудь”. Мабуть не варто пояснювати, що рух в неправильному напрямку не просто не наближає, а віддаляє від мети.

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

Отже, до конкретних карт.

Найбільш наглядною для початківців мені здається саме ця https://roadmap.sh/frontend

Вона класна в тому сенсі, що демонструє чіткий шлях по технологіям, без “зайвого”.
Якщо здається що елементів забагато - не лякайтеся, там все не обов’язково потрібне для джуна, можна не йти до самого низу, а зайти в професію десь в районі фреймворків. Вона інтерактивна, клікаємо по блочках і бачимо посилання на корисні ресурси.

Взагалі на тому сайті багато якісних роадмепок, зокрема є окремо по JavaScript (https://roadmap.sh/javascript), її ми тепер використовуємо на джедайському курсі (https://sj42.programmingmentor.com/), та по фреймворках: React (https://roadmap.sh/react), Angular (https://roadmap.sh/angular), Vue (https://roadmap.sh/vue).

Якщо хочете скачати, ось секретна лінка, там pdf-ки: https://roadmap.sh/pdfs

Наступна роадмепа, яка мені дуже подобається, на сайті Frontend Masters: https://frontendmasters.com/guides/learning-roadmap/

Дуже детальна, багато блоків, також інтерактивні і наповнені контентом, по факту є гарним підручником “все в одному” для опанування професії. І вона зовсім не лише для джунів - качатися по ній можуть мідли та сенйьори, закриваючи прогалини в знаннях та навичках.

Ще гарна карта тут, хоча вона більше виглядає не як карта, а просто як набір навичок: https://andreasbm.github.io/web-skills/. Зручно, що можна відмічати набуті навички, списочок немаленький, чи не на все життя вистачить. :)

Однак професія розробника - це не лише перелік компонентів фронтенду, важливо розуміти що є багато фундаментальних речей, які загальні для різних прикладних сфер - і патерни, і принципи, і алгоритми та структури даних врешті-решт. Про це поговоримо ще окремо. Але в цьому контексті підкину карту від Тимура Шемсединова з КПІ: https://github.com/HowProgrammingWorks/Index/blob/master/Courses/Roadmap.md