Курс «Веб-разработчик с нуля»

Курс школы «Бруноям» «Веб-разработчик с нуля» подойдет, если хотите изучить новую сферу знаний или систематизировать имеющиеся.

Главная цель курса — обучить профессии веб-разработчика от азов кодирования до запуска сайтов на JavaScript и PHP.

В программе курса рассмотрите темы:

• Интернет-технологии: оформление веб-пощадок, протоколы, хостинги и домены, настройка рабочей области.
• HTML: теги, кодировки, гиперссылки и якорные ссылки, таблицы.
• Описание документа: виды селекторов, свойства текста и шрифтов, цвета и фон.
• Создание макета страницы с помощью блоков и flexbox.
• Photoshop для верстки: картинки, встраивание видео и карт.
• Основы JavaScript: массивы, методы, консоли, функции и объекты.
• Анимация и интерактивные элементы на сайте.

В результате курса по веб-разработке создадите проект под руководством опытного наставника. Положите в портфолио документ о завершении обучения.

Блок 1. Основы web-технологий

• Постановка личных целей на курс.
• Типы сайтов, функциональность.
• Этапы создания сайта, основные профессии индустрии.
• Сетевые технологии и протоколы Интернета: TCP/IP, HTTP, HTTPS, FTP.
• Хостинг и домен, система DNS.
• Модель «Клиент и сервер»
• Роль браузера и редакторов кода.
• Настройка рабочей области.
• Системы контроля версий Git.

Блок 2. Знакомство с HTML

• Знакомство с HTML: Понятие тега и атрибута.
• Кодировка текста HTML.
• Теги для формирования текста.
• Гиперссылки и адреса файлов.
• Якорные ссылки.
• Ссылка на вызов и отправку email.
• Таблицы в HTML.
• Тег img и его атрибуты. Правила размещения картинок. Форматы изображений: какие выбрать.

Блок 3. Модуль: погружение в CSS

• Основы синтаксиса CSS.
• Основные виды селекторов: идентификаторы, классы, псевдоклассы.
• Баллы специфичности и приоритеты правил.
• Каскад и наследование свойств.
• Контекстный и универсальный селектор.
• Свойства текста и шрифта в CSS.
• Подключение внешних шрифтов.
• Цвета HEX и RGB. Добавление однородного фона к элементам. Фоновая картинка для страницы, настройка фона.

Блок 4. Блочная модель и макет веб-страницы

• Понятие блочных и строчных элементов.
• Ключевые свойства блоков.
• Как рассчитывается размер блока и box-sizing: border-box.
• Что такое блочная модель.
• Применение блоков для построения макета.
• Строчно-блочные элементы.
• Свойство display.
• Устаревшие способы построение макета: знать, нельзя использовать.

Блок 5. Многоколоночные макеты с Flexbox

• Семантические теги для вёрстки макета.
• Основы Flexbox: контейнеры и элементы.
• Выравнивание элементов по основной и поперечной оси.
• Смена осей и вертикальное выравнивание элементов.
• Проблемы применения flexbox.

Блок 6. Основы Adobe Photoshop для верстальщика

• Работа с картинками: кадрирование, тримминг.
• Сохранение: формат, качество, вес.
• Как узнать код цвета.
• Инструменты для работы со шрифтом.
• Копирование готового CSS.
• Измерение расстояний: инструменты, настройки.
• Эффекты и их копирование.
• Встраивание карт и видео.

Блок 7. Позиционирование

• Виды позиционирования: статическое, абсолютное, относительное, фиксированное.
• Особенности разных видов позиционирования.
• z-index и контекст наложения.
• Когда и как использовать позиционирование.
• Пример выпадающего многоуровневого меню.
• Решение типовых задач с позиционированием.

Блок 8. Формы обратной связи

• Основные элементы формы: input, select, textarea, button.
• Состояние полей и псевдоклассы.
• Элементы выбора checkbox, radio, select.
• Группировка элементов: fieldset и legend.
• Стили для псевдоэлемента placeholder.
• Правила написания стилей для форм.
• Стилизация кнопок.

Блок 9. Отзывчивый и адаптивный веб-дизайн

• Понятие адаптивного и отзывчивого веб-дизайна.
• Медиа-запросы.
• Параметры области просмотра и тег Meta viewport.
• Проблемы кроссбраузерной верстки.
• Валидность кода, валидаторы.
• Особенности многостраничных сайтов.
• Правила вёрстки для seo-продвижения.

