Доступно

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

Тема в разделе "Курсы по программированию", создана пользователем hp4s, 15 фев 2021.

Тема найдена по тегам:
Цена:
14900р.
Взнос:
541р.

Список участников складчины:

1. hp4s
Тип: Стандартная складчина
Оцените эту складчину: /5,
  1. 15 фев 2021
    #1
    hp4s
    hp4s Организатор
    [HTML Academy] HTML и CSS. Профессиональная вёрстка сайтов. 7 сентября — 8 ноября 2020
    [​IMG]
    Курс разработан для тех, кто хочет сменить профессию и стать высокооплачиваемым профессионалом. Он подойдёт для работающих людей, у которых мало времени.

    Во время курса вы будете работать как настоящие верстальщики: поработаете с системой контроля версий в 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

    Финал

    Финальная лекция

    Поговорим о том, как прошёл курс и куда вам двигаться дальше.

    Результаты курса.
    • Статистика по студентам и проектам.
    • Сложности в процессе.
    Ваше место в профессии.
    • Что вы узнали в процессе.
    • Что вы уже можете делать.
    • Место на профессиональном пути.
    Куда двигаться дальше.
    • Варианты развития.
    • Профессии Академии.
    • Навыки и курсы.
    • Акселератор и Лига А.

     
    15 фев 2021