HTML Academy | Месячный онлайн-интенсив «Создание веб-интерфейсов с помощью HTML и CSS» (2015) PCRec

• Профессиональные навыки
  › Полученные навыки позволят вам эффективного решать типовые профессиональные задачи HTML-верстальщика. Вы научитесь создавать современные веб-интерфейсы, работать с живым кодом, использовать новейшие технологии.

• Старт карьеры
  › Полученный уровень подготовки позволит с лёгкостью начать работать HTML-верстальщиком или другим интернет-специалистом (прототипировщиком, интернет-маркетологом, контент-менеджером, SEO-специалистом).

• Повышение эффективности
  › Если вы уже работаете в смежной IT-области: менеджером проектов, интернет-маркетологом, веб-дизайнером, то полученные навыки позволят вам существенно повысить свою эффективность. Например, вы сможете быстрее и точнее оценивать сложность задач, самостоятельно создавать посадочные страницы и так далее.

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

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

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

1 раздел: вводный

• Вводная лекция про роль и место верстальщика в мире веб-технологий:
  › устройство веба, TCP/IP, DNS, HTTP, URL-aдреса;
  › регистрация домена, выбор хостинга, настройка веб-сервера;
  › взаимодействие с другими специалистами.

• Из лекции вы узнаете, что на самом деле происходит, когда вы:
  › вводите в браузере адрес сайта и открываете страницу;
  › регистрируете домен;
  › заказываете хостинг;
  › переносите сайт с хостинга на хостинг.

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

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

2 раздел: разметка

• Cтруктура простейшего HTML-документа, базовые теги, подключение внешних ресурсов (стилей и скриптов).
  
• Важнейшие теги для разметки содержания: текстовые теги, ссылки, изображения, контейнеры.
  
• CSS-селекторы.
  
• Наследование, каскадность и приоритеты в CSS.

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

3 раздел: фотошоп, графика, стили текста

• Фотошоп для верстальщика. Типовые задачи, которые выполняет верстальщик в фотошопе, и как это делать эффективно.
  
• Форматы изображений в веб.
  
• Работа с фонами.
  
• Оформление текстов с помощью CSS.

Практика: В Фотошопе произведём замеры размеров и отступов, определим параметры шрифтов, а также нарежем изображения. Используем полученные данные для создания CSS-стилей. Зададим фоны для крупных блоков, стили для текстовых элементов: заголовков, абзацев, ссылок и т.д.
Результат: Подготовлена графика макета, готово оформление текстовых элементов

4 раздел: сетки

• Блочная модель документа и поток документа.
  
• Тонкости блочной модели.
  
• Как управлять потоком документа?
  
• Приёмы построения сеток.

Практика: Создадим несколько разнотипных сеток, например: «шапка/две колонки/подвал», «шапка/три колонки/подвал» и более сложные. Создадим сетки главной и внутренней страниц учебного и личного проектов.
Результат: Готовы сетки страниц проекта

5 раздел: декоративные элементы и мелкие детали

• Позиционирование.
  
• Использование псевдоэлементов.
  
• Приёмы создания декоративных элементов.
  
• Создание и использование спрайтов.

Практика: Используя различные приёмы из лекции, дооформим мелкие декоративные элементы главной страницы.
Результат: Завершённая вёрстка главной страницы проекта.

6 раздел: оформление контента

• Таблицы и приёмы оформления таблиц.
  
• Формы и приёмы оформления форм.
  
• Оформление сложных элементов контента: списки, подписи к изображениям, сноски, галереи, списки товаров и т.д.

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

7 раздел: введение в JavaScript

• Введение JavaScript, написание простейших скриптов с помощью фреймворка VanillaJS

Практика: Для свёрстанных проектов добавим: динамическое открытие формы, интерактивную карту.
Результат: Оживим некоторые блоки вёрстки с помощью JavaScript

8 раздел: прогрессивное улучшение

• Прогрессивное улучшение.
  
• Критерии качества вёрстки, как отличить мастера от новичка.
  
• Базовая оптимизация.
  
• Подготовка к защите выпускного проекта.

Практика: Рассмотрим свёрстанные проекты с точки зрения критериев качества и прогрессивного улучшения, затем внесём правки и улучшим их. Оптимизируем подготовленные проекты.
Результат: Полностью завершённая, оптимизированная и «доведённая до блеска» вёрстка проекта.

После прохождения интенсива вы сможете верстать макеты подобного уровня сложности — клик-клик

Общее
Полное имя : D:\Загрузки\HTML academy — Месячный онлайн-интенсив по «HTML и CSS» апрель 2015 (№8)\1 — раздел вводный\8 интенсив, 1 раздел.mp4
Формат : MPEG-4
Профиль формата : Base Media / Version 2
Идентификатор кодека : mp42
Размер файла : 768 Мбайт
Продолжительность : 1 ч. 48 м.
Режим общего битрейта : Переменный
Общий поток : 993 Кбит/сек
Дата кодирования : UTC 2015-03-27 04:20:43
Дата пометки : UTC 2015-03-27 04:20:43

Видео
Идентификатор : 1
Формат : AVC
Формат/Информация : Advanced Video Codec
Профиль формата : High@L4
Параметр CABAC формата : Да
Параметр ReFrames формата : 4 кадра
Параметр GOP формата : M=4, N=90
Идентификатор кодека : avc1
Идентификатор кодека/Информация : Advanced Video Coding
Продолжительность : 1 ч. 48 м.
Битрейт : 753 Кбит/сек
Ширина : 1728 пикселей
Высота : 1080 пикселей
Соотношение сторон : 16:10
Режим частоты кадров : Постоянный
Частота кадров : 30,000 кадров/сек
Цветовое пространство : YUV
Субдискретизация насыщенности : 4:2:0
Битовая глубина : 8 бит
Тип развёртки : Прогрессивная
Бит/(Пиксели*Кадры) : 0.013
Размер потока : 583 Мбайт (76%)
Библиотека кодирования : x264 core 144 r11 40bb568
Дата кодирования : UTC 2015-03-27 04:20:43
Дата пометки : UTC 2015-03-27 04:20:43
Цветовой диапазон : Limited
Основные цвета : BT.709
Характеристики трансфера : BT.709
Коэффициенты матрицы : BT.709

Аудио
Идентификатор : 2
Формат : AAC
Формат/Информация : Advanced Audio Codec
Профиль формата : LC
Идентификатор кодека : 40
Продолжительность : 1 ч. 48 м.
Вид битрейта : Переменный
Битрейт : 235 Кбит/сек
Каналы : 2 канала
Расположение каналов : Front: L R
Частота : 48,0 КГц
Метод сжатия : С потерями
Размер потока : 182 Мбайт (24%)
Дата кодирования : UTC 2015-03-27 04:20:43
Дата пометки : UTC 2015-03-27 04:20:43