Веб-верстка

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

Записывайтесь и за 5 недель качественно освойте верстку на HTML и CSS, и получите первый проект в портфолио.

Курс можно проходить
с нулевым опытом

13.07.2020 - 16.08.2020

Курс входит в 2-e профессии:

За 5 недель вы научитесь

Как устроен интернет

Основательно разберётесь в том, что такое: HTTP, IP, DNS, хостинг, хостер, домен, сервер, клиент и пр.

HTML и CSS

Самостоятельно верстать сайты любой сложности с применением Flexbox и BEM-naming.

Кроссбраузерная вёрстка

Ваша вёрстка будет отлично работать на всех браузерах в разных операционных системах.

Работа с PSD макетами

Освоите необходимые навыки работы в Photoshop, adobe.Assets, Avocode и zeplin.io.

Workflow

Освоите работу в консоли Terminal, контроль версий Git, пакетный менеджер npm и сборщик Gulp.

Верстать сайты "под ключ"

Размещать сайты на собственном хостинге с привязкой доменных имён.

Что ожидать от обучения?

Насыщенная программа
16 обучающих модулей, 100+ часов обучения.
Личный наставник
Практикующий IT-специалист будет отвечать на любые вопросы и делать кодревью.
Готовое портфолио
Многостраничный сайт, демонстрирующий уровень ваших знаний.
Доступ к материалам
Не ограничен рамками курса. Вы можете продолжить учиться, когда захотите.
Slack-чат
Общение с преподавателями и одногруппниками в уютной и дружелюбной атмосфере.
Сертификат
С уникальным ID, подтверждающий уровень ваших знаний.
Ламповая атмосфера
Никаких скучных и занудных “дядек“. В Loftschool вас будут учить в атмосфере rock-and-roll.
Начало карьеры
После обучения вы сразу же готовы к старту карьеры в веб-индустрии.

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

Каждый понедельник ученики получают:

Ⅰ
Задание
Его необходимо выполнить до следующего понедельника.
Ⅱ
Недельный план
Подскажет, что делать в каждый конкретный день курса.
Ⅲ
Материалы недели
Изучать можно в удобном для себя ритме.

Посмотрите видео о том, как проходит обучение

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

Каждый модуль состоит из видеоуроков и тестирования.

С наставником и одногруппниками.

От преподавателя.

Кодревью с личным наставником.

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

Неделя 1 — Работа с хостингом, HTML
— Знакомимся со своим личным наставником и группой. — Учимся работать с панелью хостинга и с файлами через FTP. — Делаем разметку для первой страницы проекта. — Размещаем результат работы в сети Интернет и сдаём на проверку наставнику.
- Открытие курса
  Открытие курса
  13.07.2020 20:00
  Развернуть
  Свернуть
  Введение в профессию. Платформа обучения. Устройство курса. Ответы на вопросы.
- VSCode. Обзор редактора
  Модуль
  13 уроков(39:55)
  Тест
  Развернуть
  Свернуть
  - 1. Введение (00:49)
    Бесплатный урок
  - 2. Страница проекта (00:49)
    Бесплатный урок
  - 3. Краткий обзор редактора (01:23)
    Бесплатный урок
  - 4. Начало работы. Цветовые схемы (02:22)
  - 5. Горячие клавиши (01:53)
  - 6. Командная панель (02:56)
  - 7. Настройки (04:19)
  - 8. Навигация по коду (06:52)
  - 9. Настройка горячих клавиш (02:20)
  - 10. Сниппеты (05:00)
  - 11. Панель поиска (01:53)
  - 12. Расширения (06:30)
  - 13. Расширение CSS Peek (02:49)
- Устройство интернета
  Модуль
  1 урок(31:46)
  Тест
  Развернуть
  Свернуть
  - 1. Устройство интернета (31:46)
- Работа с хостингом
  Модуль
  1 урок(16:28)
  Тест
  Развернуть
  Свернуть
  - 1. Работа с хостингом (16:28)
