[moscoding.ru] Основы Веб-разработки [Александр Патлух]

Складчина: [moscoding.ru] Основы Веб-разработки [Александр Патлух]

​

Онлайн-курс для тех, кто хочет с нуля научиться создавать современные сайты, которые хорошо смотрятся на любом устройстве. Cтуденты пройдут путь от семантического каркаса HTML-страницы и золотых правил позиционирования к адаптивной верстке и интерактивным фишкам на CSS.
​

Содержание курса:

• Верстка 9 веб-страниц
• Тесты на закрепление теории
• 55 уроков (от основ к адаптивному сайту)
• Проверка практических работ
• Ревью кода и комментарий от ментора
• Консультации и поддержка в чате курса
• Дополнительные материалы
• Сертификат об окончании курса

Пройдя курс Вы научитесь:

• Создавать веб-страницы в соответствии с макетом
• Понимать и изменять HTML и CSS код
• Выбирать и подключать кастомные шрифты
• Сохранять код на ресурсе GitHub
• Адаптировать сайт под разные устройства
• Анимировать любые элементы сайта
• Публиковать веб-страницы в открытом доступе

Спойлер: Программа курса

Браузер и документ:

• Браузер «под капотом»
• Дерево DOM
• Теги и атрибуты
• Семантическая разметка
• Практика: Профайл на Github + Boilerplate-код

HTML:

• Функциональные теги
• Классы
• Идентификаторы
• Практика: Построение каркаса

CSS:

• Назначение CSS
• CSS-синтаксис
• Типы селекторов
• Специфичность
• Наследование стилей
• Практика: Лендинг про любимого музыканта

Стили:

• Каскадность
• Наследование
• Сброс стилей
• Стили блоков, текста, шрифта
• Google Fonts
• Основы Figma
• Публикация в GitHub Pages
• Практика: Лендинг с хедером и футером

Элементы:

• Строчные элементы
• Блочные элементы
• Обтекание элементов
• Свойство display
• Псевдоклассы
• Псевдоэлементы
• Практика: Трехколоночный лендинг с кастомными шрифтами

Позиционирование:

• Порядок z-index
• Flow документа
• Типы позиционирования
• Margin & Padding
• Flex-сетка и колоночная верстка
• Свойства flex-items
• Практика: Полноценный лендинг на flexbox

Эффекты и анимация:

• Визуальная трансформация
• Масштаб и поворот
• Перенос и искажение
• Смена состояний
• Плавность переходов
• Псевдоклассы
• Практика: Анимация c keyframes

Адаптивность и Responsive:

• Относительные величины
• Размеры в процентах
• Единицы измерения vh vw, em rem
• Родительские значения
• Медиазапросы
• Практика: Лендинг с цитатами из Канье Веста и картинами Кехинде Вайли

Медиа:

• Аудио-элементы
• Встраивание видео
• Плавающий фрейм
• Сторонние виджеты
• SEO-оптимизация
• CSS-фреймворки
• Практика: Mobile-first landing

Верстка форм и GitHub:

• Селекторы атрибутов
• Разметка формы в html
• Стилизация формы
• Основы системы контроля версий
• Коллективная разработка
• Основы работы в GitHub
• Практика: Верстка форм