M
Moderator
Чему вы научитесь
Как от дизайна или идеи прийти к верной структуре кода
Как правильную структуру наполнить верными тегами
Как верным тегам написать правильные стили
Как писать стили удобно и быстро
Как писать стили с учётом адаптивности и кроссбраузерности
Как организовать файлы проекта
Как все знания связать вместе и использовать в работе
Требования
Нет
Описание
Курс создан на основе нескольких десятков онлайн групп по обучению на тему веб вёрстки.
Финальный результат: ясное понимание и уверенность в вёрстке. Это фундамент, на котором может строиться дальнейший путь в области веб-разработки.
В 30-е годы прошлого столетия исследователь Альфред Коржибски сказал: ценно не само знание, ценно — структура знания.
Этот курс — попытка дать вам структуру знания html вёрстки. Не просто сказать о том, что куда писать, а объяснить, почему это писать именно сюда или сюда.
Этот курс — попытка разбить умение вёрстки на совокупность мелких навыков и дать вам возможность их изучить и оттренировать.
Этот курс — попытка дать вам шаг, который вы можете пройти. Пройти и двигаться дальше, не оборачиваясь.
Вам решать, на сколько у меня получилось
Для кого этот курс?
Кто решился начать познавать веб разработку
Кто не до конца понял, что такоё веб вёрстка
Что входит в курс?
18 часов видео
88 лекций - 17:54:47
– Введение - 51:34
О чём этот курс - 08:29
Советы по обучению - 07:41
Что такое страница сайта - 03:42
Что такое тег - 11:45
Анатомия тега - 05:37
Страница изнутри - 14:20
– Верстка бегло на примере очень простой страницы - 28:34
Списки - 09:20
Инструменты разработчика - 02:15
Особенности поведения некоторых тегов - 03:02
Как привязать стили к странице - 06:47
Как писать стили - 07:10
– Фундамент вёрстки - 01:48:59
Структура html страницы - 12:00
Разбиение страницы на блоки - 22:22
Разбиение блоков на элементы - 12:34
Группировка элементов - 10:26
Советы по решению заданий - 08:09
Задание 1 - 01:02
Задание 1 - решение - 12:12
От разбиения к верстке условным тегом - 11:01
Даём названия классам правильно - 19:13
– Применяем знания к тестовому проекту - 01:03:13
Несколько популярных тегов - 26:07
Меняем условный тег на нужный - 07:18
Выпадающие спики - 06:40
Таблицы - 10:04
Задание 2 - 01:54
Задание 2 - разбор - 03:58
Обзор пройденного - 07:12
– Основы стилей CSS - 03:00:34
Правильное подключение стилей - 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
– Продвинутые техники - 47:00
Препроцессоры и что это такое - 11:07
Препроцессор scss и visual studio code - 12:53
Методология на примере RSCSS - 19:28
Понятие контекста - 03:32
– Создаем шапку тестового проекта - 01:44:21
Верстка шапки - 18:50
Подключение шрифтов - 11:34
Стили для шапки - способ 1 - 14:49
Нормализация - 03:05
Стили для шапки - способ 2, на флексбоксах - 23:08
Добавляем кнопки соц сетей - 06:06
Пытаемся сделать pixel perfect для шапки - 13:06
Цвета как переменные - 13:43
– Верстаем календари - 02:21:53
Ограничиваем максимальную ширину сайта - создаём контейнер - 15:05
Снова про выпадающие списки - 10:27
Аналог функций в SASS - 20:09
Приближаем календарь к pixel perfect - 16:39
Ещё раз про таблицы (ньюансы) - 16:52
Что такое псевдоклассы - 15:18
Иконочные шрифты - 26:35
Задание 4 - 06:26
Задание 4 - разбор - 14:22
– Адаптивность и кроссбраузерность - 01:01:30
Введение в адаптивность - 14:23
Выравнивание календарей - 14:10
SASS и миксины - 04:41
Префиксы для старых версий браузеров - 06:25
Media запросы - 16:01
Пару слов о bootstrap - 05:50
– Решаем популярные задачи - 03:34:55
Стиль кодирования - 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
– Нюансы, о которых надо знать - 01:12:14
Бойцы невидимого фронта: мета теги - 24:18
Ещё одни возможности для адаптивности: мета тег viewport - 15:16
Последний штрих: фавикон - 10:11
Бонус: навыки верстки - 22:29