Эффективное онлайн изучение программирования с помощью Сode Avengers

fb1c54b44ba345d68b36f2b510026c0b.png

В поисках качественных онлайн сервисов по изучению программирования, дизайна и гейм-разработки, я нашел несколько сервисов, выделяющихся качеством материала, об одном из них я решил написать статью и поделиться опытом с вами.
Сегодня речь пойдет о Сode Avengers | https://www.codeavengers.com

Главный критерий


Думаю, большинство согласятся, что важнейшим критерием хорошего обучающего сайта является лишь один показатель — желание вернуться на сайт и продолжить обучение.
Codeavengers один из немногих подобных сайтов, заставивших меня полюбить изучать программирование и веб разработку.

| Дизайн и функциональность


Приятный простой дизайн сайта с наглядной стуктурой курсов


c61af1f01846467ebf40764ce6b400ca.png

Удобный и функциональный дизайн самих курсов


— Многострочное редактирование (ctrl + клик):
4aea3a31bb704af5ae89a4bde4a45e52.gif
— Возможность мгновенно продолжить там, где остановился (лась) в прошлый раз (написанный код сохраняется)
— Наглядная демострация ошибок в коде
— Страницы самих уроков разделены на 3 области:
Объяснения и пошаговые инструкции | Ввод кода | Результат кода
12761b2da036408ebfa19634c5279156.png

Понятное объяснение всех новых терминов


— При нажатии на новый термин, появляется всплывающее меню с объяснением. К примеру, ниже видно объяснение термина «рефакторинг»:
bab1f5f9c2b748e19f0c1c63e2983dbe.png
— Если вам не достаточно объяснения какой-либо функции, то при нажатии на эту незнакомую функцию (в данном примере print), появится интерактивное меню с дополнительными примерами и результатом выполнения кода этих примеров
Там же, из списка, можно выбрать любую другую функцию и также посмотреть ее объяснение с примерами:
267d51d19f2043ffb2aae30e680d4652.png

Страница отображения прогресса выполненых курсов


— На странице прогресса отображены пройденные уроки (слева) и задания (справа), которые можно пройти после (до / во время) изучения курса для повторения изученного
— Уроки, выделенные бледно синим, означают, что в уроке была совершена ошибка (ошибки показываются и объясняются в наглядной форме сразу же, при нажатии Run, после написания кода):
0d16f039062a4ae0b01441a56e5bf7a4.png

| Эффективность


Эффективная демонстрация для чего именно нужно делать «так», а не иначе.


К примеру, когда в задании объясняется почему не стоит использовать хардкодинг (использование вручную вбитых значений, вместо переменных), это не просто объясняется, но и показывается на примере (то чего так сильно не хватает почти всем другим подобным сервисам), и делается это следующим образом:
— Сначала, в первом задании вам говорят захардкодить несколько параметров
— После чего, говорят исправить несколько параметров в коде вручную на другие значения (т.к. в реальной жизни часто происходят изменения, к примеру изменение цены на продукт)
— Затем показывают метод, который нужно было использовать вместо хардкодинга, чтобы не приходилось повторять вручную одно действие за другим после изменений
— После чего тебе уже не нужно объяснять почему это нужно делать именно «так» как принято, потому что тебе только что показали на примере, на сколько удобнее «правильный метод», и почему он считается правильным.

Просто, но гениально. На мой взгляд, понимание того, зачем мы делаем то, что делаем, в коде, и почему именно «так», а не иначе очень важно для запоминания и понимания самой сути действий. Поэтому, из всех сервисов по изучению программирования, по моему опыту / мнению, Code Avengers лучший, на данный момент.

| Дополнительная информация


— На бесплатном аккаунте можно изучить 5 первых уроков, каждого из курсов
— Некоторые курсы доступны на русском языке (на текущий момент переведены HTML/CSS / JavaScript / Game Dev / Intro to Coding)
P.S.
Небольшой совет по опыту — если ваш уровень знания английского средний или выше — изучайте все, что можно на английском языке, в том числе и программирование, чтобы в процессе изучения, параллельно подтянуть знание английского (грамматику, словарь, реальное применение слов в англ.). Для мгновенного перевода слова / фразы можно использовать Lingualeo расширение (Chrome / Firefox), позволяющее переводить слово / фразу по двойному клику мыши

Сode Avengers | https://www.codeavengers.com

© Geektimes