«Старт во фронтенде» — это курс для тех, кто хочет стать разработчиком, но сомневается в своих силах или не уверен, понравится ли ему такая работа. Мы создали его, чтобы новички узнали, как это — быть программистом, и научились писать код.

Курс рассказывает, из чего состоят веб-страницы, как их создавать, оформлять и оживлять — чтобы пользователи могли листать слайдер, включать тёмную тему или регистрироваться на сайте.

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

Первое задание
С чего всё начинается — первое задание

Что будет на курсе

Курс состоит из тренажёров и мастер-классов. С их помощью вы изучите языки, которые составляют основу фронтенд-разработки.

HTML — язык гипертекстовой разметки страницы, на нём пишут структуру сайта. Вы научитесь правильно верстать страницы по макету дизайнера.

CSS — язык описания внешнего вида страницы, отвечает за стилизацию. Курс показывает, как подключать и писать стили, добавлять фоны и картинки, работать с графическим редактором Figma.

JavaScript — язык программирования, делает сайт интерактивным. Вы изучите синтаксис JS, напишете функции и научитесь работать с данными — всё это нужно, чтобы пользователи могли что-то делать на странице. Например, вводить логин и пароль для входа в личный кабинет.

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

💡 Первые разделы курса — бесплатные. Они помогут понять, подходит ли вам такой формат учёбы.

Как сверстать макет. Пошаговый план

Тренажёры

Тренажёры дают теорию и показывают, как её применять на практике. Сначала вы читаете, для чего нужна определённая конструкция языка, а затем пишете с ней код и смотрите, как всё работает. Если что-то не получается, нажимаете на кнопку «Показать ответ» и смотрите решение.

Видео с примерами заданий

В каждом тренажёре есть конспект с выжимкой из теории. Если вы что-то забудете, то вернётесь к этой статье и перечитаете её. В некоторых тренажёрах есть испытания — они проверяют, хорошо ли вы усвоили материал.

Пример испытания в тренажёре по CSS
Пример испытания в тренажёре по CSS. Вы читаете задание, выполняете и затем отправляете на проверку. Если не получается — смотрите видеоразбор и пробуете ещё раз

Мастер-классы

«Старт во фронтенде» включает пять мастер-классов: по семантической вёрстке, экспорту графики из Figma, созданию сеток страниц, вёрстке компонентов и добавлению интерактива. В каждом есть теория и практика.

Сначала идёт теория в виде демо или статей — она объясняет, как решать конкретную задачу и почему именно так. После неё даётся задание, чтобы вы научились работать сами, без подсказки.

Фрагмент задания из мастер-класса по вёрстке страниц
Фрагмент задания из мастер-класса по вёрстке страниц

Навыки отрабатываете на личном проекте — сайте «Вместе под парусом». На каждом мастер-классе вы выполняете небольшую задачу по разработке этого лендинга: создаёте страницу, добавляете графику, стилизуете документ или пишете скрипты. Готовое решение отправляете на проверку — она выполняется автоматически, как только вы загрузите проект.

Если задание покажется сложным или решение будет неправильным — ничего страшного. В каждом мастер-классе есть решение — можете сверить с ним свой код и исправить ошибки.

В конце курса у вас получится полностью рабочий сайт, который можно опубликовать в интернете.

Видео с сделанным сайтом

Какие навыки получают студенты

«Старт во фронтенде» даёт базовые знания о разработке. Вы научитесь:

  • Верстать сайты по макету.
  • Писать стили для веб-приложения.
  • Создавать простые скрипты для отображения скрытых элементов, переключения шрифтов, темы сайта и картинок в галерее.
  • Использовать редактор Figma на уровне начинающего разработчика.
  • Работать с разными форматами графики.

А если не получится

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

Что дальше

После курса вы сможете устроиться младшим верстальщиком в веб-студию или работать фрилансером и создавать несложные проекты. Для работы фронтендером в продуктовых компаниях этих знаний недостаточно. Однако они помогут расти дальше, ведь вам будет легче изучать вёрстку и программирование. Чтобы развиваться дальше, после курса советуем пройти профессию «Фронтенд-разработчик» или «JavaScript-разработчик». Там мы учим создавать более сложные проекты, используя современные инструменты — всё как в реальной разработке.

Материалы по теме