Stepik 30 элементов сайта на примере Materialize CSS
О курсе
Подробнее
Мы изучим много современных, интерактивных элементов, которые применяются на разных сайтах и доступны не только на фреймворке Materialize. Эти знания будут вам полезны в веб-разработке какой бы язык, библиотеку или фреймворк вы не использовали. Это основа, база всей веб-разработки.
Рассмотрим: как сделать адаптивные таблицы, коллекции и бейджи, кнопки с анимацией и меню хлебные крошки, прелоадер, футер, прогресс-бар и пагинацию. Научимся создавать карточки с содержимым, плавающее меню, мобильное меню, слайдер и карусель. Узнаем что такое аккордеон, модальное окно, параллакс эффект, табы и тосты. Как сделать всплывающие подсказки, а так же настроить разные волновые эффекты анимации для кнопок, настроить автокомплит в поле ввода на JavaScript, сделать красивые флажки, радио кнопки, ползунки для выбора числа из диапазона чисел, переключатели switch, списки с выбором и элемент chips. А так же, как сделать элемент Datepicker и Timepicker, для того чтобы осуществлять выбор даты из удобного, красивого окна.
Всего около 30 элементов сайта !
Рассмотрим еще некоторые возможности, я расскажу про готовые темы, код фреймворка и его отдельные компоненты.
Требования
Что нужно для старта
- Этот курс подойдет для тех, кто знает основы HTML и CSS. Если вы только начинаете свой путь, то рекомендую записаться на курс Верстаем 10 сайтов по макету из Figma в портфолио и только потом переходить к данному курсу.
Результат
Что вы получите
- Правильно загружать и подключить код фреймворка Materialzie CSS к своему проекту
- Пользоваться документацией и находить нужную информацию в ней
- Работать с цветом фона и текста в палитре цветов Material Design, находить нужный цвет и применять его к любому HTML элементу
- Научимся инициализировать интерактивные элементы на Materialize используя язык программирования Java Script
- Работать с адаптивной сеткой на реальных примерах. Мы рассмотрим разные варианты применения сетки, научимся создавать контейнер, строки и столбцы в сетке. Я покажу как делать для разных устройств разную сетку и тем самым менять отображение сайта делая адаптивную версию
- Добавлять тень для любого элемента используя специальные классы описанные в Materialize CSS
- Работать с текстом, делать выравнивание текста по горизонтали и вертикали, как выполнить скрытие элемента и добавить анимацию при наведении на элемент
- Делать адаптивным любое изображение и видео. Обрезать фото в круглую рамку. Встраивать любое видео с YouTube на свой сайт
- Подключать иконки и делать анимацию пульсации для кнопок
- Расскажу как работать с текстовыми полями input и textarea на Materialize CSS. Как создавать поля с типом text, email, password, file добавлять иконки рядом с текстовыми полями и делать простую валидацию с красивой подсветкой
Аудитория
Для кого этот курс
- Материал в этом курсе изложен простым языком и изучить его вы сможете достаточно быстро. Курс предоставляется вам на всегда, без каких-либо лимитов и ограничений по времени и подойдет начинающим разработчикам желающим выучить свой первый фреймворк и узнать как работать с множеством интерактивных элементов на сайте.
- В этом курсе мы рассматриваем элементы по отдельности. Курс для начинающих и особенно будет полезен, когда еще не знаешь, что такое аккордеон, слайдер, дропдаун, попап, хлебные крошки, параллакс и т. д. Курс поможет как разобраться в терминологии, так и увидеть все эти элементы в работе на реальных примера, и понять как такое создать самому.
Содержание
2 занятияПрограмма курса
№ТемаЧто внутри
01Базовые возможности
- Введение, цвет фона и текста
- Адаптивная сетка
- Текст, фото, видео, иконки и анимация
- Таблицы, типографика, коллекции и бейджи
- Кнопки, прелоадер, футер, прогресс-бар и пагинация
- Карточки и плавающее меню
- Мобильное меню, слайдер-карусель
02Продвинутые возможности
- Аккордеон и слайдер
- Модальное окно и параллакс эффект
- Табы, тосты, всплывающие подсказки
- Авто-комплит, флажки и теги
- Выбор даты и времени
- Ползунок, переключатель и список с выбором
- Красивая форма и подведение итогов
01Базовые возможности
- Введение, цвет фона и текста
- Адаптивная сетка
- Текст, фото, видео, иконки и анимация
- Таблицы, типографика, коллекции и бейджи
- Кнопки, прелоадер, футер, прогресс-бар и пагинация
- Карточки и плавающее меню
- Мобильное меню, слайдер-карусель
02Продвинутые возможности
- Аккордеон и слайдер
- Модальное окно и параллакс эффект
- Табы, тосты, всплывающие подсказки
- Авто-комплит, флажки и теги
- Выбор даты и времени
- Ползунок, переключатель и список с выбором
- Красивая форма и подведение итогов
Документ после выпуска
Stepik
Организатор
Автор курса
Мнения учеников
Отзывы о курсе
Оставьте отзыв
Расскажите о качестве обучения, поддержке и результате. Это поможет другим выбрать организацию осознанно.
Оставьте заявку
Консультант ответит на вопросы о курсе «30 элементов сайта на примере Materialize CSS» и поможет разобраться в деталях обучения.
Нажимая кнопку, вы даете согласие на обработку персональных данных
Информация обновлена 3 сентября 2026 г.
Продолжить выбор
Похожие курсы
Начать без затрат
