[Stepik] Буткемп Записки юного программиста git, html, react.js, c# [Сергей Камянецкий]

Robot · 19 Май 2024

Это комплексный курс, предназначенный для начинающих в мире разработки ПО

Он охватывает широкий спектр тем, включая использование 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.

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

После успешного освоения буткемпа вы сможете создать простое 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
Создавать и документировать проекты, обеспечивая высокое качество кода и соблюдая лучшие практики разработки
Решать практические задачи и рефакторировать код для улучшения его структуры и эффективности

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

Модульный формат: Курс состоит из модулей, каждый из которых фокусируется на определенной области знаний, таких как работа с 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: Быстрая разработка адаптивных веб-страниц с этим фреймворком.

В курс входят:

431 урок
43часа 31минута видео
670 тестов
11 интерактивных задач

Программа:

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

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

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

Роли в разработке программного обеспечения
Демо-доступ
Ключевые профессии в мире разработки ПО
Проектный менеджмент
Методологии управления проектами
Security and compliance
Разработчик программного обеспечения
Демо-доступ
Архитектор программного обеспечения
Тестировщик программного обеспечения
QA-инженер — Quality Assurance Engineer
UX-дизайнеры
Бизнес-аналитики
Project Manager
Scrum Master
Владелец продукта
Инженер по безопасности
Аспекты киберугроз
Сетевой инженер
Системный администратор
Технический писатель
Что такое программирование?
Frontend vs Backend
База данных
Клиент-серверное взаимодействие
IoT Интернет-вещей
Жизненный цикл ПО

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

Что такое VS Code
Демо-доступ
Установка на Windows
Установка на Mac OS
KeyCastr
Базовая настройка

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

Несколько слов про md
Заголовки и подзаголовки
Демо Заголовки и подзаголовки
Горизонтальные линии разделения
Демо Горизонтальные линии
Практическая работа 1. Заголовки и подзаголовки
Практическая работа 1: разбор
Текстовое форматирование
Демо Текстовое форматирование
Практическая работа 2. Форматирование текста и абзацев
Практическая работа 2: разбор
Списки
Демо Списки
Практическая работа 3. Списки
Практическая работа 3: разбор
Создание гиперссылок
Вставка изображений
Демо Вставка гиперссылок и изображений
Практическая работа 4. Ссылки и изображения
Практическая работа 4: разбор
Основы создания таблиц
Создания таблиц
Практическая работа 5. Таблицы
Практическая работа 5: разбор
Вставка блока кода
Демо Вставка блока кода
Основные использования LaTeX
Демо. Основные использования LaTeX
Практическая работа 6. LaTeX документ
Практическая работа 6: разбор
Встречка

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

Введение
Установка на Windows
Установка на Mac
Про справку и UI клиенты
Ключевые термины
Голосарий
Команды status init add commit справка
Практика status init add commit
Команды log checkout
Практика log checkout
Большой репозиторий
Команда git branch
Ветки. Визуализация
Merge. Теория
Merge & merge conflict
Больше практики
Дисклеймер
GIT ≠ GitHub
SSH Windows
SSH Mac
Контроль
Работа с GitHub удалённым репозиторием
Командная работа
Публичный доступ
Удаление репозитория
Практическая работа часть 1
Практическая работа часть 2
Практическая работа разбор
UI
Встречка
Как продолжать

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

Что это такое
Как браузер отображает
Как работает сайт. Гипертекст и язык разметки
Какие теги есть
Заголовки
Предварительная настройка
Документация
Задание. Использование заголовков
Разбор задания. Использование заголовков
Абзацы
Задание. Абзацы
Разбор задания. Абзацы
Как ещё можно решать подобные задания
Void-элементы
Задание. Void-элементы + абзацы
Разбор задания. Void-элементы + абзацы
Встречка
Списки
Задание. Приготовить пастилу
Разбор задания. Готовим пастилу вместе
Вложенные списки
Атрибуты
Гибридная практика. Как сделать свой сайт
Fake API. Когда бэкенд не успевает за фронтендом
Image
Полный шаблон
Полный шаблон. Демонстрация
Мотивация к выполнению ТЗ
Техническое задание
Проектный ориентир. Результат ТЗ

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

