Б’ємось об заклад, я зрозумію алгоритм і напишу код з нуля? Ревізія курсу Front-End

Ти плануєш кодити або займатися дизайном сайтів та інтерфейсів? Знаючи Front-End, зможеш перейти у будь-який напрямок розробки. У твоєму арсеналі, як мінімум, знання верстки HTML/CSS і однієї з найбільш затребуваних мов програмування — JavaScript. Особливість фронтенду у його наочності. Пишеш код й одразу бачиш результат.

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

Рутина минає, коли прокидається спортивний інтерес

Початок уроку

За пару хвилин до заняття я у повній готовності: на ноуті відкрита конференція Zoom, поруч чай із печивом. Попереду — три години інтенсивної роботи. Ейнштейн казав: «Божевілля — це повторення однієї й тієї ж дії зі сподіванням на зміни». Так ось тут схожа ситуація. Вранці поснідав, сів за комп’ютер — роблю домашку — вкладки у фреймворку Bootstrap. Пообідав, знову сів за комп’ютер, надіслав одногрупнику скріншот коду. «Слухай, де я гальмую, підкажи»? — пишу йому. До вечора прилітає відповідь, але дякую, додумався сам. Іноді треба відсторонитися від вантажу теорії та зрозуміти головну потребу користувача. Заняття три рази на тиждень, між ними — постійно щось пишу, гуглю, виправляю. Рутина минає, коли прокидається спортивний інтерес.

Викладач одночасно кодить і читає лекцію

Так, урок почався. Цікаво, кого оберуть для групової перевірки домашки цього разу. На попередньому занятті таким «щасливчиком» був я. З’ясовував, чи є у завданні число-паліндром (однаково читається в обох напрямках, наприклад, 101). Спочатку придумав занадто розумний спосіб: розбити число на окремі елементи та порівнювати перший з останнім і так далі. В обговоренні викладач наштовхнув на іншу думку. А чи не простіше перевернути число й порівняти його з початковим варіантом? Якщо збігається, то умова задачі виконується, якщо ні — це не паліндром.

Фух, сьогодні отримаємо персональні фідбеки по домашці. Видихаємо.

Ольга Прокопчук, Educational Manager в Beetroot Academy: «Є класний метод перевірки завдань: проаналізувати вдалу роботу і ту, де є недоліки. Студенти бачать чужі помилки й перевіряють, чи немає у них таких самих. Паралельно викладач коментує, у чому проблема, питає студентів, як би вони її вирішили. Так методика підвищує мотивацію. Деяким IT спершу дається складно. Студентам потрібна конструктивна критика, щоб вони відчували свій прогрес».

Наш лектор говорить так: не поспішайте з рішенням, побудуйте план дій. З’ясуйте, що потрібно, і розкладіть завдання на дрібні операції в JS. Існує багато готових функцій. Їх просто потрібно вивчити, вчасно згадати й правильно застосувати. Коли викладач показує код (твій або одногрупника), рядок за рядком, поступово вловлюєш сенс.

Максим Бондарук, фронтенд-розробник у Jevera і викладач курсу Front-End у Чернігові: «Перед виконанням завдання ми разом розмірковуємо, за яким алгоритмом його розв’язувати. Нещодавно декілька занять робили проєкт сторінки виведення списку товарів із фільтрами й сортуванням. Відпрацювали три теми: типи даних, класи й події. Після уроку студенти часто пишуть мені у Slack із питаннями. З найпоширеніших починаю наступне заняття».

Максим Бондарук, викладач курсу

З одного боку, під час групового аналізу домашки буває некомфортно (усі ж дивляться), з іншого — знайдені помилки допомагають виявити слабкі сторони. На старті я трохи розумів CSS і як влаштована розмітка вебсторінок, цікавився дизайном. Я міг уявити віртуальну сітку і те, як перенести дизайн на готову сторінку. Тому вступний тест склав легко. Я не «відмінник», але програма курсу дається мені добре, не відстаю. Читати й розуміти код JS мені легко, а ось написати щось самому — складніше. Нещодавно листувався з викладачем про це. Зійшлися на тому, що потрібно зосередитися на практиці. Причому, краще пройти інтенсиви JS. Уже обрав декілька безкоштовних уроків на codecademy.com.

