Доступно

[HTML Academy] HTML и CSS. Профессиональная вёрстка сайтов [18 января — 21 марта 2021]

Тема в разделе "Курсы по программированию", создана пользователем pikylbkaNomer, 21 сен 2020.

Цена: 16400р.
Взнос: 798р.
100%

Основной список: 46 участников

Резервный список: 7 участников

Статус обсуждения:
Комментирование ограничено.
  1. 21 сен 2020
    #1
    Топикстартер
    Топикстартер ЧКЧлен клуба
    [HTML Academy] HTML и CSS. Профессиональная вёрстка сайтов [18 января — 21 марта 2021]

    [​IMG]

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

    Первая неделя

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

    Как проходит курс.
    • Обзор личных проектов.
    • Техническое задание и критерии качества.
    • Структура курса.
    • Авторы, кураторы, наставники.
    • Работа с наставником.
    • Защита личного проекта.
    Кто и как делает сайты.
    • Из чего состоит сайт в интернете: сервер, браузер, вёрстка.
    • Кто делает сайты: дизайн, вёрстка, бэкенд.
    • Ответственность верстальщика: удобство, доступность, перфоманс.
    Инструменты и процесс.
    • Редакторы и инспекторы графики: Figma, Photoshop.
    • Редакторы кода, браузеры, отладчики.
    • Система контроля версий.
    • Процесс работы над проектом.

    Раздел 2
    Разметка

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

    Создание страниц по макету.
    • Анализ макета.
    • Структура проекта.
    Синтаксис HTML
    • Парные и одиночные теги.
    • Вложенность и дерево документа.
    • Типы атрибутов.
    Базовая структура страницы.
    • Метаданные и подключение ресурсов.
    • Контент страницы.
    • Теги для вывода и подключения.
    Семантика и спецификации.
    • Стандарты и спецификации.
    • Категории тегов.
    • Разбор правил вкладывания

    Вторая неделя
    Раздел 3
    Стилизация

    Разделим макет на блоки, создадим структуру стилей, погрузимся в основы CSS, поработаем с типографикой и подключим шрифты.

    Устройство и логические части макета.
    • Выделение блоков из макета.
    • Уникальные и повторяющиеся блоки.
    • Создание переменных для цветов.
    Файлы и структура для блоков.
    • Подключение стилей на страницу.
    Погружение в стили для блоков.
    • Разделение контента и интерфейса.
    • Именование классами и по тегам.
    • Селектор, блок правил, свойство-значение.
    • Сложные и простые селекторы.
    • Почему используются классы.
    Наследование, каскад, специфичность
    • Какие свойства наследуются, какие нет.
    • Чем font-size отличается от background-color.
    • Каскадирование и специфичность.
    Размеры и центрирование макета.
    • Измерение блоков в Figma.
    Шрифты.
    • Использование системных шрифтов.
    • Подключение шрифтов проекта.
    • Использование и настройка Google Fonts.
    • Использование шрифтов в стилях.

    Раздел 4
    Графика

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

    Отличия редактора от инспектора.
    • Обзор редакторов: Photoshop, Illustrator, Sketch, Figma.
    • Обзор инспекторов: Zeplin, Avocode.
    • Выбор подходящего инструмента.
    Интерфейс Figma и работа с макетом.
    • Страницы, фреймы, слои, инспектор.
    • Параметры блоков: прозрачность, фон, тени, координаты.
    • Параметры текста: семейство, начертание, размер.
    Форматы графики и принцип выбора.
    • Растровая, векторная и генерируемая графика.
    • Форматы GIF, JPEG, PNG, WebP и SVG.
    • Выбор формата по детализации изображения.
    • Настройки экспорта графики из Figma.
    Оптимизация графики после экспорта.
    • Установка Squoosh и SVGOMG на десктоп.
    • Оптимальные настройки Squoosh и SVGOMG.
    • Пакетная оптимизация графики.
    Файловая структура и указание путей.
    • Структура папок для хранения графики.
    • Пути к ресурсам на примере графики.

    Третья неделя
    Раздел 5
    Сетки на гридах

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

    Модульная система и сетки.
    • Направляющие, колонки, строки и отступы.
    • Сетка как основа, но не строгое правило.
    Спецификация Grid Layout и раскладка по сетке макета.
    • Устройство шаблонов: строки, колонки, линии, отступы.
    • Ручная и автоматическая раскладка.
    • Спецификация Box Alignment и выравнивание внутри сетки.
    Блочная модель.
    • Устройство, типы и переключение блочной модели.
    • Явная и автоматическая ширина, центрирование.

    Раздел 6
    Сетки на флексах

    Научимся понимать систему сеток и раскладку блоков на примере Flexible Boxes. Научимся выбирать случаи, когда флексы подходят лучше гридов.

    Спецификация Flexible Boxes и раскладка внутри блоков.
    • Оси: основная, поперечная, направление.
    • Расположение на основной и поперечной оси.
    • Растяжение, сужение, базовый размер флексов.
    Флексы и гриды.
    • Особенности систем раскладки.
    • Ситуации, подходящие для гридов.
    • Ситуации, подходящие для флексов.
    • Совместное использование.

    Четвёртая неделя
    Раздел 7
    Декоративные элементы

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

    Контентная и оформительская графика в вебе.
    • Отличия контентной и оформительской графики.
    • Вставка оформительской в стили и разметку.
    • Программируемая графика, уместное использование.
    Визуальные правила и типографика.
    • Теория близости и оптическая компенсация.
    • Типографика и характеристики текста.
    Интерактивность интерфейса.
    • Состояния и события элементов интерфейса.
    • Переходы, анимация, плавность интерфейса.
    Раскладка контента: мультиколонки и флоаты.
    • Колонки для текста и блоков, перетекание и запреты.
    • Обтекание блоков текстом, схлопывание и клиаринг.
    Переполнение контента.
    • Изменение числа элементов в списках.
    • Вставка картинок и видео.
    • Длинные и короткие слова, многострочность и переносы.

    Пятая неделя
    Раздел 8
    Оформление контента

    Узнаем как стилизовать содержание внутренних страниц, которые наполняются из CMS. Начнём готовиться к защите личного проекта.

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


    Раздел 9
    Доступность и формы

    Поговорим про доступность, рассмотрим возможности улучшения удобства интерфейсов. Поработаем с инструментами проверки и отладки доступности.

    Ситуации с неудобным интерфейсом, введение в доступность.
    • Неконтрастные цвета, подложки для текста.
    • Универсальный доступ, условия и физиология.
    • Альтернативные средства: поисковики, режимы чтения, скринридеры.
    Доступность встроенных в HTML элементов.
    • Встроенные интерактивные элементы.
    • Ориентиры и навигация в скринридерах.
    Способы взаимодействия с интерфейсом.
    • Мышь и ховер.
    • Клавиатура и фокус.
    • Клавиатура и голос.
    Популярные паттерны интерфейса.
    • Кнопки-ссылки.
    • Радиокнопки, чекбоксы, селект.
    Подписи к интерактивным и контентным элементам.
    • Заголовки областей контента.
    • Подписи к контентным элементам: картинки, видео, фреймы.
    • Доступная инлайновая вставка SVG.
    • Формы и подписи к полям.
    • Добавление подписей в сложных случаях: заголовки, иконки.
    Инструменты проверки и отладки доступности.
    • Дерево доступности в браузерных отладчиках.
    • Расширения для проверки доступности: aXe, Siteimprove.
    • Демонстрация скринридера.

    Шестая неделя

    Раздел 10
    Оживление интерфейса

    Поговорим о том, где применяется JavaScript, чем отличается DOM и HTML-дерево. Подключим и настроим JavaScript-компоненты.

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

    Раздел 11
    Финал

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

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

    Продажник
     
    5 пользователям это понравилось.
  2. Последние события

    1. skladchik.com
      Складчина доступна.
      8 май 2021
    2. Nabster_01
      Nabster_01 участвует.
      7 май 2021
    3. mg59rus
      mg59rus не участвует.
      7 май 2021
    4. mg59rus
      mg59rus участвует.
      7 май 2021

    Последние важные события

    1. skladchik.com
      Складчина доступна.
      8 май 2021
    2. skladchik.com
      Взнос составляет 399р.
      30 апр 2021
    3. skladchik.com
      Складчина активна.
      30 апр 2021
    4. skladchik.com
      Сбор взносов начинается 30.04.2021.
      28 апр 2021
  3. Обсуждение
  4. 2 май 2021
    #2
    standArtKnight
    standArtKnight СкладчикСкладчик
    Добрый день.
    А когда материалы будут доступны?
     
  5. 5 май 2021
    #3
    second75
    second75 ДолжникДолжник
    CandyBoy нужно этот курс сначала получить.
     
Статус обсуждения:
Комментирование ограничено.

Поделиться этой страницей