Разработка интерфейсов: вёрстка и JavaScript

Получите востребованную специальность, решайте более сложные задачи, повысьте продуктивность сотрудников.

Записаться на программу

15 000 ₽

Стоимость курса «Основы HTML и CSS»

15 000 ₽

Стоимость курса «JavaScript»

25 000 ₽ -17%

Стоимость программы обучения

Начало занятий:

Организатор обучения:
Фонд развития
онлайн-образования

Основы HTML и CSS

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

Курс «Основы HTML и CSS» позволит овладеть основами вёрстки веб-страниц, познакомиться с принципами работы внутренних механизмов браузера и способами раскладки элементов на странице. В рамках курса рассматриваются языки программирования HTML, CSS, а также принципы написания валидного эффективного кода для работы в браузерах. В результате вы освоите способы создания и верстки страниц, которые будут оптимально работать в независимости от браузера и устройства.

Записаться на курс

15 000 ₽

стоимость курса

20 августа

начало занятий

Развернуть программу обучения
Свернуть программу обучения
Закрыть программу курса

Программа курса Основы HTML и CSS

Неделя 1. Введение в HTML

Первая неделя курса посвящена знакомству с HTML. Вы узнаете, откуда взялся этот язык разметки, как он развивается сегодня, из чего состоят HTML-элементы и как разметить ими обычный текст.

8 видеолекций
2 тестирования
Дополнительные материалы

Чему я научусь?

  • Понимать структуру HTML-тега
 и HTML-документа.
  • Знать виды элементов.
  • Знать несколько способов задать атрибут.
  • Уметь работать с комментариями в коде.
  • Знать, что такое HTML Entity.
  • Узнать корневые мета-элементы
и способы их использования.
  • Познакомится с понятием Open Graph
и его тегами.
  • Группировать контент при помощи элементов.
  • Создавать списки разных типов, нескольких уровней вложенности.
  • Создавать таблицы разной сложности.
  • Описывать разные виды текстов разными видами тегов.

Неделя 2. Введение в HTML, часть 2

На второй неделе мы продолжим изучение HTML. Вы узнаете, что такое семантическая разметка и почему важно соблюдать семантику. Научитесь создавать ссылки в HTML-документе. Не обойдёмся и без практики: вам предстоит попрактиковаться в разметке текста.

7 видеолекций
2 тестирования
Практическое задание
Дополнительные материалы

Чему я научусь?

  • Описывать код и формулы в тексте.
  • Познакомиться с понятием микроразметки и уметь ее использовать.
  • Познакомиться с одним из важнейших элементов в HTML, предназначенным для создания ссылок.
  • Уметь использовать ссылки для разных целей.
  • Понимать, для чего используются якоря.
  • Уметь использовать встраиваемые элементы для отображения различного вида содержимого.
  • Знать основные элементы форм. Уметь создавать формы.
  • Познакомиться с различными способами написания текстов на разных языках.

Неделя 3. Введение в CSS

Поговорим о том, почему появился CSS, и разберёмся в его структуре. Вы научитесь грамотно применять и комбинировать различные типы селекторов (селекторы тегов, классов, идентификаторов и атрибутов). Также мы расскажем, что такое псевдоэлементы и псведоклассы, какие они бывают и как с ними работать. Вы разберётесь в том, что такое специфичность, как она высчитывается и как это влияет на порядок применения свойств в CSS.

8 видеолекций
2 тестирования
Дополнительные материалы

Чему я научусь?

  • Знать о причинах появления языка разметки стилей.
  • Знать, из чего состоит CSS.
  • Знать о различных типах селекторов тегов, классов, идентификаторов и атрибутов. Уметь грамотно их применять и комбинировать.
  • Познакомиться с понятиями псевдоэлемента и псевдокласса, с различными их типами, понимать механизмы их работы.
  • Знать о способах написания селекторов в зависимости от структуры HTML документа.
  • Понимать, как высчитывается специфичность и как это влияет на порядок применения CSS свойств.
  • Узнать, какие есть единицы измерения в CSS.
  • Умеет увеличить скорость написания HTML и CSS.

Неделя 4. Шрифты и текст

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

10 видеолекций
Практическое задание
Дополнительные материалы