Хороший код — гнучкий код

JavaScript — розгалужена мова програмування. Чесно, лише пару днів тому зрозумів логіку й принцип роботи з нею. Один і той самий алгоритм може не спрацювати у певних випадках. Завжди є декілька способів розв’язання задачі. Відрізняється лише розмір коду і час його завантаження.

Урок саме в розпалі

Код має бути чистим і зрозумілим. Нас вчать звертати увагу на його продуктивність, якість функціоналу, стабільність, здатність до змін. Але також важливі читабельність і керованість коду. Фронтендщику потрібно швидко визначити, як поводитиметься програма у тому чи іншому випадку і за яким алгоритмом її придумали. Якщо вдається хутко виправити код й уникнути небажаних наслідків, значить, продукт гнучкий.

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

Гуглити теж треба вміти

Коли людина вчиться малювати, спочатку спостерігає за художником, потім бере до рук пензлик або олівець і робить перші штрихи. Щоб класно грати на гітарі, потрібно регулярно брати нові акорди. У фронтенді так само: викладач показує, ми повторюємо, а потім виконуємо завдання самостійно без підказок. Однак, у малюванні й музиці техніки запам’ятовуються механічно. Якщо вже навчився, розучитися складніше. У нашому випадку пам’ять може притуплятися. Коли розібрав ази, створюєш простий текстовий документ і вводиш необхідний код. Наприклад, вивчив, що таке параграф, пишеш: <p> Hello World </ p>. Зрозумів, що таке блок і з яких об’єктів він складається, пишеш: <div> <p> Hello world </ p> </ div>. Знання нанизуються одне за одним, і врешті ти зможеш комбінувати їх у проєкті.

Іван Василенко, фронтенд-розробник у Navicom і викладач курсу Front-End у Дніпрі: «Раджу своїм студентам правило “Дізнався — написав у коді — подивився, як це працює”. Головне, донести їм, що нормально чогось не знати. Ми вчимось знаходити помилки та виправляти їх. Я розбиваю урок на тематичні етапи та в кінці кожного прошу студентів написати фідбек за пройденим матеріалом. Потім студент на своєму комп’ютері показує, як реалізовує певну задачу».

Іван Василенко, викладач курсу

Можна зосередитися на HTML/CSS, але обмежити для себе вибір інших проєктів. Коли я почав вивчати JS, побачив, як втілити цікавий мені функціонал, який раніше не міг зробити виключно з HTML/CSS.

Щоденне правило фронтенд-розробника — пам’ятати про адаптивність верстки. Я постійно копаюсь на GitHub, користуюся CSS селекторами. Навіть не пам’ятаю тем, які б нам взагалі не знадобилися. Ну, хіба що методологія БЕМ (Блок — Елемент — Модифікатор) і лише тому, що там треба створювати багато окремих документів. Це набір інтерфейсних бібліотек, фреймворків і додаткових інструментів веб-розробки. Абсолютно все вивчити неможливо, але нам дають класну навичку — гуглити. Напиши чіткий пошуковий запит, і знайдеш відповіді на будь-які питання.

Зараз я на середині курсу. Поки що складними з майбутніх тем здаються CSS і SVG анімації. Але я сподіваюся розібратися у таск-менеджері Gulp для швидкої збірки проєктів. У пабліках пишуть, він полегшує повсякденну роботу. Хтозна, треба спробувати.

Уже обговорюємо з одногрупниками дипломний проєкт. Деякі роздумують над шаблоном магазину, а я хочу запропонувати гру, яка б розвивала дитячі здібності. Усіх подробиць не розкрию, але виконання стандартне — повний CSS і трохи JavaScript. Планую показати рідкісні методи й функції.

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

Дякуємо викладачам курсу «Front-End розробка» Івану Василенко і Максиму Бондаруку, студентам Денису Боброву і Максиму Клиго, а також Educational Manager Ользі Прокопчук за допомогу у підготовці матеріалу.