Месячный онлайн-интенсив «Создание веб-интерфейсов с помощью HTML и CSS» с 4 ноября по 2 декабря 201

Месячный онлайн-интенсив «Создание веб-интерфейсов с помощью HTML и CSS» с 4 ноября по 2 декабря 201

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

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

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

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

Что включает в себя интенсив

• 8 вебинаров длительностью 2 часа.
• 4 часа индивидуальных консультаций.
• Более 300 интерактивных практических заданий.
• Более 50 эксклюзивных заданий, подготовленных специально для интенсива.
• Новый интерактивный обучающий механизм «Полигон», в котором вы будете поэтапно разрабатывать свой сайт.
• Методические материалы: видеозаписи лекций, презентации, интерактивные пошаговые руководства.
• Отдельный форум для общения и взаимопомощи.
• Сертификат при успешном прохождении интенсива.

Продажник:

Спойлер: Программа курса:

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

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

1 раздел: вводный
Результат
Создан скелет проекта: структура папок и файлы-заготовки
Теория
Вводная лекция про роль и место верстальщика в мире веб-технологий:

• 
  
  
  • устройство веба, tcp/ip, dns, http, url-aдреса;
  • регистрация домена, выбор хостинга, настройка веб-сервера;
  • взаимодействие с другими специалистами.

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

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

Во второй части вебинара поговорим про основы HTML/CSS и вёрстки:

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

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

2 раздел: разметка
Результат
Готова базовая HTML-разметка страниц проекта
Теория

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

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

Создадим HTML-разметку учебного и личного проектов.

3 раздел: сетки
Результат
Готовы модульные сетки страниц проекта
Теория

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

Практика
Создадим несколько разнотиповых модульных сеток, например: «хедер/две колонки/футер», «хедер/три колонки/футер» и более сложные.

Создадим сетки главной и внутренней страниц учебного и личного проектов.

4 раздел: фотошоп, графика, стили текста
Результат
Готово оформление крупных блоков сетки и текстовых элементов
Теория

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

Практика
В Фотошопе произведем замеры размеров и отступов, определим параметры шрифтов, а также нарежем изображения.

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

5 раздел: декоративные элементы и мелкие детали
Результат
Завершенная вёрстка главной страницы проекта
Теория

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

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

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

6 раздел: оформление контента
Результат
Завершенная вёрстка внутренней страницы проекта
Теория

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

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

Создадим несколько таблиц и форм, и оформим их с помощью CSS. Затем создадим и оформим несколько сложных контентных элементов.

7 раздел: полировка и оптимизация
Результат
Полностью завершенная, оптимизировання и «доведённая до блеска» вёрстка проекта
Теория

• 
  
  
  • Критерии качества вёрстки, как отличить мастера от новичка.
  • Приёмы и подходы к улучшению вёрстки, лучшие практики (normalize.css, прогрессивное улучшение и другие).
  • Новые возможности HTML5+CSS3 и их правильное применение.

Практика
Рассмотрим свёрстанные проекты с точки зрения критериев качества и прогрессивного улучшения, затем внесём правки и улучшим их.

Усовершенствуем проекты с помощью HTML5+CSS3.

8 раздел: куда расти дальше?
Результат
Тема для WordPress, созданная из вёрстки проекта, а также несколько скриптов. Выложенный в интернете личный проект.
Теория

• 
  
  
  • JavaScript и JQuery, написание простейших скриптов.
  • Краткое описание WordPress, подготовка темы для WP и её «натяжка».
  • Как выложить сайт в интернет?
  • Куда развиваться дальше?

Практика
Напишем несколько скриптов и выложим сверстанный сайт в интернет.