С чего начать изучать веб-разработку в 2019 году или HTML Academy VS Codecademy VS FreeCodeCamp

    Привет, Хабр! Хочу поделиться своими мыслями о самых популярных площадках для изучения веб-разработки 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. У этой площадки огромное комьюнити, где вы можете найти помощь и почитать интересные статьи. Ну и что самое важное для многих начинающих – это совершенно бесплатно. Однако было бы здорово вознаградить создателей за их проект, если благодаря их труду вы сможете найти достойную работу.

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

    Ваш выбор:

    Поделиться публикацией

    Комментарии 35

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

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

          0
          Мне все таки кажется, что адресовано было не вам, а тем, кто хочет уметь программировать и при этом не знают/понимают английского языка. Если конечно это не 1С разработка.
            +1
            Вы это мне? Кажется, я написала, что английский знаю) я вообще учитель английского по образованию. Так что ваш совет неуместен)

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

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

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

            а) крупные имена, которые сидят на этих технологиях и имеют людей, которым есть, что сказать, и они имеют соответствующие курсы, к примеру 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/
              0
              Вы знаете, я стараюсь не спорить в комментариях с людьми, которых не знаю и которые явно хотят спровоцировать на конфликты. Вы можете отточить свое остроумие (ну или что вы там оттачиваете) в другом месте.

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

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

              –1
              А зачем в 21 веке учить английский? И по поводу статьи именно по поводу HTML (практически не надо никакого окружения настраивать, что для новичка самое сложное) просто книгу стоимостью 500-1000р купить вообще не судьба?
                0
                Книги отстают очень сильно чаще всего. Я за онлайн образование в этом случае. Про английский комментарий очень странный. Учить его обязательно нужно. Тем более в 21 веке.
                  0
                  Простите в чем отстают? В HTML для начинающих, cерьезно? А видеокурсы не отстают, что правда серьезно? И еще один странный вопрос, как вы думаете, сколько лет осталось до «вавилонской рыбки»?
                    –1
                    Читайте книги. Вам никто не запрещает.
                      –1
                      А еще мне никто не запретит рекомендовать книги вместо курсов, потому что «книга лучше». Та что там насчет «вавилонской рыбки»? Долго еще ждать или это всего лишь мечты?
              0
              Полностью согласен с выбором. FCC опережает даже многие платные курсы как в плане объема, так и в плане продуманности и последовательности плана обучения.
              Рекомендую вам пройти и JS, и вот здесь вам (нам) повезло, так как есть фантастический курс лекций по JS/Node от КПИ. Для вас может быть и не так актуально, раз знаете английский, но тем не менее курс классный, тем более в отличии от скажем так чисто прикладной направленности в FCC, дает более глубокое, фундаментальное представление о данном языке.
                0
                Да, JS я изучаю по разным англоязычным ресурсам. Как и все остальное собственно.
                  0
                  Спасибо огромное за ссылку!
                  0
                  У HtmlAcademy в новогодние праздники частенько делают платные уроки бесплатными, в один из таких периодов удалось пройти у них платные курсы, достаточно обширный функционал, проблем с пониманием задач не припомню, но некоторые задания и правда слишком долго топчутся на одном месте, не очень сбалансированно. Смысла проходить только бесплатные задания не вижу, ресурс определенно точно ориентирован на платные услуги, и тем, кто не хочет платить, не стоит тратить свое время.
                    +1
                    Как альтернатива, из самостоятельного изучения есть ещё онлайн учебник от w3schools. Сам изучал на нём фронт, для начинающих как база — вообще замечательно.
                      0
                      Вот добавьте к html и css еще JS и можно считать что это «начало веб-разработки».
                        0
                        Прошел Html-academy целиком, никаких проблем с котиками не испытывал, про флексы и гриды там тоже есть. Понравилось, что дают пояснения по верстке и дизайну, но вообще я бы сказал, что это больше курс про css, чем про что либо еще.

                        image

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

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

                            0

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

                            0

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

                              0
                              Интересно. Я нашла работу раньше, чем закончила все курсы и проекты на FreeCodeCamp, но много раз слышала, что с этими проектами даже на собеседовании показаться не стыдно. Считаете, стоит его добить? Да, нет ничего идеального, но для бесплатной площадки этот ресурс определенно хорош.
                                0
                                Не нашел ссылки на тот портал, но моё мнение совпадает с увиденным — 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

                                В каждом блоке, при условии, что он проходится самостоятельно, каждый проект развивает и углубляет полученные знания из предыдущих блоков. В начале июня я просматривал некоторые задачи, которые подписаны как middle-уровень, и для меня они уже не являются сложными. Так что у меня нет ни единой причины не советовать вам прохождение оставшихся блоков на fcc.
                                  0
                                  Да, согласна. Программа там очень круто продумана. Если еще совмещать с javascript.info и курсами от Wes Bos, то результат будет.
                                    0
                                    я пользуюсь developer.mozilla.org/ru/docs/Web/JavaScript как справкой, а за Wes Bos спасибо, посмотрю
                                      0
                                      Вы учились у Веса? Как его курсы? Очень хорошие отзывы о них слышал.
                                        0
                                        JavaScript30 показался интересным. Плюс он бесплатный. Еще у него курс ES6 for everyone неплохой. Он говорит исключительно о новых возможностях стандарта ES-2015. Говорит коротко и по делу, как мне показалось. Это редкость среди видеокурсов.
                                +1
                                Про интерактивные курсы 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 рублей я из принципа сделаю все курсы зеленого цвета (пройденными) и попытаюсь выудить оттуда хоть что-то новое и полезное, хоть это и практически пустая трата времени.
                                  0
                                  Да, Ваша правда. В принципе, эта методика Ctrl+C/Ctrl+V применяется на всех представленных площадках. НО на FCC с вас хотя бы не берут денег. Неплохо, чтобы подучить синтаксис. Да и все они, конечно же, подходят, как дополнение. Лучше всего — попробовать сверстать шаблон самостоятельно.
                                    0
                                    для тех кто не знаком c fcc, немного потоплю за него)) Всё таки ctrl+c/ctrl+v не работает, потому что все примеры заданий на диплом имеют скрытые файлы, с наличием которых пример и работает, и просто взять и скопировать, перебить названия переменных да поменять цвета — не получится(я пытался))) можно подглядеть отдельные команды и потом искать их в справке, но это всё, чем полезен пример. Да даже обычные задания не решаются простым копированием потому что условия выполнения заданий отличаются от примеров, + надо иногда писать код из предыдущего задания.
                                  +1
                                  Исправьте что не что
                                  Codecademy является прототипом HTML-academy
                                  , а наоборот
                                    0
                                    А что не так? Прототип — «Первоначальный образец, прообраз». Дата основания Codecademy — 2011 (информация из Википедии). Дата регистрации HTML Academy: 23.08.2013 (с официального сайта). Я полагаю, понятно, чья идея была первоначальной.
                                    0
                                    Я свои первоначальные навыки верстки приобрел именно по курсам (платным и бесплатным, и интенсивы проходил) в HTML Academy. И вот, что скажу:

                                    — Да, ctrl+c/ctrl+v работает — по факту, большинство заданий служат для «запоминания» кода, чтобы человек сам писал код, его руки и мозг по-тихоньку запоминал данные. Я пробовал сам писать, потом пробовал копипаст — в первом случае что-то остается в памяти, а во втором нет.
                                    — Финальные испытания в интерактивных курсах зачастую дадут прикурить даже опытному верстаку, а уж начинающему и подавно. Разжевывается зачастую каждая тема очень тщательно — это отчасти минус, так как такой объем знаний невозможно эффективно закрепить на практике. Интерактивные курсы охватывает, наверное, всю базу по HTML\CSS и плюс понимание работы JS. Но проходить их стоит вместе с интенсивами, так как во время интенсивов дают бесплатный доступ к платным интерактивным курсам.
                                    — Интенсивы рассчитаны на новичков и тех, кому сложно самостоятельно выделить время и взяться за изучение соответствующих тем. Да, рассказывают основы, сами проекты довольно простые — но Вы закрепляете полученные базовые знания на практике и приходит понимание того, как всё работает и что нужно делать.

                                    FCC — хорош, но для тех, кто уже в теме и начал свой путь. Я, хоть и жлоб, и вечно ноющий критик, советую HTML Academy для совсем зеленых новичков.
                                      0
                                      Да, интенсивы я не проходила, судить не могу. Сравнивала только бесплатные опции. Это было решающим условием. Поэтому почему бы и нет, если есть возможности.

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

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