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

Онлайн программа, которая поможет освоить основные инструменты разработчика интерфейсов

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

24 000 ₽

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

24 000 ₽

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

38 400 ₽
-20%

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

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

Основы HTML и CSS

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

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

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

24 000 ₽

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

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

Программа курса Основы 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 видеолекции
Практическое задание
Дополнительные материалы

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

  • Понимать, какие есть способы создания раскладки страницы с использованием уже известных элементов.
  • Работать с Flexbox и Grid.
  • Создавать раскладку страницы с использованием 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, его особенности и сложные моменты. Отдельное внимание в курсе мы уделили следующим темам: прототипы, конструкторы, асинхронный код, Node.js и DOM.

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

24 000 ₽

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

8 видеолекций
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»

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

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

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

Курс «JavaScript»

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

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

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

Курс «JavaScript»

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

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

Антон Конев

Курс «JavaScript»

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

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

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

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

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

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

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

Спасибо команде курса за проделанную работу!»

Дарья

«Я работала в сфере, никак не связанной с IT. Но потом решила, что мне не нравится. Узнала о фронтэнде, мне очень понравилось, решила развиваться в этом направлении. Я нашла курс «Разработка интерфейсов: вёрстка и JavaScript» уволилась с работы и целыми днями слушала лекции, делала задания, изучала дополнительные материалы, которые есть в свободном доступе в интернете. Мне все это было очень интересно. Уже через месяц после окончания учебы я нашла работу, теперь я на позиции Junior developer, и мне очень нравится. Спасибо вам!»

Алексей

«Ребята, вы очень доступно подаете материал, внятно говорите, хорошо готовите презентации — молодцы!

Задания довольно сложные для новичка, приходится помучиться, почитать статьи и документацию, но зато интересно.

Спасибо!»

Антон

«Спасибо, ребята. Очень полезный курс. Записался систематизировать практические навыки. И курс как-то так и работает. Не то чтобы узнаешь сильно много нового (хотя и не без этого — с некоторыми селекторами раньше сталкиваться не приходилось, но оно как-то очень хорошо раскладывается по полочкам. В общем — что хотел, то и получил. Отлично, спасибо.

PS: больше по JavaScript и бэкенду, но более или менее постоянно верстал, страшно сказать, года с 1999. Было время обзавестись кучей устаревших навыков и умений. Хорошая возможность отряхнуть прах с ног.

Удачи!»

Наталья

«Я работаю продавцом в торговом центре. Хочу сменить карьерный путь, поэтому занимаюсь самообразованием: это довольно медленно, но я стараюсь и верю, что через несколько месяцев смогу устроиться на работу фронтенд-разработчиком.

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

И, конечно же, я записалась на курс, ориентируясь на русский язык и организации, участвующие в его создании, также важную роль для меня играет сертификат».

Ольга

«Курс мне очень понравился, емкие, качественные видео-уроки, интересные тесты с "подковыркой" (не всегда проходила их с первого раза), довольно сложные практические задания, над которыми было интересно поработать. Практическое задание к четвертой неделе показалось чрезмерно сложным для начального уровня JavaScript, билась с ним долго и сделала совсем не так красиво, как авторы курса. Единственный минус — курс не включает рассмотрение ES6».