Запись [Stepik] Буткемп «Записки юного программиста» git, html, react.js, csharp (Сергей Камянецкий)

​

Это комплексный курс, предназначенный для начинающих в мире разработки ПО. Он охватывает широкий спектр тем, включая использование VS Code, LaTeX, Git, HTML+CSS,JavaScript+React.js, C#+ASP.NET Core, построение API-сервисов и FullStack-разработку. Буткемп предлагает практические задания, примеры и разборы задач, а также обучает навыкам профессиональной работы в сфере программирования от работы с Git до создания FullStack App. Он поможет развить базовые навыки и мотивацию,необходимые для успешной карьеры в IT

Цель буткемпа «Записки юного программиста» — предоставить учащимся все необходимые навыки и знания для успешного старта в мире программирования и разработки программного обеспечения. Курс охватывает темы от основ разметки Markdown и работы с Git до разработки fullstack-приложений на React и ASP.NET Core.

Особенности курса

• Модульный формат: Курс состоит из модулей, каждый из которых фокусируется на определенной области знаний, таких как работа с Git, HTML/CSS, JavaScript, React, .NET, и API и др.
• Практические задания: Каждый модуль включает практические задания и проекты, чтобы помочь учащимся закрепить знания.
• Разнообразие тем: Курс охватывает различные направления разработки ПО, включая математику, алгоритмы, блок-схемы, Bootstrap, библиотеку React.js и фреймворк ASP.NET Core.

Какие разделы и задания входят в курс

• Основы Git, Markdown и LaTeX: Структурирование текстов и работа с контролем версий.
• HTML и CSS: Создание веб-страниц, работа с медиазапросами и адаптивным дизайном.
• JavaScript: Разработка интерактивных веб-приложений и манипулирование DOM.
• React: Создание клиентской части приложений с использованием этой популярной библиотеки.
• ASP.NET Core: Разработка серверной части приложений и создание API-сервисов.
• Математика и алгоритмы: Изучение блок-схем, логики, и оптимизации процессов.
• Bootstrap: Быстрая разработка адаптивных веб-страниц с этим фреймворком.

Чему вы научитесь

• После успешного освоения буткемпа вы сможете создать простое fullstack-приложение, где клиентская часть написана на JavaScript с использованием React.js+Bootstrap, а серверная часть представляет собой API-сервис на платформе ASP.NET Core с использованием языка C#
• Устанавливать и настраивать программное обеспечение, необходимое для разработки, такие как VS Code, Git, Node.js, .NET
• Применять разметку Markdown для структурирования и форматирования текстов
• Создавать сложные математические тексты используя LaTeX
• Работать с контролем версий Git, включая создание репозиториев, коммиты, ветки и разрешение конфликтов
• Создавать веб-страницы с использованием HTML и CSS, а также применять медиазапросы, flex, grid для адаптивного дизайна
• Работать с математикой и алгоритмами, включая создание и анализ блок-схем для визуализации процессов
• Работать с фреймворком Bootstrap для быстрой разработки адаптивных веб-страниц
• Применять JavaScript для манипулирования DOM, а также разрабатывать интерактивные веб-приложения
• Строить и разрабатывать проекты с использованием современных технологий, включая React и .NET
• Интегрировать API в свои проекты и использовать различные методы для обработки запросов и ответов
• Разрабатывать и отлаживать программы, работая с переменными, типами данных, операторами, циклами и функциями
• Сравнивать различные структуры данных и использовать их для оптимизации кода и повышения производительности
• Практиковать командную работу с использованием инструментов для совместной разработки, таких как GitHub
• Создавать и документировать проекты, обеспечивая высокое качество кода и соблюдая лучшие практики разработки
• Решать практические задачи и рефакторировать код для улучшения его структуры и эффективности

Начальные требования

• Знакомство с компьютером и операционной системой
  
  • Умение устанавливать и настраивать программное обеспечение.
  • Навыки работы с файлами и каталогами на компьютере.
  
  
• Базовые навыки работы с текстовыми редакторами
  
  • Умение работать с текстовыми файлами, копировать и вставлять текст.
  • Базовое знакомство с функциями редакторов кода.
  
  
• Интерес и мотивация
  • Интерес к программированию и стремление учиться новому.
  • Желание практиковаться и работать над проектами.
  
  
• Терпение и внимательность
  
  • Умение уделять внимание деталям и решать задачи постепенно.
  • Готовность терпеливо разбираться в сложных темах и проблемах.

Начальные знания английского языка или умение пользоваться переводчиками

Спойлер: Программа курса

Пролог к успеху

1. Вместо уроков и лекций
2. Калейдоскоп языков программирования
3. Практическое задание
4. Решение практического задания
5. Как проходить курс

Инсайдерский обзор IT: Погружение в мир технологий и ролей

