Александр Першин, Николай Громов, Алексей Симоненк - Интенсивный онлайн-курс 'Базовый HTML и CSS'

HTML Academy | Интенсивный онлайн-курс 'Базовый HTML и CSS' (2016) PCRec [H.264]

Год выпуска: 2016
Производитель: HTML Academy
производителя: htmlacademy/intensive/htmlcss
Автор: Александр Першин, Николай Громов, Алексей Симоненк
Продолжительность: 18:37:38
Тип раздаваемого материала: Видеоурок
Язык: Русский
Описание: Интенсив 'Базовый HTML и CSS' это профессиональный курс, построенный на базе платформы HTML Academy. Вести его будут практикующие преподаватели с десятилетним опытом веб-разработки.
Курс подойдёт для тех, кто делает свои первые шаги и тех, кто считает себя начинающим верстальщиком. Также, если ваши знания не систематизированы, он подойдёт и вам.
Через месяц вы научитесь:
- Создавать современные веб-интерфейсы;
- Эффективно решать типовые задачи верстальщика;
- Начать карьеру с готовым портфолио.
Интенсив разделён на пять частей: 'разметка', 'графика', 'сетки', 'оформление' и 'оптимизация'. Вас ожидает 700 интерактивных заданий, 18 часов живых вебинаров, 5 качественных макетов дизайна и общение с личным наставником, который будет делиться секретами мастерства.

Содержание

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

1. Что на самом деле происходит, когда вы вводите в браузере адрес а и нажимаете Enter?
-IP-адрес, сервер и веб-сервер, 'виртуалхосты'.
-Доменные имена, URL-aдреса и система DNS.
-Загрузка и 'сборка' веб-страницы, TCP/IP, HTTP.
-Приёмы оптимизации веб-страниц.

2. Инструменты веб-разработчика и рабочий процесс на интенсиве.
-Системы контроля версий. Git и GitHub.
-Инструменты вёрстки: редакторы кода, инспекторы, полезные веб-сервисы.
-Немного о браузерах, браузерных движках и различиях между ними.

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

1. Введение в HTML и CSS.
-Синтаксис HTML.
-Структура простейшего HTML-документа.
-Синтаксис CSS. Базовые CSS-селекторы.
-Наследование, каскадность и приоритеты в CSS.

2. Качественная разметка и стили кодирования.
-Простая, понятная, читабельная и логичная разметка: примеры и антипримеры.
-Типовые ошибки разметки: ' или кнопка', 'картинка или фон' и другие.
-Модульность разметки или использование 'пространств имён'.
-Когда использовать 'article', 'section' и 'div'?
-Зачем нужен стиль кодирования? Обзор популярных стайлгайдов.

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

3. Фотошоп для верстальщика
Разберём всё необходимое для работы верстальщика в фотошопе. Подготовим графику для проектов.

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

2. Обзор форматов графики в вебе.
-PNG, JPEG, SVG, GIF.
-Как выбрать подходящий формат?

3. Разбор графических макетов проектов.

4. Сетки
Разберёмся с блочной моделью документа. Создадим сетки страниц учебного и личного проектов.

1. Поток документа и блочная модель документа.
-Понятие сетки и потока документа.
-Блочные и строчные элементы и их особенности.
-Свойства блочной модели: размеры, рамки и отступы.
-Тонкости блочной модели: 'схлопывание' и 'выпадание' внешних отступов, width: 100% и width: auto, свойство box-sizing и другие.

2. Как управлять потоком и строить сетки?
-Свойство display. Управление типом элементов.
-Свойство float и его особенности.
-Построение сеток на 'плавающих' элементах.
-Блочно-строчные элементы и их особенности, борьба с пробелами между блочно-строчными элементами.
-Построение сеток на блочно-строчных элементах.

3. Создаём сетку главной страницы учебного проекта, экспериментируем с 'карточными' элементами интерфейса на блочно-строчных элементах.

5. Декоративные элементы
Познакомимся с приёмами создания декоративных элементов. Завершим вёрстку главных страниц учебного и личного проектов.

1. Позиционирование.
-Относительное позиционирование.
-Абсолютное позиционирование: координаты, изменение точки начала координат, относительные координаты и размеры, координаты по умолчанию.
-Фиксированное позиционирование.
-Управление порядком слоёв.

2. Другие важные приёмы.
-Псевдоэлементы.
-Спрайты.
-normalize.css.
-Подключение нестандартных шрифтов.

3. Завершаем вёрстку главной страницы учебного проекта.

6. Оформление контента
Завершим вёрстку внутренних страниц и подготовим проекты к публикации. Начнём готовиться к защите личного проекта.

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

2. Разбираем типовые случаи переполнения и способы борьбы с ними.

3. Готовим проект к защите. Подробный разбор критериев защиты выпускных проектов.

7. Введение в JavaScript
Познакомимся с JavaScript, узнаем что такое Vanilla JS и оживим некоторые блоки вёрстки.

1. Язык программирования JavaScript.
-Роль программирования в жизни верстальщика.
-Что такое DOM и зачем нам объект document.
-Зачем нужен объект window.

2. Типовые случаи использования JavaScript.
-Как найти любой элемент на странице.
-Как реагировать на события, происходящие на странице.
-Как менять CSS-стили у элементов.
-Как использовать анимацию на странице.

3. Оживляем всплывающее окно и вставляем интерактивную карту на главной странице учебного проекта.

8. Прогрессивное улучшение
Узнаем, как использовать новые возможности HTML и CSS, не ломая работоспособность вёрстки.

1. Знакомство с прогрессивным улучшением и постепенной деградацией.
-'Житейские' примеры двух подходов.
-Этапы прогрессивного улучшения.
-Влияет ли прогрессивное улучшение на скорость и эффективность разработки?
-Как добавлять улучшения независимыми и цельными слоями.
-Прогрессивное улучшение и прокси-браузеры - друзья навсегда.

2. Вносим изменения в вёрстку учебного проекта с учётом прогрессивного улучшения.

3. Немного о минификации стилей и скриптов.

9. Финал

Файлы примеров: присутствуют
Формат видео: MP4
Видео: AVC/H.264, 1728x1080, ~781 - 1134 Kbps
Аудио: AAC, 2 ch, 235 Kbps, VBR
Доп. информация: Время : (до появления первых 3-5 )