Что если бы бы...
Введение без пафоса
Как подключить
Задание. Способы подключения
Решение задания. Способы подключения
Изучаем селекторы
Демонстрация
Какие бывают селекторы
Задание. Важные селекторы
Решение задания. Важные селекторы
Задание. Изменение свойств
Решение задания. Изменение свойств
Встречка
Почему цвета важны
Цветовые схемы
Задание на изменение цветов
Решение задания на изменение цветов
Свойства шрифтов
Cвойства шрифтов. Демо 01
Cвойства шрифтов. Демо 02
Cвойства шрифтов. Демо 03
Cвойства шрифтов. Демо 04
Задание. Свойство шрифтов
Решение задания. Свойство шрифтов
Chrome DevTools
Интерактивное задание
Решение интерактивного задания
Встречка
Строчные и блочные элементы
Блочные элементы
Строчные элементы
Тот самый, блочный элемент
Воздействие отрицательных величин
Задание. Позиционирование div
Решение задания. Позиционирование div
Задание. Котомемемоизация
Решение задания. Котомемемоизация
Правило применения
Комбинирование селекторов. Воспоминания
Позиционирование
Ось z
Процентные величины
transform-translate
Задание. transform-translate
Решение задания. transform-translate
Обзор возможностей
Встречка
Display
Display. Демо
Задание. Display
Float
Резерв
Адаптивный дизайн. Обзорное видео ч.1
Адаптивный дизайн. Обзорное видео ч.2
Адаптивный дизайн. Обзорное видео ч.3
Адаптивный дизайн. Обзорное видео ч.4
Адаптивный дизайн. Обзорное видео ч.5
Медиа-запросы дополнение
Практическая работа. Медиа-запросы
Разбор практической работы. Медиа-запросы
Идея для проекта
Встречка
Хронология эволюции
Практическое задание. Пункты меню
Разбор практического задания. Пункты меню
flex-direction
flex-basis
Практическое задание. Адаптивные контейнеры
Разбор практического задания. Адаптивные контейнеры
order
flex-wrap
justify-content
align-items
align-self
align-content
Вместо практики
size
flex
Практическое задание Центрирование контейнера
Разбор практического задания. Центрирование контейнера
Практическое задание. Карточки подписки
Разбор практического задания. Карточки подписки
Основы grid layout
Некоторые различия grid и flexbox
Практическое задание. Шахматная доска
Разбор практического задания. Шахматная доска
grid-sizing + chrome devtools
Практическое задание. Вёрстка сетки
Разбор практического задания. Вёрстка сетки
grid placement
Вместо практики по grid
Практическое задание. Профессии
Разбор практического задания. Профессии
Практическое задание. layout
Разбор практического задания. layout
Встречка
Bootstrap: что ты такое?
Документация решает
Практическое задание. Карточки
Решение практического задания. Карточки
Повышение продуктивности в VS Code
Как работает Bootstrap
Практическое задание. Адаптивная верстка
Разбор практического задания. Адаптивная верстка
Пример использования на проекте
Попробуй себя, Junior

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

Начало
Преамбула. Зачем этот модуль
Сколько времени нужно чтобы изучить математику
Пять советов
Про деление
Некоторые задачи
Системы счисления. Начало
Как сбежать от десятичной
Как попасть в десятичную
Замечание по десятичной системе счисления
Округление
Операции
Математическая логика
Про приоритет операций
Разбор задач на логические операции
Арифметическая прогрессия
Задачи и разбор некоторых
Окончание модуля
Встречка

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