1. Роли в разработке программного обеспечения
2. Ключевые профессии в мире разработки ПО
3. Проектный менеджмент
4. Методологии управления проектами
5. Security and compliance
6. Разработчик программного обеспечения
7. Архитектор программного обеспечения
8. Тестировщик программного обеспечения
9. QA-инженер — Quality Assurance Engineer
10. UX-дизайнеры
11. Бизнес-аналитики
12. Project Manager
13. Scrum Master
14. Владелец продукта
15. Инженер по безопасности
16. Аспекты киберугроз
17. Сетевой инженер
18. Системный администратор
19. Технический писатель
20. Что такое программирование?
21. Frontend vs Backend
22. База данных
23. Клиент-серверное взаимодействие
24. IoT Интернет-вещей
25. Жизненный цикл ПО

Вдохновение в редакторе: Visual Studio Code

1. Что такое VS Code
2. Установка на Windows
3. Установка на Mac OS
4. KeyCastr
5. Базовая настройка

Текстовые художники: Продвинутые методы Markdown и LaTeX

1. Несколько слов про md
2. Заголовки и подзаголовки
3. Демо Заголовки и подзаголовки
4. Горизонтальные линии разделения
5. Демо Горизонтальные линии
6. Практическая работа 1. Заголовки и подзаголовки
7. Практическая работа 1: разбор
8. Текстовое форматирование
9. Демо Текстовое форматирование
10. Практическая работа 2. Форматирование текста и абзацев
11. Практическая работа 2: разбор
12. Списки
13. Демо Списки
14. Практическая работа 3. Списки
15. Практическая работа 3: разбор
16. Создание гиперссылок
17. Вставка изображений
18. Демо Вставка гиперссылок и изображений
19. Практическая работа 4. Ссылки и изображения
20. Практическая работа 4: разбор
21. Основы создания таблиц
22. Создания таблиц
23. Практическая работа 5. Таблицы
24. Практическая работа 5: разбор
25. Вставка блока кода
26. Демо Вставка блока кода
27. Основные использования LaTeX
28. Демо. Основные использования LaTeX
29. Практическая работа 6. LaTeX документ
30. Практическая работа 6: разбор
31. Встречка

Искусство контроля: git

1. Введение
2. Установка на Windows
3. Установка на Mac
4. Про справку и UI клиенты
5. Ключевые термины
6. Голосарий
7. Команды status init add commit справка
8. Практика status init add commit
9. Команды log checkout
10. Практика log checkout
11. Большой репозиторий
12. Команда git branch
13. Ветки. Визуализация
14. Merge. Теория
15. Merge & merge conflict
16. Больше практики
17. Дисклеймер
18. GIT ≠ GitHub
19. SSH Windows
20. SSH Mac
21. Контроль
22. Работа с GitHub удалённым репозиторием
23. Командная работа
24. Публичный доступ
25. Удаление репозитория
26. Практическая работа часть 1
27. Практическая работа часть 2
28. Практическая работа разбор
29. UI
30. Встречка
31. Как продолжать

Создание веб-мира: HyperText Markup Language

1. Что это такое
2. Как браузер отображает
3. Как работает сайт. Гипертекст и язык разметки
4. Какие теги есть
5. Заголовки
6. Предварительная настройка
7. Документация
8. Задание. Использование заголовков
9. Разбор задания. Использование заголовков
10. Абзацы
11. Задание. Абзацы
12. Разбор задания. Абзацы
13. Как ещё можно решать подобные задания
14. Void-элементы
15. Задание. Void-элементы + абзацы
16. Разбор задания. Void-элементы + абзацы
17. Встречка
18. Списки
19. Задание. Приготовить пастилу
20. Разбор задания. Готовим пастилу вместе
21. Вложенные списки
22. Атрибуты
23. Гибридная практика. Как сделать свой сайт
24. Fake API. Когда бэкенд не успевает за фронтендом
25. Image
26. Полный шаблон
27. Полный шаблон. Демонстрация
28. Мотивация к выполнению ТЗ
29. Техническое задание
30. Проектный ориентир. Результат ТЗ

Хроники стиля: Cascading Style Sheets

