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

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

Спойлер: Основы 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

Неделя 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 дерева и осуществлять обход по ним.
• Управлять атрибутами и свойствами элементов.

Скрытая ссылка