Code Basics: бесплатные практические уроки для новичков

    Привет, Хабр! Мы в Хекслете запустили в этом году открытый и бесплатный проект для новичков: code-basics.ru. Это интерактивные курсы с практикой, рассчитанные на тех, кто вообще никогда не программировал. Мы учим основам программирования и рассказываем про базовое устройство компьютеров.


    Сейчас доступен полный курс по PHP и первый модуль по JavaScript. На подходе Racket и Python. Весь исходный код платформы и самих уроков — в open source.


    Сегодня хочу рассказать немного о сути Code Basics, его внутренностях и технологическом стеке.



    Зачем это вообще


    Главный вопрос: «а зачем вообще очередные базовые курсы, их же миллион?». К сожалению, большинство доступных материалов больше похоже на справочники или очередные туториалы в стиле «сделайте так, посмотрите сюда, работает, круто, да?».


    В процессе работы над основными программами обучения на Хекслете мы столкнулись с проблемой: если человек начинает совсем-совсем с нуля, не зная что такое переменные и функции, то типичный базовый курс или туториал может не только не помочь ему, но даже навредить. Новичок легко привыкнет к «магии», к не лучшим стандартам кодирования, к подходу запоминания специфики вместо понимания систем.


    На первый взгляд проект может напомнить Codecademy, но есть три важных отличия:


    1. Уроки на русском. Мы начали с PHP в том числе по этой причине — на русском языке качественных, интерактивных и бесплатных уроков не нашлось, а язык остаётся популярным и важным в индустрии.


    2. Мы не учим поверхностно. Это вечная дилемма — с одной стороны нужно покрыть много всего и заинтересовать широтой (и «популярными словами»), с другой — мы в Хекслете продолжаем следовать своим принципам важности фундамента и понимания систем, а не особенностей. Легче понять на примерах:


    а) Рассматриваем побочные эффекты и изменяемость — это невероятно важно, но почти никто не затрагивает эти темы в базовым курсах.


    б) Как дело касается строк, важно рассказать о самом понятии кодировки. Чтобы работа с символами не превратилась в «магию и волшебные слова».


    в) Когда становится понятно, что язык позволяет делать странные штуки вроде 1 + ‘7’, важно познакомить ученика с типизацией и в частности со слабой типизацией.


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


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


    Думаю, вы поняли суть. Мы, программисты, не задумываемся особо о таких штуках, как foo(a+b) или return foo(x), но для новичков очень часто подобные конструкции оказываются на порядок сложнее «стандартных» foo(a) или return x. И здесь можно долго рассматривать все отдельные случаи, но лучше объяснить суть, саму систему базовых правил языков программирования.


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


    3. Бесплатно и интерактивно. Мы сделали Code-Basics в том числе потому, что некуда было посылать новичков, готовящихся к нашей основной программе «Профессия PHP-разработчик». Просто нет бесплатного интерактивного курса! Точнее, теперь есть :)



    Другие важные особенности:


    • Учим правильно именовать функции и следовать стандартам кодирования.
    • Делимся своим опытом и лучшими практиками.
    • В каждом упражнении есть решение учителя, которое доступно после самостоятельного решения или через полчаса попыток :) При этом свое решение можно сравнить с решением учителя на одной странице.
    • Каждый урок можно обсудить с другими учениками. Мы стараемся чистить обсуждения от «спойлеров»
    • Задания построены вокруг Игры Престолов :) (см. скрин выше, например)

    Авторизация, позволяющая получить доступ к упражнениям и сохранять прогресс уроков, пока только через Github. Пользуясь случаем провоцируем новичков как можно скорее создать аккаунт на Гитхабе :)


    Под капотом


    Хекслет написан на Рельсах. Мы писали о внутренностях Хекслета три года назад (омг, три года!) в статье «Под капотом образовательного проекта Хекслет», и с тех пор многое изменилось, но фундаментально все так же: Rails, PostgreSQL, все крутится на AWS и частично на Azure, активно используется Докер, деплой и оркестрация через Ansible. Под каждое упражнение каждого юзера поднимается контейнер, что позволяет делать упражнения практически любой сложности: с фреймворками, серверами и веб-доступом.


    В Code-Basics изначально решили попробовать что-то новое и более легковесное, чем Rails. Например, nodejs + typescript + какой-нибудь микрофреймворк. Но, желательно, не менее экспрессивное, чем Rails. Учитывая нашу любовь к Эрлангу, выбор естественным образом пал на Phoenix, тем более руки давно чесались попробовать Elixir.


    Фреймворк неожиданно удивил. Несмотря на значительно меньшее количество фич, он сделан очень добротно. Интеграция с JavaScript, развитая тестовая инфраструктура, отличная ORM (но необычная, нужно привыкать), много рельсовых аналогов (например поддержка slim или gon).


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


    А учитывая наличие акторов (и готовых каналов в Phoenix), можем однозначно сказать, что Elixir выигрывает у Node JS почти во всех ситуациях. И при прочих равных мы будем выбирать для разработки Феникс.



    По фронту — используем React + Redux. Вёрстка построена на Bootstrap 4, как и все наши сайты (hexlet.io, guides.hexlet.io). В качестве редактора для интерактивных упражнений используется Monaco, лежащий в основе VS Code. Мы также перешли на Монако в самом Хекслете.


    Инфраструктура и деплой — это Terraform, Ansible и кучка мейкфайлов с шорткатами для самых популярных команд. Исходники Code Basics доступны на Гитхабе, и мы принимаем пулл-реквесты.


    Сами уроки и практические упражнения — тоже. В том числе принимаем пулл-реквесты для перевода уроков на английский. Пока ограниченное количество уроков на английском доступно тут.


    Кому подойдет Code Basics


    • Новичкам с нулевым опытом.
    • Начинающим программистам, которые немного «плавают» в базовых темах и не до конца понимают как работают штуки, выходящие за пределы простых примеров из учебников.
    • Учителям, работающим с новичками.

    Планы


    Следующие курсы на Code-Basics — это JavaScript, Racket и Python. Сейчас по PHP есть 63 урока и скоро выйдет несколько дополнительных: по библиотечным функциям, работе с датой и временем и unicode. По JavaScript есть первый модуль, и контент по большей части будет аналогичен PHP: все от арифметики до функций.


    Далее в планах перевод на английский. Вы можете в этом помочь :) Все эти курсы на Code Basics также будут полностью бесплатными.


    Будем рады ответить на ваши вопросы в комментариях. Спасибо!

    Поделиться публикацией
    Похожие публикации
    Ой, у вас баннер убежал!

    Ну. И что?
    Реклама
    Комментарии 54
      +3
      Это просто шикарно! То, что нужно тем, кто только вникает в тему программирования.
      Надеюсь хотя бы в университетах включат ваш проект в программу обучения. В идеале — в школе уже изучать его.
        +6
        Хекслет — локомотив курсов (качественных) в рунете. Это здорово
          0
          Поддерживаю!
            0

            Ну, когда они только начинали, много лет назад, могли бросить новый курс и людей на нём на полдороги. Хорошо, если сейчас так не бывает, но некоторое разочарование с тех пор осталось.

              +1
              Подозреваю что вы говорите про те времена, когда Хекслет был просто площадкой для курсов сторонних авторов. Тогда курсы мало кто доделал. С тех пор мы перестали быть площадкой, сейчас это не просто набор разрозненных курсов, а полноценные программы обучения по разным направлениям с проектами и помощью в трудоустройстве.
            +1

            Опять курсы для новичков… Что же делать тем, кто уже умеет создавать "Hello world", но все ещё не знает возможностей, не может сам себе поставить корректную задачу? Читать сразу литературу — отпугивает.

            –1
            Новичкам с нулевым опытом.


            Кто для вас новичок? Выпускник технического вуза или выпускник исторического факультета, который никогда не программировал. Есть ощущение, что новички бывают сильно разные и для кого-то есть смысл рассказывать про побочные эффекты в базовом курсе, а кому-то ещё про переменные надо долго разжёвывать.
              0
              Этот проект существует уже не первый месяц и его проходит очень много людей (мы проводим custom dev). Так вот практика показала что он прекрасно подходит именно для новичков и тех кто ну очень далек от программирования. Думаю что вы не видели содержание и не просмотрели как мы разжевываем переменные.
              +1

              Отдельное спасибо за Racket. Кроме шуток, на мой взгляд, отличный язык для старта.
              Можете рассказать, почему его вы выбрали?

                0
                Мы считаем что начинать программировать надо с лиспов в принципе и СИКП в частности)
                  +1

                  Это прекрасно.
                  Как курс будет соотноситься с edx https://courses.edx.org/courses/course-v1:UBCx+SPD1x+2T2016/course/ ?

                    0
                    Не проходил. Думаю за основу взять www.htdp.org
                      0
                      Книга достойная. Желаю вам удачи. По своему опыту могу лишь подтверлить ваше положение, что программировать надо начинать с лиспов. Учился на лисп по приведенным выше курсам и первой редакции htdp уже имея один язык программирования. Но «мозги на место» встали именно после лиспа.
                        0
                        Спасибо! Во имя лямбд! :D
                +2
                Вот это уже интересно.
                Серьезно задумался насчет изучения Python'а — больше для саморазвития нежели работы.
                Из программирования касался только Паскаля на 1 курсе института.
                Так что буду с нетерпеньем ждать Пайтон. Пока попробую посмотреть PHP.
                  0
                  А Go вообще никаким боком не планируется? Даже в будущем?
                    0
                    Хотелось бы! Доберемся — сделаем.
                    0
                    А где инструкция как контрибьютить? Я бы попробовал подключиться и расширить курс для js. Тем более, там, по сути, первые несколько модулей уже написаны для пхп.
                    Для python — аналогично, по сути… Вводные модули можно было бы порасширять…
                    0
                    5 «уроков» по JS?
                    Это все?
                      +1
                      Очевидно нет.
                      JS только сегодня начали добавлять.
                      В РНР 60+ сейчас.
                      0
                      Сегодня просто праздник какой-то! То уроке от postgrespro и теперь вы. Хочется на уроки питона кнопку — «уведомить о доступности».
                      0

                      Огромное спасибо за проект, обязательно буду участвовать! Сам потихоньку пытался учить Javа и все хотел найти подобный сервис. Но вы нашли меня :)
                      Вопрос такой: будет ли реализовано введение ученика от 0 до какой нибудь работы или практики?

                      0
                      Довольно удобно, но чересчур подробно для «не новичков». Посвящать 5 уроков выводу в консоль на js это эпик… Было бы неплохо сделать возможность пропускать часть уроков и вместо этого проходить один небольшой тест подтверждающий что ты уже знаешь эти темы.

                      Еще непонятно зачем там какой-то Racket в coming soon? Первый раз про такой язык слышу. Судя по вики сильно смахивает на Closure, хотя пардон он же появился аж в 94… Тогда вообще непонятно зачем он там. Лучше бы тот же Ruby добавили и C#/Java.
                        +2
                        > но чересчур подробно для «не новичков».

                        Поэтому у нас четкое разделение, code-basics для совсем новичков, а для тех кто уже хотя бы минимум знает есть сам hexlet.io

                        > Еще непонятно зачем там какой-то Racket в coming soon?

                        Racket входит в семейство Lisp и является прямым наследником языка Scheme. Из современных лиспов он наиболее популярен после Clojure. Нам очень нравятся лиспы и мы продвигаем их в массы. Так же Racket идеально подходит для изучения СИКП.

                        Рекомендую прочитать небольшой отрывок Пола Гремма на эту тему www.nestor.minsk.by/sr/2003/07/30710.html
                        0
                        Поигрался в тестах. Очень неоднозначно. Вроде задание «вывести результат выражения», но при этом надо использовать определенную конструкцию. Почему? Ведь я вывести могу результат как хочу. Хоть echo, хоть print…
                        0
                        Java можно ожидать?
                          0
                          Да! Есть такой план.
                          0
                          Насколько я увидел по исходникам проекта, то вы делаете все в rails way — все рендерится на бекенде внутри феникса, а потом данные пробрасываются на клиент и работает реакт.
                          Насколько я вижу, на сегодняшний день люди предпочитают строить реакт с SSR который рендерится нодой, а данные выгребать с API из rails/phoenix/etc. (имхо так проще разбить API и клиент в 2 отдельных проекта)
                          Почему вы делаете именно так? Проще в поддержке?
                          +1
                          Респект таким парням!!!
                          Наконец то, кто-то и обо мне позаботился!
                          Спасибо ребят! Сегодня начну с PHP! Если смогу понять, я ваш вечный студент!
                            0
                            Сейчас скажу спорную вещь и рискую быть побитым — я бы убрал из списка преимуществ русский язык. Начинать учить программирование на международных языках программирования надо на международном языке. Люди начинают общаться с коллегами, а те их не понимают даже в базовой терминологии. Что такое анжулар? Где учат яваскрипт? А где в языке го короутины? Знаете ли вы что такое пэхапе? И так далее, милые нам и знакомые термины, но совершенно непонятные коллегам.
                              +1
                              Ну это ж для самых новичков, мало кто из них будет искать курсы на англ., и если не делать хорошие курсы на русском, то будут попадать на всяких Поповых. В любом случае при дальнейшем развитии всем придется и англ. подтянуть.
                                0
                                Проблема в том что людям потом сложно переучиваться. Даже опытные люди с пеной у рта отстаивают право называть Java на русском — Ява, но потом жалеют, начав работать с миром. Те же китайцы при этом почему-то говорят правильно, а наши выглядят странновато, мягко говоря, называя процессор ЦПУ, например. Ну нет такого слова в английском. Я не говорю что надо преподавать на англ, я говорю что русский — это не преимущество.
                                  0
                                  Ну переучиваться с курсов Евгения Попова тоже непросто ) Так что вполне можно считать преимуществом для сообщества (приток нормальных программистов).

                                  Вообще что-то тут все примеры про произношение, однако думаю не так уж много кому необходимо именно говорить на англ. Читать и писать да, а вот устная речь думаю нужна намного меньшему числу русскоговорящих программистов. Многие же ищут работу только в РФ и т.п.
                                  Ну и в любом случае в этих курсах только текст.
                              0
                              А когда примерно будет доступен python?
                                +1
                                Точно не скажем, но не раньше конца года. Сейчас фокусировка на JS.
                                Можете подписаться на одну из наших соц сетей (в футере ru.hexlet.io/blog), мы там обязательно объявим об обновлениях.
                                  0
                                  Вероятно не скоро. Пока план добить PHP, сделать JS и Racket.
                                  –2
                                  Очень похоже на codecademy.com
                                    0
                                    Спасибо большое за работу! После тестирования может посоветую друзьям. Я так понимаю это аналог codecademy на русском. У меня есть только один комментарий. У вас удобный редактор, но я бы посоветовала не иметь создание автоматически закрытых скобок и кавычек. Новичкам лучше все-таки самим полностью печатать код.
                                      0
                                      А семейство си есть в планах?
                                        0
                                        В ближайшие месяцы нет, в планах пока только JS, Python и Racket.
                                          0
                                          Семейство?
                                          Если вы про все, что начинается с «Си», то они ж все разные, а так и JS, и РНР можно отнести к этому семейству ) en.wikipedia.org/wiki/List_of_C-family_programming_languages
                                            0
                                            Реально большое семейство… Но подразумевал я C/C++/C#, чей синтаксис не особо отличается.
                                              0
                                              Отличается если не писать на С++ как на С и т.п.
                                              Кроме некоторых элементов типа if'ов, циклов (и то range for в С++, foreach в C# и т.п.), присваиваний (и то различия в копировании и т.п.), ++, +=, == почти все по-другому. А эти есть и в js, и в php )
                                          0
                                          > Уважаемые авторы. Спасибо за отличный курс. Порядок изложения материала позволяет по-настоящему с самого начала понять, о чем и когда идет речь. Живые примеры на практике + необходимость периодически использовать знания, полученные пару уроков назад, – отличный способ запоминать информацию и получать навыки. Прошел доступные уроки на одном дыхании.

                                          Отзыв от одного из участников пришедших с хабра.

                                          Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.

                                          Самое читаемое