Чему я научусь?

  • Знать, что такое шрифт. Понимать различие между векторными и растровыми шрифтами. Знать основы шрифта с точки зрения типографики.
  • Знать о способах изменения размеров шрифта.
  • Знать о способах изменения высоты строки, растояния между буквам и словами.
  • Понимать разницу между начертаниями и их обработкой браузером. Уметь устанавливать их с помощью CSS.
  • Знать общепринятую классификацию шрифтов в веб и их аналоги в типографике. Уметь управлять семейством шрифтов с помощью CSS. Знать о текущих проблемах использования кастомных шрифтов и способах оптимизации.
  • Уметь пользоваться основными свойствами для работы с текстом.
  • Понимать, что такое цвет переднего плана, как его применять. Умееть применять цвет и устанавливать тень для текста.
  • Уметь реализовывать многоколоночную развертку, грамотно обходить проблему переполнения текста.
  • Понимать нюансы расстановки переносов строк, внутри слов и пробелов.
  • Знать о существовании псевдоэлементов, относящихся к тексту, и уметь их применять.

Неделя 5. Анимации в CSS

На пятой неделе вы узнаете про основные виды трансформаций и о том, как создать анимации только при помощи CSS. Разумеется, попрактикуетесь в создании анимаций разных уровней сложности.

6 видеолекций
Практическое задание
Дополнительные материалы

Чему я научусь?

  • Знать о популярных видах анимаций, которые используются в веб-программировании.
  • Знать основные преобразования, понимать, как они работают.
  • Применять множественные преобразования.
  • Знать, как работают преобразования в трехмерном пространстве.
  • Уметь сделать плавный переход от одного набора свойств к другому.
  • Уметь сделать переход от одного набора свойств к другому с промежуточными состояниями.

Неделя 6. Модель отображения, боксы, отступы, границы

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

5 видеолекций
Практическое задание
Дополнительные материалы

Чему я научусь?

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

Неделя 7. Модель отображения, позиционирование, порядок наложения, плавающий поток

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

7 видеолекций
Практическое задание
Дополнительные материалы

Чему я научусь?

  • Знать, что такое относительное позиционирование элементов.
  • Знать, что такое абсолютное позицонирование. Чем отличается от относительного и как применяется на парктике.
  • Знать, что такое фиксированное позиционирование. Знать о нововведениях в спецификации относительной модели позиционирования, понимать, что за ними нужно следить.
  • Знать, по каким правилам элементы накладываются друг на друга.
  • Уметь грамотно применять правила, по которым элементы накладываются друг на друга.
  • Понимать, как окружающие элементы взаимодействуют с плавающими элементами.

Неделя 8. Модель отображения, раскладка страниц

Flexbox и Grid — современные инструменты для вёрстки макетов, о них и поговорим. Оба инструмента хороши по своему и должны использоваться совместно, а не как альтернатива друг другу. В конце недели ещё одно практическое задание: добавление к магазину красивой витрины.

3 видеолекции
Практическое задание
Дополнительные материалы

Чему я научусь?

  • Знать о способах создания раскладки страницы с использованием уже известных элементов, CSS свойств и их недостатках.
  • Познакомиться со спецификацией Flexbox, ее особенностями и свойствами.
  • Уметь создать раскладку страницы с использованием Flexbox.
  • Познакомиться со спецификацией Grid, ее особенностями и свойствами.
  • Уметь создать раскладку страницы с использованием Grid.
  • Понимать уместность использования той или иной спецификации в различных ситуациях.

Неделя 9. Браузеры

Девятая неделя посвящена браузерам: вы узнаете об их базовой архитектуре, познакомитесь с устройством движка рендеринга браузера, разберётесь, как браузеры применяют CSS и HTML.

5 видеолекций
2 тестирования
Дополнительные материалы

Чему я научусь?

  • Узнать о базовой архитектуре браузера, основных группах браузеров.
  • Познакомиться с устройством сетевого модуля браузера.
  • Познакомиться с устройством движка рендеринга браузера.
  • Понимать, как устроен анализ HTML и CSS документов и по каким правилам байты превращаются в DOM и CSSOM.
  • Понимать, как происходит формирование render tree. И как браузеры применяют CSS.
  • Знать, как браузеры рассчитывают геометрию страницы.
  • Понимать, как изменения различных CSS свойств влияют на компоновку страницы.
  • Понимать, как происходит отрисовка страницы.
  • Знать об особенностях исполнения скриптов при анализе документа.

