Алена Нагаевщук, Blog Author

14 мая 2020

Спорим, я пойму алгоритм и напишу код с нуля? Ревизия курса Front-End

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

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

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

Рутина прекращается, когда просыпается спортивный интерес

undefined

Начало урока

За пару минут до занятия я полной готовности: на ноуте открыта конференция Zoom, рядом чай с печеньем. Впереди — три часа интенсивной работы. Эйнштейн говорил: «Безумие — это повторение одного и того же действия в надежде на изменения». Так вот тут похожая ситуация. Утром позавтракал, сел за компьютер — делаю домашку — вкладки в фреймворке Bootstrap. Пообедал, снова сел за компьютер, отправил одногруппнику скриншот кода. «Слушай, где я торможу, подскажи»? — пишу ему. К вечеру прилетает ответ, но спасибо, додумался сам. Иногда надо отстраниться от груза теории и понять главную потребность пользователя. Занятия три раза в неделю, между ними — постоянно что-то пишу, гуглю, исправляю. Рутина прекращается, когда просыпается спортивный интерес.

undefined

Преподаватель одновременно кодит и читает лекцию

 Так, урок начался. Интересно, кого выберут для групповой проверки домашки на этот раз. На предыдущем занятии таким «счастливчиком» был я. Выяснял, есть ли в задаче число-палиндром (одинаково читается в обоих направлениях, например, 101). Сначала придумал слишком мудреный способ: разбить число на отдельные элементы и сравнивать первый с последним и так далее. В обсуждении преподаватель натолкнул на другую мысль. А не проще ли перевернуть число и сравнить его с первоначальным вариантом? Если совпадает, то условие задачи выполняется, если нет, соответственно, это не палиндром.

Фух, сегодня получим персональные фидбеки по домашке. Выдыхаем.

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

Наш лектор говорит так: не спешите с решением, постройте план действий. Выясните, что требуется, и разложите задачи на мелкие операции в JS. Есть много готовых функций. Их просто нужно выучить, вовремя вспомнить и правильно использовать. Когда преподаватель показывает код (твой или одногруппника), строчку за строчкой, постепенно улавливаешь суть.

Максим Бондарук, фронтенд-разработчик в Jevera и преподаватель курса Front-End в Чернигове: «Перед выполнением задачи мы вместе рассуждаем, по какому алгоритму ее решать. Недавно несколько занятий делали проект странички вывода списка товаров с фильтрами и сортировкой. Отработали три темы: типы данных, классы и события. После урока студенты часто пишут мне в Slack с вопросами. С самых распространенных начинаю следующее занятие».

undefined

Максим Бондарук, преподаватель курса

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

Хороший код — гибкий код

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

undefined

Урок в разгаре

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

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

Гуглить тоже надо уметь

Когда человек учится рисовать, сначала он наблюдает за художником, затем берет в руки кисть или карандаш и делает первые штрихи. Чтоб классно играть на гитаре, нужно регулярно пробовать новые аккорды. Во фронтенде так же: преподаватель показывает, мы повторяем, а потом выполняем задачи самостоятельно без подсказок. Только в рисовании и музыке техники запоминаются механически. Если уже научился, разучиться сложнее. В нашем случае память может притупляться. Когда разобрал азы, создаешь простой текстовый документ и вводишь необходимый код. Допустим, выучил, что такое параграф, пишешь: <p> Hello World</p>. Понял, что такое блок и какие объекты он содержит, пишешь: <div><p>Hello world</p></div>. Знания нанизываются одно за другим, и в итоге ты сможешь комбинировать их в проекте.

Иван Василенко, фронтенд-разработчик в Navicom и преподаватель курса Front-End в Днепре: «Рекомендую своим студентам правило “Узнал — написал в коде — посмотрел, как это работает”. Главное, донести мысль, что нормально чего-то не знать. Мы учимся находить ошибки и исправлять их. Я разбиваю урок на тематические этапы и в конце каждого прошу студентов написать фидбек по пройденному материалу. Затем студент на своем компьютере показывает, как реализует определенную задачу».

undefined

Иван Василенко, преподаватель курса

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

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

Сейчас я на середине курса. Пока сложными из предстоящих тем кажется CSS и SVG анимация. Но я надеюсь разобраться в таск-менеджере Gulp для быстрой сборки проектов. В пабликах пишут, он облегчает повседневную работу. Кто знает, буду пробовать.

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

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

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