1. Что если бы бы...
2. Введение без пафоса
3. Как подключить
4. Задание. Способы подключения
5. Решение задания. Способы подключения
6. Изучаем селекторы
7. Демонстрация
8. Какие бывают селекторы
9. Задание. Важные селекторы
10. Решение задания. Важные селекторы
11. Задание. Изменение свойств
12. Решение задания. Изменение свойств
13. Встречка
14. Почему цвета важны
15. Цветовые схемы
16. Задание на изменение цветов
17. Решение задания на изменение цветов
18. Свойства шрифтов
19. Cвойства шрифтов. Демо 01
20. Cвойства шрифтов. Демо 02
21. Cвойства шрифтов. Демо 03
22. Cвойства шрифтов. Демо 04
23. Задание. Свойство шрифтов
24. Решение задания. Свойство шрифтов
25. Chrome DevTools
26. Интерактивное задание
27. Решение интерактивного задания
28. Встречка
29. Строчные и блочные элементы
30. Блочные элементы
31. Строчные элементы
32. Тот самый, блочный элемент
33. Воздействие отрицательных величин
34. Задание. Позиционирование div
35. Решение задания. Позиционирование div
36. Задание. Котомемемоизация
37. Решение задания. Котомемемоизация
38. Правило применения
39. Комбинирование селекторов. Воспоминания
40. Позиционирование
41. Ось z
42. Процентные величины
43. transform-translate
44. Задание. transform-translate
45. Решение задания. transform-translate
46. Обзор возможностей
47. Встречка
48. Display
49. Display. Демо
50. Задание. Display
51. Float
52. Резерв
53. Адаптивный дизайн. Обзорное видео ч.1
54. Адаптивный дизайн. Обзорное видео ч.2
55. Адаптивный дизайн. Обзорное видео ч.3
56. Адаптивный дизайн. Обзорное видео ч.4
57. Адаптивный дизайн. Обзорное видео ч.5
58. Медиа-запросы дополнение
59. Практическая работа. Медиа-запросы
60. Разбор практической работы. Медиа-запросы
61. Идея для проекта
62. Встречка
63. Хронология эволюции
64. Практическое задание. Пункты меню
65. Разбор практического задания. Пункты меню
66. flex-direction
67. flex-basis
68. Практическое задание. Адаптивные контейнеры
69. Разбор практического задания. Адаптивные контейнеры
70. order
71. flex-wrap
72. justify-content
73. align-items
74. align-self
75. align-content
76. Вместо практики
77. size
78. flex
79. Практическое задание Центрирование контейнера
80. Разбор практического задания. Центрирование контейнера
81. Практическое задание. Карточки подписки
82. Разбор практического задания. Карточки подписки
83. Основы grid layout
84. Некоторые различия grid и flexbox
85. Практическое задание. Шахматная доска
86. Разбор практического задания. Шахматная доска
87. grid-sizing + chrome devtools
88. Практическое задание. Вёрстка сетки
89. Разбор практического задания. Вёрстка сетки
90. grid placement
91. Вместо практики по grid
92. Практическое задание. Профессии
93. Разбор практического задания. Профессии
94. Практическое задание. layout
95. Разбор практического задания. layout
96. Встречка
97. Bootstrap: что ты такое?
98. Документация решает
99. Практическое задание. Карточки
100. Решение практического задания. Карточки
101. Повышение продуктивности в VS Code
102. Как работает Bootstrap
103. Практическое задание. Адаптивная верстка
104. Разбор практического задания. Адаптивная верстка
105. Пример использования на проекте
106. Попробуй себя, Junior

Математика: Путешествие по лестнице воспоминаний

1. Начало
2. Преамбула. Зачем этот модуль
3. Сколько времени нужно чтобы изучить математику
4. Пять советов
5. Про деление
6. Некоторые задачи
7. Системы счисления. Начало
8. Как сбежать от десятичной
9. Как попасть в десятичную
10. Замечание по десятичной системе счисления
11. Округление
12. Операции
13. Математическая логика
14. Про приоритет операций
15. Разбор задач на логические операции
16. Арифметическая прогрессия
17. Задачи и разбор некоторых
18. Окончание модуля
19. Встречка

Алгоритмы, блок-схемы, языки: Ознакомиться нельзя пропустить

1. Зачем это всё
2. Определение терминов
3. Блок-схема
4. Как создавать блок-схемы
5. Основные блоки
6. Переменная - что ты такое?
7. Умение погружаться в предметную область
8. Как погружаться в предметную область
9. Экстремальное погружение
10. Класификация алгоритмов
11. Теория линейных алгоритмов
12. Линейные задачи
13. Алгоритмы с ветвлением
14. Задачи с ветвлениями
15. Рутинные задачи. Циклы
16. Задачи с циклами
17. Встречка
18. Числа Фибоначчи
19. Вложенные циклы
20. Массивы
21. Задачи на массивы
22. Вместо итогов
23. Беседа с автором

Приоткрываем мир программирования: JavaScript