- HTML
  Модуль
  23 урока(01:45:27)
  Тест
  Развернуть
  Свернуть
  - 1. Введение (06:08)
    Бесплатный урок
  - 2. Первая веб-страница (01:05)
    Бесплатный урок
  - 3. Структура документа (01:28)
    Бесплатный урок
  - 4. Голова документа (02:59)
    Бесплатный урок
  - 5. Полезные расширения редактора (07:04)
    Бесплатный урок
  - 6. Разметка текста (03:57)
    Бесплатный урок
  - 7. Правила написания кода (03:13)
  - 8. Списки (01:06)
  - 9. Потомки и родители (02:41)
  - 10. Форматирование кода (05:30)
  - 11. Атрибуты (02:54)
  - 12. Абсолютные и относительные пути (07:56)
  - 13. Ссылки (06:29)
  - 14. id и class (05:36)
  - 15. Якорь (02:23)
  - 16. Формы. Основные элементы (12:33)
  - 17. Тег Label (01:18)
  - 18. Формы. Специфические элементы (04:13)
  - 19. Отправка формы на сервер (05:13)
  - 20. Валидация (03:51)
  - 21. Теги таблиц (05:47)
  - 22. Emmet (07:23)
  - 23. Панель разработчика (04:40)
- Проект. Разметка
  Воркшоп
  5 уроков(33:58)
  Тест
  Развернуть
  Свернуть
  - 1. Принцип разметки (04:40)
  - 2. Использование классов (04:36)
  - 3. BEM (05:46)
  - 4. Разметка страницы (07:36)
  - 5. Разметка содержимого (11:20)
Неделя 2 — CSS, работа с PSD-макетом, Perfect Pixel
— Стилизуем элементы главной страницы — Изучаем свойства позиционирования и поведение блочной модели
- Photoshop. Функциональность для верстальщика
  Модуль
  3 урока(01:02:25)
  Тест
  Развернуть
  Свернуть
  - 1. Рабочая среда и настройки (19:15)
  - 2. Работа со слоями (24:05)
  - 3. Альтернативные способы работы с макетом (19:05)
- CSS. Работа со стилями
  Модуль
  10 уроков(51:49)
  Тест
  Развернуть
  Свернуть
  - 1. Теория (06:59)
    Бесплатный урок
  - 2. Подключение стилей (03:25)
    Бесплатный урок
  - 3. Работа с цветом (05:06)
    Бесплатный урок
  - 4. Селекторы тегов и атрибутов (05:29)
  - 5. Мультиселекторы (05:32)
  - 6. Универсальные селекторы (03:21)
  - 7. Приоритет селекторов (06:30)
  - 8. Псевдоклассы (07:32)
  - 9. Псевдоклассы порядка (05:36)
  - 10. Псевдоэлементы (02:19)
- Работа со шрифтами
  Модуль
  6 уроков(28:55)
  Тест
  Развернуть
  Свернуть
  - 1. Безопасные шрифты (02:13)
    Бесплатный урок
  - 2. Бесплатные шрифты (03:02)
  - 3. Конвертирование шрифтов (06:19)
  - 4. font-face (08:05)
  - 5. Наследуемые свойства (03:51)
  - 6. Общие стили текста (05:25)
- Основы верстки. Блочная модель
  Модуль
  11 уроков(45:31)
  Тест
  Развернуть
  Свернуть
  - 1. Теория (03:59)
    Бесплатный урок
  - 2. Строчное и блочное поведение (03:49)
    Бесплатный урок
  - 3. Свойство display (01:18)
    Бесплатный урок
  - 4. Блочная модель (05:11)
  - 5. Составные свойства (02:59)
  - 6. Единицы измерения (03:38)
  - 7. Выравнивание inline-block (01:15)
  - 8. Свойства позиционирования (05:36)
  - 9. Приоритет отображения (04:07)
  - 10. Верстка. Как делать не нужно (05:07)
  - 11. Perfect Pixel (08:32)
