[Яндекс.Практикум] Веб-разработчик. Часть 5 из 10 (2023)

[Яндекс.Практикум] Веб-разработчик. Часть 5 из 10 (2023)

Веб-разработчик разрабатывает сайт на языках HTML, CSS и JavaScript. Создаёт интерфейсы с помощью библиотеки React. Настраивает Git, чтобы работать в команде, и Webpack, чтобы собирать файлы проекта автоматически. Веб-разработчик разбирается и в устройстве сервера: может настроить Nginx и запрограммировать сервер на Node.js.

За 10 месяцев обучения от 10 часов в неделю вы освоите востребованные навыки веб-разработчика и соберёте портфолио проектов.

Лендинг — одностраничный сайт о продукте. Это самый простой и востребованный тип сайта. Необходимый минимум для разработчика — умение его реализовать. Мы проанализировали десятки лендингов и собрали канонический «одностраничник» из типовых элементов. Работая над ним, вы освоите базовые концепции и техники вёрстки. Именно они важнее всего на старте.

Вы разработаете свой Инстаграм на JavaScript с использованием библиотеки React. Реализуете возможность добавлять и удалять посты, просматривать публикации других пользователей и ставить им лайки. Для разработки проекта нужны глубокие знания JavaScript, React и умение подключать сайт к серверу.

На многих сайтах информация постоянно обновляется, например: на новостных порталах и в социальных сетях. Здесь недостаточно сделать интерфейс. Нужно описать логику работы сервера: как следует обрабатывать запросы и хранить данные. Обычно этим занимается бэкенд-программист, но и веб-разработчик должен понимать, как работает сервер. В этом проекте вы:
настроите сервер, чтобы он обрабатывал запросы пользователей;
реализуете часть серверной логики: хранение пользовательских данных, запросы к сторонним интернет-сервисам;
свяжете серверную логику с интерфейсом.
После проекта сервер перестанет быть чёрным ящиком. Вы поймёте, как он работает и где что настраивать.

Вот какие проекты вы будете делать:
Одностраничный сайт
Лендинг — одностраничный сайт о продукте. Это самый простой и востребованный тип сайта. Необходимый минимум для разработчика — умение его реализовать. Мы проанализировали десятки лендингов и собрали канонический «одностраничник» из типовых элементов. Работая над ним, вы освоите базовые концепции и техники вёрстки. Именно они важнее всего на старте.

Веб-приложение на React
Вы разработаете свой Инстаграм на JavaScript с использованием библиотеки React. Реализуете возможность добавлять и удалять посты, просматривать публикации других пользователей и ставить им лайки. Для разработки проекта нужны глубокие знания JavaScript, React и умение подключать сайт к серверу.

Создание и настройка бэкенда
На многих сайтах информация постоянно обновляется, например: на новостных порталах и в социальных сетях. Здесь недостаточно сделать интерфейс. Нужно описать логику работы сервера: как следует обрабатывать запросы и хранить данные. Обычно этим занимается бэкенд-программист, но и веб-разработчик должен понимать, как работает сервер. В этом проекте вы:
настроите сервер, чтобы он обрабатывал запросы пользователей;
реализуете часть серверной логики: хранение пользовательских данных, запросы к сторонним интернет-сервисам;
свяжете серверную логику с интерфейсом.
После проекта сервер перестанет быть чёрным ящиком. Вы поймёте, как он работает и где что настраивать.

Программа обучения

Основы HTML, CSS, JS: бесплатный вводный курс
20 часов
Курс посвящён базовому синтаксису HTML и CSS. Вы научитесь управлять цветом и шрифтами, размещать блоки на странице. Всё это — через практику: выполните в тренажёре 4 проекта. Вы напишете программу на языке JavaScript и сделаете страницу интерактивной.

Расширенные возможности HTML и CSS
40 часов
В этом курсе вы расширите знания о семантике HTML-разметки, необходимых CSS-технологиях: flexbox, позиционирование элементов, работа с медиафайлами и виджетами, создание анимаций, работа с формами. Изучите методологию БЭМ — самый популярный в мире подход к организации кода.
Современному сайту необходимо окружение из вспомогательного программного обеспечения. В этом курсе вы подключите к проекту систему контроля версий Git и научитесь работать в командной строке.

