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

2
3
4
5
6
7
Курс включает в себя:
  • CSS3, Flexbox, адаптивная вёрстка.
  • SASS и инструменты для автоматической компиляции.
  • Анимации — делаем сайты живыми и современными.
  • SVG — масштабируемая векторная графика. Retina дисплеи.
  • JavaScript — всё, что обязан знать веб-разработчик.
  • Основы JavaScript и jQuery.
  • Livereload и локальный сервер на node.js.
  • Workflow: terminal, Git, Github, npm и Gulp.

Чему вы научитесь, пройдя курс

  • Писать код быстро, качественно и универсально

    Препроцессоры являются одним из самых часто используемых инструментов современных веб-разработчиков. Они помогают сделать код структурированным, а его написание — быстрым. В LoftSchool вы не только освоите все нюансы работы с SASS, но также научитесь работать с графическими (Prepros, CodeKit, Koala) и консольными (npm, Gulp, gulp-sass) инструментами его компиляции.
  • Использовать векторную графику в формате SVG

    Векторные изображения могут изменять свои размеры, не теряя при этом в качестве. Поэтому такая графика выглядит красиво на всех современных дисплеях, включая Retina-дисплеи и 4К-мониторы. Студенты LoftSchool на практике осваивают все тонкости работы с SVG-графикой: думая о красоте, важно не забывать о производительности и скорости загрузки сайта на разных устройствах.
  • Адаптировать верстку под мобильные устройства

    В современном мире все больше и больше людей просматривают интернет-страницы со своих мобильных устройств. Именно поэтому нужно заботиться о том, чтобы ваша верстка выглядела корректно независимо от того, на каком девайсе ее открыли. Выпускники LoftSchool — это специалисты, программирующие сайты так, чтобы они загружались быстро и работали корректно на любых устройствах и с любой скоростью интернета.
  • Программировать на JavaScript с использованием jQuery 3

    Для придания динамичности и интерактивности вашему сайту, приходится часто манипулировать с элементами на нём, и с этим отлично справляется библиотека jQuery, т. к. позволяет писать динамические элементы быстрее и проще. Помимо этого существует огромное количество уже готовых решений, которые нужно только подключить и правильно настроить. На курсе вы познакомитесь как с чистым JavaScript, так и с лучшими практиками применения jQuery последней версии.
  • Верстать сайты без проблем, используя флексбокс

    В 2017 году Flexbox стал стандартом, окончательно пришедшим на смену классической вёрстке float-ами. На курсе вы узнаете все нюансы работы с Flexbox, а вёрстку при помощи таблиц, float-ов или инлайн-блоков будете воспринимать только как возможность обеспечить поддержку устаревшим версиям браузеров, когда это будет необходимо.
  • Освоите самые современные инструменты автоматизации

    Вы больше не будете терять ни минуты своего времени на лишние действия. С первого дня курса вы начнёте осваивать инструменты, которые используют в самых топовых IT-компаниях: LiveReload, Emmet, terminal, npm, Gulp. Вы также освоите кроссбраузерное, кроссплатформенное синхронное тестирование на Browsersync.
  • Научитесь работать с Git и Github

    В современных веб-студиях и IT-компаниях над одним сайтом или приложением могут работать от двух до десяти и даже сотни программистов. Сегодня работа в команде любого размера немыслима без надежной и быстрой системы контроля версий. На сегодняшний день стандартом в мире веб-разработки стал Git, а ни один Open source проект не обходится без Github. Последний даже стал неким подобием современного портфолио любого веб-программиста. Вот почему LoftSchool уделяет так много внимания изучению и практическому применению Git.
  • Знакомство с серверными языками программирования

    Всё чаще на рынке труда мы встречаем вакансии “full stack”-разработчиков. Безусловно, это один из трендов этого года. Сегодня верстальщик должен знать, как минимум, основы одного из серверных языков программирования. На данном курсе мы коснемся PHP: научимся программировать сложные формы, отправлять и принимать данные, работать с JSON и Ajax. Также разберем наиболее часто встречающиеся ошибки при работе с формами и изучим лучшие современные практики.
Владимир
Главный преподаватель курса

На сегодняшний день верстка не ограничивается только знаниями о механике работы HTML и СSS. Сегодня верстальщику нужно уметь грамотно организовать свое рабочее окружение, подготовить верстку для отображения на мобильных устройствах и уметь реализовать все капризы дизайнера в виде динамических элементов, написанных на JavaScript. На этом курсе мы разберемся, как оптимизировать свою работу при помощи препроцессоров, как подготовить проект к финальной стадии, какие приемы верстки в ходу на сегодняшний день, а также как писать динамические элементы страницы (виджеты) при помощи библиотеки jQuery. Мы также основательно прокачаем ваш воркфлоу. Вы начнёте уверенно работать с терминалом, системой контроля версий Git, освоите Github и начнёте творить настоящие чудеса при помощи Gulp. Несомненным и весомым вложением в ваше будущее станут знания, которые вы получите при работе с формами: PHP, Ajax и JSON больше не будут для вас чем-то страшным. Вступайте в команду LoftSchool, мы прокачаем вас на 100%!