Неделя 10. Фотошоп и графика

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

8 видеолекций
Практическое задание
Дополнительные материалы

Чему я научусь?

  • Знать, какие виды графических изображений используются в веб.
  • Знать про основные цветовые модели.
  • Использовать основные цветовые модели в разработке.
  • Знать про растровый и векторный форматы изображений, про их особенности.
  • Понимать, в каких случаях лучше использовать растровый или векторный форматы изображений.
  • Знать два основных вида оптимизации изображений.
  • Применять соответствующие инструменты для оптимизации изображений.
  • Знать, как использовать основные инструменты при работе с макетом.
  • Уметь вставлять изображения при помощи HTML и CSS.
  • Создавать градиентные переходы цветов в CSS.
  • Знать, что такое спрайты.
  • Уметь правильно применять спрайты.

JavaScript

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

Вы узнаете:

  • Как написать программу на JavaScript?
  • Чем язык JavaScript отличается от других языков программирования?
  • Какие задачи можно эффективно решать с помощью JavaScript?
Записаться на курс

15 000 ₽

стоимость курса

20 августа

начало занятий

Развернуть программу обучения
Свернуть программу обучения
Закрыть программу курса

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

Неделя 1. Основы языка JavaScript

Вы узнаете, о предпосылках появления JavaScript и его истории. Познакомитесь с основными типами данных. Настроите окружение и напишите ваши первые программы.

7 видеолекций
2 тестирования
3 практических задания

Чему я научусь?

  • Понимать причинно-следственные связи существования языковых конструкций в JavaScript-е.
  • Понимать основные типы данных. Научиться читать, понимать и писать элементарные программы на языке JavaScript.
  • Знать о наличии переменных и констант и о правилах/соглашениях их именования.
  • Уметь использовать несколько видов комментариев, понимать различия между ними.
  • Применять арифметические и логические операторы языка. Понимать их приоритеты. Уметь рационально использовать несколько видов условных операторов.
  • Понимать, что такое строгий режим и режим совместимости, уметь его использовать.
  • Уметь запускать код на JavaScript в браузере и с помощью Node.js.

Неделя 2. Типы данных

На этой неделе вы продолжите изучать типы данных. Поговорим о более сложных — строки, массивы, объекты, функции. В лекциях мы постарались продемонстрировать теорию на примерах. И подготовили 3 задачи, которые помогут закрепить изученный материал.

8 видеолекций
1 тестирования
3 практических задания

Чему я научусь?

  • Знать несколько способов объявления строк. Уметь работать с их методами.
  • Знать несколько способов объявления массивов. Знать несколько методов массивов и уметь итерироваться по массиву.
  • Уметь создавать, изменять объекты. Уметь итерироваться по ключам объекта, использовать его методы.
  • Понимать как передавать функции в качестве аргумента.

Неделя 3. Типы данных. Продолжение

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

8 видеолекций
1 тестирование
1 практическое задание

Чему я научусь?

  • Знать о причинах появления Уметь использовать свойства через методы объекта разметки стилей.
  • Уметь отлавливать неконтролируемые исключения
  • Понимать устройство работы try...catch
  • Уметь использовать операторы эквивалентности и сравнения
  • Использовать операторы взятия значения, приведения к строке
  • Уметь использовать оператор объявления полей объекта и его свойства
  • Уметь использовать встроенные объекты Data и Math
  • Знать несколько способов объявления регулярных выражений в языке JavaScript
  • Уметь производить поиск и замену по регулярным выражениям

Неделя 4. Функции

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

5 видеолекций
2 тестирования
Практическое задание

Чему я научусь?

  • Уметь производить рекурсивный вызов
  • Понимать особенности и недостатки нескольких способов работы с аргументами
  • Уметь работать со свойством функции arguments
  • Уметь объявлять функции несколькими способами
  • Уметь создавать области видимости с помощью функций
  • Понимать механизм всплытия переменных
  • Понимать механизм замыкания
  • Уметь создавать модули

Неделя 5. Контекст исполнения

