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

stclaus · 6 окт 2020

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

Неделя 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.

Применять спрайты.

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

Управлять атрибутами и свойствами элементов.

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