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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

4 недели

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

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

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

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

      • Редакторы кода: Sublime Text 3, VS Code, Atom

      • Основы HTTP

      • Модель “клиент/сервер”

      • Хостинг, хостер

      • Регистратор, домен

      • IP, DNS

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

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

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

      • Необходимое ПО для работы с хостингом

    • HTML. Теги и работа с разметкой

      • Структура HTML-документа.

      • Emmet — инструмент, ускоряющий работу с HTML.

      • Необходимые в работе теги и их атрибуты.

      • Форматирование кода, комментирование.

      • Ссылки — предназначение и применение.

      • Теги форм и таблиц.
    • Разметка элементов страницы

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

      • Логические составляющие элементов страницы

      • Разметка элементов

      • Семантика верстки

      • Бэм-Нейминг

      • Ответы на вопросы

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

      • Часто используемые свойства CSS

      • Оформление элементов страницы

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

      • Префиксы

      • Модификация готовых элементов

      • Perfect Pixel

  • Неделя 3 — Flexbox, БЭМ-нейминг
    • Основы верстки

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

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

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

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

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

      • Точные и относительные единицы измерения.
    • Flexbox

      • Разбираем новый модуль CSS — Flexbox

      • Основные понятия во флексбоксе

      • Поведение флексбокс-лэйаута

      • Преимущества перед блочной версткой

      • Управление пропорциями и порядками блоков

      • Использование флексбокса в мобильной верстке

      • Применение знаний на практике — верстаем макет на флексбоксе

    • Построение лейаута и БЭМ-нейминг

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

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

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

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

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

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

    • Верстка страниц

      • Применение знаний на практике

      • Верстка “боевых” страниц

      • Применение знаний на практике

      • Старт проекта с нуля

      • Построение шаблона для работы

  • Неделя 4 — CSS-анимации
    • Частые приемы верстки

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

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

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

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

      • CSS3-свойства

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

         

    • Анимации CSS

      • Плавное изменение состояний элементов

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

      • Keyframes — пишем покадровую анимацию

      • Трансформация элементов

      • Бесконечная анимация

    • Применение анимаций на практике

      • Реализуем заданные анимации

      • Полезные навыки при работе с анимациями

      • Управление свойствами

      • Покадровые анимации

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

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

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

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