- Проект. Стили
  Воркшоп
  14 уроков(01:27:19)
  Тест
  Развернуть
  Свернуть
  - 1. Приветственная секция (06:08)
  - 2. Настройка шрифтов (03:42)
  - 3. Приветственная секция. Стилизация (13:14)
  - 4. Приветственная секция. Perfect Pixel (07:22)
  - 5. Активный пункт меню (03:38)
  - 6. Секция предложений. Разметка (03:06)
  - 7. Секция предложений. Стилизация (08:44)
  - 8. Секция предложений. Модификаторы (06:16)
  - 9. Секция предложений. Perfect Pixel (02:45)
  - 10. Секция новостей. Разметка (06:04)
  - 11. Переключатель страниц (05:45)
  - 12. Секция о банке. Разметка (08:35)
  - 13. Футер (07:58)
  - 14. Завершение работы (04:02)
Неделя 3 — Flexbox, БЭМ-нейминг
— Изучаем свойства флексбокса и применяем их к главной странице — Пишем разметку для оставшихся страниц проекта — Приводим верстку в состояние Perfect Pixel
- Вопрос-ответ
  Вебинар
  27.07.2020 20:00
  Развернуть
  Свернуть
  Практический вебинар с преподавателем
- Flexbox
  Модуль
  13 уроков(26:26)
  Тест
  Развернуть
  Свернуть
  - 1. Введение (00:45)
    Бесплатный урок
  - 2. Флекс-контейнер (01:43)
    Бесплатный урок
  - 3. Выравнивание по главной оси (01:37)
    Бесплатный урок
  - 4. Выравнивание по поперечной оси (01:50)
  - 5. Выравнивание отдельного элемента (01:09)
  - 6. Флекс-элемент – контейнер (00:53)
  - 7. Направление осей (03:18)
  - 8. Многострочный контейнер (02:54)
  - 9. Выравнивание многострочного контента (01:25)
  - 10. Пропорции (02:46)
  - 11. Пропорции при сжатии (01:24)
  - 12. Базовый размер (04:02)
  - 13. Порядок элементов (02:40)
- Построение лейаута и БЭМ-нейминг
  Модуль
  11 уроков(01:25:31)
  Тест
  Развернуть
  Свернуть
  - 1. Введение (03:28)
    Бесплатный урок
  - 2. Viewport (04:54)
    Бесплатный урок
  - 3. Normalize (02:38)
    Бесплатный урок
  - 4. Блок обертка (04:20)
  - 5. Контейнер (09:17)
  - 6. Футер (04:25)
  - 7. Структура файлов (17:20)
  - 8. Поведение блочной модели (07:19)
  - 9. Общие стили (09:04)
  - 10. Текстовое содержимое (08:36)
  - 11. Классы-модификаторы (14:10)
- Проект. Flexbox
  Воркшоп
  11 уроков(01:07:50)
  Тест
  Развернуть
  Свернуть
  - 1. Приветственная секция (08:28)
  - 2. Секция предложений (02:15)
  - 3. Секция предложений. Примеси (05:21)
  - 4. Секция предложений. Элементы (02:51)
  - 5. Секция новости (03:19)
  - 6. Завершение верстки страницы (07:46)
  - 7. Страница услуг. Хедер (11:45)
  - 8. Страница услуг. Секция (08:45)
  - 9. Страница услуг. Ховер (04:08)
  - 10. Страница услуг. Секция партнеры (09:17)
  - 11. Страница услуг. Футер (03:55)