1. Как проходить этот модуль
2. Где применяется и Демо
3. Что такое Node.js
4. Как установить Node.js на Windows
5. Как установить Node.js на Mac OS
6. Донастройка vs code
7. Переменная. let const
8. Уточнение по выводу данных
9. Базовая арифметика
10. Некоторые типы данных
11. Math
12. Преобразование типов
13. Практическая работа
14. Решение практической работы
15. Логический оператор
16. Операции сравнения и логические операци
17. Практическая работа
18. Решение практической работы
19. Практическая работа
20. Решение практической работы
21. Некоторые методы работы со строками
22. Практическая работ
23. Решение практической работы
24. Строки. Итоги
25. Циклы
26. Массивы
27. Функции
28. Не повторяйся
29. Дополнение по функциям
30. Введение в объекты
31. Объектное мышление
32. Манипуляция DOM
33. Практика манипулирования
34. Практическая работа
35. Решение практической работы
36. Дата и время
37. Работа с файлами
38. Как создать проект и подключать зависимости
39. export import
40. Обработка исключений
41. Функции высшего порядка

Мир компонентов и состояний: Экспресс-погружение в React.js

1. Индустрия и React
2. Первый шаг
3. Второй шаг
4. Особенность рендера
5. Практическая работа
6. Решение практической работы
7. Интеграция JS
8. Практическая работа
9. Решение практической работы
10. Вместо циклов
11. Вместо стилей
12. Подключение Bootstrap
13. Выделение компонентов
14. Проброс свойств
15. Hooks
16. Зовём друга на Backend'е
17. Демонстрация использования
18. Парсинг данных
19. Практическая работа
20. Решение практическоцй работы
21. Косметические правки
22. Вместо итогов

Власть над кодом: Погружение в CSharp

1. Где применяется
2. Установка .net на Windows
3. Установка .net на Mac OS
4. Hello world
5. Настройка VS Code
6. Как проходить модуль
7. Переменная
8. Базовая арифметика
9. Система типов
10. System.Math
11. Преобразование типов
12. Получение данных
13. Практическая работа
14. Решение практической работы
15. Операции сравнения и логические операции
16. Ветвления
17. Практическая работа
18. Решение практической работы
19. Практическая работа
20. Решение практической работы
21. Строки
22. Практическая работа
23. Решение практической работы
24. Циклы
25. Массивы
26. Как массивы, только лучше
27. Кортежи
28. Методы
29. Вместо DRY
30. Даты и время
31. Файлы
32. Обработка исключений
33. Сложная тема
34. Продолжение сложной темы
35. Встречка

Несколько шагов к объектному мышлению без духоты

1. Шаг 0
2. Шаг 1
3. Шаг 2
4. Шаг 3. Практическое задание
5. Шаг 4.Решение практического задания
6. Шаг 5
7. Шаг 6
8. Шаг 7
9. Шаг 8
10. Шаг 9. Практическое задание
11. Шаг 10. Решение практического задания
12. Шаг 11
13. Шаг 12
14. Шаг 13

RESTful API: Обзор фундаментальных концепций

1. Теория ключевых аспектов
2. Есть вопросик...

Контактные эскизы: Рисуем сервис шаг за шагом

1. План на ближайшие два модуля
2. Первый запуск
3. Controllers
4. Практическое задание
5. Совместное выполнение
6. Требования
7. Рефакторинг
8. Хранилище данных
9. Models
10. Endpoints
11. Рефакторинг
12. HTTP Status Codes
13. Практическое задание

Контактные эскизы: Реактивная визуализация сервиса шаг за шагом

1. Подготовка проекта
2. Инициализация проекта
3. Подготовка представления
4. Подключение Bootstrap
5. Использование Bootstrap
6. Выделение React-компонентов
7. Передача данных через свойства
8. Добавление элемента в набор данных
9. React-хуки в деле
10. Унификация id
11. Добавление формы
12. Активация формы ввода
13. Практичесакая работа
14. Решение практической работы
15. Очистка формы
16. Динамическое удаление
17. Практичесакая работа
18. Решение infinity-проблемы
19. Добавление уникального свойства
20. Установка axios и cors проблема
21. Настройка CORS
22. Секретики
23. Переменные окружения и секретики
24. Настройка GET—запросов
25. Настройка POST—запросов
26. Практичесакая работа
27. Решение практической работы
28. Это только начало...

Экзамен

1. Что нужно сделать для финала

Спойлер: Об авторе

Сергей Камянецкий

Имею опыт в образовании и разработке. Участвую в развитии IT-сообщества. Специализируюсь на CSharp, TypeScript, Docker, PostgreSQL, RabbitMQ
Обладаю знаниями в области разработки с использованием языков: CSharp, TypeScript (был опыт на Python, Java, Swift) и технологий: PostgreSQL, Docker, RabbitMQ и др. Имею статьи, опубликованные в печатных изданиях, в том числе изданиях рекомендованных ВАК при Минобрнауки России. Хочу помогать подрастающим специалистам погружаться в IT. Опыт работы: OZON; Tel-Ran; Freelance; VK group; Microsoft Rus(MSP)