Старт курса:
16 July 2019
Вт 18:30-20:30 и Сб 11:00-13:00
24 години
2 години / 2 рази в тиждень
Осталось мест:
4
2900 грн.
Front-end Core (HTML, CSS) Базовий курс верстки веб сторінок
Начало через:
д ч м с
Сложность:
Курс верстки від Телесенс Академії - це перший крок новачка в веб-технології. Курс націлений на вивчення інструментів для верстки веб-сторінок. В ході курсу ви будете працювати як справжній верстальник отримуючи теорію і практичний досвід. Вивчіть Git, основи роботи з фотошопом і аналогами. Дізнаєтеся HTML плюс основи CSS, які активно використовуються в веб-розробці. Навички, отримані після успішного проходження курсу, дозволять вам створювати адаптивні веб-сторінки.
подать заявку
о курсе
Программа курса
  • Инструменты вёрстки
    1. Редакторы кода, инспекторы, полезные веб-сервисы
    2. Системы контроля версий
    3. Настройка компьютера для работы
  • Введение в HTML
    1. Синтаксис HTML, типы HTML-тегов
    2. Структура простейшего HTML-документа
    3. Как работать со спецификацией HTML. W3S. HTMLBook
  • Качественная разметка и стили кодирования
    1. Логичная разметка: примеры и антипримеры
    2. Типовые ошибки разметки: «ссылка или кнопка», «картинка или фон» и другие
    3. Модульность разметки или использование «пространств имён»
    4. Кодгайды для разметки
  • Обзор основных графических редакторов
    1. Настройка интерфейса
    2. Работа со слоями, типы слоёв
    3. Получение параметров текста
    4. Измерение размеров блоков, отступов, получение информации о цвете
    5. Получение параметров сложных декоративных эффектов: тени, градиенты и прочее
  • Обзор форматов графики в вебе
    1. Растровая графика — PNG, JPEG, GIF
    2. Векторная графика — SVG
    3. Как выбрать подходящий формат?
    4. Оптимизация графики
  • Введение в CSS
    1. Синтаксис CSS
    2. CSS-селекторы, псевдоклассы и псевдоэлементы
    3. Наследование, каскадность и приоритеты в CSS
    4. Единицы измерения в CSS: абсолютные, относительные, для управления цветом
  • Поток и блочная модель документа
    1. Понятие сетки и потока документа
    2. Блочные и строчные элементы и их особенности
    3. Свойства блочной модели: размеры, рамки и отступы
    4. Тонкости блочной модели: «схлопывание» и «выпадание» внешних отступов, width: 100% и width: auto, свойство box-sizing и другие
    5. Свойство display. Управление типом элементов
  • Доступность и формы
    1. Удобные и доступные интерфейсы. Управление фокусом, важность семантики, тестирование и скринридеры
    2. Зачем нужные интерактивные элементы
    3. Неочевидное использование интерфейсов
    4. Понятие доступности
    5. Физиологические и ментальные особенности
    6. Взаимодействие с клавиатуры
    7. Зачем нужен фокус на элементах. Как сделать элементы интерактивными. Значимые элементы
    8. Зачем семантика
    9. Кнопки и ссылки, в чём разница? Лейблы элементов
    10. Зачем нужны описания элементов. Разбор ошибок в реальных интерфейсах
    11. Инспекторы доступности и скринридеры
  • Введение во флексбокс
    1. Создание сеток на флексбоксах
    2. Флекс-контейнер, флекс-элементы, флекс-оси.
    3. Алгоритм расчёта размеров флекс-элементов
    4. Выравнивание и распределение флекс-элементов вдоль осей.
    5. Однострочный и многострочный флекс-контейнер, управление флекс-рядами
    6. Особенности флексбоксов при создании сеток
  • Позиционирование
    1. Относительное позиционирование
    2. Абсолютное позиционирование: координаты, изменение точки начала координат, относительные координаты и размеры, координаты по умолчанию
    3. Фиксированное позиционирование
    4. Управление порядком слоёв. Приёмы создания элементов интерфейса
Преподаватель
Андрей
Красовский
Андрей Красовский 3,5 года занимается веб-разработкой. За это время работал в 3-х компаниях и участвовал в более чем 50 коммерческих проектах.
Постоянно посещает конференции и front-end meet-up.
Специалист в технологиях HTML, CSS, JS и фреймворках: Pug, Stylus, LESS , SASS, Angular, Backbone. Проходил практические тренинги по построению коммуникации с людьми и группой — благодаря чему доступно объясняет материал.