Эксперимент: эсэмэмщик Пикабу учится кодить на HTML, CSS и JavaScript
В интернете полно онлайн-курсов, но понять, как там изнутри и какие практические задания — сложно. Яндекс.Практикум сделал иначе. Каждая специальность (а их уже 11) предусматривает бесплатный вводный курс. Чему можно реально научиться за две недели и насколько человеку без опыта по силам программирование — рассказывает пикабушница и SMM-менеджер Пикабу Ксения.
«Привет, меня зовут Ксения, мне 34 года, и я веб-разработчик». Хотела бы я так написать… Но на самом деле я профессиональный журналист, а теперь и эсэмэмщик. Около семи лет я работала в различных СМИ (газета, радио) и пресс-службах, но неосознанно меня тянуло в интернет. Так я сначала оказалась на новостном сайте, а потом в Пикабу, где последний год веду тематические паблики ВКонтакте.
В моей профессии популярен метод написания статей — «Журналист меняет профессию». Никогда не пользовалась им, но всегда хотела. И вот на Пикабу появилась возможность попробовать веб-разработку с помощью вводного курса от Яндекс.Практикума. Меня всегда интересовала «начинка» веб-сайтов, вот это все, что заставляет кнопки нажиматься, картинки меняться и так далее. Природная любознательность не раз заставляла меня гуглить всякий код из HTML и CSS. Но одно дело теория, а совсем другое — практика.
Вводный курс по веб-разработке от Яндекс.Практикума дает азы профессии. Вы знакомитесь с правилами HTML-разметки и учитесь работать со стилями: управлять цветом, шрифтами, расположением блоков. На примере двух проектов вы освоите базовый синтаксис HTML и CSS и поймете, что из себя представляет JavaScript. Полученный опыт программирования поможет решить, точно ли вы хотите этим заниматься и насколько готовы осилить целый курс.
Так выглядит программа вводного курса
Именно из практики состоит обучение. В бесплатной части курса семь тем, в которых 70 коротких и достаточно простых уроков, и лишь малая часть из них — теория. С первого урока оттачиваешь навыки в специальном онлайн-тренажере. И это очень круто: не надо тратить время на нудную зубрежку. На вводный курс я взяла две недели. Планировала проходить по пять-шесть уроков в день, но когда у нас получается все так, как мы задумали? Были дни, когда из-за большого загруза на работе (в Пикабу!) даже не открывала курс. А бывало, что проводила в тренажере все выходные. Написав маленький кусочек кода, тут же хочется написать еще. Хе-хе. Можно и сильно за полночь засидеться. Хотя по моим представлениям веб-разработчики как-то так и работают: с бездонной кружкой кофе и красными глазами кодят в ночи...
Первый день. Первая тема. «Первый код»
Тема так и называется. В ней шесть уроков, результатом которых стала черная кнопка. Ну, вообще-то, сначала она была оранжевой и ничего не делала, а моей задачей было заставить ее функционировать. Перед этим надо было разобраться, что за звери такие — HTML, CSS и JavaScript, и что они делают. По большому счету первый создает некий объект (в нашем случае ту самую кнопку), второй говорит, как он должен выглядеть, а третий заставляет ее действовать. Ничего сложного, правда? На это у меня ушло часа три. Или пять. Но в результате кнопка все-таки стала менять цвет с черной на белую при нажатии и наоборот. Ни разу не магия, хотя выглядит именно так по мнению любого человека не из IT.
Тренажер простой и понятный, в нем есть блок с кодом, задание и окно вывода, где можно видеть, что у тебя получается. Можно сколько угодно ошибаться, пробуя разные варианты, пока не получится как надо или сразу воспользоваться подсказкой.
В конце темы можно немножко поиграть. Например, нарисовать букву «P» сердечками. Вы же догадались, что это про Pikabu ;)
Три дня спустя. Вторая тема. «Что такое HTML и CSS»
Теперь кажется, что кнопка — ерунда. Новый челлендж: за 20 уроков нужно с нуля создать обложку плей-листов для гипотетического музыкального сервиса. Заголовки, абзацы, ссылки, атрибуты, родительские и дочерние теги, стили, связь CSS и HTML, блоки, отступы — это просто набор слов, который на деле описывает, как в итоге выглядит некий элемент на сайте. Да в общем-то любой элемент на любом сайте (например, кнопка «Добавить пост» на Пикабу) состоит из вот этого всего. Эти штуки задают элементу размеры, цвет, шрифт, отступы и так далее. При ближайшем рассмотрении все оказалось проще, чем я думала, однако процесс осознания занял целый выходной.
Зачем мне делать обложку для случайного человека, когда я могу сделать ее для коммандера Шепарда! Ну если бы он собирал себе плей-лист... И цвет обложки можно поменять на оттенок красного из игры. А уж в игровой песочнице после темы я смогла дать волю фантазии — тут и картинка с логотипом N7, и градиент, и год войны со Жнецами. Короче, полноценная обложка для Шепа!
Едем дальше. Третья тема. «Базовые CSS-свойства»
Задание в этой теме — за 11 уроков создать лендинг (целевая веб-страница) для поиска верстальщиков, который бы показал базу дизайна. Вот такой.
Сделать его в фотошопе — пара пустяков, были бы исходные картинки, но тогда она будет абсолютно неизменной. А если открыть на очень большом экране? А на смартфоне? Вот-вот. В этом и разница.
Мои крошечные знания CSS почти закончились, а сложных штук здесь уже больше: размеры элементов в пикселях, процентах и долях, цветовые коды в HTML, опять разнообразные отступы, прозрачность элементов и наследование параметров дочерним элементом от родительского — это называют «Коробка в коробке». Еще нужно быть очень внимательным: забыла поставить в конце элемента точку с запятой, и все, задание сделано неправильно. Итогом работы над темой стал входной экран лендинга.
Сразу приступаю к четвертой теме — «Больше CSS»
Эти 18 уроков даются еще сложнее, чем предыдущие, хотя большая часть языка разметки мне уже известна. Дорабатываю лендинг: блоки, тени, картинки, отступы там и здесь, классы, атрибуты, типографика — иногда все смешивается в голове в одну кучу. В уроке, посвященном фокусу элементов, я просто не могу понять, что сделала. Тренажер утверждает, что все правильно — приходится вернуться к предыдущему заданию и посмотреть подсказку. Оказалось, что я просто выполнила сразу два задания: и селектор поставила, и фокус переместила. Вывод — не надо торопиться!
Яндекс.Практикум учит не бояться ошибок. Наказывать и ругать никто не будет, а вот приободрить и похвалить — запросто. Если вдруг вы застрянете на каком-то задании, на помощь придет поддержка Практикума. Можно написать в любом мессенджере и получить ответ — не от робота, а от живых людей!
На мой взгляд, структура сайта отличается от структуры газетной полосы только кучей английских словечек, а так все те же шапки, подвалы, блоки... Возможно, поэтому сборка лендинга хоть и занимает больше стандартного рабочего дня, не вызывает особых проблем. И страница сверстана, и с CSS я обращаюсь уже достаточно уверенно. Можно поставить свою подпись в подвале и предвкушать самое страшное…
Нужно больше времени... Пятая тема. «JavaScript. Начало»
Если HTML и CSS — это, по сути, описательные языки, с которыми справится кто угодно, то JavaScript — сплошная математика и формулы. Когда всю жизнь занимаешься исключительно текстами, учиться думать математически сложно. Хоть и интересно. Задания с каждым разом сложнее, новой информации больше, поэтому на урок по джаваскрипту я отвожу два выходных дня. И правильно делаю: совмещать изучение этой темы с работой у меня не выходит.
Первое, что я сделала, — создала всплывающее окно. Брр! Всех они бесят, да? Даже название у этого правила говорящее — «alert». Дальше больше: чем отличаются строки от чисел, как вывести информацию в консоль, что такое переменные и как присваивать им новые значения. К концу темы я вывожу в консоль сообщения для пассажира такси о том, сколько времени осталось до конца его поездки.
Жаль, правда, что задание в уроках про JavaScript никак не связано с уроками по HTML и CSS. Если последовательно делать один проект, то запоминалось бы лучше.
Делаю ту самую обложку для Шепа (Печенька и котик за кадром – помогают)
Следующий день. Шестая тема. «JavaScript. Приземление в реальность»
Мне надо создать что-то вроде приложения для прокрастинации, которое будет подкидывать идеи, чем заняться лишь бы не работать. Допустим, «разобраться, о чем поют рэперы», «отправить другу смешную гифку» и так далее. На это дается 18 уроков, и вот тут начинаются все ужасы программирования: массивы, функции, аргументы, условия, булевы величины. Сплошная математика, в общем.
Даже развлечься толком не удалось: хотела добавить в список отмазок «гладить котика», «считать опавшие листья», «составлять топ смешных названий товаров Алиэкспресс», «учить клингонский язык», но не вышло. Никакого самоуправства! А ведь было бы гораздо интереснее придумывать свои переменные.
Так выглядит интерфейс уроков. Сообщение в красной рамке говорит, что я сделала что-то неправильно.
Кое-где приходилось гуглить названия терминов, иначе совсем не понятно. Например, почему массив назвали словом «arr»? Однозначно мне нужен словарь. Еще стали слегка напрягать шуточки после каждого правильно выполненного задания. Лучше бы там были повторные объяснения, почему важно сделать так и не иначе. До этого момента подсказками я почти не пользовалась, а тут без них никак. Местами они были или слишком очевидны (Вставьте let randomElement = getRandomElement(phrases); в такое-то место), или чуть ли не зашифрованы. А еще пару дней плохо загружалась страница с заданиями, хотя с интернетом все было нормально. Яндекс.Практикум, не болей!
Конец. «Как устроено платное обучение»
Именно об этом рассказывает последняя тема вводной части. Ребята обещают все то, чего мне так не хватало в демоверсии: сначала изучение тем в тренажере, потом самостоятельную практику с отработкой пройденного в редакторе кода на своем компьютере и проверку студенческих проектов командой спецов. Прямо как в универе: лекции, вебинары, общение с сокурсниками в Slack, дедлайны, возможность дважды взять академ на месяц, дипломная работа.
В Яндекс.Практикуме не обещают научить абсолютно всему и не гарантируют, что все поймут с первого захода. И справедливо замечают, что человека нельзя научить, он может только научиться. А вот дать инструменты для дальнейшей работы (с которыми познакомили в начале курса), показать отправную точку и, главное, научить самостоятельно находить ответы на поставленную задачу — как раз обещают.
Две недели — все-таки короткий срок для такого насыщенного курса, особенно когда совмещаешь учебу с фулл-тайм работой. Не пытайтесь повторить и не торопитесь! Я, конечно же, не научилась полноценно кодить. Но мне стало гораздо понятнее, как в целом устроен код. Теперь я точно знаю, где и что мне искать в разделе «посмотреть исходный код» в браузере. Новые знания тоже пригодятся: я давно админю одну из крупных Wiki-энциклопедий, и делать какие-нибудь шаблоны будет легче. Возможно, если удастся найти свободное время, я попробую изучить веб-разработку глубже. Это действительно очень интересно!
Полный курс по веб-разработке займет 10 месяцев. За это время (в среднем по 15 часов занятий в неделю) вы освоите востребованные навыки веб-разработки и соберете портфолио проектов. С такими знаниями можно смело пробовать себя в новой специальности и поискать работу junior-специалистом. Кстати, с трудоустройством Практикум тоже помогает: вам подскажут, как лучше составить резюме, откликнуться на вакансии и потренироваться в прохождении интервью.