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