С понятием контекста исполнения в JavaScript связано ключевое слово this. Это мощный инструмент, но разобраться в нём непросто. Заключительная неделя курса будет интересна не только новичкам, но и программистам, которые хотят освежить этот аспект в памяти. В качестве практического задания — создание библиотеки, позволяющей подписываться на события и получать по ним уведомления.

4 видеолекции
2 тестирования
Практическое задание

Чему я научусь?

  • Понимать сходства и различия this в разных языках программирования
  • Понимать, чему будет равен this на различных участках кода
  • Понимать, чему будет равен this в зависимости от того, как вызван код: вызов функции, вызов метода, заимствование метода, конструктор
  • Уметь изменять контекст использования методов функций call, bind, apply
  • Уметь использовать замыкания для сохранения текстов
  • Понимать влияние строгого режима на контекст исполнения
  • Понимать, как определяется контекст при использовании оператора eval

Неделя 6. Прототипы

Описание

7 видеолекций
1 тестирование

Чему я научусь?

  • Понимать, как работает механизм прототипов в языке и какие задачи он решает
  • Знать о наличии прототипов по умолчанию для объектов разных типов в языке
  • Уметь связывать объекты с прототипами тремя разными способами. Понимать преимущества и недостатки каждого из них
  • Понимать, как работают поля, помеченные как неизменямые в прототипах
  • Понимать, как работают сеттеры и геттеры в прототипах

Неделя 7. Конструкторы

Описание

7 видеолекций
1 тестирование
Практическое задание

Чему я научусь?

  • Уметь создавать конструкторы объектов
  • Уметь создавать объекты при помощи конструкторов
  • Уметь автоматически привязывать прототипы к создаваемым объектам
  • Уметь автоматически встраивать объекты в цепочки прототипов при создании
  • Уметь инспектировать связи между объектами и прототипами, используя методы isPrototypeOf и getPrototypeOf
  • Уметь инспектировать связи между объектами и конструкторами, используя оператор instanceof
  • Уметь создавать объекты при помощи метода create
  • Уметь создавать простые «классы» и конструировать объекты с их помощью

Неделя 8. Асинхронный код

Описание

6 видеолкций
Практическое задание

Чему я научусь?

  • Знать, что такое очередь событий и стек вызовов в JavaScript
  • Понимать, как системные таймеры взаимодействуют с очередью событий
  • Понимать, что такое блокирующие операции и как ведет себя асинхронный код с блокирующими операциями
  • Уметь использовать функции setInterval и setTimeout по назначению
  • Уметь работать с файловыми системами через синхронные и асинхронные функции
  • Знать несколько способов организации асинхронного года. Понимать их достоинства и недостатки
  • Уметь объявлять и применять промисы
  • Уметь объединять несколько промисов в цепочку

Неделя 9. Node.js

Описание

7 видеолекций
1 тестирование

Чему я научусь?

  • Понимать в общих чертах как устроена платформа Node.js
  • Понимать что такое модуль в контексте платформы
  • Уметь создавать простой модуль
  • Уметь использовать пакетный менеджер npm для установки зависимостей
  • Уметь написать файл-манифест package.json к модулю для фиксирования зависимостей
  • Уметь создавать простой http-сервер
  • Уметь создавать простой http-клиент
  • Уметь работать с файлами

Неделя 10. DOM

Описание

4 видеолекции
Практическое задание

Чему я научусь?

  • Знать, что такое DOM
  • Искать элементы DOM дерева и осуществлять обход по ним
  • Уметь управлять атрибутами и свойствами элементов
  • Уметь обрабатывать DOM события несколькими способами. Понимать их достоинства и недостатки

Преимущества программы курса

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

Команда преподавателей

Олег Мохов

Курс «Основы HTML и CSS»

Руководитель службы разработки PR и спецпроектов. В сфере разработки интерфейсов почти 10 лет. Преподавал курсы по фронтенду в УрФУ. Участвовал в разработке Яндекс.Почты, Яндекс.Расписаний, Яндекс.Такси, Яндекс.Авиабилетов, Яндекс.Блогов, сервиса Рекламных технологий Яндекса и многих других. 5 лет назад организовал одно из крупнейших мероприятий для фронтенд-разработчиков в России – конференцию FrontTalks. Увлекается темой планирования городской среды и проектированием систем общественного транспорта.

Профессиональные интересы: создание эффективных команд.

Артем Кувалдин

Курс «Основы HTML и CSS»