Зачем это всё
Определение терминов
Блок-схема
Как создавать блок-схемы
Основные блоки
Переменная - что ты такое?
Умение погружаться в предметную область
Как погружаться в предметную область
Экстремальное погружение
Класификация алгоритмов
Теория линейных алгоритмов
Линейные задачи
Алгоритмы с ветвлением
Задачи с ветвлениями
Рутинные задачи. Циклы
Задачи с циклами
Встречка
Числа Фибоначчи
Вложенные циклы
Массивы
Задачи на массивы
Вместо итогов
Беседа с автором

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

Как проходить этот модуль
Где применяется и Демо
Что такое Node.js
Как установить Node.js на Windows
Как установить Node.js на Mac OS
Донастройка vs code
Переменная. let const
Уточнение по выводу данных
Базовая арифметика
Некоторые типы данных
Math
Преобразование типов
Практическая работа
Решение практической работы
Логический оператор
Операции сравнения и логические операци
Практическая работа
Решение практической работы
Практическая работа
Решение практической работы
Некоторые методы работы со строками
Практическая работ
Решение практической работы
Строки. Итоги
Циклы
Массивы
Функции
Не повторяйся
Дополнение по функциям
Введение в объекты
Объектное мышление
Манипуляция DOM
Практика манипулирования
Практическая работа
Решение практической работы
Дата и время
Работа с файлами
Как создать проект и подключать зависимости
export import
Обработка исключений
Функции высшего порядка

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

Индустрия и React
Первый шаг
Второй шаг
Особенность рендера
Практическая работа
Решение практической работы
Интеграция JS
Практическая работа
Решение практической работы
Вместо циклов
Вместо стилей
Подключение Bootstrap
Выделение компонентов
Проброс свойств
Hooks
Зовём друга на Backend'е
Демонстрация использования
Парсинг данных
Практическая работа
Решение практическоцй работы
Косметические правки
Вместо итогов

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

Где применяется
Установка .net на Windows
Установка .net на Mac OS
Hello world
Настройка VS Code
Как проходить модуль
Переменная
Базовая арифметика
Система типов
System.Math
Преобразование типов
Получение данных
Практическая работа
Решение практической работы
Операции сравнения и логические операции
Ветвления
Практическая работа
Решение практической работы
Практическая работа
Решение практической работы
Строки
Практическая работа
Решение практической работы
Циклы
Массивы
Как массивы, только лучше
Кортежи
Методы
Вместо DRY
Даты и время
Файлы
Обработка исключений
Сложная тема
Продолжение сложной темы
Встречка

Несколько шагов к объектному мышлению без духоты
Шаг 0
Шаг 1
Шаг 2
Шаг 3. Практическое задание
Шаг 4.Решение практического задания
Шаг 5
Шаг 6
Шаг 7
Шаг 8
Шаг 9. Практическое задание
Шаг 10. Решение практического задания
Шаг 11
Шаг 12
Шаг 13
RESTful API: Обзор фундаментальных концепций

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

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

План на ближайшие два модуля
Первый запуск
Controllers
Практическое задание
Совместное выполнение
Требования
Рефакторинг
Хранилище данных
Models
Endpoints
Рефакторинг
HTTP Status Codes
Практическое задание

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

Подготовка проекта
Инициализация проекта
Подготовка представления
Подключение Bootstrap
Использование Bootstrap
Выделение React-компонентов
Передача данных через свойства
Добавление элемента в набор данных
React-хуки в деле
Унификация id
Добавление формы
Активация формы ввода
Практичесакая работа
Решение практической работы
Очистка формы
Динамическое удаление
Практичесакая работа
Решение infinity-проблемы
Добавление уникального свойства
Установка axios и cors проблема
Настройка CORS
Секретики
Переменные окружения и секретики
Настройка GET—запросов
Настройка POST—запросов
Практичесакая работа
Решение практической работы
Это только начало...

Экзамен

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