Курс включает в себя
  • Как устроен интернет, сервер и браузеры.
  • Инструменты веб-разработчика:
    Sublime Text 3, Filezilla и др.
  • HTML5 и CSS3, кроссбраузерная вёрстка.
  • Работа с PSD-макетами в Adobe Photoshop.
  • Методологии вёрстки:
    bem-naming и др.
  • Верстка динамических элементов. CSS3-анимации.
  • Впечатляющий проект для вашего портфолио.
  • Вёрстка сайта “под ключ” с размещением на хостинге.

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

  • Уверенно работать с PSD-макетами

    Для создания дизайн-макетов большинство дизайнеров выбирает Photoshop. Именно поэтому верстальщику так необходимо знать основы работы с этой программой. В LoftSchool вы научитесь быстро и качественно нарезать макет и готовить изображения для вёрстки.
  • Использовать возможности CSS3

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

    Чтобы ваш сайт смогли увидеть во всём мире, его нужно разместить в сети интернет. Первым делом регистрируется доменное имя. Затем выбирается надёжный и удобный хостинг. В этом процессе легко запутаться, не имея опыта. Грамотные преподаватели и наставники LoftSchool разложат всё по полочкам и превратят этот процесс в четкую последовательность простых шагов.
  • Уверенно пользоваться HTML5

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

    Современная верстка должна быть подчинена одному из существующих стандартов. На вебинарах мы шаг за шагом разберем, какие бывают современные подходы к верстке. Особый акцент будем делать на методологии именования классов “БЕМ-нейминг”, используемую в компании Яндекс.
  • Применять на практике лучшие приёмы в вёрстке

    У каждого верстальщика есть свой личный набор подходов к реализации типовых элементов на странице и решению распространённых задач. У вас появится своя “личная копилка” подобных решений на каждый случай жизни. Любой, даже самый сложный, макет состоит из простых блоков. Вы научитесь их выделять, разбивая сложную задачу на простые составные части.
Владимир
Владимир
Главный преподаватель курса

Каким бы сложным ни было приложение или сайт, для него всегда нужен интерфейс. И этот интерфейс должен быть сверстан правильно, с прицелом на будущее. Ошибки в верстке видны пользователю сразу же, при первом взгляде. Именно поэтому я приглашаю вас пройти курс по основам верстки, так как сверстал уже больше 300 сайтов различных типов и мне есть, чем с вами поделиться!

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

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

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

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

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

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

    10-ти уроков
Каждый урок состоит из:
  • Видеоуроки для подготовки

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

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

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

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

  • Неделя 1
    • Как устроен интернет. HTTP, IP, DNS

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

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

      • Твердохлеб Игорь

        Твердохлеб Игорь

      • Введение в профессию. Платформа обучения.
      • Основы HTTP.
      • Модель “клиент/сервер”.
      • Клиентские и серверные языки программирования.
      • Хостинг, хостер.
      • Регистратор, домен.
      • IP, DNS.
    • HTML. Теги и работа с разметкой

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

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

      • Редакторы кода: Sublime Text 3, VS Code, Atom.
      • Структура HTML-документа.
      • Emmet — инструмент, ускоряющий работу с HTML.
      • Необходимые в работе теги и их атрибуты.
      • Форматирование кода, комментирование.
      • Ссылки — предназначение и применение.
      • Семантика кода HTML — применение тегов по своему назначению.
    • Работа с хостингом

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

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

      • Использование панели хостинга.

      • Выгрузка сайта в сеть Интернет.

      • Работа с файлами по FTP.

      • Filezilla.

      • Total Commander.

      • Cyberduck.

      • Atom + remote-ftp.

      • VS Code + ftp-sync.

      • Sublime Text + sftp.

  • Неделя 2
    • HTML. Формы и таблицы

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

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

      • Теги форм.

      • Теги таблиц.

      • Неочевидные вещи в работе с таблицами.

      • Анализ макета для последующей разметки.

      • Этапы работы с дизайн-макетом.

      • БЭМ-нейминг (способ именования компонентов), введение.
    • CSS

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

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

      • Добавление стилей к HTML-страниц — различные способы подключения стилей, их специфика и применение.

      • hex, text, rgb, rgba, hsla — работа с цветом, форматы хранения палитры и их применение.  

      • Создаём начальную структуру проекта.

      • Разбираемся с CSS-селекторами и их синтаксисом.

      • Отношение блоков между собой — “родители”, “потомки” и “соседи”.

      • Работа со шрифтами. Подготовка шрифтов для применения в WEB их подключение и настройка.

      • Абсолютные и относительные пути.

    • Работа с PSD-макетом

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

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

      • Работа с дизайн-макетом.

      • Разбор PSD-макета на необходимые верстальщику изображения.

      • JPEG, PNG, SVG, GIF — различие в форматах хранения изображений.

      • Работа со слоями — необходимые команды и инструменты.

      • Настройка рабочего пространства Photoshop.

      • Горячие клавиши и приемы, ускоряющие работу.

      • Альтернативные инструменты для работы с макетом (adobe.Assets, Avocode, zeplin.io).
  • Неделя 3
    • Основы верстки

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

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

      • Основы “блочной” вёрстки.

      • Поведение элементов: блочное и строчное.

      • Блочная модель элементов. Свойства и настройка поведения блоков.

      • Расположение блоков на странице. Вёрстка.

      • Свойства позиционирования элементов и приоритет наложения блоков.

      • Точные и относительные единицы измерения.
    • Построение лейаута и БЭМ-нейминг

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

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

      • Подготовка структуры документа для “боевого” шаблона.

      • Настройка стилей для рабочего шаблона. Normalize.css.

      • Теория логических блоков — смотрим на макет “издалека”.

      • Модульность. Правила и способы верстать независимыми блоками.

      • Методологии именований блоков и создания структуры.

      • БЭМ-нейминг — продвинутые техники использования.

  • Неделя 4
    • Практический вебинар по верстке

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

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

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

      • Приведение страниц в соответствие с дизайн-макетом.

      • Подготовка вёрстки для динамических элементов.

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

      • CSS3-свойства.

      • Префиксы “новых” CSS-свойств. Кроссбраузерная работа со стилями.

      • CSS3-анимации. Рассмотрение свойств и принципов работы.

      • Keyframes — пишем покадровую анимацию.
    • Работа сайта изнутри. Взгляд в будущее

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

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

      • “Жизненный цикл” сайта.

      • Разделение обязанностей между разработчиками.

      • “Хороший тон” написания кода. Стиль кода.

      • Начальный анализ дизайн-макета.

      • Основы построения рабочего шаблона.

      • Работа серверного программиста “в двух словах”.

      • Sublime text. Установка и настройка редактора кода.

      • Необходимые программы и плагины для вёрстки.
  • Неделя 5
    • Подводим итоги курса

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

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

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

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

      • Выпускной, выдача дипломов.

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

      • Подводим итоги.

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

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

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

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