[Stepik] [Руслан Брантов] Изучаем CSS: cоздание визуально привлекательных сайтов (2024)

Чему вы научитесь

• Создавать и применять стили к элементам веб-страницы, таким как цвета, шрифты, размеры, отступы и рамки, чтобы придать им эстетически приятный и согласованный внешний вид.

• Использовать различные селекторы CSS для выбора и стилизации конкретных элементов или групп элементов на веб-странице.

• Создавать адаптивные и отзывчивые веб-страницы, которые будут хорошо отображаться на различных устройствах и экранах.

• Применять анимации и переходы для создания интерактивных и привлекательных эффектов на веб-странице.

• Оптимизировать код CSS для повышения производительности и улучшения загрузки веб-страницы.

О курсе

Мой курс по CSS - это подробное введение в язык стилей для веб-разработки. В рамках этого курса ученики изучат основные концепции и техники CSS, необходимые для создания привлекательных и функциональных веб-страниц.

Курс начинается с освоения базовых правил и синтаксиса CSS, а также особенностей каскадности и специфичности правил. Ученики узнают, как применять стили к элементам HTML и создавать различные эффекты, такие как изменение цвета, размера и формы элементов, использование фоновых изображений и текстур, а также создание теней и градиентов.

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

Курс также рассматривает различные техники позиционирования элементов, включая относительное, абсолютное и фиксированное позиционирование, а также использование flexbox и grid для создания гибких и сеточных макетов.

В завершение курса ученики изучат продвинутые темы, такие как анимация и переходы, оптимизация и производительность CSS-кода, применение препроцессоров CSS и других инструментов разработки.

В результате прохождения этого курса ученики приобретут глубокое понимание CSS и смогут создавать красивые, адаптивные и профессиональные веб-страницы с использованием различных техник и подходов CSS.

Для кого этот курс

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

Начальные требования

Вы должны знать на базовом уровне язык HTML

Программа курса

Базовая теория

• Что такое CSS

• Тест №1

• Кэш-память браузера

• Цветовая модель RGB

• Тест №2

• Как добавить CSS на сайт и выбрать цвет

• Виды селекторов

• Наследование и шрифты

• Тест №3

• Каскадность

• Единицы измерения

• Работа с текстом. Часть 1

• Работа с текстом. Часть 2

• Блочная модель

• Тест №4

• Свойство overflow и схлопывание полей

Теория и практика

• Настройка фона

• Тест №5

• Создаем меню. Часть 1

• Создаем меню. Часть 2. Свойство margin

• Создаем меню. Часть 3. Свойство float

• Создаем меню. Часть 4. Псевдоклассы

• Раздел main. Часть 1. Свойства text-shadow и box-shadow

• Тест №6

• Раздел main. Часть 2. Свойства filter и transition

• Раздел main. Часть 3. Свойство border и переменные

• Раздел main. Часть 4. Свойство border-image

• Трейлер игры. Значения initial и inherit

• Тест №7

• Системные требования и рецензии на сайте. Flexbox

• Настраиваем таблицу и рецензии

• Селектор атрибутов. Настраиваем подвал сайта

• Тест №8

• Свойства animation и perspective

• Анимация. Практика

• Свойство position

• Тест №9

• CSS-сетка. Часть 1

• CSS-сетка. Часть 2

• CSS-сетка. Часть 3

• Медиа-запросы. Теория

• Медиа-запросы. Практика

• Бургер-меню. Теория и практика. Комбинаторы

• Тест №10

• Псевдоэлементы

• Бонус. Новое в CSS