Привет, Хабр! Хочу поделиться своими мыслями о самых популярных площадках для изучения веб-разработки HTML Academy, Codecademy, FreeCodeCamp (мне бы хотелось прочитать подобную статью, когда я только начинала учиться веб-разработке самостоятельно).

*Данный обзор является моим субъективным видением и не претендует на истину в первой инстанции.

Немного предыстории. Я начала изучать основы HTML и CSS в декабре 2018 года с нуля и понятия не имела, с чего же собственно начать. Говоря “с нуля” я не преувеличиваю. У меня не было никакого опыта в программировании. Совсем. Как быть человеку, не имеющего представления о том, где найти материал для изучения? Пойти на курсы, скажете вы. Возможно, будете правы. Но давайте посмотрим правде в глаза. Большинство курсов, особенно на русском языке, не дают никакой информации, которую нельзя найти в интернете самостоятельно. Да и к тому же, они не дают никаких гарантий. А без гарантий и самому можно погуглить. Что я и сделала. Главным критерием для меня была бесплатность (ну или частичная бесплатность) ресурса. Я просмотрела тонны информации в интернете, прочитала километры постов разных авторов об их мега-успешном опыте и, как результат, запуталась в этом всем еще больше. Однако практически все ресурсы на русском языке сходились в одном – изучать основы синтаксиса нужно на HTML-академии. С этого я и начала.

*Пожалуйста, обратите внимание, что в этом разборе я не затрагиваю тему изучения JavaScript.

HTML Academy

Оригинал изображения

Главное и единственное (ин май хамбл опиньон) преимущество данного ресурса – это то, что он на русском языке. Все. На этом можно закончить.

Но раз уж я претендую на обзор, то вот краткое резюме бесплатных возможностей на HTML-академии:

  1. Вы получаете доступ к главам до темы HTML5 и просто неоправданно много заданий на знание таблиц (я извиняюсь, кому нужно столько заданий с таблицами в 2019-м году?);
  2. Вы получаете доступ к главам по основным селекторам и базовым особенностям CSS (за продвинутые селекторы наподобие :nth-last-of-type или :only-child придется заплатить отдельно);
  3. Кто-нибудь видел задания по flex-box или grid? Так вот, этого вы там не найдете. Либо они где-то глубоко в чертогах платной подписки;
  4. Ну и еще несколько бесплатных заданий по SVG и LESS.

Отдельного внимания заслуживает язык, которым написана история про кота Кекса, с которым вы будете сталкиваться на протяжении всего обучения. Когда я в отчаянии билась над очередным заданием с воплями: “Я тупая. Я не понимаю, о чем тут речь”, моя подруга говорила: “Ты не тупая. Это у них копирайтеры отвратительные” (стоит тут отметить, что моя подруга – журналист по образованию и долго проработала копирайтером. Полагаю, к ней стоит прислушаться).

Действительно, эти истории с кексами и прочими котиками безусловно прекрасна, но она отвлекает от основной задачи, не говоря уже о том, что задания сформулированы откровенно плохо. Технических писателей из них точно не выйдет. В итоге, хватило меня не надолго. Я бросила это неблагодарное дело и решила пользоваться англоязычными ресурсами.

Codecademy


Оригинал изображения

К этому ресурсу я приступила после того, как устала от кексов на предыдущей площадке. Следует отметить, что Codecademy является прототипом HTML-academy, что можно судить по датам основания (2011 у Codecademy и 2013 у HTML-academy). Ну и вы все прекрасно знаете, что всегда лучше использовать иностранный оригинал, чем его отечественный аналог.

Итак, что вы получите от бесплатной подписки:

  1. Более приятный дизайн (мое субъективное мнение);
  2. Основы HTML5, таблицы, формы;
  3. Основы CSS: селекторы, блочную модель, цвета, типографику, а также основы Grid;
  4. Бесплатные задания по основным принципам создания веб-сайта, размещению его на GitHub, обучалка по адаптивному дизайну и основы Sass.

