Разработка интерфейсов: вёрстка и JavaScript
Онлайн программа, которая поможет освоить основные инструменты разработчика интерфейсов
Записаться на программу
24 000 ₽
Стоимость курса «Основы HTML и CSS»
24 000 ₽
Стоимость курса «JavaScript»
38 400 ₽
-20%
Стоимость программы обучения
Основы HTML и CSS
HTML и CSS — языки, с помощью которых верстают страницы в интернете. Овладеть основами этих языков совсем нетрудно — это первый шаг к профессии веб-разработчика.
Курс «Основы HTML и CSS» позволит овладеть основами вёрстки веб-страниц, познакомиться с принципами работы внутренних механизмов браузера и способами раскладки элементов на странице. В рамках курса рассматриваются HTML и CSS, а также принципы написания валидного эффективного кода для работы в браузерах. В результате вы освоите способы создания и верстки страниц, которые будут оптимально работать в независимости от браузера и устройства.
Программа курса Основы HTML и CSS
Неделя 1. Введение в HTML
Первая неделя курса посвящена знакомству с HTML. Вы узнаете, откуда появился этот язык разметки, как он развивается сегодня, из чего состоят HTML-элементы и как разметить ими обычный текст.
Чему я научусь?
- Понимать структуру HTML-тега и HTML-документа.
- Разбираться в видах элементов.
- Задавать атрибут несколькими способами.
- Работать с комментариями в коде.
- Понимать, что такое HTML Entity.
- Узнавать корневые мета-элементы и способы их использования.
- Работать с Open Graph и его тегами.
- Группировать контент при помощи элементов.
- Создавать списки разных типов, нескольких уровней вложенности.
- Создавать таблицы разной сложности.
- Описывать разные виды текстов разными видами тегов.
Неделя 2. Введение в HTML, часть 2
На второй неделе мы продолжим изучение HTML. Вы узнаете, что такое семантическая разметка и почему важно соблюдать семантику. Научитесь создавать ссылки в HTML-документе. Вам предстоит попрактиковаться в разметке текста.
Чему я научусь?
- Описывать код и формулы в тексте.
- Использовать микроразметку.
- Создавать ссылки с помощью одного из важнейших элементов в HTML.
- Разбираться в основных элементах форм. Уметь создавать формы.
- Использовать ссылки для разных целей.
- Понимать, для чего используются якоря.
- Использовать встраиваемые элементы для отображения различного вида содержимого.
- Разбираться в различных способах написания текстов на разных языках.
Неделя 3. Введение в CSS
Поговорим о том, почему появился CSS и разберёмся в его структуре. Вы научитесь грамотно применять и комбинировать различные типы селекторов (тегов, классов, идентификаторов и атрибутов). Расскажем, что такое псевдоэлементы и псведоклассы, какие они бывают и как с ними работать. Вы разберётесь в том, что такое специфичность, как она высчитывается и как это влияет на порядок применения свойств в CSS.
Чему я научусь?
- Разбираться, из чего состоит CSS.
- Уметь грамотно применять и комбинировать различные типы селекторов тегов, классов, идентификаторов и атрибутов.
- Понимать механизмы работы псевдоэлементов и псевдоклассов.
- Выбирать способ написания селекторов в зависимости от структуры HTML документа.
- Понимать, как высчитывается специфичность и как это влияет на порядок применения CSS свойств.
- Узнать, какие есть единицы измерения в CSS.
- Уметь увеличивать скорость написания HTML и CSS.
Неделя 4. Шрифты и текст
Четвёртая неделя курса посвящена работе со шрифтами и текстом. Вы узнаете о проблемах, связанных с использованием нестандартных шрифтов и способах их решения. Научитесь управлять выводом шрифтов, применять цвет для текста,создавать интересные эффекты с помощью тени. Узнаете, как реализовать многоколоночную развёртку и как грамотно обходить проблему переполнения текста. Полученных навыков вам хватит, чтобы сверстать собственную газету.
Чему я научусь?
- Понимать различие между векторными и растровыми шрифтами. Смотреть на шрифты с точки зрения типографики.
- Изменять размер шрифта.
- Изменять высоту строки, расстояния между буквам и словами.
- Понимать разницу между начертаниями и их обработкой браузером. Уметь устанавливать их с помощью CSS. Разбираться в общепринятой классификации шрифтов в веб и их аналогами в типографике. Уметь управлять семейством шрифтов с помощью CSS.
- Использовать основные свойства для работы с текстом.
- Понимать, что такое цвет переднего плана, применять цвет и устанавливать тень для текста.
- Реализовывать многоколоночную развертку, обходить проблему переполнения текста.
- Понимать нюансы расстановки переносов строк внутри слов и пробелов.
- Применять псевдоэлементы, относящиеся к тексту.
Неделя 5. Анимации в CSS
На пятой неделе вы узнаете про основные виды трансформаций и научитесь создавать анимации только при помощи CSS. Попрактикуетесь в создании анимаций разных уровней сложности.
Чему я научусь?
- Разбираться в популярных видах анимаций, которые используются в веб-программировании.
- Понимать, как работают основные преобразования.
- Применять множественные преобразования.
- Разбираться, как работают преобразования в трёхмерном пространстве.
- Делать плавный переход от одного набора свойств к другому.
Неделя 6. Модель отображения, боксы, отступы, границы
На шестой неделе курса вы увидите, что всё есть прямоугольники. Разберётесь с ключевыми понятиями отображения элементов на странице: боксы, отступы, границы. В конце недели вам предстоит сверстать макет необычного интернет-магазина.
Чему я научусь?
- Понимать, что такое внутренние, внешние отступы и граница.
- Разбираться, как работают боксы блочного уровня, как высчитываются их размеры и положение, как их изменять.
- Понимать, что такое визуальная модель форматирования и что влияет на положение бокса.
- Задавать геометрию на основе информации об особенностях работы процентных значений различных свойств.
- Разбираться в особенностях математики блочных элементов.
- Пользоваться боксами инлайн-уровня.
- Различать инлайновые и инлайн-блочные элементы.
Неделя 7. Модель отображения, позиционирование, порядок наложения, плавающий поток
Позиционированием называется положение элемента в системе координат. Различают четыре типа позиционирования: нормальное, абсолютное, фиксированное и относительное — от них зависит и система координат. На этой неделе вы познакомитесь со всеми типами и научитесь выбирать подходящий для ваших задач.
Чему я научусь?
- Знать, что такое относительное позионирование элементов.
- Знать, что такое абсолютное позицонирование. Чем отличается от относительного и как применяется на практике.
- Знать, что такое фиксированное позиционирование. Знать о нововведениях в спецификации относительной модели позионирования, понимать, что за ними нужно следить.
- Знать, по каким правилам элементы накладываются друг на друга.
- Уметь грамотно применять правила, по которым элементы накладываются друг на друга.
- Понимать, как окружающие элементы взаимодействуют с плавающими элементами.
Неделя 8. Модель отображения, раскладка страниц
Поговорим Flexbox и Grid — современных инструментах для вёрстки макетов. Оба инструмента хороши по-своему и должны использоваться совместно, а не как альтернатива друг другу. В конце недели будет ещё одно практическое задание: вы добавите к магазину красивую витрину.
Чему я научусь?
- Понимать, какие есть способы создания раскладки страницы с использованием уже известных элементов.
- Работать с Flexbox и Grid.
- Создавать раскладку страницы с использованием Flexbox и Grid.
- Познакомиться со спецификацией Grid, ее особенностями и свойствами.
- Понимать уместность использования той или иной спецификации в различных ситуациях.
Неделя 9. Браузеры
Девятая неделя посвящена браузерам: вы узнаете об их базовой архитектуре, познакомитесь с устройством движка рендеринга браузера, разберётесь, как браузеры применяют CSS и HTML.
Чему я научусь?
- Понимать базовую архитектуру браузера.
- Разбираться с устройством сетевого модуля браузера идвижка рендеринга.
- Понимать, как устроен анализ HTML и CSS документов и по каким правилам байты превращаются в DOM и CSSOM.
- Понимать, как происходит формирование render tree и как браузеры применяют CSS.
- Разбираться, как браузеры рассчитывают геометрию страницы.
- Понимать, как изменения различных CSS свойств влияют на компоновку страницы.
- Разбираться, как происходит отрисовка страницы.
- Понимать особенности исполнения скриптов при анализе документа.
Неделя 10. Фотошоп и графика
Вы научитесь работать с изображениями и графикой. Узнаете о цветовых моделях, форматах изображений в вебе и способах их оптимизации. Итоговая практическая работа — сверстать с нуля макет.
Чему я научусь?
- Разбираться в какие видах графических изображений, которые используются в веб.
- Использовать основные цветовые модели в разработке.
- Знать про растровый и векторный форматы изображений, про их особенности.
- Понимать, в каких случаях лучше использовать растровый или векторный форматы изображений.
- Отличать два основных вида оптимизации изображений.
- Применять соответствующие инструменты для оптимизации изображений.
- Использовать основные инструменты при работе с макетом.
- Вставлять изображения при помощи HTML и CSS.
- Создавать градиентные переходы цветов в CSS.
- Применять спрайты.
Формат обучения: онлайн курс
- Лекции
- Практика
- Подборки дополнительных материалов
- Код ревью
- Сопровождение наставником
На кого рассчитан курс?
Курс подойдет всем, кто изучает разработку веб-сервисов с нуля. Стартовые требования простые: умение пользоваться браузером и готовность изучать дополнительные материалы и документацию.
Преподаватели курса
Артем Кувалдин
JavaScript
JavaScript — единственный язык программирования, который поддерживается всеми браузерами. Его знает любой веб-разработчик. Если вы собираетесь изучать JavaScript, этот курс — отличное начало.
Вы освоите синтаксис JavaScript, его особенности и сложные моменты. Отдельное внимание в курсе мы уделили следующим темам: прототипы, конструкторы, асинхронный код, Node.js и DOM.
Программа курса JavaScript
Неделя 1. Основы языка JavaScript
Вы узнаете о предпосылках появления JavaScript и его истории, ознакомитесь с основными типами данных. Настроите окружение и напишите ваши первые программы.
Чему я научусь?
- Понимать причинно-следственные связи существования языковых конструкций в JavaScript.
- Разбираться в переменных и константах и правилах/соглашениях их именования.
- Понимать основные типы данных. Читать, понимать и писать элементарные программы на языке JavaScript.
- Использовать несколько видов комментариев, понимать различия между ними.
- Применять арифметические и логические операторы языка, понимать их приоритеты. Рационально использовать несколько видов условных операторов.
- Понимать, что такое строгий режим и режим совместимости, и использовать его.
- Запускать код на JavaScript в браузере и с помощью Node.js.
Неделя 2. Типы данных
На этой неделе вы продолжите изучать типы данных, поговорим о более сложных — строках, массивах, объектах, функциях. В лекциях мы постарались продемонстрировать теорию на примерах и подготовили три задачи, которые помогут закрепить изученный материал.
Чему я научусь?
- Использовать несколько способов объявления строк, работать с их методами.
- Разбираться в способах объявления массивов и уметь итерироваться по массиву.
- Создавать и изменять объекты. Итерироваться по ключам объекта, использовать его методы.
- Понимать, как передавать функции в качестве аргумента.
Неделя 3. Типы данных. Продолжение
На третьей неделе курса рассмотрим нюансы работы с объектами. Познакомимся с обработкой исключений: реакцией программы на возможные проблемы, которые приводят к невозможности или бессмысленности дальнейшей работы вашей программы. В конце недели — очередная задача, с которой вы научитесь организовывать цепочки вызовов функций в JavaScript.
Чему я научусь?
- Использовать свойства через методы объекта.
- Отлавливать неконтролируемые исключения.
- Понимать устройство работы try...catch.
- Использовать операторы эквивалентности и сравнения, операторы взятия значения, приведения к строке.
- Работать с оператором объявления полей объекта и его свойствами.
- Использовать встроенные объекты Data и Math.
- Понимать способы объявления регулярных выражений в языке JavaScript.
- Производить поиск и замену по регулярным выражениям.
Неделя 4. Функции
JavaScript — выразительный язык, который имеет свои особенности. Работа с функциями, такие понятия как всплытие и замыкание переменных зачастую приводят в замешательство новичков. На этой неделе разберемся с этими тонкостями. А в качестве практической задачи вас ждет работа с коллекцией однотипных объектов.
Чему я научусь?
- Производить рекурсивный вызов.
- Понимать особенности и недостатки нескольких способов работы с аргументами.
- Работать со свойством функции arguments.
- Объявлять функции несколькими способами.
- Создавать области видимости с помощью функций.
- Понимать механизм всплытия переменных.
- Уметь создавать модули.
- Понимать механизм замыкания.
Неделя 5. Контекст исполнения
С понятием контекста исполнения в JavaScript связано ключевое слово this. Это мощный инструмент, но разобраться в нем непросто. Заключительная неделя курса будет интересна не только новичкам, но и программистам, которые хотят освежить этот аспект в памяти. В качестве практического задания — создание библиотеки, позволяющей подписываться на события и получать по ним уведомления.
Чему я научусь?
- Понимать сходства и различия this в разных языках программирования.
- Понимать, чему будет равен this на различных участках кода.
- Понимать, чему будет равен this в зависимости от того, как вызван код: вызов функции, вызов метода, заимствование метода, конструктор.
- Изменять контекст использования методов функций call, bind, apply.
- Использовать замыкания для сохранения текстов.
- Понимать влияние строгого режима на контекст исполнения.
- Разбираться, как определяется контекст при использовании оператора eval.
Неделя 6. Прототипы
Чему я научусь?
- Понимать, как работает механизм прототипов в языке и какие задачи он решает.
- Разбираться в прототипах по умолчанию для объектов разных типов в языке.
- Связывать объекты с прототипами тремя разными способами. Понимать преимущества и недостатки каждого из них.
- Понимать, как работают поля, помеченные как неизменяемые в прототипах.
- Понимать, как работают сеттеры и геттеры в прототипах.
Неделя 7. Конструкторы
Чему я научусь?
- Создавать конструкторы объектов.
- Создавать объекты при помощи конструкторов.
- Автоматически привязывать прототипы к создаваемым объектам.
- Автоматически встраивать объекты в цепочки прототипов при создании.
- Инспектировать связи между объектами и прототипами, используя методы isPrototypeOf и getPrototypeOf.
- Инспектировать связи между объектами и конструкторами, используя оператор instanceof.
- Создавать объекты при помощи метода create.
- Создавать простые «классы» и конструировать объекты с их помощью.
Неделя 8. Асинхронный код
Чему я научусь?
- Разбираться, что такое очередь событий и стек вызовов в JavaScript.
- Понимать, как системные таймеры взаимодействуют с очередью событий.
- Понимать, что такое блокирующие операции и как ведет себя асинхронный код с блокирующими операциями.
- Использовать функции setInterval и setTimeout по назначению.
- Работать с файловыми системами через синхронные и асинхронные функции.
- Разбираться в способах организации асинхронного года. Понимать их достоинства и недостатки.
- Объявлять и применять промисы.
- Объединять несколько промисов в цепочку.
Неделя 9. Node.js
Чему я научусь?
- Понимать в общих чертах как устроена платформа Node.js.
- Понимать, что такое модуль в контексте платформы.
- Создавать простой модуль.
- Использовать пакетный менеджер npm для установки зависимостей.
- Писать файл-манифест package.json к модулю для фиксирования зависимостей.
- Создавать простой http-сервер.
- Создавать простой http-клиент.
- Работать с файлами.
Неделя 10. DOM
Чему я научусь?
- Понимать, что такое DOM.
- Искать элементы DOM дерева и осуществлять обход по ним.
- Управлять атрибутами и свойствами элементов.
- Обрабатывать DOM события несколькими способами. Понимать их достоинства и недостатки.
Формат обучения: онлайн курс
- Лекции
- Практика
- Подборки дополнительных материалов
- Код ревью
- Сопровождение наставником
На кого рассчитан курс?
В первую очередь курс предназначен будущим фронтендерам, но знать основы JavaScript не помешает любому разработчику и просто человеку, увлекающемуся программированием. Обратите внимание: будет сложно учиться, если на старте вы совсем не владеете основами программирования на примере любого объектно ориентированного или функционального языка.
Преподаватели курса
Денис Чистяков
Сергей Жигалов
Антон Конев
Преимущества программы курса
- Авторы курса практикующие фронтенд-разработчики Яндекса
- Код ревью: все домашние задания проверяет наставник
- Дистанционное онлайн-обучение основам разработки интерфейсов, изучение 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».
24 000 ₽
Стоимость курса «Основы HTML и CSS»
24 000 ₽
Стоимость курса «JavaScript»
38 400 ₽
-17%
Стоимость программы обучения
HTML и CSS
24 000 ₽
стоимость курса
Отлично!
Мы скоро свяжемся с вами,
чтобы уточнить детали.
JavaScript
24 000 ₽
стоимость курса