Неделя 4 — CSS-анимации
— Подключаем иконки к проекту с применением спрайтов — Реализуем динамические элементы страниц — Дорабатываем проект
- Частые приемы верстки
  Модуль
  15 уроков(01:16:15)
  Тест
  Развернуть
  Свернуть
  - 1. Центрирование (06:56)
    Бесплатный урок
  - 2. Текст в одну строку (04:13)
    Бесплатный урок
  - 3. Фигуры. Круг (01:14)
    Бесплатный урок
  - 4. Фигуры. Эллипс (03:36)
  - 5. Фигуры. Треугольник (03:19)
  - 6. Фигуры. Треугольник без заливки (06:08)
  - 7. Фигуры. Трапеция (01:00)
  - 8. Фигуры. Параллелограмм (01:29)
  - 9. Фигуры. Элементы (05:56)
  - 10. Градиент (07:43)
  - 11. Пунктирная линия (04:32)
  - 12. Фон в полоску (01:19)
  - 13. Выпадающее меню (09:43)
  - 14. Спрайты (12:01)
  - 15. Элементы форм (07:06)
- Анимации CSS
  Модуль
  16 уроков(50:27)
  Тест
  Развернуть
  Свернуть
  - 1. Свойство transition (02:58)
    Бесплатный урок
  - 2. Свойство transition-property (02:21)
    Бесплатный урок
  - 3. Временная функция (04:50)
    Бесплатный урок
  - 4. Эластичные анимации (00:46)
  - 5. Свойство transition delay (01:22)
  - 6. Составное свойство transition (02:05)
  - 7. Неочевидные моменты transition (02:50)
  - 8. Свойство transform (05:12)
  - 9. Отмена трансформации (01:50)
  - 10. Изменение координат трансформации (03:41)
  - 11. Свойство animation (07:23)
  - 12. Свойство animation-iteration-count (00:57)
  - 13. Свойство animation-direction (01:58)
  - 14. Свойство animation-fill-mode (02:44)
  - 15. Свойство animation-play-state (03:13)
  - 16. Анимация секвенцией (06:17)
- Проект. Анимации
  Воркшоп
  10 уроков(45:14)
  Тест
  Развернуть
  Свернуть
  - 1. Отзывы. Разметка (04:31)
  - 2. Отзывы. Стилизация (06:12)
  - 3. Отзывы. Сетка (02:32)
  - 4. Секция-разделитель (03:00)
  - 5. Форма. Поля (03:35)
  - 6. Форма. Контроллы (09:18)
  - 7. Приветственная страница (03:35)
  - 8. Анимации. Банк (06:29)
  - 9. Анимации. Путешествия (03:24)
  - 10. Анимации. Видеопродакшн (02:38)
Неделя 5 — Защита выпускного проекта
— Дорабатываем проект — Сдаём проект на проверку наставникам — Выставление оценок в дипломы
- Вопрос-ответ
  Закрытие курса
  10.08.2020 20:00
  Развернуть
  Свернуть
  Практический вебинар с преподавателем

Выпускной проект

В течение курса, шаг за шагом мы вместе с вами выполним боевой проект — настоящий корпоративный сайт для одной из трёх выдуманных компаний.

В течение курса, шаг за шагом

Преподаватель

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

Frontend разработчик обучающей платформы Loftschool.

Пишу javascript уже более 6 лет.
Верстаю еще больше, со времен ie7 и знаю что такое кросс-браузерность не по наслышке.
Работал как в open-source так и в продуктовых компаниях. Всему учился на работе, поэтому знаю как предостеречь новичков от частых ошибок и уберечь от гнева коллег.
Преподаю уже более 4 лет и истребил все слова паразиты, почти все.

Наставники – это тщательно отобранные практикующие IT-специалисты

Ответы на любые вопросы в slack-чате, кодревью (проверка домашних заданий), голосовые консультации – это норма взаимодействия наставника и ученика в отрасли онлайн-обучения.

Но только в LoftSchool наставник квалифицирован проводить еженедельные групповые вебинары с глубоким разбором текущих вопросов учеников.

Арсений. Наставник Loftschool

Компании, в которых работают выпускники

