Сегодня разбираем бесплатную часть курса Практикума по фронтенду для новичков: смотрим и на то, чему там учат, и как это делают. Разбор большой, картинок много — будет что поразглядывать.
Короткая версия
Бесплатная часть — реально бесплатная. Платить не нужно, берёшь и учишься в любое время.
Можно начать совсем с нуля. Даже если вы до этого ни разу не открывали редактор кода и не разбирались в ИТ и программировании, всё будет понятно. Если уже есть опыт — будет проще и тоже понятно (хотя что-то новое для себя вы точно встретите, даже если уже умеете во фронтенд).
Практики — много. Нет, не так: практики — МНОГО. Её столько, что иногда думаешь: а может, лучше было бы сократить, — но это обманчивое впечатление. Можно сколько угодно читать теорию, но без практики ничего не получится. Всё делается в тренажёрах, есть подсказки, есть теория, всегда можно почитать материал и вернуться к коду.
На выходе вы узнаете и поймёте про фронтенд столько, как будто прошли полный курс. На самом деле во фронте много всяких нюансов, но без базы, которая даётся в бесплатной части, ничего не получится.
Если хотите полноценно начать разбираться в HTML, CSS и JavaScript, бесплатную часть точно стоит пройти.
Тезисно вроде всё, можно двигаться дальше.
Как будем разбирать курс
Мы не будем рассказывать про каждый урок: там 7 тем, в каждой теме до 20 уроков, а в каждом уроке несколько заданий, и если разбирать прям всё — получится то же самое, что в Практикуме, только в несколько раз больше.
Вместо этого мы сосредоточимся на том, что там дают, как объясняют и как вообще происходит обучение в тренажёрах. Заодно посмотрим, какие приёмы ребята используют, чтобы материал воспринимался проще.
Начало
Всё, что нам нужно для старта, — зайти в свою учётку Яндекса и перейти в бесплатную часть курса.
Перед тем как началось обучение, нам рассказывают, что будет на уроках, как они проходят, и разбирают все вопросы, которые возникают у учеников. Программирования тут нет, это нужно для того, чтобы все понимали, что будет дальше, какие перспективы и чем вообще занимаются фронтенд-разработчики.
В конце первого урока предлагается выбрать цель, которую мы перед собой ставим перед началом обучения. Потом можно будет сравнить результаты с целью и понять, получилось её достичь или нет.
В конце каждого урока — кнопки перехода к следующему и краткого пересказа урока. Иногда будет полезно после выполнения всех заданий в уроке коротко напомнить себе, что мы изучили и где это применяется. Полезная штука.
Погружение в профессию
Мы всё ещё в самом начале курса, где нам рассказывают о том, чем вообще занимаются фронтенд-разработчики. Всё понятно и доступно даже без технического образования, примеры — жизненные, написано легко, поэтому стартовать можно с любого уровня. Иногда ребята объясняют слишком подробно, но для гуманитария это может оказаться именно тем, что нужно, когда не понимаешь ничего, а тут тебе объясняют так, что понимаешь.
Там же в первых уроках нам рассказывают, что будет на полном курсе, и сразу предупреждают, что будет много практики. Цель Практикума в курсах — делать упор на задания, когда нам нужно будет что-то собирать руками: писать скрипты, настраивать стили и собирать страницы. Чем больше практики и разных задач, тем более полное получается погружение в профессию. Портфолио тоже собирается в процессе, его плюс ещё в том, что всё это вы сделаете действительно сами.
В конце погружения в профессию будет урок про трудоустройство: что делать после курсов, как найти работу, что нужно знать и что там происходит на рынке труда.
Перед самым началом практических уроков нам говорят, какой компьютер понадобится и что в нём должно быть из железа. Судя по описанию, можно заниматься на любом современном компьютере начального уровня, офисный ноутбук тоже подойдёт.
Мы бы передвинули этот блок повыше, перед остальными, чтобы заранее можно было прикинуть возможности своей техники. С другой стороны, практические задания будут как раз со следующего урока, поэтому тоже получается логично поставить требования перед ними.
Тренажёр
Перед тем как идти дальше по темам, расскажем немного про тренажёр.
Тренажёр — это то, где вы будете писать код, запускать его и сразу видеть результат. Он работает прямо на странице уроков, ничего ставить отдельно не нужно.
Самый кайф в том, что в тренажёре можно делать вообще что угодно: менять теги, добавлять новые — даже те, которых нет в уроке, играть со стилями, пилить скрипты, подключать всё это к странице — и в любом случае он сделает всё, что вы написали, и покажет сразу, что получилось.
При этом тренажёр — это почти полноценный редактор кода: автодополнения, подсказки и разбор ошибок там тоже есть. Вы с самого начала будете работать почти как настоящий разработчик: писать код, соблюдая все правила, запускать его и смотреть, что получилось.
Вот пример того, как работает тренажёр (и как там действительно можно делать что угодно):
Основы HTML и CSS
Веб-разработка начинается с HTML, поэтому курс тоже начинается с базы по HTML. Но не с нуля, когда начинаешь со структуры, а вообще с того, что это за язык. Можно сказать, что это короткий рассказ про возможности и основы HTML, когда нам дают немного поиграть с тегами и показывают, что всё на странице зависит от нас. А потом, шаг за шагом, начинают рассказывать про HTML с самых основ.
Ещё удобная фича в курсе — Яндекс GPT. Если в уроке какая-то фраза или термин непонятны, можно их выделить и запросить во всплывающей подсказке уточнение у нейросети. Работает во всех уроках, часто бывает полезно, особенно если начинаешь с нуля.
Что разбирается в теме:
- теги,
- заголовки,
- абзацы,
- ссылки,
- атрибуты,
- вложенные теги,
- изображения,
- структура,
- метатеги,
- введение в стили,
- подключение CSS-файлов,
- блоки,
- отступы,
- подписи.
И ещё пара-тройка часов вёрстки. И это только второй урок из семи.
Каждый урок рассказывает про что-то своё, причём сразу предлагает попробовать изученное на практике. Например, вот часть урока по ссылкам:
А вот мы проходим тест в теме про вложенные теги:
Все сложные и не очевидные новичкам штуки разбираются на схемах — так проще понять, что к чему относится и как одно влияет на другое:
Схемы бывают и большими. Понравилось цветовое разделение разных блоков:
И сразу тренируемся работать со структурой. К этому моменту тренажёр стал привычным и родным инструментом :-)
Рассказ о пользе метатегов и о том, как без них может сбиться кодировка в браузере:
В конце каждого урока — мини-тест на понимание сути. Если ошибётесь, тест сам подскажет, где ошибка, и покажет правильный ответ.
Базовые CSS-свойства
Третья тема — про CSS-свойства, и тут мы сразу начинаем собирать свой первый проект — анимационную страницу-плейлист, когда обложки меняют друг друга:
Всё будет в тренажёре (включая анимацию), на смартфонах он может работать в отдельной вкладке, развернувшись на весь экран. Удобно, если хочется позаниматься, а компьютера под рукой нет.
Весь код из тренажёра можно скопировать в свой редактор кода (если вдруг нужно):
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Добавляем абзац</title>
</head>
<body>
<!-- Выполняйте задание тут -->
<h1>The Life of</h1>
<!-- Вставьте абзац ниже -->
</body>
</html>Что разбирается в теме:
- размеры элементов в пикселях и других величинах,
- цвета,
- фон и его свойства,
- прозрачность,
- вложенные элементы,
- наследование,
- типографика.
Классная демонстрация того, зачем нужны метатеги и как будет выглядеть текст на странице, если их не использовать:
Когда освоились, работаем с отдельным файлом стилей: переключаемся между вкладками в тренажёре, добавляем новые свойства и продолжаем создавать проект с обложкой:
В конце каждой темы тоже есть тест, в нём 1–2 вопроса по теме, которую только что изучили:
Понравилось, что ребята сразу решили прививать правильный подход к веб-разработке и используют принятые здесь стандарты схем для обозначения отступов (как их рисует каждый современный браузер):
Шаг за шагом верстаем проект в тренажёре. Спойлеров и подсказок не будет, лучше попробуйте сами. Если думаете, что это стандартное «копировать — вставить», то нет, это было бы слишком просто :-)
Собираем лендинг
Четвёртая тема — сборка своего первого лендинга. Что именно должно получиться в итоге и про что лендинг, рассказывать не будем, лучше посмотрите сами и попробуйте сделать его самостоятельно.
Собирать придётся с нуля, пригодится всё, что изучили до этого. Перед нами уже привычный тренажёр с заготовкой страницы, в котором мы и будем делать магию фронтенда.
Что разбирается в теме:
- классы,
- секции,
- отступы и центрирование,
- шорткаты,
- границы,
- блочное и строчное расположение,
- расположение по центру,
- тени и работа с ними,
- подвал,
- много вёрстки.
В каждом уроке нам рассказывают что-то новое — как раз то, что будем использовать прямо сейчас. Всё с примерами, скриншотами и интерактивом.
Про цвета и их представление тоже объясняется подробно, с картинками и готовым кодом:
А вот пример с наглядной демонстрацией того, как работает простая типографика в стилях:
Основа нашего будущего лендинга — блочная вёрстка. Тема непростая и разбирается долго, но это того стоит.
Если вы не знаете, что такое поток и блочная модель, но уже умеете верстать, — не поленитесь и пройдите курс хотя бы до этого урока, чтобы стать лучше как фронтендер.
Как обычно, продолжаем практиковаться и применять то, что только что изучили:
Немного колдуем пару занятий спустя:
JavaScript
Пятая и шестая темы — про JavaScript. Это уже полноценное программирование.
Как и с HTML+CSS, здесь всё тоже разбирается с нуля, но с важным отличием: практики тут намного больше, чем раньше. Так как курс рассчитан на начинающих, темы тоже идут в порядке возрастания сложности.
Что разбирается в теме:
- основы JavaScript,
- вывод в консоль,
- арифметические операции,
- строки,
- переменные,
- присваивание.
Каждая тема начинается с теории, где разбираются одна-две команды и как они работают, а потом сразу переходим к практике.
Когда прочитали теорию, возвращаемся в тренажёр и смотрим на задание, которое нам нужно сделать. Пока задание не выполнено, к следующему уроку перейти не получится: всё нужно писать самому и так шаг за шагом погружаться в скрипты.
Вот первое и самое простое задание — вывести определённый текст в консоль:
В тренажёре есть автодополнение, подсказки по типам данных и командам — всё как у настоящих разработчиков:
В одном уроке — несколько заданий, каждое из них использует то, что мы только что прошли. Это помогает лучше запомнить каждую тему и разобраться с ней до полного понимания. Подсказки тоже есть: пользуйтесь ими, если встретится что-то сложное или непонятное.
В шестой части (тоже про JavaScript) всё намного интереснее: мы будем работать не только с консолью, но и со страницей — программировать её поведение и реакции на наши действия. А в итоге сделаем вот такую красоту:
Задания тоже станут сложнее. Например, вот задание из середины темы, где мы учимся добавлять интерактивность на странице с помощью скриптов. Сравните это с первыми заданиями и оцените, насколько далеко тут всё продвинулось:
И в таком ритме — все занятия. Много кода, теории и самостоятельной работы. Класс.
Что в итоге
Наши впечатления о курсе:
- Теория разбирается настолько подробно, как это только возможно. Для старта вообще можно не разбираться в ИТ до этого.
- Много примеров — это кайф.
- Практика, практика, практика, задания, практика, тренажёр. Иногда это может бесить, но ничего лучше практики для обучения программированию ещё не придумали. Если читать одну теорию, ничего не получится.
- Для бесплатного курса здесь столько информации и опыта, что можно было вполне сделать из этого отдельный платный курс.
Если у вас уже есть знания о фронтенде, какие-то задания покажутся простыми, но это закончится уже к середине курса :-)
Кому полезно
Всем, кто хочет начать осваивать веб-разработку и получить новую профессию. И тем, кто хочет хотя бы на базовом уровне сам собирать несложные страницы или заниматься вёрсткой.
А ещё курс поможет, если вы более-менее в теме вёрстки, но плохо разбираетесь в JavaScript. После него вы вполне сможете открыть код, который был написан кем-то другим, разобраться, как там всё работает, и скопировать себе функциональность, которая нужна. Для сложных проектов такое, конечно, не прокатит, но для простых задач — вполне.
Как начать
Всё просто:
- Заходите в свою учётную запись в Яндексе (или создаёте, если ещё нет).
- Переходите на страницу курса.
- Нажимаете на кнопку с бесплатным стартом.
Это всё, увидимся через 20 часов практики :-)
