[Udemy] Познавая вёрстку: HTML, CSS и кое что ещё (2018)

Автор: Udemy
Название: Познавая вёрстку: HTML, CSS и кое что ещё (2018)

• Как от дизайна или идеи прийти к верной структуре кода
• Как правильную структуру наполнить верными тегами
• Как верным тегам написать правильные стили
• Как писать стили удобно и быстро
• Как писать стили с учётом адаптивности и кроссбраузерности
• Как организовать файлы проекта
• Как все знания связать вместе и использовать в работе

• создан на основе нескольких десятков онлайн групп по обучению на тему веб вёрстки.
• Финальный результат: ясное понимание и уверенность в вёрстке. Это фундамент, на котором может строиться дальнейший путь в области веб-разработки.
• В 30-е годы прошлого столетия исследователь Альфред Коржибски сказал: ценно не само знание, ценно — структура знания.
• Этот курс — попытка дать вам структуру знания html вёрстки. Не просто сказать о том, что куда писать, а объяснить, почему это писать именно сюда или сюда.
• Этот курс — попытка разбить умение вёрстки на совокупность мелких навыков и дать вам возможность их изучить и оттренировать.
• Этот курс — попытка дать вам шаг, который вы можете пройти. Пройти и двигаться дальше, не оборачиваясь.
• Вам решать, на сколько у меня получилось.

• Кто решился начать познавать веб разработку
• Кто не до конца понял, что такоё веб вёрстка

• 88 лекций - 17:54:47
• Введение - 51:34
• О чём этот курс - 08:29
• Советы по обучению - 07:41
• Что такое страница сайта - 03:42
• Что такое тег - 11:45
• Анатомия тега - 05:37
• Страница изнутри - 14:20

• Списки - 09:20
• Инструменты разработчика - 02:15
• Особенности поведения некоторых тегов - 03:02
• Как привязать стили к странице - 06:47
• Как писать стили - 07:10

• Структура html страницы - 12:00
• Разбиение страницы на блоки - 22:22
• Разбиение блоков на элементы - 12:34
• Группировка элементов - 10:26
• Советы по решению заданий - 08:09
• Задание 1 - 01:02
• Задание 1 - решение - 12:12
• От разбиения к верстке условным тегом - 11:01
• Даём названия классам правильно - 19:13

• Несколько популярных тегов - 26:07
• Меняем условный тег на нужный - 07:18
• Выпадающие спики - 06:40
• Таблицы - 10:04
• Задание 2 - 01:54
• Задание 2 - разбор - 03:58
• Обзор пройденного - 07:12

• Правильное подключение стилей - 06:23
• Верстка макета для примера - 05:24
• Что такое CSS селекторы - 16:18
• Приоритет селекторов - 15:18
• Шпаргалка по стилям в виде mindmap - 17:07
• Отступы - 11:49
• Блоковая модель box model - 28:04
• Техника pixel perfect - 16:48
• Шрифты - 14:55
• Позиционирование элементов - 26:37
• Задание 3 - 00:45
• Задание 3 - разбор - 08:02
• Обзор пройденного - 13:04

• Препроцессоры и что это такое - 11:07
• Препроцессор scss и visual studio code - 12:53
• Методология на примере RSCSS - 19:28
• Понятие контекста - 03:32

• Верстка шапки - 18:50
• Подключение шрифтов - 11:34
• Стили для шапки - способ 1 - 14:49
• Нормализация - 03:05
• Стили для шапки - способ 2, на флексбоксах - 23:08
• Добавляем кнопки соц сетей - 06:06
• Пытаемся сделать pixel perfect для шапки - 13:06
• Цвета как переменные - 13:43

• Ограничиваем максимальную ширину сайта - создаём контейнер - 15:05
• Снова про выпадающие списки - 10:27
• Аналог функций в SASS - 20:09
• Приближаем календарь к pixel perfect - 16:39
• Ещё раз про таблицы (ньюансы) - 16:52
• Что такое псевдоклассы - 15:18
• Иконочные шрифты - 26:35
• Задание 4 - 06:26
• Задание 4 - разбор - 14:22

• Введение в адаптивность - 14:23
• Выравнивание календарей - 14:10
• SASS и миксины - 04:41
• Префиксы для старых версий браузеров - 06:25
• Media запросы - 16:01
• Пару слов о bootstrap - 05:50

• Стиль кодирования - 04:23
• Изображение в виде фона на всю ширину - 18:09
• Элементы формы - 14:26
• Методы отправки формы - 07:21
• Снова формы: fieldset и radio - 12:05
• Меняем стили для формы - 13:41
• О свойстве box-sizing - 08:55
• Варианты в методологии RSCSS - 07:03
• Варианты задания размеров - 13:43
• Анимация - 22:31
• Структура папок проекта - 04:58
• Ещё о кроссбраузерности - 19:39
• Оптимизация - 11:42
• Внезапно: баг в проекте - 16:45
• Комментарии в коде - 05:46
• Организация кода в разных файлах - 10:06
• HTML5 - 23:42

• Бойцы невидимого фронта: мета теги - 24:18
• Ещё одни возможности для адаптивности: мета тег viewport - 15:16
• Последний штрих: фавикон - 10:11
• Бонус: навыки верстки - 22:29