Первый шаг на пути к веб разработке
Чему вы научитесь
Как от дизайна или идеи прийти к верной структуре кода
Как правильную структуру наполнить верными тегами
Как верным тегам написать правильные стили
Как писать стили удобно и быстро
Как писать стили с учётом адаптивности и кроссбраузерности
Как организовать файлы проекта
Как все знания связать вместе и использовать в работе
Требования
Нет
Описание
Курс создан на основе нескольких десятков онлайн групп по обучению на тему веб вёрстки.
Финальный результат: ясное понимание и уверенность в вёрстке. Это фундамент, на котором может строиться дальнейший путь в области веб-разработки.
В 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
О преподавателе
Gleb Chubarenko
web-developer
Обучаю веб-разработке с 2015 года.
Стараюсь совместить проектный подход к обучению Уильяма Килпатрика, идеи Е. Умрюхина и свои собственные наработки в области преподавания и тренировки навыков.
Для обучения не важно, что ты умеешь, где работал и что сделал, если ты не можешь передать свои навыки другим. Большинство первоклассных разработчиков не могут. Я не первоклассный разработчик
Если всё же кому-то интересна профессиональная биография:
Начал в 2010 году как фриланс разработчик. За 4 года сделал 7 крупных проектов и около 100 мелких на cms WordPress.
В 2014 году присоединился к команде для работы над проектами компании: 15 сайтов на системах WordPress и Drupal. Поддерживал ряд магазинов на Drupal, где разрабатывал новый функционал, исправлял ошибки и подбирал разработчиков.
Сейчас в команде крупного, в своей нише, проекта на щедро переписанной cms wordpress.
Соучредитель компании по веб-разработке и онлайн маркетингу.
Чему вы научитесь
Как от дизайна или идеи прийти к верной структуре кода
Как правильную структуру наполнить верными тегами
Как верным тегам написать правильные стили
Как писать стили удобно и быстро
Как писать стили с учётом адаптивности и кроссбраузерности
Как организовать файлы проекта
Как все знания связать вместе и использовать в работе
Требования
Нет
Описание
Курс создан на основе нескольких десятков онлайн групп по обучению на тему веб вёрстки.
Финальный результат: ясное понимание и уверенность в вёрстке. Это фундамент, на котором может строиться дальнейший путь в области веб-разработки.
В 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
О преподавателе
Gleb Chubarenko
web-developer
Обучаю веб-разработке с 2015 года.
Стараюсь совместить проектный подход к обучению Уильяма Килпатрика, идеи Е. Умрюхина и свои собственные наработки в области преподавания и тренировки навыков.
Для обучения не важно, что ты умеешь, где работал и что сделал, если ты не можешь передать свои навыки другим. Большинство первоклассных разработчиков не могут. Я не первоклассный разработчик
Если всё же кому-то интересна профессиональная биография:
Начал в 2010 году как фриланс разработчик. За 4 года сделал 7 крупных проектов и около 100 мелких на cms WordPress.
В 2014 году присоединился к команде для работы над проектами компании: 15 сайтов на системах WordPress и Drupal. Поддерживал ряд магазинов на Drupal, где разрабатывал новый функционал, исправлял ошибки и подбирал разработчиков.
Сейчас в команде крупного, в своей нише, проекта на щедро переписанной cms wordpress.
Соучредитель компании по веб-разработке и онлайн маркетингу.
- люблю cms системы: Drupal, WordPress.
- конечно знаю html, css, препроцессоры, методологии
- частенько пишу на javascript
- иногда даже балуюсь React-ом
- никуда без PHP
- использую git, gulp, composer
- проверяю свою работу с помощью codeception
- организую трудовые будни внедряя scram, kanban, pomodoro, теорию ограничений
https://privatelink.de/?https://www.udemy.com/frontend/