Что нового

Скачать курс: [HTML Academy] HTML и CSS. Профессиональная вёрстка сайтов. 7 сентября — 8 ноября 2020

Administrator
Команда форума
Регистрация
13.03.2019
Сообщения
34 318

Курс разработан для тех, кто хочет сменить профессию и стать высокооплачиваемым профессионалом. Он подойдёт для работающих людей, у которых мало времени.

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

Программа курса
Неделя 1
Раздел 1
Старт
Вводная лекция
Познакомимся с участниками и процессом на курсе, рассмотрим устройство веба и ваше место в профессии, подготовим инструменты для работы.

Как проходит курс.

Обзор личных проектов.
Техническое задание и критерии качества.
Структура курса.
Авторы, кураторы, наставники.
Работа с наставником.
Защита личного проекта.
Кто и как делает сайты.

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

Редакторы и инспекторы графики: Figma, Photoshop.
Редакторы кода, браузеры, отладчики.
Система контроля версий.
Процесс работы над проектом.




Продолжение описания
Раздел 2
Введение в HTML
Основы семантичной разметки
Проанализируем макет перед вёрсткой, узнаем синтаксис HTML и базовую структуру страницы, посмотрим как работает спецификация и разберём сложные случаи разметки.

Создание страниц по макету.

Анализ макета.
Структура проекта.
Синтаксис HTML

Парные и одиночные теги.
Вложенность и дерево документа.
Типы атрибутов.
Базовая структура страницы.

Метаданные и подключение ресурсов.
Контент страницы.
Теги для вывода и подключения.
Семантика и спецификации.

Стандарты и спецификации.
Категории тегов.
Разбор правил вкладывания.
Неочевидные сложности разметки.

Альтернативные средства просмотра.
Поисковики, скринридеры, режимы чтения.
Визуальное против смыслового.
Вторая неделя
Раздел 3
Введение в CSS
Основы современных стилей
Разделим макет на блоки, создадим структуру стилей, погрузимся в основы CSS, поработаем с типографикой и подключим шрифты.

Устройство и логические части макета.

Выделение блоков из макета.
Уникальные и повторяющиеся блоки.
Создание переменных для цветов.
Файлы и структура для блоков.

Создание отдельных файлов для блоков.
Импорт глобальных и блочных стилей.
Подключение стилей на страницу.
Погружение в стили для блоков.

Разделение контента и интерфейса.
Именование классами и по тегам.
Селектор, блок правил, свойство-значение.
Сложные и простые селекторы.
Почему используются классы.
Наследование, каскад, специфичность

Какие свойства наследуются, какие нет.
Чем font-size отличается от background-color.
Каскадирование и специфичность.
Размеры и центрирование макета.

Измерение блоков в Figma.
Центрирование макета с помощью значения auto.
Шрифты.

Использование системных шрифтов.
Подключение шрифтов проекта.
Использование и настройка Google Fonts.
Использование шрифтов в стилях.
Раздел 4
Редакторы и инспекторы графики
Инструменты и форматы графики
Посмотрим, какие есть редакторы и инспекторы графики, изучим интерфейс Figma, разберёмся в форматах графики, научимся выбирать правильные, экспортировать и оптимизировать.

Отличия редактора от инспектора.

Обзор редакторов: Photoshop, Illustrator, Sketch, Figma.
Обзор инспекторов: Zeplin, Avocode.
Выбор подходящего инструмента.
Интерфейс Figma и работа с макетом.

Страницы, фреймы, слои, инспектор.
Параметры блоков: прозрачность, фон, тени, координаты.
Параметры текста: семейство, начертание, размер.
Форматы графики и принцип выбора.

Растровая, векторная и генерируемая графика.
Форматы GIF, JPEG, PNG, WebP и SVG.
Выбор формата по детализации изображения.
Настройки экспорта графики из Figma.
Оптимизация графики после экспорта.

Установка Squoosh и SVGOMG на десктоп.
Оптимальные настройки Squoosh и SVGOMG.
Пакетная оптимизация графики.
Файловая структура и указание путей.

Структура папок для хранения графики.
Пути к ресурсам на примере графики.
Третья неделя
Раздел 5
Сетки и раскладки
Введение в модульные сеткиПонедельник с 19:00 до 21:00Лектор: Вадим Макеев

Научимся понимать систему сеток и раскладку блоков, рассмотрим принципы работы Grid Layout и Flexible Boxes, научимся предусматривать переполнение сетки и разберёмся в блочной модели.