Никакой истории про котиков, но на протяжении нескольких уроков вы будете учиться на примере создания одной-двух страничек.

FreeCodeCamp


Оригинал изображения

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

Если вам не докучают не особо надоедливые всплывающие окна с предложением пожертвовать какую-нибудь сумму денег на развитие проекта, то вы получите:

  1. Основы HTML5;
  2. Основы CSS;
  3. Основы визуального дизайна;
  4. Принципы адаптивного дизайна;
  5. Упражнения по Flexbox и Grid;
  6. 5 итоговых проектов, по результатам которых вы получите сертификат.

Не могу сказать, что наличие сертификата является преимуществом, потому что сам создатель этой площадки Quincy Larson признал, что большинство студентов не проходят все задания, поскольку находят работу раньше. Но весомым плюсом в пользу этого ресурса для меня стала ее детальная и продуманная программа (определенно сказывается тот факт, что основатель FreeCodeCamp еще и педагог).

Итог

Для тех, кто не знает английского языка хотя бы на уровне понимания написанного выбор достаточно ограничен, и, к сожалению, российские площадки не являются лучшим выбором, поскольку преследуют исключительно сиюминутную выгоду. Для меня же выбор очевиден – и это FreeCodeCamp. У этой площадки огромное комьюнити, где вы можете найти помощь и почитать интересные статьи. Ну и что самое важное для многих начинающих – это совершенно бесплатно. Однако было бы здорово вознаградить создателей за их проект, если благодаря их труду вы сможете найти достойную работу.

