Верстка (HTML, CSS, Bootstrap), препроцессоры CSS, система контроля версий GIT (профильный модуль)

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

Часов в программе

26,00 часов

лекции

54,00 часа

практика

8,00 часов

промежуточная аттестация

88,00 часов

всего

Материально-технические условия реализации программы:

Вид занятий: Занятия Профильного модуля
Требуемое ПО:
- Sublime text 3 (https://www.sublimetext.com/)
- Google Chrome (https://www.google.com/intl/ru_ru/chrome/)
- ZOOM https://zoom.us/

Информационные ресуры

Ссылки на электронные ресурсы:
1. https://learn.javascript.ru/ - электронный учебник по js
2. https://habr.com/ru/post/498860/ - справочник по react и redux
3. http://htmlbook.ru/ - справочник по тегам
4. http://htmlbook.ru/
5. https://www.w3schools.com/
6. https://githowto.com/
7. https://proglib.io/p/sass-for-15-minutes

Образовательные ресуры

ссылки на бесплатные образовательные ресурсы по теме:
1. "HTML, CSS, and Javascript for Web Developers" https://www.coursera.org/learn/html-css-javascript-for-web-developers
2. "Разработка интерфейсов: вёрстка и JavaScript" https://www.coursera.org/learn/html-css-javascript-for-web-developers
3. "Front-End Web Development with React" https://www.coursera.org/learn/front-end-react

Учебно-методические материалы

Методы, формы и технологии

Проблемно-развивающие методы
Исследовательский метод
Объяснительно-иллюстративный метод
Частично-поисковый метод
Метод контроля и самоконтроля
Самостоятельная работа по освоению теоретического материала
Самоконтроль через ответы на вопросы по видеолекциям и выполнение практических заданий для самоконтроля
Промежуточный контроль (тесты по темам для промежуточной аттестации)
Итоговый контроль (итоговое тестирование по курсу)
Консультативная поддержка преподавателя и менторов в режиме онлайн

Методические разработки

разработан референс для практиориентированного задания https://www.figma.com/file/jXCx1uUpSO1ErbzqWyzBDM/ThriveTalk-Landing-Page?node-id=1%3A2

Материалы курса

1. https://www.w3schools.com/sql/ - базовые знания по SQL
2. http://kharchuk.ru/JavaScript.pdf
3. https://proglib.io/p/redux-basis
4. https://habr.com/ru/post/485294/ (примеры работ)
5. https://www.hackerrank.com/domains/tutorials/10-days-of-javascript (перечень задач для самостоятельного решения)
6. git https://learngitbranching.js.org/ - тренажер для практической отработки

Учебная литература

1. "HTML и CSS: 25 уроков для начинающих", Дронов Владимир Александрович
2. "JavaScript: карманный справочник. 3-е изд", Флэнаган Д.
3 "Bootstrap и CSS-препроцессор Sass. Самое необходимое", Прохоренок Николай Анатольевич
4. "React and React Native, a complete hands-on guide to modern web and mobile development with React.js"
5. "Node Cookbook. Discover solutions, techniques, and best practices for server-side web development with Node.js 14"
6. "Git", Практическое руководство.
7. "Управление и контроль версий в разработке программного обеспечения" Фишерман Леонид Владленович

Методы, формы и технологии

Методические разработки

разработан прототип референса для практикоориентированного кейса

Материалы курса

1. https://redux.js.org/basics/usage-with-react - подключение redux в react приложение
2. https://nodejs.org/en/docs/ - документация по Node.js
3. https://www.w3schools.com/sql/ - базовые знания по SQL
4. https://git-scm.com/book/ru/v2/ - методические пособия
5. https://learngitbranching.js.org/?locale=ru_RU - онлайн симулятор работы git
6. https://habr.com/ru/post/485294/ (примеры работ)
7. https://www.hackerrank.com/domains/tutorials/10-days-of-javascript (перечень задач для самостоятельного решения)
8. git https://learngitbranching.js.org/ - тренажер для практической отработки

Учебная литература

Темы

Типы тегов и способы указания стилей Типы ориентации контента на страницы, современные методы ориентации контента (flex и grid) Абсолютное позиционирование: как накладывать элементы друг на друга Адаптация верстки под разные гаджеты Анимирование переходов в интерфейсе Bootstrap Настройка git и подключение к GitHub Работа с ветками Базовый синтаксис SASS Использование SASS в проекте Практикоориентированный кейс