курс
«cтарт в программировании»

Самый простой и надёжный вход в IT с помощью тренажёров и при поддержке от опытных разработчиков

Сто тысяч новичков сделали первый шаг в профессиональную разработку на этом курсе

Пришла ваша очередь стать своим среди этих профессионалов

  • Подходит ли вам курс

    Этот курс подойдёт для полных новичков, для тех, кто не сталкивался ни с миром веб-разработки, ни с технологиями HTML, CSS и JavaScript. Вы изучите фундаментальные веб-технологии и попробуете себя в роли верстальщика и фронтендера.

  • Ваш уровень после курса

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

  • Чему вы научитесь:

    • изучите базовые конструкции языков HTML, CSS и JavaScript,
    • разберётесь с тегами и их параметрами, CSS-свойствами, селекторами и каскадностью,
    • изучите команды JavaScript, переменные условия, циклы,
    • попробуете себя в роли фронтендера:
      • внесёте правки в вёрстку и скрипты страницы,
      • сверстаете с нуля сайт из графического макета,
      • напишете с нуля интерактивные компоненты по техническому заданию.

  • Объём практики:

    100 часов

  • Начальные требования:

    нулевой уровень

  • Итоговый уровень:

    первокурсник

На курсе вы создадите свой первый сайт и запрограммируете его компоненты

Начать курс бесплатно

Как проходит обучение

С самого начала мы учим вас работать с живым кодом, решать реальные задачи и перенимать опыт сильных разработчиков

Самостоятельно занимаетесь на платформе HTML Academy

В комфортном для себя ритме обучаетесь на наших тренажёрах. Вся теория объясняется простым языком и тут же закрепляется на практике. Вы пишете код 80% своего времени.

Пример проекта - под парусом

Поэтапно выполняете учебный проект

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

Общаетесь в учебном чате

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

Фотография учебного чата
Пример проекта - цифровая планета

Разрабатываете личный проект

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

Участвуете в регулярных живых консультациях с разработчиками-наставниками

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

Привет. У меня последний блок с товарами почему-то выравнивается неправильно, всё перепробовала. Взглянешь?
Да, конечно.
Вопрос к наставнику

Получаете глубокое кодревью личного проекта опытным разработчиком

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

Начать курс бесплатно

Программа курса

  1. Раздел 1. Знакомство с фронтендом

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

  2. Раздел 2. Знакомство с HTML и CSS

    Изучаем основы HTML и CSS. На практике разбираемся с семантической разметкой и базовыми механизмами стилизации на примере небольшого сайта.

  3. Раздел 3. Мастер-класс «Создание семантической разметки по макету»

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

  4. Раздел 4. Базовые механики стилизации

    Разбираемся с селекторами и каскадностью. Учимся задавать фоновые изображения.

  5. Раздел 5. Мастер-класс «Экспорт графики и базовая стилизация по макету»

    Познакомимся с интерфейсом графического редактора Figma, научимся экспортировать из макета графику, а также параметры текста и фонов. Продолжим работу над личным проектом: экспортируем графику, внедрим её в проект и зададим базовые стили страницы.

  6. Раздел 6. Боксовая модель и позиционирование

    Знакомимся с боксовой моделью. Учимся управлять потоком документа. Разбираемся с позиционированием и управляем координатами позиционированных элементов.

  7. Раздел 7. Базовые механики построения сеток

    Познакомимся с техниками создания крупных сеток страниц и мелких сеток компонентов. Разберём возможности двух технологий создания раскладок: флексбоксов и гридов.

  8. Раздел 8. Мастер-класс «Создание сеток страниц по макету с помощью флексбоксов»

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

  9. Раздел 9. Мастер-класс «Вёрстка компонентов интерфейса по макету»

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

  10. Раздел 10. Базовые механики «оживления» интерфейсов

    Узнаем, как работает JavaScript в браузере. Научимся оживлять интерфейсы. Будем решать задачи, с которыми регулярно сталкиваются веб-разработчики.

  11. Раздел 11. Мастер-класс «Создание интерактивных компонентов интерфейса»

    Научимся управлять элементами веб-страницы через JavaScript. Выполним пятый, финальный, этап работы над проектом: c помощью JavaScript мы оживим некоторые элементы интерфейса, опираясь на макет и техническое задание.

Доступ по подписке

Выгодный доступ ко всему интерактивному содержанию курса и поддержке в учебном чате для сторонников самостоятельного обучения или желающих попробовать себя в IT.

от 590 ₽/ месяц
  • Обучение на платформе HTML Academy
  • Тренажёры, интерактивные демонстрации, автопроверки учебного проекта
  • Учебный чат с поддержкой наставников и кураторов
  • Доступ к курсу только на время действия подписки
Оформить подписку

Полный доступ

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

13 990 ₽
  • Обучение на платформе HTML Academy
  • Тренажёры, интерактивные демонстрации, автопроверки учебного проекта
  • Учебный чат с поддержкой наставников и кураторов
  • Без ограничений по срокам доступа к курсу
  • Регулярные живые консультации с опытными разработчиками-наставниками
  • Личный проект, выполняемый самостоятельно
  • Глубокое кодревью личного проекта от опытного разработчика
Оплатить

Нажимая «Оплатить», вы подтверждаете свое согласие с условиями лицензионного договора.