Комментарии (31)


  1. crustal
    09.06.2019 23:19
    -1

    Если вам лень подучить английский (в школе ведь изучали), то может и нет смысла вообще заниматься всем этим?


    1. haughty-grumbler Автор
      10.06.2019 06:19

      Вы это мне? Кажется, я написала, что английский знаю) я вообще учитель английского по образованию. Так что ваш совет неуместен)


      1. MaximIs
        10.06.2019 08:06

        Мне все таки кажется, что адресовано было не вам, а тем, кто хочет уметь программировать и при этом не знают/понимают английского языка. Если конечно это не 1С разработка.


      1. crustal
        10.06.2019 08:56

        Вы это мне? Кажется, я написала, что английский знаю) я вообще учитель английского по образованию. Так что ваш совет неуместен)

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

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

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

        а) крупные имена, которые сидят на этих технологиях и имеют людей, которым есть, что сказать, и они имеют соответствующие курсы, к примеру Microsoft, или этот консорциум или как его там по WWW и HTML, раз вы про веб-программирование, есть у них курсы.

        б) образовательные учереждения, всякие там MIT, Caltech, физтех и многие другие. У них есть курсы по определению.

        в) всякие свободно блуждающие гении, к примеру Челко по SQL, у них есть книги как минимум, а может и курсы. В выбранном вами направлении Eric A. Meyer, CSS and web standards expert. Почему бы про него и его книги не упомянуть?

        г) интеграторы всего вышеупомянутого — онлайн-курсы (MOOC, Massive Open Online Course) Была же нормальная статья «Хождение по MOOCам: опыт обучения на онлайн-курсах» habr.com/ru/post/289510/


        1. haughty-grumbler Автор
          10.06.2019 09:31
          -1

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

          P.S. Тем более с хамами.


    1. haughty-grumbler Автор
      10.06.2019 06:25

      И уж тем более неуместны ваши советы о том, кому и чем стоит заниматься)


    1. vav180480
      10.06.2019 07:03

      А зачем в 21 веке учить английский? И по поводу статьи именно по поводу HTML (практически не надо никакого окружения настраивать, что для новичка самое сложное) просто книгу стоимостью 500-1000р купить вообще не судьба?


      1. haughty-grumbler Автор
        10.06.2019 08:03

        Книги отстают очень сильно чаще всего. Я за онлайн образование в этом случае. Про английский комментарий очень странный. Учить его обязательно нужно. Тем более в 21 веке.


        1. vav180480
          10.06.2019 08:49

          Простите в чем отстают? В HTML для начинающих, cерьезно? А видеокурсы не отстают, что правда серьезно? И еще один странный вопрос, как вы думаете, сколько лет осталось до «вавилонской рыбки»?


          1. haughty-grumbler Автор
            10.06.2019 09:32
            -1

            Читайте книги. Вам никто не запрещает.


            1. vav180480
              10.06.2019 10:01

              А еще мне никто не запретит рекомендовать книги вместо курсов, потому что «книга лучше». Та что там насчет «вавилонской рыбки»? Долго еще ждать или это всего лишь мечты?


  1. ruslani
    10.06.2019 08:06

    Полностью согласен с выбором. FCC опережает даже многие платные курсы как в плане объема, так и в плане продуманности и последовательности плана обучения.
    Рекомендую вам пройти и JS, и вот здесь вам (нам) повезло, так как есть фантастический курс лекций по JS/Node от КПИ. Для вас может быть и не так актуально, раз знаете английский, но тем не менее курс классный, тем более в отличии от скажем так чисто прикладной направленности в FCC, дает более глубокое, фундаментальное представление о данном языке.


    1. haughty-grumbler Автор
      10.06.2019 08:09

      Да, JS я изучаю по разным англоязычным ресурсам. Как и все остальное собственно.


    1. Paxest
      11.06.2019 13:24

      Спасибо огромное за ссылку!


  1. Avitale
    10.06.2019 11:18

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


  1. Snelsi
    11.06.2019 10:43
    +1

    Как альтернатива, из самостоятельного изучения есть ещё онлайн учебник от w3schools. Сам изучал на нём фронт, для начинающих как база — вообще замечательно.


  1. xkondorx
    11.06.2019 10:43

    Вот добавьте к html и css еще JS и можно считать что это «начало веб-разработки».


  1. lekzar
    11.06.2019 10:44

    Прошел Html-academy целиком, никаких проблем с котиками не испытывал, про флексы и гриды там тоже есть. Понравилось, что дают пояснения по верстке и дизайну, но вообще я бы сказал, что это больше курс про css, чем про что либо еще.

    image

    С английским языком у меня проблем нет, но, имхо, начинать обучаться лучше на своем языке, чтобы не отвлекаться и не тратить ресурс на перевод в голове, благо сейчас хватает курсов на русском языке, на том же udemy к примеру


    1. haughty-grumbler Автор
      11.06.2019 10:49

      И все-таки они существуют. Весь смысл, как я и указала в публикации, был научиться бесплатно, а эти уровни как раз и находятся, цитирую, «в чертогах платной подписки». А так да, Вы правы, проще начинать на родном языке обучаться.


  1. SelenIT3
    11.06.2019 12:01

    кому нужно столько заданий с таблицами в 2019-м году?

    Предположу, что всем, кто делает всевозможные Data Grids и прочие доступные интерфейсы с табличными данными. Чтобы не подпирать костылями то, что давно есть в HTML "из коробки" и надежно работает во всех браузерах (если специально не ломать:).


    1. haughty-grumbler Автор
      11.06.2019 12:28

      Опять же повторюсь. Я пишу о том, с чего начать изучение HTML. Я не даю советов о том, кому и чем стоит пользоваться в работе. Это всего лишь обзор разных площадок и заданий (подчеркиваю), которые предлагаются в бесплатной подписке. Если человеку нужны будут глубокие знания таблиц, он сможет вернуться к этой теме позже.


  1. Paxest
    11.06.2019 12:29

    Прошёл 3 блока на freecodecamp — вэб дизайн, алгоритмы и структуры данных на js, фронтэнд (причем, хотя там и есть bootstrap, sass, jQuery, но мне было сложно всё это применять и все пять проектов выполнил с реактом), в данный момент добиваю задания по визуализации данных(разобрался с основами json, d3, совсем чуть-чуть Аякса и апи.) По объему самостоятельной работы мне кажется freecodecamp самый лучший за бесплатно. У него конечно есть минусы, особенно если почитать их форум — многие жалуются что задания не охватывают всех технологий, которые применяются при создании проектов, приходится смотреть чужой код, разбираться в нём, делать ошибки, менторов нет и никто не подаст тебе информацию структурировано под твои запросы. Ещё один минус — это проверка заданий с помощью codepen.io. загружаешь туда проект и подгружаешь скрипт проверки, но если использовать codepen на бесплатной основе то он не подсвечивает ошибки в коде, вообще никакие, нет никакой автоподстановки. Я научился писать практически без ошибок, а если их делаю то нахождение опечатки не занимает больше 10-15 минут(обычно это происходит когда сразу пишу по 10 строк кода а потом пару букв перепутал и ищу где это было) ещё codepen не подсвечивает никак конструкции типа svg.select().data().enter().append()… — в таких конструкциях он увидит только svg, остальное всё одним цветом и опечатки искать неприятно. Но это всё касаемо обучения, при использовании visualStudioCode таких затруднений не возникает..


    1. haughty-grumbler Автор
      11.06.2019 12:36

      Интересно. Я нашла работу раньше, чем закончила все курсы и проекты на FreeCodeCamp, но много раз слышала, что с этими проектами даже на собеседовании показаться не стыдно. Считаете, стоит его добить? Да, нет ничего идеального, но для бесплатной площадки этот ресурс определенно хорош.


      1. Paxest
        11.06.2019 13:17

        Не нашел ссылки на тот портал, но моё мнение совпадает с увиденным — fcc это один из лучших порталов для того, чтобы выучить js, его даже в платных школах в США используют как курс по js. В нём очень много практических заданий, помимо самих заданий на диплом.

        Задания не для диплома по js
        Первая часть
        Using the Test Method
        Match Literal Strings
        Match a Literal String with Different Possibilities
        Ignore Case While Matching
        Extract Matches
        Find More Than the First Match
        Match Anything with Wildcard Period
        Match Single Character with Multiple Possibilities
        Match Letters of the Alphabet
        Match Numbers and Letters of the Alphabet
        Match Single Characters Not Specified
        Match Characters that Occur One or More Times
        Match Characters that Occur Zero or More Times
        Find Characters with Lazy Matching
        Find One or More Criminals in a Hunt
        Match Beginning String Patterns
        Match Ending String Patterns
        Match All Letters and Numbers
        Match Everything But Letters and Numbers
        Match All Numbers
        Match All Non-Numbers
        Restrict Possible Usernames
        Match Whitespace
        Match Non-Whitespace Characters
        Specify Upper and Lower Number of Matches
        Specify Only the Lower Number of Matches
        Specify Exact Number of Matches
        Check for All or None
        Positive and Negative Lookahead
        Reuse Patterns Using Capture Groups
        Use Capture Groups to Search and Replace
        Remove Whitespace from Start and End

        Вторая часть
        Sum All Numbers in a Range
        Diff Two Arrays
        Seek and Destroy
        Wherefore art thou
        Spinal Tap Case
        Pig Latin
        Search and Replace
        DNA Pairing
        Missing letters
        Sorted Union
        Convert HTML Entities
        Sum All Odd Fibonacci Numbers
        Sum All Primes
        Smallest Common Multiple
        Drop it
        Steamroller
        Binary Agents
        Everything Be True
        Arguments Optional
        Make a Person
        Map the Debris


        1. haughty-grumbler Автор
          11.06.2019 14:32

          Да, согласна. Программа там очень круто продумана. Если еще совмещать с javascript.info и курсами от Wes Bos, то результат будет.


          1. Paxest
            11.06.2019 18:08

            я пользуюсь developer.mozilla.org/ru/docs/Web/JavaScript как справкой, а за Wes Bos спасибо, посмотрю


          1. ruslani
            12.06.2019 09:21

            Вы учились у Веса? Как его курсы? Очень хорошие отзывы о них слышал.


            1. haughty-grumbler Автор
              12.06.2019 21:18

              JavaScript30 показался интересным. Плюс он бесплатный. Еще у него курс ES6 for everyone неплохой. Он говорит исключительно о новых возможностях стандарта ES-2015. Говорит коротко и по делу, как мне показалось. Это редкость среди видеокурсов.


  1. hisbvdis
    12.06.2019 07:03

    Про интерактивные курсы HTML Academy (не интенсивы)
    Я с дуру оплатил год подписки на интерактивные курсы, так как думал, что вот здесь меня научат вёрстке по макету в дополнение к той теории, которую я уже знаю. Но меня учили нажимать Ctrl+C и Ctrl+V.

    К каждой теме гордо красуется надпись «100500 заданий».
    Беда в том, что это не задачи в чистом виде, где пользователю нужно самостоятельно решить проблему на основе изученной теории, это «задачи» в форме «копипаста».
    Приблизительный пример «задания» из интерактивного курса HTML Academy:
    — вставьте этот класс ".container" в 14 строку в HTML-коде
    — сделайте текст тега p цвета #fff
    А перед этим Вам на полстраницы расскажут очень «интересную» историю про то, как кот Кексик до ночи сидел за работой и испортил CSS-код.

    Отказались сделать возврат денег на следующий день после оплаты подписки.
    С юридической точки зрения претензий нет. В условиях прописано, что они никому ничего не должны. Но с точки зрения компании, которая должна быть уверена в качестве предоставляемых услуг — остаётся впечатление о каком-то кидалове. Даже в Типичном верстальщике сделали возврат за купленный, но еще не начатый курс без вопросов.

    Лично у меня остались более положительные впечатления и лучшие навыки от прохождения примитивных курсов на webref.ru, а потом повторения и расширения теории html5book.ru, где есть много реальных задачек и реальной практики с элементами сайта от кнопок до форм и примитивного оформления статей.
    А не детский бред про кота Кексика.

    Выводы касательно интерактивных курсов HTML Academy
    Ни в коем случае не платите деньги за интерактивные курсы HTML Academy
    Не знаете английский?
    Идите на webref.ru и html5book.ru и учитесь по-настоящему и бесплатно.
    А если хочется детскую сказку про кота кексика — зайдите в детский раздел книжного магазина, дешевле обойдется.

    P.S. А я пошел проходить бред про Кексика, так как за оплаченные 3000 рублей я из принципа сделаю все курсы зеленого цвета (пройденными) и попытаюсь выудить оттуда хоть что-то новое и полезное, хоть это и практически пустая трата времени.


    1. haughty-grumbler Автор
      12.06.2019 21:24

      Да, Ваша правда. В принципе, эта методика Ctrl+C/Ctrl+V применяется на всех представленных площадках. НО на FCC с вас хотя бы не берут денег. Неплохо, чтобы подучить синтаксис. Да и все они, конечно же, подходят, как дополнение. Лучше всего — попробовать сверстать шаблон самостоятельно.


      1. Paxest
        13.06.2019 10:32

        для тех кто не знаком c fcc, немного потоплю за него)) Всё таки ctrl+c/ctrl+v не работает, потому что все примеры заданий на диплом имеют скрытые файлы, с наличием которых пример и работает, и просто взять и скопировать, перебить названия переменных да поменять цвета — не получится(я пытался))) можно подглядеть отдельные команды и потом искать их в справке, но это всё, чем полезен пример. Да даже обычные задания не решаются простым копированием потому что условия выполнения заданий отличаются от примеров, + надо иногда писать код из предыдущего задания.