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

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 и возможность в режиме реального времени задавать вопросы и получать на них ответы.
  • Записи вебинаров
    Записи вебинаров доступны в личном кабинете студента неограниченное время, поэтому всегда можно вернуться и пересмотреть любую интересующую тему.
  • Индивидуальный подход
    Мы знаем, как это - быть новичком, пройти весь путь от нуля до профессионала, в одиночку, без поддержки. Миссия нашей школы - окружить каждого ученика заботой, сделать частью команды, дать силы и мотивацию вырасти в крутого специалиста!
  • Необходимые знания
    Мы были по обе стороны баррикад. Проходили собеседования сами и собеседовали других разработчиков. Мы знаем, что именно нужно вашим будущим работодателям и даем вам именно это.
  • Реальные проекты
    По окончании курса вы получите портфолио с реальными проектами, так как обучение в Loftschool - это максимум практики. Никакой воды.
  • Мы — создатели самого крупного IT-портала видеоуроков в русскоязычном интернете Loftblog. Именно там вы сможете оценить уровень, манеру и способы подачи информации наших преподавателей по их открытым урокам, вебинарам и курсам.
  • Наши выпускники
    Мы выпустили более 1200 успешных выпускников и очень гордимся этим!
  • Нас знают
    Нас и наших выпускников знают в ведущих российских IT-компаниях. Специалисты этих компаний также смотрят наши видеоуроки и обучаются на курсах.

Команда курса

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

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

5 недель

Каждая неделя обучения включает:

Каждый понедельник ученики получают
  • 1
    Его необходимо выполнить до следующего понедельника
  • 2
    Подскажет, что делать в каждый конкретный день курса.
  • 3
    Материалы недели
    Изучать можно в удобном для себя ритме

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

  • Неделя 1 — Git и GitHub, основы SASS, разметка страницы
    • Настройка рабочей среды

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

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

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

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

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

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

      • Кучма Юрий

        Кучма Юрий

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

      •  
    • Верстка

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

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

      • Начало работы над проектом
      • Разметка лендинга
      • Структура проекта
      • Верстка элементов
  • Неделя 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

      • Мелюков Сергей

        Мелюков Сергей

      • Асинхронность в JS

      • Ajax и XMLHttpRequest.

      • JSON – современный формат передачи данных.

      • Различные типы запросов POST, GET и прочие.

      • Сбор данных из формы средствами javaScript.

      • Событие Submit.

         

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

      • Мелюков Сергей

        Мелюков Сергей

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

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

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

      • Знакомство с библиотекой

      • Практика написания виджетов страницы.

      • Написание своих плагинов и расширение библиотеки jQuery.

      • Частые практики при написании интерактивных элементов.

      • Смотрим наперед, предотвращаем будущие ошибки виджетов.

      • Отладка анимаций.

    • Workflow: terminal, npm, gulp

      • Terminal. Уверенная работа в CLI.

      • Знакомство с Node.js и npm.

      • Инициализация нового npm-пакета. Настройка package.json файла.

      • Установка, обновление и удаление зависимостей проекта. Dependencies и devDependencies.

      • Глобальная и локальная установка npm-пакетов.

      • Gulp 4 – корректная работа с последней версией.

      • Browser-synс. Кроссбраузерная разработка. Локальный сервер с livereload.

      • Сборка проекта в продакшен.  

    • Работа с API

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

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

      • Что такое API?

      • Работа с api популярных сервисов

      • Работа с картами google/yandex

      • Работа с api youTube

      • Реализация элементов в домашнем проекте.

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

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

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

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