Доказательства по перечисленным компаниям вы можете найти в документе

Наши партнеры по трудоустройству

Ваш будущий сертификат

По окончании обучения вы получите сертификат. LoftSchool знают и ценят работодатели, поэтому сертификат станет вашим дополнительным плюсом при трудоустройстве в IT-компанию.

Он будет доступен в электронном виде в личном кабинете – вы легко сможете добавить ссылку на сертификат в резюме и подтвердить свой уровень подготовки.

Влад Климов

Сначала я думал, по расписанию программы, что первые две недели мне не нужны, ведь эта информация на уровне средне-образовательной школы. Я еще никогда так не ошибался)) Очень подробно объяснили простым языком сложные вещи. За несколько вебинаров я понял как в принципе работает интернет. Потом началась практика и тут уже началось самое интересное. Поначалу я думал что можно чуть-чуть похалявить...

Виктория Бушина

Я закончила курс "Основы верстки" в профессии "Веб-разработчик"! Это был насыщенный и невероятно интересный месяц! А самое главное — продуктивный! Все имеющиеся знания встали по полочкам, а новые усвоились удивительно легко! Порадовала возможность выбора макета для верстки. Теория дается в виде видео-курсов — очень удобно, так как можно много раз пересмотреть, ставить на паузу и сразу писать ко...

Дмитрий Анисов

Очень понравился данный курс из профессии! Весь материал был грамотно структурирован и подан, изначально думал будет простенькое введение на этом курсе, а оказалось, что на нём даётся очень достойный стэк знаний. Так же мне помогли разобраться в тонкостях тех или иных свойств и элементов. Научили грамотно и правильно верстать, используя современные подходы и технологии. Очень хорошо структуриро...

Светлана Филимонова

Курс "Основы верстки" прошел быстро и оставил после себя приятное впечатление и прочный фундамент для дальнейшего развития в профессии "веб-разработчик". До начала курса у меня было представление о HTML и CSS, однако дело до макетов не доходило. Тем не менее, курс дался мне достаточно легко, честно скажу готовилась к худшему)), а все благодаря прекрасной подаче материала на вебинарах, которые в...

Денис Давыдов

Курс, лично для меня, просто бомба) Он постепенно разгоняется и также постепенно утихает под конец. Время выделенное под тз более чем достаточно, чтобы сделать все грамотно и не бежать впереди паровоза. Если кто-то до сих пор думает, выбрать курс с наставником или без, я советую выбирать первый вариант) Меня распределили к наставнику Ольге Болотовой, и я хочу отметить, что именно благодаря ей я...

Евгения Мельникова

Даже не верится, что уже пролетел курс по верстке) И дальше только больше!) Я осталась довольна этим опытом, новыми знаниями, хотя понимаю, что только активно работая и практикуясь можно закрепить результат и прогрессировать) Мне понравилась атмосфера на курсе, его интенсивность, структурированность материала) Порой казалось, что странно, что материал в методичках появляется тогда, когда эту те...

Дмитрий Егоров

Максимальная выжимка учебного материала, всё интуитивно логично сконструировано, отзывчивый, образованный и очень любезный административный и преподавательский состав, который определенно знает свое дело. Все рады помочь и объяснить проблемную зону! Полное погружение в рабочую среду, новые друзья, новые навыки, полезные связи, вообщем ни разу не пожалел, что пошел на эти курсы. Так что, если вы...

Артур Овчаренко

Ещё с лета я начал изучать вёрстку, но я вдруг понял, что в таком темпе я буду очень долго её учить. И тут я принялся подбирать себе курс. В интернете их достаточно, но всё-таки больше всех меня впечатлил курс от LoftSchool. А привлёк он меня своей открытостью и душевностью, видно, что основатели школы действительно любят и ценят свой проект и всё что с ним связано. Здесь всё на высшем уровне, ...

Познакомься с LoftSchool ближе

Почему стоит выбрать обучение в LoftSchool