Модульная система и сетки.

Направляющие, колонки, строки и отступы.
Сетка как основа, но не строгое правило.
Спецификация Grid Layout и раскладка по сетке макета.

Устройство шаблонов: строки, колонки, линии, отступы.
Ручная и автоматическая раскладка.
Спецификация Box Alignment и выравнивание внутри сетки.
Спецификация Flexible Boxes и раскладка внутри блоков.

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

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

Устройство, типы и переключение блочной модели.
Явная и автоматическая ширина, центрирование.
Раздел 6
Декоративные и контентные элементы
Визуальное отображение элементов страницы

Поговорим о том, какими правилами оперирует дизайн при построении макетов. Рассмотрим состояния и позиционирование элементов на странице. Сделаем интерфейс устойчивым к переполнению.

Контентная и оформительская графика в вебе.

Отличия контентной и оформительской графики.
Вставка оформительской в стили и разметку.
Программируемая графика, уместное использование.
Визуальные правила и типографика.

Теория близости и оптическая компенсация.
Типографика и характеристики текста.
Интерактивность интерфейса.

Состояния и события элементов интерфейса.
Переходы, анимация, плавность интерфейса.
Раскладка контента: мультиколонки и флоаты.

Колонки для текста и блоков, перетекание и запреты.
Обтекание блоков текстом, схлопывание и клиаринг.
Переполнение контента.

Изменение числа элементов в списках.
Вставка картинок и видео.
Длинные и короткие слова, многострочность и переносы
Четвёртая неделя
Раздел 7
Доступность
Основы доступности интерфейсов
Поговорим про доступность, рассмотрим возможности улучшения удобства интерфейсов. Поработаем с инструментами проверки и отладки доступности.

Ситуации с неудобным интерфейсом, введение в доступность.

Неконтрастные цвета, подложки для текста.
Универсальный доступ, условия и физиология.
Альтернативные средства: поисковики, режимы чтения, скринридеры.
Доступность встроенных в HTML элементов.

Встроенные интерактивные элементы.
Ориентиры и навигация в скринридерах.
Способы взаимодействия с интерфейсом.

Мышь и ховер.
Клавиатура и фокус.
Клавиатура и голос.
Популярные паттерны интерфейса.

Кнопки-ссылки.
Радиокнопки, чекбоксы, селект.
Выпадающие меню, спойлеры.
Карусели, табы, модалки.
Подписи к интерактивным и контентным элементам.

Заголовки областей контента.
Подписи к контентным элементам: картинки, видео, фреймы.
Доступная инлайновая вставка SVG.
Формы и подписи к полям.
Добавление подписей в сложных случаях: заголовки, иконки.
Инструменты проверки и отладки доступности.

Дерево доступности в браузерных отладчиках.
Расширения для проверки доступности: aXe, Siteimprove.
Обзор скринридеров: VoiceOver, NVDA, JAWS.
Пятая неделя
Раздел 8
JavaScript в вёрстке
Основы JavaScrpipt
Поговорим о том, где применяется JavaScript, чем отличается DOM и HTML-дерево. Подключим и настроим JavaScript-компоненты.

Скрипты в веб-интерфейсах.

Встроенные в браузер виджеты.
Состояния интерфейса, зачем нужен JavaScript.
Плохая интерактивность на чистом CSS.
Примеры работы скриптов в интерфейсах.
Современная архитектура, SPA.
JavaScript в браузерах.

JavaScript-движки в браузерах и не только.
Отличия DOM и HTML-дерева.
Работа с DOM: поиск элементов и сохранение в переменных.
Создание функций, вызов и передача параметров.
Интерактивные компоненты Барбершопа.

Обзор требований технического задания учебного проекта.
Подключение JavaScript-файлов на страницу.
Настройка компонентов.
Девятая неделя
Раздел 9
Финал
Финальная лекция
Поговорим о том, как прошёл курс и куда вам двигаться дальше.

Результаты курса.

Статистика по студентам и проектам.
Сложности в процессе.
Ваше место в профессии.

Что вы узнали в процессе.
Что вы уже можете делать.
Место на профессиональном пути.
Куда двигаться дальше.

Варианты развития.
Профессии Академии.
Навыки и курсы.
Акселератор и Лига А.









Скрытый текст. Доступен только зарегистрированным пользователям.Нажмите, чтобы раскрыть...



 
 
Верх