Программирование [HTML Academy] Профессиональный онлайн‑курс HTML и CSS, уровень 1 (2020)

[Stokrat]

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

• Разметка
• Работа с графикой
• Сетки
• Декоративные элементы
• Оформление контента

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


Как проходит курс. Организационные вопросы.

• Обзор личных проектов.
• Как работать с наставником.
• Критерии качества вёрстки.
• Защита личного проекта и получение сертификата.

Что на самом деле происходит, когда вы вводите в браузере адрес сайта и нажимаете Enter?

• IP-адрес, сервер и веб-сервер, «виртуальные хосты».
• Доменные имена, URL-адреса и система DNS.
• Загрузка и «сборка» веб-страницы.
• Особенности HTTP и HTTPS. Протоколы HTTP/1.1 и HTTP/2.
• Приёмы оптимизации веб-страниц.

Инструменты веб-разработчика и рабочий процесс на интенсиве.

• Системы контроля версий.
• Инструменты вёрстки: редакторы кода, инспекторы, полезные веб-сервисы.
• Немного о браузерах, браузерных движках и различиях между ними.

Введение в HTML.

• Синтаксис HTML, типы HTML-тегов.
• Структура простейшего HTML-документа.
• Как работать со спецификацией HTML.
• Обзор HTML-тегов из личных проектов.

Качественная разметка и стили кодирования.

• Простая, понятная, читабельная и логичная разметка: примеры и антипримеры.
• Типовые ошибки разметки: «ссылка или кнопка», «картинка или фон» и другие.
• Модульность разметки или использование «пространств имён».
• Когда использовать <article>, <section> и <div>?
• Кодгайды для разметки.
• Алгоритмы создания разметки: «страница как документ», «страница как приложение», «дивянка».

Создаём разметку главной страницы учебного проекта.



Обзор основных графических редакторов и инструментов для работы с макетами: Adobe Photoshop, Sketch, Zeplin, Avocode.

Типовые задачи верстальщика в графических редакторах.

• Настройка интерфейса.
• Работа со слоями, типы слоёв.
• Получение параметров текста.
• Измерение размеров блоков, отступов, получение информации о цвете.
• Получение параметров сложных декоративных эффектов: тени, градиенты и прочее.
• Экспорт графики, работа с повторяющимися паттернами.

Обзор форматов графики в вебе.

• Растровая графика — PNG, JPEG, GIF.
• Векторная графика — SVG.
• Как выбрать подходящий формат?
• Оптимизация графики.

Разбор графических макетов проектов.

Интерфейсы — не картинки.

• Какие есть слои интерфейса, кроме графики.
• Зачем нужные интерактивные элементы.
• Неочевидное использование интерфейсов.

Понятие доступности.

• Что мешает пользоваться интерфейсами.
• Ежедневные ситуации недоступности.
• Физиологические и ментальные особенности.

Взаимодействие с клавиатуры.

• Интерфейсы без указателя.
• Зачем нужен фокус на элементах.
• Как сделать элементы интерактивными.

Значимые элементы.

• Зачем семантика и как не подхватить диватоз.
• Почему не нужно переделывать элементы.
• Кнопки и ссылки, в чём разница?

Лейблы элементов.

• Кому нужны описания элементов.
• Разбор ошибок в реальных интерфейсах.
• Инспекторы доступности и скринридеры.

Введение в CSS.

• Синтаксис CSS.
• CSS-селекторы, псевдоклассы и псевдоэлементы.
• Наследование, каскадность и приоритеты в CSS.
• Единицы измерения в CSS: абсолютные, относительные, для управления цветом.
• CSS-функции и директивы.

Практика стилизации.

• Зачем нужна нормализация.
• Пространства имён и независимые компоненты.
• Стили кодирования для CSS.
• Работа с нестандартными шрифтами.
• Стилизация состояний интерактивных элементов.

Начинаем стилизацию главной страницы учебного проекта.

Задаём глобальные стили документа, описываем текстовые параметры элементов и состояния интерактивных элементов.

Поток документа и блочная модель документа.

• Понятие сетки и потока документа.
• Блочные и строчные боксы и их особенности.
• Свойства блочной модели: размеры, рамки и отступы.
• Тонкости блочной модели: «схлопывание» и «выпадание» внешних отступов, width: 100% и width: auto, свойство box-sizing и другие.
• Свойство display. Управление типом боксов.

Создание сеток на флексбоксах.

• Введение во флексбокс.
• Флекс-контейнер, флекс-элементы, флекс-оси.
• Алгоритм расчёта размеров флекс-элементов.
• Выравнивание и распределение флекс-элементов вдоль осей.
• Однострочный и многострочный флекс-контейнер, управление флекс-рядами.
• Особенности флексбоксов при создании сеток.

Создаём сетку главной страницы учебного проекта.



Позиционирование.

• Относительное позиционирование.
• Абсолютное позиционирование: координаты, изменение точки начала координат, относительные координаты и размеры, координаты по умолчанию.
• Фиксированное позиционирование.
• Управление порядком слоёв.

Приёмы создания элементов интерфейса.

• Блочно-строчные боксы и их особенности.
• Борьба с пробелами между блочно-строчными боксами.
• Особенности флексбоксов при создании элементов интерфейсов.
• Типовой приём «псевдоэлемент с абсолютным позиционированием».
• Использование CSS-графики для создания декоративных элементов.

Завершаем вёрстку главной страницы учебного проекта.



Практикуемся в вёрстке элементов содержимого.

• Сверстаем текстовую страницу учебного проекта. Подготовим универсальные стили содержания, которые будут хорошо работать при наполнении страницы из CMS.
• Сверстаем всплывающие окна с формой входа и интерактивной картой. Разберём приёмы стилизации нестандартных элементов форм.
• Подготовим свёрстанный учебный макет к публикации или передаче заказчику.

Разбираем типовые случаи переполнения и способы борьбы с ними.

Готовим проект к предзащите и защите. Разбор критериев защиты выпускных проектов.

Язык программирования JavaScript.

• Роль программирования в жизни верстальщика.
• Что такое DOM и зачем нам объект document.
• Зачем нужен объект window.

Типовые случаи использования JavaScript.

• Как найти любой элемент на странице.
• Как реагировать на события, происходящие на странице.
• Как менять CSS-стили у элементов.
• Как использовать анимацию на странице.

Оживляем всплывающее окно и вставляем интерактивную карту на главной странице учебного проекта.



Совместимая вёрстка.

• Прогрессивное улучшение.
• Постепенная деградация.
• Цена совместимости.
• Независимые слои улучшения.

Реальное тестирование.

• Многообразие браузеров и устройств.
• Инспекторы, эмуляторы, виртуальные машины.
• Слабые устройства и медленные сети.
• Минификация, сжатие, оптимизация.
• Эмпатия, приоритеты, сначала контент.

Корневые технологии.

• Веб-стандарты и фантазийные велосипеды.
• Ваниль против библиотек и фреймворков.
• Мода, хайп, вечное и светлое.

Развитие в профессии.

• Как не потерять актуальность знаний.
• Обмен знаниями, события, выступления.
• Пограничные дисциплины.

Скачать

Для просмотра скрытого содержимого вы должны войти или зарегистрироваться.