[loftschool] Веб-разработка для начинающих 2019

[loftschool] Веб-разработка для начинающих 2019

За 6 недель освойте адаптивную вёрстку, JavaScript и получите мощный проект в портфолио.

За 6 недель вы научитесь​

​

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

Спойлер: Неделя 1 — Git и GitHub, SASS, разметка страницы

Открытие курса

• Знакомство с курсом.
• Технологии, изучаемые на курсе.
• Организация рабочего процесса.
• Советы для успешного прохождения обучения.
• Административные вопросы.

SASS
Видеокурс

• Знакомимся с препроцессорами.
• Преимущества препроцессоров.
• Препроцессор SASS.
• Prepros, CodeKit, Koala — графические утилиты для компиляции SASS и настройки LiveReload.
• Вложенности.
• Наследования.
• Работа с переменными.

BEM
Видеокурс

• Логические блоки.
• БЭМ-нейминг.
• Именование классов по методологии BEM.

Terminal
Видеокурс

• Terminal. Уверенная работа в CLI.
• Работа с файловой системой.
• Знакомство с консольными редакторами.
• Поиск файлов.
• Горячие клавиши.
• Полезные команды терминалы.

Git и GitHub
Видеокурс

• Системы контроля версий — зачем нужны и как начать ими пользоваться.
• Знакомство с Git и корректная установка.
• Учимся работать с утилитой по настройке git — git config.
• Настройки системные, глобальные и локальные. Их приоритет.
• Типовой цикл работы с Git.
• Github — от основ до продвинутых техник и нюансов работы.
• Github Gist — ваша личная и всеобщая библиотека кода и сниппетов.
• Github Pages — как хостинг ваших проектов.

Flexbox
Видеокурс

• Верстка лейаута с флексбокс.
• Флекс-элемент.
• Флекс-контейнер.
• Управление осями флекс-контейнера.
• Выравнивание элементов.
• Пропорции.
• Порядок элементов.

Вёрстка

• Начало работы над проектом.
• Разметка лендинга.
• Структура проекта.
• Вёрстка элементов.

Спойлер: Неделя 2 — SVG, адаптивная и мобильная вёрстка

SVG
Видеокурс

• Работа с геометрическими примитивами SVG.
• Анимации SVG-элементов с помощью CSS.
• Трансформации векторных объектов.
• Фильтры SVG на примере эффекта размытия.
• Масштабирование векторной графики.
• Градиенты в SVG.
• Графические векторные редакторы. Редактор Inkscape.
• Работа с векторными иконками и различные способы их подключения.

Адаптивная вёрстка
Видеокурс

• Что такое медиазапросы? Разбираемся с их типами и параметрами.
• Рассмотрение различных типов верстки и способов ее организации: статичная, адаптивная, резиновая, респонсив.
• Относительные единицы и их применение (em, rem, %, vh, vw).
• Оптимизация изображений под дисплеи "Ретина".
• Построение стилей под мобильную верстку.
• Понятие "Брейкпоинтов".
• Готовые решения для реализации мобильной верстки.

Мобильная вёрстка
Практический вебинар

• Актуальный набор брейкпоинтов.
• Реализация вёрстки под заданные расширения.
• Частые проблемы мобильной вёрстки.
• Применение знаний на практике.
• Структура проекта для удобной работы.

Спойлер: Неделя 3 — JavaScript, работа с DOM

Основы JavaScript
Видеокурс

• Var, let, const.
• Основы функций (параметры, аргументы, возврат значений).
• Типы объявления функций.
• Область видимости и замыкание.
• Всплытие.
• Базовые операции с объектами.
• Базовые операции с массивами.

Работы с DOM
Видеокурс

• Создание элементов.
• Выборка и модификация элементов.
• Формы и поля ввода.
• Механизм DOM-событий.
• Обработчики событий (обработка, прерывание).
• Делегирование.

Практическое занятие

Спойлер: Неделя 4 — Обработка ошибок, работа с формами, Ajax

Обработка ошибок и отладка
Видеокурс

• Обзор инструментов разработчика.
• Обработка исключений.
• Отладка.
• Стек вызовов.

Работа с формами. Ajax
Видеокурс

• Асинхронные запросы на сервер.
• Работа с формами.
• Валидация данных.
• Отправка данных на сервер.

Практическое занятие

Спойлер: Неделя 5 — Плагины, Workflow, работа с API

Плагины своими руками
Видеокурс

• Знакомство с библиотекой.
• Практика написания виджетов страницы.
• Написание своих плагинов и расширение библиотеки jQuery.
• Частые практики при написании интерактивных элементов.
• Смотрим наперёд, предотвращаем будущие ошибки виджетов.
• Отладка анимаций.

Gulp
Видеокурс

• Что такое таск-менеджеры?
• Установка Gulp.
• Gulp API.
• Установка плагинов для Gulp.
• Часто используемые плагины.
• Работа с локальным сервером.

Npm
Видеокурс

• Установка и обновление npm.
• Поиск пакетов.
• Установка / удаление пакетов.
• Создание package.json файла.
• Обновление пакетов.
• dependencies и devDependencies.
• Семантическое версионирование.
• Npx и webpack.
• Npm-скрипты.
• Работа npm с git и Github.

Работа с API
Практический вебинар

• Что такое API?
• Работа с api популярных сервисов.
• Работа с картами google/yandex.
• Работа с API YouTube.
• Реализация элементов в домашнем проекте.

Спойлер: Неделя 6 — Работа над проектом

Выпускной
Выпускной вебинар

• Подводим итоги.
• Строим планы на будущее.

Спойлер: Выпускной проект

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

Начало обучения: 19.11.2019

Сайт курса: