*Данный обзор является моим субъективным видением и не претендует на истину в первой инстанции.
Немного предыстории. Я начала изучать основы HTML и CSS в декабре 2018 года с нуля и понятия не имела, с чего же собственно начать. Говоря “с нуля” я не преувеличиваю. У меня не было никакого опыта в программировании. Совсем. Как быть человеку, не имеющего представления о том, где найти материал для изучения? Пойти на курсы, скажете вы. Возможно, будете правы. Но давайте посмотрим правде в глаза. Большинство курсов, особенно на русском языке, не дают никакой информации, которую нельзя найти в интернете самостоятельно. Да и к тому же, они не дают никаких гарантий. А без гарантий и самому можно погуглить. Что я и сделала. Главным критерием для меня была бесплатность (ну или частичная бесплатность) ресурса. Я просмотрела тонны информации в интернете, прочитала километры постов разных авторов об их мега-успешном опыте и, как результат, запуталась в этом всем еще больше. Однако практически все ресурсы на русском языке сходились в одном – изучать основы синтаксиса нужно на HTML-академии. С этого я и начала.
*Пожалуйста, обратите внимание, что в этом разборе я не затрагиваю тему изучения JavaScript.
HTML Academy
Оригинал изображения
Главное и единственное (ин май хамбл опиньон) преимущество данного ресурса – это то, что он на русском языке. Все. На этом можно закончить.
Но раз уж я претендую на обзор, то вот краткое резюме бесплатных возможностей на HTML-академии:
- Вы получаете доступ к главам до темы HTML5 и просто неоправданно много заданий на знание таблиц (я извиняюсь, кому нужно столько заданий с таблицами в 2019-м году?);
- Вы получаете доступ к главам по основным селекторам и базовым особенностям CSS (за продвинутые селекторы наподобие :nth-last-of-type или :only-child придется заплатить отдельно);
- Кто-нибудь видел задания по flex-box или grid? Так вот, этого вы там не найдете. Либо они где-то глубоко в чертогах платной подписки;
- Ну и еще несколько бесплатных заданий по SVG и LESS.
Отдельного внимания заслуживает язык, которым написана история про кота Кекса, с которым вы будете сталкиваться на протяжении всего обучения. Когда я в отчаянии билась над очередным заданием с воплями: “Я тупая. Я не понимаю, о чем тут речь”, моя подруга говорила: “Ты не тупая. Это у них копирайтеры отвратительные” (стоит тут отметить, что моя подруга – журналист по образованию и долго проработала копирайтером. Полагаю, к ней стоит прислушаться).
Действительно, эти истории с кексами и прочими котиками безусловно прекрасна, но она отвлекает от основной задачи, не говоря уже о том, что задания сформулированы откровенно плохо. Технических писателей из них точно не выйдет. В итоге, хватило меня не надолго. Я бросила это неблагодарное дело и решила пользоваться англоязычными ресурсами.
Codecademy
Оригинал изображения
К этому ресурсу я приступила после того, как устала от кексов на предыдущей площадке. Следует отметить, что Codecademy является прототипом HTML-academy, что можно судить по датам основания (2011 у Codecademy и 2013 у HTML-academy). Ну и вы все прекрасно знаете, что всегда лучше использовать иностранный оригинал, чем его отечественный аналог.
Итак, что вы получите от бесплатной подписки:
- Более приятный дизайн (мое субъективное мнение);
- Основы HTML5, таблицы, формы;
- Основы CSS: селекторы, блочную модель, цвета, типографику, а также основы Grid;
- Бесплатные задания по основным принципам создания веб-сайта, размещению его на GitHub, обучалка по адаптивному дизайну и основы Sass.
Никакой истории про котиков, но на протяжении нескольких уроков вы будете учиться на примере создания одной-двух страничек.
FreeCodeCamp
Оригинал изображения
Как видно из названия, эта площадка является бесплатной. И это действительно так. Да, вы не увидите здесь модных виджетов (дизайн тут действительно скромный), но взамен получите программу, которая будет вести вас по продуманному плану до момента, когда вам придется применить ваши знания на практике в реальных заданиях.
Если вам не докучают не особо надоедливые всплывающие окна с предложением пожертвовать какую-нибудь сумму денег на развитие проекта, то вы получите:
- Основы HTML5;
- Основы CSS;
- Основы визуального дизайна;
- Принципы адаптивного дизайна;
- Упражнения по Flexbox и Grid;
- 5 итоговых проектов, по результатам которых вы получите сертификат.
Не могу сказать, что наличие сертификата является преимуществом, потому что сам создатель этой площадки Quincy Larson признал, что большинство студентов не проходят все задания, поскольку находят работу раньше. Но весомым плюсом в пользу этого ресурса для меня стала ее детальная и продуманная программа (определенно сказывается тот факт, что основатель FreeCodeCamp еще и педагог).
Итог
Для тех, кто не знает английского языка хотя бы на уровне понимания написанного выбор достаточно ограничен, и, к сожалению, российские площадки не являются лучшим выбором, поскольку преследуют исключительно сиюминутную выгоду. Для меня же выбор очевиден – и это FreeCodeCamp. У этой площадки огромное комьюнити, где вы можете найти помощь и почитать интересные статьи. Ну и что самое важное для многих начинающих – это совершенно бесплатно. Однако было бы здорово вознаградить создателей за их проект, если благодаря их труду вы сможете найти достойную работу.
Комментарии (31)
ruslani
10.06.2019 08:06Полностью согласен с выбором. FCC опережает даже многие платные курсы как в плане объема, так и в плане продуманности и последовательности плана обучения.
Рекомендую вам пройти и JS, и вот здесь вам (нам) повезло, так как есть фантастический курс лекций по JS/Node от КПИ. Для вас может быть и не так актуально, раз знаете английский, но тем не менее курс классный, тем более в отличии от скажем так чисто прикладной направленности в FCC, дает более глубокое, фундаментальное представление о данном языке.haughty-grumbler Автор
10.06.2019 08:09Да, JS я изучаю по разным англоязычным ресурсам. Как и все остальное собственно.
Avitale
10.06.2019 11:18У HtmlAcademy в новогодние праздники частенько делают платные уроки бесплатными, в один из таких периодов удалось пройти у них платные курсы, достаточно обширный функционал, проблем с пониманием задач не припомню, но некоторые задания и правда слишком долго топчутся на одном месте, не очень сбалансированно. Смысла проходить только бесплатные задания не вижу, ресурс определенно точно ориентирован на платные услуги, и тем, кто не хочет платить, не стоит тратить свое время.
Snelsi
11.06.2019 10:43+1Как альтернатива, из самостоятельного изучения есть ещё онлайн учебник от w3schools. Сам изучал на нём фронт, для начинающих как база — вообще замечательно.
xkondorx
11.06.2019 10:43Вот добавьте к html и css еще JS и можно считать что это «начало веб-разработки».
lekzar
11.06.2019 10:44Прошел Html-academy целиком, никаких проблем с котиками не испытывал, про флексы и гриды там тоже есть. Понравилось, что дают пояснения по верстке и дизайну, но вообще я бы сказал, что это больше курс про css, чем про что либо еще.
С английским языком у меня проблем нет, но, имхо, начинать обучаться лучше на своем языке, чтобы не отвлекаться и не тратить ресурс на перевод в голове, благо сейчас хватает курсов на русском языке, на том же udemy к примеруhaughty-grumbler Автор
11.06.2019 10:49И все-таки они существуют. Весь смысл, как я и указала в публикации, был научиться бесплатно, а эти уровни как раз и находятся, цитирую, «в чертогах платной подписки». А так да, Вы правы, проще начинать на родном языке обучаться.
SelenIT3
11.06.2019 12:01кому нужно столько заданий с таблицами в 2019-м году?
Предположу, что всем, кто делает всевозможные Data Grids и прочие доступные интерфейсы с табличными данными. Чтобы не подпирать костылями то, что давно есть в HTML "из коробки" и надежно работает во всех браузерах (если специально не ломать:).
haughty-grumbler Автор
11.06.2019 12:28Опять же повторюсь. Я пишу о том, с чего начать изучение HTML. Я не даю советов о том, кому и чем стоит пользоваться в работе. Это всего лишь обзор разных площадок и заданий (подчеркиваю), которые предлагаются в бесплатной подписке. Если человеку нужны будут глубокие знания таблиц, он сможет вернуться к этой теме позже.
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 таких затруднений не возникает..
haughty-grumbler Автор
11.06.2019 12:36Интересно. Я нашла работу раньше, чем закончила все курсы и проекты на FreeCodeCamp, но много раз слышала, что с этими проектами даже на собеседовании показаться не стыдно. Считаете, стоит его добить? Да, нет ничего идеального, но для бесплатной площадки этот ресурс определенно хорош.
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 Debrishaughty-grumbler Автор
11.06.2019 14:32Да, согласна. Программа там очень круто продумана. Если еще совмещать с javascript.info и курсами от Wes Bos, то результат будет.
Paxest
11.06.2019 18:08я пользуюсь developer.mozilla.org/ru/docs/Web/JavaScript как справкой, а за Wes Bos спасибо, посмотрю
ruslani
12.06.2019 09:21Вы учились у Веса? Как его курсы? Очень хорошие отзывы о них слышал.
haughty-grumbler Автор
12.06.2019 21:18JavaScript30 показался интересным. Плюс он бесплатный. Еще у него курс ES6 for everyone неплохой. Он говорит исключительно о новых возможностях стандарта ES-2015. Говорит коротко и по делу, как мне показалось. Это редкость среди видеокурсов.
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 рублей я из принципа сделаю все курсы зеленого цвета (пройденными) и попытаюсь выудить оттуда хоть что-то новое и полезное, хоть это и практически пустая трата времени.haughty-grumbler Автор
12.06.2019 21:24Да, Ваша правда. В принципе, эта методика Ctrl+C/Ctrl+V применяется на всех представленных площадках. НО на FCC с вас хотя бы не берут денег. Неплохо, чтобы подучить синтаксис. Да и все они, конечно же, подходят, как дополнение. Лучше всего — попробовать сверстать шаблон самостоятельно.
Paxest
13.06.2019 10:32для тех кто не знаком c fcc, немного потоплю за него)) Всё таки ctrl+c/ctrl+v не работает, потому что все примеры заданий на диплом имеют скрытые файлы, с наличием которых пример и работает, и просто взять и скопировать, перебить названия переменных да поменять цвета — не получится(я пытался))) можно подглядеть отдельные команды и потом искать их в справке, но это всё, чем полезен пример. Да даже обычные задания не решаются простым копированием потому что условия выполнения заданий отличаются от примеров, + надо иногда писать код из предыдущего задания.
crustal
Если вам лень подучить английский (в школе ведь изучали), то может и нет смысла вообще заниматься всем этим?
haughty-grumbler Автор
Вы это мне? Кажется, я написала, что английский знаю) я вообще учитель английского по образованию. Так что ваш совет неуместен)
MaximIs
Мне все таки кажется, что адресовано было не вам, а тем, кто хочет уметь программировать и при этом не знают/понимают английского языка. Если конечно это не 1С разработка.
crustal
Так, английский знаете, гуглить умеете, хотите осчастливить сообщество умными соображениями, как стартовать в веб-программировании. Проблема Хабра, на мой взгляд в том, что это все-таки место для публикаций статей, а не место для публикаций и вопросов.
Как бы нормально было бы вначале запостить вопрос типа — Пацаны, я — вообще-то учитель, но несколько месяцев назад решила перекинуться в веб-программирование. Нашла тут за углом несколько контор, которые вроде как учат этому делу, кое в чем у них преуспела. Давайти я забацаю солидную статью про мой опыт с этими конторками из ближайшей подворотни. Кому-то интересно?
Рискну предположить, что скажут — не интересно, а интересно, раз английский знаете, гуглить умеете, чтобы поизучали, как вообще в мире происходит это благородное дело — обучение технологиям. К примеру, очевидно, что есть в мире
а) крупные имена, которые сидят на этих технологиях и имеют людей, которым есть, что сказать, и они имеют соответствующие курсы, к примеру 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/
haughty-grumbler Автор
Вы знаете, я стараюсь не спорить в комментариях с людьми, которых не знаю и которые явно хотят спровоцировать на конфликты. Вы можете отточить свое остроумие (ну или что вы там оттачиваете) в другом месте.
P.S. Тем более с хамами.
haughty-grumbler Автор
И уж тем более неуместны ваши советы о том, кому и чем стоит заниматься)
vav180480
А зачем в 21 веке учить английский? И по поводу статьи именно по поводу HTML (практически не надо никакого окружения настраивать, что для новичка самое сложное) просто книгу стоимостью 500-1000р купить вообще не судьба?
haughty-grumbler Автор
Книги отстают очень сильно чаще всего. Я за онлайн образование в этом случае. Про английский комментарий очень странный. Учить его обязательно нужно. Тем более в 21 веке.
vav180480
Простите в чем отстают? В HTML для начинающих, cерьезно? А видеокурсы не отстают, что правда серьезно? И еще один странный вопрос, как вы думаете, сколько лет осталось до «вавилонской рыбки»?
haughty-grumbler Автор
Читайте книги. Вам никто не запрещает.
vav180480
А еще мне никто не запретит рекомендовать книги вместо курсов, потому что «книга лучше». Та что там насчет «вавилонской рыбки»? Долго еще ждать или это всего лишь мечты?