Безупречная репутация

Мы в деле с 2012 года и нас знают во всех больших IT компаниях России и ближнего зарубежья.

LoftSchool – лидер в IT образовании

По результатам исследования «Моего круга» на Хабре LoftSchool занял первое место.

1000+ выпускников ежегодно

Наши выпускники работают в Apple, Яндекс, Mail.ru, Epam и др. крупнейших компаниях. Пруфы.

Ответы на часто задаваемые вопросы

Зачем платить за обучение, если в интернете можно найти всё бесплатно?
Покупая курс в LoftSchool, вы платите за гарантированный результат, а не за набор материалов. От вас требуется чётко следовать программе обучения, выполняя все домашние задания, которые будут строго проверяться вашим наставником. На выходе с курса – вы будете подготовлены к старту карьеры в IT-индустрии. Так что сами по себе материалы, которые действительно можно найти бесплатно, хоть и важны, но не играют решающего фактора. Это лишь кирпичик в здании нашей школы.
Предусмотрен ли возврат денег, если я передумаю проходить курс?
Да. Мы возвращаем деньги 2 путями, на ваш выбор:
- на вашу банковскую карту за вычетом 5% издержек (согласно публичной оферте), либо
- на личный счет в системе LoftSchool в полном размере (деньги затем можно потратить на любой курс школы).
В обоих случаях возврат возможен не позднее 3-го дня с момента старта обучения.
Мы также можем перевести вас на другой поток или курс не позднее 7-го дня с момента старта обучения. Такой перевод возможен только 1 раз.
Можно ли платить частями?
Для желающих обучаться в нашей школе мы, совместно с сервисом «Яндекс.Касса» и банками-партнёрами, предоставляем рассрочку на 6 или 12 месяцев.
Как это работает:
- На странице курса либо профессии нажмите "Оплатить". Выберите "Оплатить курс целиком", далее "Оплата в кредит".
- Выберите срок и размер выплат, другие условия кредита.
- За пару минут заполните короткую анкету.
- Через несколько минут получите решение банка о предоставлении кредита.
- Погасите полную стоимость обучения в течение 30 (или 60) дней, чтобы избежать переплат. Либо оплачивайте обучение частями в течение 6 или 12 месяцев с переплатой 3,9% в месяц.
Почему стоимость курсов повышается до старта потока?
Конечная цена за пару дней до старта курса – это его реальная цена. Все цены до этого – идут со скидкой. Так как производство курса и оплата работы специалистов является самой большой частью наших издержек, то мы поощряем клиентов, которые решают приобрести курс заблаговременно, тем самым покрывая часть наших издержек на этапах подготовки.
Смогу ли я работать после прохождения курса?
Да. Со своей стороны мы делаем всё возможное, чтобы помочь в вашем трудоустройстве, т.к. сами напрямую в этом заинтересованы (ваш успех – это подтверждение нашей репутации). Мы научим всему, что нужно знать о собеседованиях, испытательном сроке и пр. Отличникам предоставим тестовые задания от IT-компаний. При успешном выполнении тестового вас пригласят на собеседование. Однако чудес не ждите. Если у вас пока ещё нет опыта работы, вам придётся запастись терпением и упорством.
Могут ли меня отчислить, если я пропущу неделю обучения или больше?
Нет, мы не отчисляем. Однако, на итоговую оценку в выпускном дипломе это повлияет, если вы не будете укладываться в дедлайны. У нас очень понимающий коллектив и мы всегда пойдем на встречу. Если причина вашего исчезновения была уважительной, то мы рассмотрим возможность сдачи проекта вне дедлайна.

Ответы на другие вопросы

Регистрация на обучение

Период обучения: 13.07 - 16.08

Базовый

2 часа работы с наставникомв неделю.

Уютный

4 часа работы с наставникомв неделю.

Цена до 8 июля

19 000

23 000

2 324 / мес. в рассрочку