Web разработка
О курсе
Тематический план
Программа курса
| Название занятия | Методичка | Слайды | |||
|---|---|---|---|---|---|
| 1. WD0 Ландшафт веб-разработки | |||||
| Лекция: Основные понятия разработки для мобильных платформ | Слайды | ||||
| Практика: Установка IDE WebStorm и знакомство с ней | |||||
| 2. WD1 Основы HTML | |||||
| Лекция: Основы HTML и CSS | Слайды | ||||
| Практика: Работа с простыми элементами HTML | Методичка | ||||
| Практика: Принципы дизайна | Методичка | ||||
| 3. WD2 Основы CSS | |||||
| Лекция: Основы CSS | Слайды | ||||
| Практика: Работа с простыми стилями | |||||
| 4. WD3 Flexbox и Grid | |||||
| Лекция: Flexbox и Grid | Слайды | ||||
| Практика: Резиновая верстка с Flexbox | |||||
| Практика: Верстка на сетке с CSS Grid | |||||
| 5. WD4 Продвинутый CSS | |||||
| Лекция: CSS-препроцессоры: SASS | |||||
| Практика: Использование SASS | Методичка | ||||
| 6. WD5 Bootstrap | |||||
| Лекция: Фреймворк Bootstrap | Слайды | ||||
| Практика: Hello World на Bootstrap | Методичка | ||||
| Практика: Навигация на сайте | Методичка | ||||
| Практика: Основные компоненты Bootstrap | Методичка | ||||
| 7. WD5 Деплой статичных сайтов | |||||
| Лекция: Хостинг | |||||
| Практика: Развертывание статичного сайта на GitHub Pages | |||||
| Практика: Google development tools | Методичка | ||||
| 8. JS1 Введение в JavaScript | |||||
| Лекция: Синтаксис языка Javascript | Слайды | ||||
| Практика: Hello, world на JavaScript | Методичка | ||||
| Практика: Переменные и типы данных | Методичка | ||||
| Практика: Операторы управления | Методичка | ||||
| Практика: Массивы и функции | Методичка | ||||
| Практика: Методы и конструкторы объектов | Методичка | ||||
| Практика: Игра BlackJack | Методичка | ||||
| Практика: Классы | Методичка | ||||
| Практика: Стрелочные функции | Методичка | ||||
| Практика: Функции высших порядков | Методичка | ||||
| Практика: Оператор Switch | Методичка | ||||
| Практика: Работа с формами | Методичка | ||||
| 9. JS2 Объектная модель документа (DOM) | |||||
| Лекция: Объектная модель документа | |||||
| Практика: Манипуляции с DOM | |||||
| 10. JS3 Fetch API | |||||
| Лекция: AJAX и Fetch API | |||||
| Практика: Динамическое получение данных | |||||
| 11. JS4 Фреймворк react.js | |||||
| Лекция: Основы react.js | Слайды | ||||
| Практика: Hello World на react | Методичка | ||||
| Практика: Метод render() | Методичка | ||||
| Практика: Основы JSX | Методичка | ||||
| Практика: Компилятор babel | Методичка | ||||
| Практика: Сервер node.js | Методичка | ||||
| Практика: Props, State и состояния | Методичка | ||||
| Практика: Жизненный цикл компонента | Методичка | ||||
| Практика: Формы | Методичка | ||||
| Лекция: Продвинутый react.js. Хуки | |||||
| Практика: Хуки | Методичка | ||||
| Практика: Структура приложения React | Методичка | ||||
| Практика: Навигация и фильтрация в React | Методичка | ||||
| Практика: Список дел | Методичка | ||||
| Практика: Условный рендер | Методичка | ||||
| Практика: Классовые компоненты | Методичка | ||||
| 12. JS5 Redux | |||||
| Лекция: Redux. Управление состоянием приложения | |||||
| Практика: Использование Redux | |||||
| 13. JS6 TypeScript | |||||
| Лекция: Основы TypeScript | |||||
| Практика: Использование TypeScript | |||||
| 14. SP0 NPM | |||||
| Лекция: Серверный JavaScript - node.js, npm | Методичка | Слайды | |||
| Практика: Установка и настройка node.js | |||||
| 15. SP1 Серверный фреймворк Express | |||||
| Лекция: Основы Express | Методичка | Слайды | |||
| Практика: Создание серверного приложения на Express | |||||
| 16. SP2 ORM | |||||
| Лекция: Объектно-реляционные отображения (ORM) | Слайды | ||||
| Практика: Работа с базой данных | |||||
| 17. SP3 CMS | |||||
| Лекция: Системы управления содержимым (CMS) | |||||
| Практика: Создание простого сайта на движке | |||||
Предварительные требования
Для плодотворного изучения данного курса будут необходимы такие навыки:
- Знакомство с основными концепциями программирования
- Знакомство с объектно-ориентированным программированием
- Основы функционирования компьютера и компьютерных сетей
Источники информации
Основное
Интернет-ресурсы
Программное обеспечение
- WebStorm
- React.js
- Twitter Bootstrap 4
- NPM
- Django
- Flask
- Google Chrome