4.2 из 5
4.2
67 отзывов

Познавая вёрстку: HTML, CSS и кое что ещё

Первый шаг на пути к веб разработке
Автор курса:
Gleb Chubarenko
234 студента зачислены
Как от дизайна или идеи прийти к верной структуре кода
Как правильную структуру наполнить верными тегами
Как верным тегам написать правильные стили
Как писать стили удобно и быстро
Как писать стили с учётом адаптивности и кроссбраузерности
Как организовать файлы проекта
Как все знания связать вместе и использовать в работе

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

Финальный результат: ясное понимание и уверенность в вёрстке. Это фундамент, на котором может строиться дальнейший путь в области веб-разработки.

В 30-е годы прошлого столетия исследователь Альфред Коржибски сказал: ценно не само знание, ценно — структура знания.

Этот курс — попытка дать вам структуру знания html вёрстки. Не просто сказать о том, что куда писать, а объяснить, почему  это писать именно сюда или сюда.

Этот курс — попытка разбить умение вёрстки на совокупность мелких навыков и дать вам возможность их изучить и оттренировать.

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

Вам решать, на сколько у меня получилось 😉

Введение

1
О чём этот курс
2
Советы по обучению

Резюме.

Во время курса:

  • Слушайте не отвлекаясь

  • Повторяйте действия, которые видите на видео. Пишите такой же код.

  • Делайте все упражнения и тщательно проверяйте себя

После курса:

  • Повторите учебный проект по памяти

  • Придумайте собственную страницу и сверстайте её

3
Что такое страница сайта
4
Что такое тег
5
Анатомия тега
6
Страница изнутри

Верстка бегло на примере очень простой страницы

1
Списки
2
Инструменты разработчика
3
Особенности поведения некоторых тегов
4
Как привязать стили к странице
5
Как писать стили

Фундамент вёрстки

1
Структура html страницы
2
Разбиение страницы на блоки
3
Разбиение блоков на элементы
4
Группировка элементов
5
Советы по решению заданий
6
Задание 1

Сайт w3schools обновился. Прикрепил скриншот старого дизайна к уроку.

7
Задание 1 - решение
8
От разбиения к верстке условным тегом
9
Даём названия классам правильно

Применяем знания к тестовому проекту

1
Несколько популярных тегов
2
Меняем условный тег на нужный
3
Выпадающие спики
4
Таблицы
5
Задание 2
6
Задание 2 - разбор
7
Обзор пройденного

Основы стилей CSS

1
Правильное подключение стилей
2
Верстка макета для примера
3
Что такое CSS селекторы
4
Приоритет селекторов
5
Шпаргалка по стилям в виде mindmap
6
Отступы
7
Блоковая модель box model
8
Шрифты
9
Техника pixel perfect
10
Позиционирование элементов
11
Задание 3
12
Задание 3 - разбор
13
Обзор пройденного

Продвинутые техники

1
Препроцессоры и что это такое
2
Препроцессор scss и visual studio code
3
Методология на примере RSCSS
4
Понятие контекста

Создаем шапку тестового проекта

1
Верстка шапки
2
Подключение шрифтов
3
Стили для шапки - способ 1
4
Нормализация
5
Стили для шапки - способ 2, на флексбоксах
6
Добавляем кнопки соц сетей

Ещё один хороший сервис для кнопок шаринга: https://www.addtoany.com

Его плюс: можно использовать в письмах. Он просто вставляет изображения в виде ссылок и делает перенаправление на соц. сеть. Попробуйте этот сервис.

7
Пытаемся сделать pixel perfect для шапки
8
Цвета как переменные

Верстаем календари

1
Ограничиваем максимальную ширину сайта - создаём контейнер
2
Снова про выпадающие списки
3
Аналог функций в SASS
4
Приближаем календарь к pixel perfect
5
Ещё раз про таблицы (ньюансы)
6
Что такое псевдоклассы
7
Иконочные шрифты
8
Задание 4
9
Задание 4 - разбор

Адаптивность и кроссбраузерность

1
Введение в адаптивность
2
Выравнивание календарей
3
SASS и миксины
4
Префиксы для старых версий браузеров
5
Media запросы
6
Пару слов о bootstrap

Решаем популярные задачи

1
Стиль кодирования
2
Изображение в виде фона на всю ширину
3
Элементы формы
4
Методы отправки формы
5
Снова формы: fieldset и radio
6
Меняем стили для формы
7
О свойстве box-sizing
8
Варианты в методологии RSCSS
9
Варианты задания размеров
10
Анимация

Для создания сложной анимации, удобней использовать специальные сервисы.

На выходе вы получаете CSS код для использования.

11
Структура папок проекта
12
Ещё о кроссбраузерности
13
Оптимизация
14
Внезапно: баг в проекте
15
Комментарии в коде
16
Организация кода в разных файлах
17
HTML5

Нюансы, о которых надо знать

1
Бойцы невидимого фронта: мета теги
2
Ещё одни возможности для адаптивности: мета тег viewport
3
Последний штрих: фавикон
4
Бонус: навыки верстки
You can view and review the lecture materials indefinitely, like an on-demand channel.
Definitely! If you have an internet connection, courses on Udemy are available on any device at any time. If you don't have an internet connection, some instructors also let their students download course lectures. That's up to the instructor though, so make sure you get on their good side!
4.2
4.2 из 5
67 Рейтинги

Детальный Рейтинг

Звезды 5
42
Звезды 4
20
Звезды 3
4
Звезды 2
1
Звезды 1
0
9f1239ae250588fada10d7ca044d64dc
3-дневная гарантия возврата денег

Этот курс включает:

18 часов видео по запросу
Полный пожизненный доступ
Доступ с мобильного
Сертификат об окончании
Познавая вёрстку: HTML, CSS и кое что ещё
Цена:
0.23 ₽ 3,790 ₽
Layer 1