Что вы получите, выбрав наш курс?

  • Программа курса
    Изюминка курса - его программа. Вы получите полноценные и структурированные знания, поданные простым и понятным языком. В нужных пропорциях и под нужным соусом ;)
  • Преподаватели и наставники
    Преподаватели и наставники Loftschool - практикующие разработчики как с опытом разработки в крупных студиях, так и с опытом заработка на биржах фриланса. Поэтому знания, переданные вам, будут разносторонними.
  • Рабочий процесс
    Максимальная эмуляция рабочего процесса - командная разработка и реальные инструменты, которые используют ведущие IT-компании.
  • Команда
    Вы станете частью команды заряженных энтузиазмом единомышленников. Вместе с наставниками и преподавателями рука об руку пройдёте огонь и воду!
  • Личный наставник
    У вас будет личный наставник, который поможет решить все возникающие вопросы как во время обучения, так и после окончания курса.
  • Актуальные технологии
    Вам предстоит изучить только самые востребованные и актуальные технологии. Только те, что действительно используют в топовых мировых IT-компаниях.
  • Вебинары
    Насыщенные и интересные вебинары от лучших преподавателей Loftschool и возможность в режиме реального времени задавать вопросы и получать на них ответы.
  • Записи вебинаров
    Записи вебинаров доступны в личном кабинете студента неограниченное время, поэтому всегда можно вернуться и пересмотреть любую интересующую тему.
  • 5 недель обучения
    Мы сэкономим больше года вашей жизни, которые вы потратили бы на самообучение. Вам предстоит 5 супер-интенсивных недель. Нет другого пути, чтобы прокачать такой набор скиллов в столь короткое время. Но мы уже делаем и будем делать то, что другие называют невозможным!
  • Индивидуальный подход
    Мы знаем, как это - быть новичком, пройти весь путь от нуля до профессионала, в одиночку, без поддержки. Миссия нашей школы - окружить каждого ученика заботой, сделать частью команды, дать силы и мотивацию вырасти в крутого специалиста!
  • Необходимые знания
    Мы были по обе стороны баррикад. Проходили собеседования сами и собеседовали других разработчиков. Мы знаем, что именно нужно вашим будущим работодателям и даем вам именно это.
  • Реальные проекты
    По окончании курса вы получите портфолио с реальными проектами, так как обучение в Loftschool - это максимум практики. Никакой воды.
  • Мы — создатели самого крупного IT-портала видеоуроков в русскоязычном интернете Loftblog. Именно там вы сможете оценить уровень, манеру и способы подачи информации наших преподавателей по их открытым урокам, вебинарам и курсам.
  • Наши выпускники
    Мы выпустили более 1200 успешных выпускников и очень гордимся этим!
  • Нас знают
    Нас и наших выпускников знают в ведущих российских IT-компаниях. Специалисты этих компаний также смотрят наши видеоуроки и обучаются на курсах.

Преподаватели курса

Как проходит обучение

  • Продолжительность обучения:

    5 недель
  • Курс состоит из:

    13 основных и 2 дополнительных урока
Каждый урок состоит из:
  • Видеоуроки для подготовки

  • Вебинар (2-2,5 ч) либо
    скринкаст (1 ч) + вебинар (1 ч)

  • Методические пособия

  • Вебинары проходят 2 раза в неделю. Обычно это вторник и четверг в 20:00. О возможных переносах сообщаем заранее.
  • Каждый понедельник ученики получают задание, которое необходимо выполнить до следующего понедельника. В конце недели необходимо сдать тест с вопросами по пройденному за неделю материалу. А также в конце недели выдается мастер-класс с решением текущего задания от главного преподавателя.
  • Личные голосовые консультации с наставником — 30 минут в неделю. Текстовые не лимитированы.
    По выходным — групповая работа с наставником (1-2 часа практики).

Учебная программа

