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

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

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

Чтобы добиться такого качества обучения, мы используем профессиональную триаду «критерии-проекты-наставники»:

Проверкой ваших проектов на соответствие критериям качества занимаются наставники, которые являются профессиональными разработчиками.
Профессиональные критерии качества мы разрабатываем совместно с компаниями и профессиональным сообществом.
В течение обучения вы выполняете настоящие проекты.

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

Запись учебного потока с 18.01 по 21.03.2021.

Подходит ли вам этот курс

• Курс рассчитан на новичков. Для его прохождения достаточно завершить тренажёры по основам HTML и CSS.
• Объём заданий подобран так, чтобы даже занятые и работающие люди успевали выполнять их в срок, работая в комфортном режиме.
• Чтобы успешно пройти курс вам понадобится 10−15 часов в неделю или 1,5−2 часа в день. Занимайтесь равномерно в течение недели или погружайтесь в учёбу на выходных.
• Сроки итоговой защиты позволяют детально проработать обратную связь от проверяющего наставника и получить отлично выполненный личный проект.

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

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

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

Кто и как делает сайты.

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

Инструменты и процесс.

• Редакторы и инспекторы графики: 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
Оживление интерфейса

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

jаvascript в браузерах.

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

Интерактивные компоненты Барбершопа.

• Обзор требований технического задания учебного проекта.
• Подключение jаvascript-файлов на страницу.
• Настройка компонентов.

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

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

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

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

Ваше место в профессии.

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

Куда двигаться дальше.

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

Отзывы:

Юлия Забелина
Начинала проходить интерактивные курсы, чтобы скоротать свободное время на работе. В процессе поняла, что смена сферы деятельности не за горами. Интенсивного курса немного боялась, казалось, что будет намного труднее, чем просто проходить курсы, и я попросту не справлюсь. В итоге, всё оказалось намного проще, чем я ожидала.

Viacheslav Litvinov
Долго думал, стоит ли идти на курс. Читал отзывы смотрел комментарии, но после прохождения ни капли не пожалел. Курс очень хорош, придя на него неопытным новичком — выходишь с уверенностью в том, что можешь сверстать уже довольно хороший сайт.

Михаил Москвин
Курс просто бомба! В хорошем смысле этого слова. Даёт огромный вагон знаний, несмотря на то, что это только начальный курс. Да, он нелёгкий, да придётся потрудиться, но это стоит того. Были моменты, когда меня посещала мысль, бросить всё, но благодаря наставнику и уже части пройденного пути, отогнал эту мысль, взял себя в руки и сдал на 100%. В общем, курс — супер, рекомендую!

Андрей Деев
Очень благодарен Академии за интенсивный курс «HTML и CSS. Профессиональная вёрстка сайтов». Благодарен не только за полученные мной систематизированные знания, большое количество полезных статей, ссылок, материалов, но и за время, которое я сэкономил, отказавшись от самостоятельного изучения.

Александр Лёзов
Это был очень крутой месяц. Узнал много нового, прежняя информация, полученная в интерактивных курсах, разложилась по полочкам, чувствуешь себя не так растерянно, как до интенсивного курса. Удобная подача информации, записи лекций и индивидуальное планирование времени с наставником помогут успешно дойти до конца курса и сдать его, даже если у вас не так много свободного времени.