Программа будет интересна ученикам средней школы и старших классов. Ребятам расскажут о тегах в HTML, селекторах CSS и о том, как использовать их при вёрстке страницы. Также преподаватель объяснит, как устроен PHP и как работают движки сайтов.
Обучение состоит из 8 тематических блоков и 32 уроков. Все занятия проходят на платформе школы.
Модуль 1. Введение в HTML
- Урок 1: Введение в HTML. Ребята узнают, что такое HTML страница, и попробуют создать свою первую верстку, используя простейшие теги <p><img><h1>, а также поймут, что такое теги верхнего уровня
- Урок 2: Мультимедиа и встраивание. Ребята научатся использовать теги мультимедии: <img>, <video>, <audio>
- Урок 3: Фреймы и разметка страницы, изучение тега <iframe> и встраивание элементов на свой сайт, а также структура сайт
- Урок 4: Знакомство с CSS. Ребята изучат основы CSS и применят свои первые стили на страницу
Модуль 2. Основы CSS
- Урок 5: Селекторы CSS. Ребята узнают, что такое селекторы и как задавать стили не всем тегам, а определенному элементу
- Урок 6: Блочная модель CSS. Блочная и строчная модель элементов, что такое display и все свойства блоков
- Урок 7: Ссылки и свойства фона. Тег <a>, и внутренние, и внешние ссылки, изучение настройки фона и работа со стилями
- Урок 8: Позиционирование. Поток документа и позиции элементов, свойство position и фиксация
Модуль 3. Прототипирование и основы UX / UI
- Урок 9: Введение в дизайн. Что такое UХ- и UI-дизайн, в чем их отличие
- Урок 10: Анализ поисковых запросов. Изучение поисковиков и работы интернета, как поднять свой сайт в поиске и что на это влияет
- Урок 11: Макет итогового проекта: знакомство с Figama, основы макетирования
- Урок 12: Flexbox. Ребята изучат важнейшее свойство в CSS – флекс-сетки – и как их использовать
Модуль 4. Верстка макета
- Урок 13: Верстка сайта по макету, работа с VSC. Знакомство с редактором и работа над своим первым проектом
- Урок 14: Завершение проекта. Доработка и завершение проекта
- Урок 15: Публикация проекта. Что такое GitHub и как опубликовать свой сайт? Подключение Яндекс.Метрики
- Урок 16: Презентация проектов. Подводим небольшой итог, что мы сделали за 4 модуля
Модуль 5. Углубленный CSS
- Урок 17: Псевдоклассы и псевдоэлементы. Ребята изучат важные псевдоклассы и псевдоэлементы и разберут реальные кейсы
- Урок 18: Трансформации. Изучение трансформаций, как сделать интерактив с пользователем и добавить движений
- Урок 19: Анимации. Свойство animation и как работают анимации в CSS
- Урок 20: Блочная модель: PRO, добавляем в проект все, что узнали за модуль. Все что нужно знать про блоки, различие margin и padding. На этом уроке ребята дополнят к своему проекту все, что изучили за этот модуль
Модуль 6. Адаптивная верстка, сетки и формы
- Урок 21: Grid-layout. Второе важное свойство CSS – грид-сетки. В чем отличие от флексов? Где использовать и как применять?
- Урок 22: Переменные в CSS. Переменная root, которая изменит наш сайт до неузнаваемости
- Урок 23: Адаптивная и отзывчивая верстка. Как сделать сайт адаптивным? В чем отличие от отзывчивости и что лучше использовать?
- Урок 24: Взаимодействие с информацией пользователя. Формы, как отправить информацию о пользователе на сервер
Модуль 7. Движки сайтов и основы PHP
- Урок 25: Локальный сервер и знакомство с PHP. Изучение PHP для работы с сайтом, взаимодействие с HTML
- Урок 26: Углубление в PHP. Изучение циклов и массивов, как создать свой php сайт
- Урок 27: Wordpress. Движки сайтов и Wordpress, как создать сайт из блоков PHP
- Урок 28: Движок сайта и натяжка своего проекта на движок. Положим на Wordpress свой проект и улучшим его
Модуль 8. Подготовка итогового проекта
- Урок 29: Доработка проекта, alert, prompt, переменные, консоль. Знакомство с JS и доработка проекта по чек-листу
- Урок 30: Доработка проекта, работа с формами, готовый код на проверку правильности ввода. Добавление бургер меню на JS на сайт и работа над проектом
- Урок 31: Доработка проекта, бургер меню, карусель, фишки из JS. Завершаем проект, добавляем карусель
- Урок 32: Представление проектов