Блок 10. Анимация с помощью HTML5 и CSS3

• Плавные переходы для создания анимационных эффектов.
• Анимация с помощью keyframes.
• Трансформация элементов.
• Добавление базовых элементов анимации на сайт.

Блок 11. Основы Javascript

• Введение JavaScript.
• Переменные и типы данных.
• Математические операторы и преобразование типов.
• Логические операторы.
• Ветвления и условные операторы.
• Встроенные функции для взаимодействия с пользователем.

Блок 12. Циклы и массивы в Javascript

• Массивы.
• Методы для работы с массивами.
• Циклы for и while.
• Вложенные массивы.
• Работа с консолью.

Блок 13. Функции

• Определение функции. Стрелочная функция и её отличия от обычной. Function Expression и Function Declaration.
• Область видимости. Как она работает. LexicalEnvironment.
• Таймеры и замыкание. Функции setInterval, setTimeout, clearInterval, clearTimeout. Что такое замыкание и как его можно использовать.
• Функции обратного вызова.

Блок 14. Объекты. DOM. События

• Объекты и словари. Как создавать объекты. Ключевое слово this. Получение, изменение и удаление свойств объекта. Ссылки на объекты.
• Прототипное наследование. Как работает наследование свойств и методов. Конструкторы.
• Классы. Определение классов и преимущества использования. Расширение классов. Приватные методы и публичные. Геттеры и сеттеры. Пример создания программы с применением классов и архитектура MVP.
• DOM. Объектная модель страницы и зачем она нужна. Поиск элементов на странице и их получение. Перебор элементов и основные свойства.
• События.

Блок 15. Анимация и эффекты в JavaScript

• JavaScript-анимации. Изменение CSS свойств элементов. Кривая Безье. Примеры анимаций.
• Рендеринг в браузере. Оптимизированные свойства. Функция requestAnimationFrame.
• Библиотеки с анимациями.

Блок 16. Интерактивные элементы

• Слайдер.
• Аккордион.
• Тултип.

Блок 17. Node.js

• Введение в Node.js. Возможности Node.js. Кратко о модулях и их предназначениях: fs, child_process, https.
• NPM. Основные команды пакетного менеджера npm. Инициализация проекта и установка первых пакетов. Структура package.json.
• Основы Webpack. Зачем нужны сборщики и какие этапы можно автоматизировать. Первый конфиг Webpack и автоматизация сборки: минификация кода, конкатенация модулей и использование препроцессора SCSS.
• Препроцессор SCSS. Преимущества препроцессоров. Краткий обзор различий между некоторыми: SCSS, SASS, Less, post-css. Основные конструкции: переменные, миксины, функции.

Блок 18. Работа с сервером

• Promise API.
• Обращение к серверу и класс XMLHttpRequest.
• Метод fetch.
• Библиотека Axios.

Блок 19. Основы React

• Компоненты и JSX.
• Состояние компонентов.
• Хуки.
• Стилизация компонентов.
• React-Router.

Блок 20. Основы TypeScript

• Статическая типизация.
• Интерфейсы и типы.
• Перечисляемые типы Enum.

Блок 21. Обзор дорожной карты JS-разработчика

• Кратко о том, как развиваться разработчику дальше и что изучать.

Блок 22. Основы PHP-программирования

• Назначение серверных технологий.
• Локальный веб-сервер и домен.
• Создание динамических веб-страниц.
• Понятие CMS-систем.
• Размещение сайта на хостинге.
• Протокол FTP для загрузки файлов.
• Подведение итогов и завершение проекта.

• Формат
  Самостоятельно
  Видеоуроки
  Обучение в ЛК на сайте автора
• Продолжительность
  8 месяцев
• Уровень сложности
  Для новичков
• Когда вы будете учиться
  В любой день в любое время
• Домашние задания
  ЕстьС проверкой
• Документ об обучении
  СертификатДиплом Освоение программы курса
• Сопровождение
  Куратором
• Общение с группой
  Форум или чат внутри ЛК
• Техническая поддержка
  В рабочее времяЧат в ВКЧат в мессенджереЭлектронная почтаТелефон
• Перспективы после обучения
  Стажировка
• Срок доступа к материалам
  Бессрочный