Разработчик интерфейсов Яндекса. В сфере web-разработки уже более 5-ти лет. Читал лекции по верстке на мат-мехе 
в УрФУ. Участвовал в разработке разных проектов Яндекса: «Блоги», «Рекламные технологии», мобильная версия «Яндекс Расписания». В настоящий момент работает над проектами «Яндекс События», «Яндекс Технологии» и «Яндекс Исследования».

Профессиональные интересы: проектирование интерфейсов, верстка и анимации.

Олег Семичев

Курс «Основы HTML и CSS»

Разработчик интерфейсов Яндекса. В сфере разработки интерфейсов уже более 4-х лет. Преподавал курсы по фронтенду в УрФУ. Участвовал в разработке множества специальных проектов Яндекса таких как: «Время», «Интернетометр», «Автопоэт». В текущий момент работает над проектами «Яндекс Для медиа».

Увлекается game-dev'ом и играет на ударной установке.

Профессиональные интересы: проектирование интерфейсов
и юзабилити.

Денис Чистяков

Курс «JavaScript»

Руководитель службы разработки в Яндексе. Веб-разработкой занимаюсь уже 13 лет. Окончил УрФУ по специальности: «Программное обеспечение вычислительной техники и автоматизированных систем». В течение последних двух лет читаю лекции по JavaScript в УрФУ на факультете «Математики и механики». До этого участвовал в качестве преподавателя в 4-х Школах Разработки Интерфейсов Яндекса.

Профессиональные интересы: JavaScript, Node.js, Python, MongoDB, PostgreSQL, NGINX

Сергей Жигалов

Курс «JavaScript»

Разработчик Яндекса. Разрабатывал веб версию Яндекс.Такси, блоги компании, сайт технологий Яндекса и другие проекты.

Четыре года назад пришел в веб и полюбил JavaScript с первого взгляда. Использует его в клиентском коде, пишет бекенды на NodeJS, программирует на JavaScript микроконтроллеры. Любит писать код, но ещё больше любит его тестировать! Преподаёт курсы по фронтенду и тестированию в УрФУ.

Антон Конев

Курс «JavaScript»

Разработчик интерфейсов в Яндексе. Работает в сфере проектирования интерфейсов уже 5 лет. Преподавал курсы по фронтенду в УрФУ. Наставник в HTML Academy. Участвовал в разработке Яндекс.Браузера, Яндекс.Погоды, Яндекс.Олимпиады и многих других сервисов. Занимается опенсорсом. Катается на сноуборде и велосипеде, читает
книги и любит смотреть YouTube.

Отзывы студентов

Александр Дюков-Франци

Первое что стоит отметить - это очень интересные и сложные практические задания, для прохождения которых нужно будет изрядно поломать голову и покопаться в документации. В видео информация подается без лишней воды и дается много полезных ссылок для самостоятельного изучения материала. Пройдя эту специализацию, я освоил основные инструменты разработчика и научился самостоятельно верстать страницы используя семантическую разметку, CSS Grid, flexbox, сделал мультик используя только HTML и CSS анимации (это было одно из заданий), разобрался с архитектурой и движком рендеринга браузера, понял как он применяет HTML и CSS, научился программировать на JavaScript. Спасибо команде курса за проделанную работу!

Дарья

Я работала в другой сфере, никак не связанной с IT. Но потом я решила, что мне это не нравится. Я узнала о фронтэнде, мне это очень понравилось, решила развиваться в этом направлении. Я нашла этот курс, решила, что получу хорошие знания. Уволилась с работы и целыми днями слушала лекции, делала задания, изучала дополнительные материалы, которые есть в свободном доступе в интернете. Мне все это было очень интересно и очень нравилось. Через месяц после окончания курса я нашла работу, теперь я на позиции Junior developer, и мне очень нравится. Спасибо вам)

Беденко Александр

Очень хороший курс. Записался чтобы систематизировать навыки, полученные за годы практики. Ведь вот так пишешь-пишешь и как-то в голову не приходит посчитать сколько в JS типов данных. А теперь знаю точно :) Авторам особенно удались последние два задания, лекция про this и reduce. Прошел весь курс где-то за ночь. Отличный курс, не пожалеете - даже если (особенно если :) ) давно куете JS.

Расскажи друзьям