Профессия Веб-разработчик с нуля от Loftschool

    Loftschool
    Стоимость курса
    76 300 Р
    Длительность
    7 месяцев
    Сертификат
    Да
    Начало курса
    В любой момент
    Трудоустройство
    Содействие

    Кому подойдет

    • Для новичков в IT

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

    • Вы освоите лучшие практики и инструменты Flexbox, БЭМ-нейминг, SASS, а с помощью них научитесь верстать макеты любой сложности.
    • Вы научитесь создавать проекты под разные экраны и разрешения от мобильных до широких экранов, а также ваша верстка будет безупречно смотреться в любых браузерах.
    • У вас в руках будет вся «база» переменные, функции, объекты и массивы, обработка ошибок и отладка.
    • Вы перейдете к модульному написанию JavaScript-кода и научитесь связывать модули через import, export и require.
    • Освоите работу с редактором кода, работу в консоли, научитесь работать с системой контроля версий Git и загрузите ваш проект на GitHub Pages.
    • Научитесь работать с макетами с помощью удобного инструмента Figma, а также научитесь работать с SVG-графикой, которая стала стандартом в сфере веб-разработки.
    • Вы сможете использовать новые интерфейсы API, реализованные в стандарте HTML History, Drag-and-Drop, File, Storage. Освоите работу с API Яндекс, Youtube и стандартных API браузера.
    • Создадите свой сайт с помощью одного из самых популярных фреймворков Laravel и подключите автоматическое тестирование с помощью phpUnit.
    • Познакомитесь с правилами безопасной разработки как защититься от проникновения в базу данных или кражи пользовательских паролей.

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

    Основы вёрстки сайтов

    Неделя 1 — Работа с хостингом, HTML

    Основы верстки. Открытие курса
    • Открытие курса
    VSCode. Обзор редактора
    • Введение
    • Страница проекта
    • Краткий обзор редактора
    • Начало работы. Цветовые схемы
    • Горячие клавиши
    • Командная панель
    • Настройки
    • Навигация по коду
    • Настройка горячих клавиш
    • Сниппеты
    • Панель поиска
    • Расширения
    • Расширение CSS Peek
    Устройство интернета
    • Устройство интернета
    Работа с GitHub Pages
    • GitHub Pages. Работа из браузера
    • Работа с хостингом timeweb
    HTML
    • Введение
    • Первая веб-страница
    • Структура документа
    • Голова документа
    • Полезные расширения редактора
    • Разметка текста
    • Правила написания кода
    • Списки
    • Потомки и родители
    • Форматирование кода
    • Атрибуты
    • Абсолютные и относительные пути
    • Ссылки
    • id и class
    • Якорь
    • Формы. Основные элементы
    • Тег Label
    • Формы. Специфические элементы
    • Отправка формы на сервер
    • Валидация
    • Теги таблиц
    • Emmet
    • Панель разработчика
    БЭМ. Разметка элементов страницы
    • Принцип разметки
    • Использование классов
    • BEM
    • Разметка страницы
    • Разметка содержимого

    Неделя 2 — CSS, работа с макетом, Perfect Pixel

    Figma для верстальщика
    • Figma. Интерфейс
    • Figma. Организация проектов
    CSS. Работа со стилями
    • Теория
    • Подключение стилей
    • Работа с цветом
    • Селекторы тегов и атрибутов
    • Мультиселекторы
    • Универсальные селекторы
    • Приоритет селекторов
    • Псевдоклассы
    • Псевдоклассы порядка
    • Псевдоэлементы
    Работа со шрифтами
    • Безопасные шрифты
    • Бесплатные шрифты
    • Конвертирование шрифтов
    • font-face
    • Наследуемые свойства
    • Общие стили текста
    Блочная модель
    • Теория
    • Строчное и блочное поведение
    • Свойство display
    • Блочная модель
    • Составные свойства
    • Единицы измерения
    • Выравнивание inline-block
    • Свойства позиционирования
    • Приоритет отображения
    • Верстка. Как делать не нужно
    • Perfect Pixel
    Стилизация проекта
    • Приветственная секция
    • Настройка шрифтов
    • Приветственная секция. Стилизация
    • Приветственная секция. Perfect Pixel
    • Активный пункт меню
    • Секция предложений. Разметка
    • Секция предложений. Стилизация
    • Секция предложений. Модификаторы
    • Секция предложений. Perfect Pixel
    • Секция новостей. Разметка
    • Переключатель страниц
    • Секция о банке. Разметка
    • Футер
    • Завершение работы

    Неделя 3 — Flexbox, БЭМ-нейминг

    Вопрос-ответ
    • Практический вебинар с преподавателем.
    Flexbox
    • Введение
    • Флекс-контейнер
    • Выравнивание по главной оси
    • Выравнивание по поперечной оси
    • Выравнивание отдельного элемента
    • Флекс-элемент – контейнер
    • Направление осей
    • Многострочный контейнер
    • Выравнивание многострочного контента
    • Пропорции
    • Пропорции при сжатии
    • Базовый размер
    • Порядок элементов
    Построение лейаута и БЭМ-нейминг
    • Введение
    • Viewport
    • Normalize
    • Блок обертка
    • Контейнер
    • Футер
    • Структура файлов
    • Поведение блочной модели
    • Общие стили
    • Текстовое содержимое
    • Классы-модификаторы
    Flexbox. Реализация проекта
    • Приветственная секция
    • Секция предложений
    • Секция предложений. Примеси
    • Секция предложений. Элементы
    • Секция новости
    • Завершение верстки страницы
    • Страница услуг. Хедер
    • Страница услуг. Секция
    • Страница услуг. Ховер
    • Страница услуг. Секция партнеры
    • Страница услуг. Футер

    Неделя 4 — CSS-анимации

    Частые приемы верстки
    • Центрирование
    • Текст в одну строку
    • Фигуры. Круг
    • Фигуры. Эллипс
    • Фигуры. Треугольник
    • Фигуры. Треугольник без заливки
    • Фигуры. Трапеция
    • Фигуры. Параллелограмм
    • Фигуры. Элементы
    • Градиент
    • Пунктирная линия
    • Фон в полоску
    • Выпадающее меню
    • Спрайты
    • Элементы форм
    Анимации CSS
    • Свойство transition
    • Свойство transition-property
    • Временная функция
    • Эластичные анимации
    • Свойство transition delay
    • Составное свойство transition
    • Неочевидные моменты transition
    • Свойство transform
    • Отмена трансформации
    • Изменение координат трансформации
    • Свойство animation
    • Свойство animation-iteration-count
    • Свойство animation-direction
    • Свойство animation-fill-mode
    • Свойство animation-play-state
    • Анимация секвенцией
    Анимации. Реализация проекта
    • Отзывы. Разметка
    • Отзывы. Стилизация
    • Отзывы. Сетка
    • Секция-разделитель
    • Форма. Поля
    • Форма. Контроллы
    • Приветственная страница
    • Анимации. Банк
    • Анимации. Путешествия
    • Анимации. Видеопродакшн

    Неделя 5 — Защита выпускного проекта

    Вопрос-ответ
    • Практический вебинар с преподавателем.

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

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

    Открытие курса
    • Как проходит обучение
    Вводное занятие
    • Вводное занятие
    Figma для верстальщика
    • Figma. Интерфейс
    • Figma. Организация проектов
    SASS
    • Теория
    • Компиляция
    • Вложенность nesting
    • Арифметические операции operators
    • Переменные variables
    • Примеси mixins
    • Условия conditions
    • Наследование inheritance
    • Циклы loops
    БЭМ. Разметка элементов страницы
    • Принцип разметки
    • Использование классов
    • BEM
    • Разметка страницы
    • Разметка содержимого
    Flexbox
    • Введение
    • Флекс-контейнер
    • Выравнивание по главной оси
    • Выравнивание по поперечной оси
    • Выравнивание отдельного элемента
    • Флекс-элемент – контейнер
    • Направление осей
    • Многострочный контейнер
    • Выравнивание многострочного контента
    • Пропорции
    • Пропорции при сжатии
    • Базовый размер
    • Порядок элементов
    Terminal
    • Введение. Установка
    • Hello World
    • Навигация
    • Текущая директория
    • Создание папок
    • Создание файлов
    • Удаление файлов
    • Копирование. Перемещение. Переименование
    • Исправление опечаток
    • Поиск. Документация
    • Обзор редактора Vim
    • Обзор редактора Nano
    • Экранирование
    GIT
    • Введение
    • Начинаем работать с Git
    • Создание нового репозитория
    • Добавление файлов в индекс область слежения Git
    • Создание коммита
    • Навигация по коммитам. Отмена изменений
    • Типичный цикл работы с Git
    • Ветвления в Git
    • Конфликты при слиянии веток
    • Временное без коммита сохранение данных
    • Работа с удалёнными репозиториями
    • Использование GitHub Pages для хостинга проектов
    CHOCCO. Разметка
    • Секция Hero. Разметка
    • Секция Hero. Стилизация
    • Секция Hero. PP
    • Секция Почему. Разметка
    • Секция Почему. Стилизация
    • Секция Почему. Декор
    • Секция Отзывов. Верстка
    • Секция Отзывов. Декор
    • Форма. Поля
    • Форма. Кнопки
    • Фиксированное меню

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

    Адаптивная вёрстка
    • Теория
    • Типы лейаута
    • Пиксели и проценты
    • Em и rem
    • Viewport units
    • Медиазапросы
    • Mobile First
    • Печатные документы
    • Применение на практике
    • Viewport
    • Ретина Теория
    • Ретина. Медиазапрос
    • Ретина. Суть оптимизации
    • Srcset
    SVG
    • Теория
    • Элемент SVG
    • Прямоугольник
    • Общие свойства
    • Окружность
    • Эллипс
    • Линия
    • Многоугольник и полилиния
    • Знакомство с Path
    • ViewBox
    • Группировка
    • Фильтры
    • Градиенты
    • Текст и градиент
    • Свойства CSS
    • Добавление на страницу
    • SVG-спрайт
    CHOCCO. Адаптивная верстка
    • Настройка лейаута
    • Hero
    • Hero. Гамбургер меню
    • Основное меню
    • Perfect Pixel
    • Секция Отзывов
    • Форма
    • Hero. Версия под телефоны
    • Остальные секции
    • Mobile vs Desktop first

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

    Основы JavaScript
    • Введение
    • Типы данных
    • Оператор If
    • Оператор For
    • Функции
    • Область видимости и замыкания
    • Всплытие
    • Типы объявления функций
    • Стрелочные функции
    • Let
    • Const
    • Объекты
    • Массивы
    • Заключение
    Работа с DOM
    • Введение
    • События
    • Обработка ввода
    • Работа с формами
    • Рабочий пример
    Обработка ошибок и отладка
    • Инструменты браузера
    • Обработка ошибок
    • Стек вызовов
    • Отладка
    JavaScript. Задачи
    • Запуск кода
    • Фильтрация строки
    • Выборка объекта
    • Анализ строки
    • Фильтрация массива
    • Слайдер. Механика работы
    • Слайдер. Реализация
    • Слайдер. Динамические переменные
    • Слайдер. Перенос элементов
    • Модальное окно. Генерация разметки. ч
    • Модальное окно. Генерация разметки. ч
    • Модальное окно. Закрытие
    • Модальное окно. Функция для создания
    • Модальное окно. Шаблоны
    • Создание блоков
    • Закрашивание блоков

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

    Вопрос-ответ
    • Практический вебинар с преподавателем.
    jQuery. Работа с библиотекой
    • Теория jQuery
    • Подключение библиотеки
    • Документация
    • Проверка версии
    • Селектор
    • Document Ready
    • Обработка событий
    • Свойства элемента
    • Размеры элемента
    • Работа с классами
    • Работа с формами
    • Работа со стилями
    • Свойства для коллекции
    • This в событиях
    • Управление коллекцией
    • Навигация родители и потомки
    • Навигация соседи
    • Перебор коллекции
    • Фильтрация набора
    • Контекст
    • Добавление элементов
    • Удаление и клонирование элементов
    • Делегирование событий
    • Готовые анимации
    • Собственные анимации
    • Очередь анимаций
    • События страницы
    • Отложенный обработчик
    Работа с формами. Ajax
    • Асинхронные сетевые запросы
    • JSON
    • Работа с формами
    • Валидация данных
    • Отправка данных на сервер
    CHOCCO. Виджеты
    • Слайдшоу
    • Вертикальный аккордеон. Верстка
    • Вертикальный аккордеон. Реализация
    • Слайдер
    • Форма. Вызов модального окна
    • Форма. Отправка запроса
    • Форма. Валидация
    • Форма. Обработка ответа

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

    NPM
    • Что такое npm?
    • Установка и обновление npm
    • Справка по работе с npm
    • Поиск и установка пакетов
    • Зависимости пакета
    • Файл манифест package.json
    • Удаление и обновление пакетов
    • dependencies и devDependencies
    • Webpack и npx
    • npm-скрипты
    • npm, git и github
    Gulp
    • Теория
    • Установка
    • Первый таск
    • Обработка нескольких файлов
    • Добавляем плагин
    • Серия тасков
    • Task Default
    • Компилируем Sass
    • Склейка файлов
    • Слежка за файлами
    • Dev-server
    • Внешний адрес browser-sync
    • Продвинутый импорт стилей
    • Автопрефиксы
    • Пересчет единиц измерения
    • Группировка медиа-запросов
    • Минификация
    • Sourcemaps
    • Сборка JavaScript
    • Трансляция ES
    • Минификация JavaScript
    • Генерация SVG-спрайта
    • Разделение конфига
    • Параллельные таски
    • Dev vs Prod
    YouTube Iframe API
    • Подготовка
    • Инициализация
    • Запуск и остановка
    • Продолжительность видео
    • Ползунок
    • Завершение работы
    Подключение Яндекс.Карты
    • Подключение Яндекс.Карты
    CHOCCO. Интерактивные элементы
    • Горизонтальное меню. Верстка
    • Горизонтальное меню. Открытие элемента
    • Горизонтальное меню. Закрытие элементов
    • Горизонтальное меню. Мобильная версия
    • Горизонтальное меню. Текст
    • OPS. Подготовка
    • OPS. Обработка скролла
    • OPS. Функция сдвига
    • OPS. Смена секций
    • OPS. Исправление ошибок
    • OPS. Управление с клавиатуры
    • OPS. Навигация по ссылкам
    • OPS. Боковое меню
    • OPS. Рефакторинг
    • OPS. Мобильная версия

    Неделя 6 — Выпускной

    Основы PHP
    • Введение
    • Клиент-серверное взаимодействие
    • Протокол HTTP
    • Основы PHP
    • Обработка формы на PHP

    Отзывы о школе 2

    5 из 5
    2
    0
    0
    0
    0
    Сортировать:
    Дате публикации
    • Дата публикации
    • Популярности
    • Сначала положительные
    • Сначала отрицательные
    • Полина 14 августа 2023

      Я успешно завершила трехкурсовую программу по веб-верстке, включавшую основы верстки, введение в веб-программирование и знакомство с vue. Особенно хочу отметить четкую структуру курсов, глубокое изучение материала, продуманный подход и неравнодушие преподавателей, имеющих обширные знания на предмет. Мне было интересно узнавать новое, и я считаю, что уровень ценообразования средний, а сроки проведения курса интенсивны - полтора месяца, что требует огромного объема работы, но приводит к хорошим результатам в короткие сроки. Этот курс для тех, кто готов приложить все усилия для достижения цели. Я оценила наличие наставников, так как часто возникали вопросы и проблемы. Преподаватели всегда были готовы помочь, подробно объясняли и помогали искать решения. Пройдя эти курсы, я уверена, что сэкономила много времени в будущем, избежав поисков необходимых ресурсов в сети. Стоимость одного курса составляет от 21 000 до 26 000 рублей, но есть возможность получить автоматическую скидку 10% при прохождении трех курсов. Оплата может быть произведена за каждый курс отдельно или за трехкурсовой цикл в целом. Общение со специалистами проходит через slack. Если есть какие-либо вопросы или неясности, можно задать их в чате или написать преподавателю. Однако, хотелось бы, чтобы было больше бесплатной литературы или видео для подготовки перед началом курсов. Впрочем, такой материал можно найти в сети в изобилии. Правда, есть отдельный курс по JavaScript, который я хотела бы пройти перед изучением vue, несмотря на то, что перед этим курсом даются основы js. Я рекомендую этот курс, потому что качество на высоком уровне, но я не имею опыта сравнения с другими курсами программирования.

      Был ли отзыв полезен?
    • Леонид 7 июня 2023

      Недавно я успешно завершил комплексный курс по изучению JavaScript и смело могу утверждать, что он соответствовал моим высоким ожиданиям. Меня впечатлила грамотная балансировка между теоретическими материалами и практическими заданиями, представленными в программе курса, которые позволяли закрепить полученные знания на практике. Хочу поблагодарить преподавателя курса, Мелюкова Сергея, за ясность и доступность передачи знаний, а также за интересные и содержательные вебинары, которые были настоящей помощью при выполнении выпускной работы. Также я хотел бы отметить помощь моего наставника, Анатолия Барцева, который всегда был готов прийти на помощь и помочь мне преодолеть трудности. Я также благодарен Роману Прилипе, за качественную поддержку на протяжении всего периода обучения. Особенно ценю многообразие выпускных проектов, которые позволили мне успешно применить все полученные знания и умения на практике, развить свои творческие способности. В целом, данный курс стал прочной основой для моего дальнейшего профессионального развития в области JavaScript-разработки и оставил после себя исключительно положительные впечатления.

      Был ли отзыв полезен?
    Посмотреть все отзывы о Loftschool