Please enable JavaScript.
Coggle requires JavaScript to display documents.
Основы веб-разработки (4️⃣ Основные стили (Стили блоков, Границы,…
Основы веб-разработки
1️⃣ Браузер и документ
Установка программ
Браузер внутри
Структура проекта
Объектная модель документа
Контейнеры html
Понятие атрибута, базовые атрибуты
2️⃣ Разметка
Основные функциональные теги html
Классы и идентификаторы
Emmet
Построение каркаса
3️⃣ Стиль и основы CSS
Понятие стиля. Атрибут style
Синтаксис CSS
CSS-файл
Цвета в CSS
Самые популярные CSS-селекторы
4️⃣
Основные стили
Стили блоков
Границы
Градиенты и тени
Стили текста
Стили шрифта
Google Fonts
Локальные шрифты
Каскадность и наследование в CSS
Сброс и нормализация дефолтных стилей
5️⃣
Позиция элементов
Блочная модель элемента.
Padding
Margin
Позиционирование элементов
Многослойность и z-index
Комментарии в коде
Экзотические селекторы
6️⃣Сетка
Основы Flex
Свойства flex-контейнера
Свойства flex-items
7️⃣CSS-анимации
Правило keyframes
Трансформации
Плавность переходов
Псевдоклассы
1️⃣0️⃣ Верстка форм
Селекторы атрибутов
Разметка формы в html
Стилизация формы
🔀 Extra content
Плавающий фрейм
Работа с аудио и видео
Использование CSS-фреймворка
9️⃣ Адаптивная верстка
Практика использования медиазапросов
Принцип работы медиазапросов
8️⃣ Responsive
Использование внутренних отступов для создания резиновых блоков
Функция calc
Единицы измерения em rem
Единицы измерения vh vw
Минимальные/максимальные размеры
Размеры в процентах
Работы студентов :fire:
🎼
Самый первый проект — это создание страницы о вашем любимом артисте. Здесь даже нет не единой строки на CSS, только грамотно размеченный HTML
🐶
Вторая работа — информационный лендинг. Актуальную тему вивисекции для проекта выбрала Вика
💎
Трехколоночная страница с фиксированным хедером. Прочитать тексты песен Кендрика Ламара
👾
Уже на четвертой практике вы познакомитесь с адаптивностью сайтов. Крутой 8-битный пример
🔮
CSS анимация для Властелина Колец, где вы можете посмотреть превращение серого Гендальфа в белого
🥾
Продвинутая анимация на лендинге фаната AirMax Маргариты
🎪
Не только студенты учатся на наших курсах. Проверяя одну из домашек мы узнали о роллерном дерби
🎖
Завершающим проектом на курсе является верстка формы, передающая информацию на сервер
Демо-доступ к курсу:
learn.moscoding.ru