Мы запланировали для вас более 24 вебинаров и мастер-классов, разделив их на блоки по темам:

  • Неделя 1

    Настройка рабочей среды

    • Владимир Сабанцев

    • Знакомство с преподавателями, наставниками, и одногруппниками.
    • Правила написания качественного кода.
    • Emmet — учимся писать код быстро.
    • Выбор и настройка редактора кода: Sublime text, Atom, Brackets, Visual Code.
    • Необходимые программы и утилиты для вёрстки.
    • Браузеры и браузерные плагины для разработки: PerfectPixel и пр.

    Git и Github

    • Ковальчук Дмитрий

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

    Основы SASS

    • Владимир Сабанцев

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

    • бонусный урок: "Методологии верстки - БЭМ-нейминг"
  • Неделя 2

    Основы SVG

    • Кучма Юрий

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

    Flexbox на замену Float

    • Владимир Сабанцев

    • Разбираем новый модуль CSS – Flexbox.
    • Основные понятия во флексбоксе.
    • Поведение флексбокс-лэйаута.
    • Преимущества перед блочной версткой.
    • Управление пропорциями и порядками блоков.
    • Использование флексбокса в мобильной верстке.
    • Применение знаний на практике — верстаем макет на флексбоксе.

    Адаптивная верстка

    • Владимир Сабанцев

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

    Структуры языка JavaScript

    • Владимир Сабанцев

    • Переменные и функции. Учимся правильно переиспользовать наш код.
    • Интерпретация и компиляция кода. В чем разница.
    • Типы данных — структура, методы работы с ними и конвертация.
    • Область видимости переменных.
    • Различные типы функций и их применение.
    • Условия (операторы if, else, “?”).
    • Циклы (while, for, do…while, break/continue).

    Работа с интерфейсами JavaScript

    • Владимир Сабанцев

    • DOM — ищем, модифицируем и создаем элементы на HTML-странице.
    • BOM — рассматриваем, какие данные позволяет получить браузер средствами JavaScript.
    • Массивы, Объекты, Коллекции — в чем отличия?
    • Часто используемые методы массивов и объектов.
    • Структуры циклического перебора и фильтрации массивов.
    • События и механизм их работы в языке. "Всплытие", "Погружение", "Захват".
    • Манипуляции с элементами (перемещение, перенос, копирование и пр.).

    Работа с элементами средствами jQuery

    • Владимир Сабанцев

    • Знакомство с библиотекой jQuery 3.1.x
    • Селекторы ("Selectors") в jQuery. Понятие и механизм работы.
    • DOM-манипуляции ("Manipulation") элементами на HTML-странице.
    • Работа с наборами элементов.
    • Изменение свойств, атрибутов, содержимого и стилей элементов.
    • Фильтрация и перебор найденных элементов.
    • Генерирование HTML-разметки.
    • Определения положения и измерение выбранного элемента.
  • Неделя 4

    Анимации и настройка плагинов

    • Владимир Сабанцев

    • Синтаксис библиотеки jQuery для создания анимаций ("Effects").
    • Сложности и методы их решений при написании анимаций.
    • Значение this в методах jQuery.
    • Подключение и настройка jQuery-плагинов.
    • Наиболее распространённые плагины — рассмотрение и разбор методов.
    • Применение и параметры функций jQuery.

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

    • Владимир Сабанцев

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

    Работа с формами. Ajax

    • Ковальчук Дмитрий

    • Open Server — установка, настройка и нюансы работы.
    • Простой локальный сервер на PHP из терминала.
    • JSON-формат передачи данных.
    • Ajax средствами jQuery.
    • Лучшие практики при работе с Ajax.
    • jQuery Deferred Object при работе с Ajax.
    • Валидация формы без сторонних плагинов.
    • Корректная обработка данных на клиенте и на сервере.
  • Неделя 5

    Workflow: terminal, npm, gulp

    • Ковальчук Дмитрий

    • Terminal — установка, настройка, лучшие практики.
    • Знакомство с Node.js.
    • Инициализация нового npm-пакета. Настройка package.json файла.
    • Установка, обновление и удаление зависимостей проекта. Dependencies и devDependencies.
    • Глобальная и локальная установка npm-пакетов.
    • Работа с Gulp, Browsersynс и ещё 10 самых важных gulp-плагинов.
    • Сборка проекта в продакшен.

Программа по числам

Выпускной проект
  • В течение курса, шаг за шагом мы вместе с вами выполним боевой проект — настоящий лендинг для магазина бургеров.
  • Каждую неделю вы будете выполнять часть этого проекта, строго соблюдая техническое задание и дедлайны – всё, как в реальной веб-студии.
Методические пособия
методические указания

Благодаря методичкам, которые мы подготовили для вас, вы сможете быстро и легко разобраться даже с самой сложной темой! Мы взяли за основу официальную документацию к каждой технологии и самые актуальные статьи, а затем максимально просто и доступно изложили всё это в наших методичках. Никакой воды, только лучшие практики, наглядные примеры и потрясающий дизайн! Хотите посмотреть?

Компании, в которых работают наши выпускники
Mail.ru
Yandex
Rambler
EPAM
T Systems
Reg.ru
Embria
Microsoft
Связной
Tutu.ru
Регистрация на обучение
Cпособы оплаты
  • visa
  • mastercard
  • paypal
Старт курса по мере набора группы
Оставьте заявку на курс и мы свяжемся с вами, как будет определена дата старта
Или подпишитесь на нашу рассылку и будьте в курсе новостей
Хотите получить мгновенный ответ на любой вопрос по курсу?
Задайте их онлайн-консультанту!
Мы онлайн 24 часа в сутки. Вы также можете написать нам на почту или в скайп: loftschool
Авторизоваться
Нет аккаунта? Зарегистрируйтесь
Регистрация
Уже зарегистрированны? Войти
Авторизоваться
Ничего страшного, введите свой e-mail и мы вышлем вам инструкции по восстановлению пароля.
Вспомнили пароль? Войти
Авторизоваться
Ничего страшного, введите свой e-mail и мы вышлем вам инструкции по восстановлению пароля.