Создание веб-интерфейсов с помощью HTML и CSS. Продвинутый онлайн-интенсив: Курсы

Как проходит обучение

• Интенсив длится месяц и состоит из восьми разделов.
• В начале раздела проходит живая лекция-вебинар, где разбирается теория, необходимая для выполнения практических заданий. Вебинар проходит вживую, поэтому студенты могут задавать вопросы преподавателю.
• Каждый вебинар записывается, чтобы пропустившие вебинар студенты могли его посмотреть. Также запись используют для повторения материала.
• После вебинара студентам необходимо выполнить практические задания, а также сверстать определённые части учебных макетов. Выполнение заданий и вёрстку макетов студентам помогают делать персональные наставники.
• Персональные наставники не только помогают выполнять задания, но и проверяют результаты работы. То есть наставник является вашим личным преподавателем, который помогает вам весь месяц.
• К концу интенсива студентам необходимо полностью сверстать личные макеты.

Резюмируем

• Интенсив состоит из 8 разделов, по 2 раздела в неделю.
• Каждую неделю проходит 2 лекции-вебинара: по понедельникам и четвергам с 19:00 до 21:00.
• После лекции нужно выполнить практические задания и вёрстку учебных макетов.
• Персональный наставник помогает выполнять задания и вёрстку и проверяет результаты работы.
• Предусмотрен час персональных консультаций с наставником в неделю. Консультации обычно проводятся по скайпу.

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

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

Программа интенсива

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

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

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

Результат : Создан скелет проекта: структура папок и файлы-заготовки

Теория 

Вводная лекция про роль и место верстальщика в мире веб-технологий:

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

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

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

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

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

Практика 

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

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

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

Теория 

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

Практика 

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

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

Результат : Подготовлена графика макета, готово оформление текстовых элементов

Теория 

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

Практика 

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

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

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

Теория 

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

Практика 

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

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

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

Теория 

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

Практика 

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

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

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

Теория 

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

Практика 

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

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

Результат : Оживим некоторые блоки вёрстки с помощью JavaScript

Теория 

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

Практика 

• Для свёрстанных проектов добавим: динамическое открытие формы, интерактивную карту.

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

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

Теория 

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

Практика 

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