HTML и CSS. Работа с макетом, построение сложных сеток, адаптивная вёрстка
20 часов
На этом курсе вы узнаете, какие виды дизайн-макетов используют в работе профессионалы и как готовить макет к вёрстке. Научитесь выстраивать модульные сетки и группировать элементы технологией Grid Layout. Разберётесь, как создавать интерфейсы для разных устройств: настольных компьютеров, ноутбуков, планшетов, смартфонов.
В этом курсе вы продолжите развивать инфраструктуру проекта: освоите инструменты коллективной работы, разместите сайт в интернете и научитесь публиковать изменения в нём из командной строки.

Базовый JavaScript и работа с браузером
60 часов
Полноценное погружение в JavaScript. Исследуете типы данных, научитесь работать с условиями, циклами и функциями. Пустите в ход теорию в настоящем проекте — сделаете сайт интерактивным.

JavaScript — непростые концепции
60 часов
Освоите сложные концепции языка: объектно-ориентированное программирование, асинхронность, замыкания и обмен данными с сервером. Вы познакомитесь с менеджером пакетов npm и научитесь добавлять зависимости в свой проект.

Создание интерфейсов на React
40 часов
Вы изучите библиотеку React и её экосистему. Начнёте делать сайты, состоящие из компонентов, которые можно переиспользовать на разных страницах. Разработка сложных интерфейсов станет быстрее, а код будет проще поддерживать.

Основы бэкенд-разработки
80 часов
Создание веб-приложений требует взаимодействия с сервером. Вы изучите, как работает серверный JavaScript в Node.js, поднимете сервер и настроите его. В результате вы создадите серверный API для сайта, фронтенд которого уже разработали в предыдущем курсе.

Выпускной проект
70 часов
Итоговый выпускной проект, подтверждающий знания и умения. Во время работы над ним не нужно выполнять домашние задания и узнавать новую теорию из тренажёра — здесь всё, как в реальной жизни: задание, сроки, приобретённые навыки и поисковик.

СОДЕРЖАНИЕ

1. Интро
2. Методы работы с данными и условия элементов в DOM
2-1. Введение. Второе знакомство с JavaScript
2-2. let и const против var
2-3. Методы поиска в строке
2-4. Методы преобразования строк
2-5. Методы для работы с числами
2-6. **Неявное преобразование типов
2-7. Явное преобразование типов
2-8. Логические операторы
2-9. Оператор логическое НЕ (!)
2-10. Оператор логическое ИЛИ (||)
2-11. Оператор логическое И (&&)
2-12. Заключение
3. Создание, добавление и удаление элементов в DOM
3-1. Создание, добавление и удаление элементов в DOM. Введение
3-2. Неприятный минус innerHTML
3-3. Создание элементов: createElement и createTextNod
3-4. Добавление элементов на страницу
3-5. Удаление и перемещение элементов
3-6. Клонирование элементов
3-7. template-элементы
3-8. Объект event
3-9. Родственные связи в DOM
3-10. Создание, добавление и удаление элементов в DOM. Заключение
4. Массивы
4-1. Введение. Зачем нужны массивы
4-2. Объединение и преобразование в строку
4-3. Добавление и удаление последнего элемента
4-4. Добавление и удаление первого элемента
4-5. Управление элементами на любых позициях
4-6. Очень похожи на массивы, но не массивы. Коллекции в DOM
4-7. Перебор массива. Методы forEach и map
4-8. Функции обратного вызова и их аргументы
4-9. Отбор элементов массива: метод filter
4-10. Методы some, every, find
4-11. Сведение массива. Метод reduce
4-12. Сортировка массива
4-13. Дополнительно: императивное и декларативное программирование
4-14. Шпаргалка по методам массивов
4-15. Заключение
5. Функции
5-1. Функции. Повторение
5-2.Зачем нужны функции
5-3.Область видимости функции
5-4.Затенение идентификаторов
5-5.Способы создания функции
5-6.Функции — это значения
5-7.Стрелочные функции
5-8.Аргументы по умолчанию
5-9.Функции с неопределённым числом аргументов
5-10.Дополнительно: поднятие переменных и функций
5-11.Заключение
6. Git. Инструменты
6-1. Git. Инструменты. Вступление
6-2. Merge tools
6-3. SSH
6-4. Шпаргалка
6-5. Git. Инструменты. Заключение
7. Дока о самом интересном
8. Как работать с документацией
9. Описание. Проектная работа 5
10. Дополнительные материалы
10-1. После проектной работы
10-2. Конструкция switch-case
10-3. Тернарный оператор
10-4. Циклы. Директивы break и continue