Web-технологии: практический курс CSS

все курсы

Программирование

21 урок

Сложность

Начинающий

Тип обучения

Курс

Формат обучения

Записанные лекции

Сертификат

Да

Стоимость курса

1 699 ₽

нет рассрочки

Добро пожаловать на курс "Web-технлогии: практический курс"!

Вам подойдет этот курс, если:

- Вы уже знаете, что такое HTML и CSS и вам не хватает практики.

- Если вы знаете, что такое селектор класса и уже стилизовали небольшие страницы.

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

Цель курса: изучение CSS и получение практических навыков.

Структура курса:

1. Описание курса

Краткая информация о курсе и о том, как выполнять задания

2. HTML и CSS: практический модуль

Вспоминаем основную теорию по HTML и CSS: структуру документа, основные HTML-элементы, CSS селекторы, рассматриваем примеры и, конечно же, выполняем практические задания.

3. Больше CSS

Блок с теорией по CSS: комбинаторы и составные селекторы, Box Model, каскадность и наследование. Разбираемся с shadows, gradients, z-index, transitions и анимацией.

4. Практический модуль

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

Пример одно из заданий:

5. Введение в адаптив

Разбираемся с медиа-запросами, вычисляемыми значениями и переменными.

Выполняем промежуточные задания. А в конце вы сможете сверстать адаптивный сайт и опубликовать его.

6. Заключение

Курс развивается и планируется добавление сюда новых блоков и проектных заданий!

Что вы получите после обучения

Приобретаемые навыки

HTML и CSS

Box Model

Вычисляемые значения и Переменные CSS

Min-width, min-height, max-width, max-height

Вас будут обучать

Мария Ажгихина

курс

Преподаватель-исследователь, учитель информатики (высшая категория), QA engineer

Имею высшее техническое и педагогическое образование. Окончила аспирантуру МПГУ по направлению "Теория и методика обучения и воспитания (информатика)". Являюсь призером олимпиады "Московский учитель". Кроме основной работы готовлю обучающихся к экзаменам ОГЭ и ЕГЭ, а также разрабатываю свои авторские курсы по вебу. Для связи: azhgikhinams@gmail.com

Образовательная организация

Stepik

4.6

60 отзывов

Stepik — образовательная платформа и конструктор
онлайн-курсов. Мы разрабатываем алгоритмы адаптивного обучения, сотрудничаем с авторами MOOC, помогаем
в проведении олимпиад и программ переподготовки.
Наша цель — сделать образование открытым и удобным.

Помогаем учиться, а также создавать свои курсы и обучать

Первые учебные материалы были размещены на платформе в 2013 году. Сегодня среди охваченных курсами тем: программирование, информатика, математика, статистика
и анализ данных, биология и биоинформатика, инженерно-технические и естественные науки. Онлайн-курсы, размещенные на Stepik, неоднократно становились призерами конкурсов онлайн-курсов, а система автоматизированной проверки задач используется в ряде курсов на платформах Coursera и edX. Также Stepik активно развивает направление адаптивного обучения, где каждый сможет изучать материал, подобранный индивидуально под свой уровень знаний.

Stepik является также площадкой для проведения конкурсов и олимпиад — среди мероприятий — отборочный этап Олимпиады НТИ, онлайн-этап акции Тотальный диктант, международная олимпиада по биоинформатике.

Stepik — многофункциональная и гибкая платформа для создания образовательных материалов. Вы можете создавать онлайн курсы, интерактивные уроки с видео и различными типами заданий для учащихся, приватные курсы для ограниченной аудитории, проводить олимпиады и конкурсы, запускать программы профессиональной переподготовки и повышения квалификации, а также обучать своих сотрудников и клиентов.

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

Начало курса
1. Общая информация о курсе
2. Как выполнять задания
HTML и CSS: базовые понятия
1. Основные моменты HTML
2. Основные моменты CSS
Больше CSS
1. Box Model
2. Селекторы
3. Каскадность и наследование
4. Position, z-index
5. Shadows, Gradients, Filters
6. Animation
7. Transitions
Практический модуль
1. Flexbox | Теория + Практика
2. Меню
3. Header + Карточки
4. Формы
Введение в адаптив
1. Min-width, min-height, max-width, max-height
2. Медиа-запросы @media
3. Вычисляемые значения и Переменные CSS
4. Бургер-меню
5. Проект
Заключение
1. Заключение