Онлайн обучение

Профессия HTML верстальщик

Получите профессию за 8 недель под руководством опытного наставника. После курса – трудоустройство
в веб-студию, или работа на фрилансе.

Когда:
22 Апреля —  12 Июля
Уровень:
С нуля
Старт курса 22-го апреля. Идёт набор в группу
Онлайн курс - Продвинутая верстка

Научитесь создавать сайты и зарабатывать на этом от 1000$, работая на фрилансе или в лучших IT компаниях мира.Получите профессию HTML верстальщик сайтов!

165
видео
уроков
32
практические
задачи
3
выпускных
проекта
Курс — это возможность
Зарабатывать на фрилансе
Создайте новый источник дохода, начните зарабатывать на фрилансе применяя знания полученные на курсе.
Получить новую профессию в IT
Выпускники устраиваются в IT компании и веб студии. Постройте свою карьеру
веб-разработчика.
Запустить личный проект
Инвестируйте в знания, сохранив время, деньги и независимость от разработчиков. Вы создадите функциональный и красивый сайт для себя или своего бизнеса.
Курс включает в себя
Технологии изучаемые на курсе
HTML5, новые теги, семантичная верстка
HTML5: валидная
семантическая верстка.
HTML5, новые теги, семантичная верстка
CSS3: адаптив,
эффекты и анимации.
HTML5, новые теги, семантичная верстка
Работа с макетами в Figma
и Photoshop.
HTML5, новые теги, семантичная верстка
SCSS - препроцессор
для удобной работы с CSS.
HTML5, новые теги, семантичная верстка
Основы программирования:
JavaScript, jQuery, PHP.
HTML5, новые теги, семантичная верстка
Лучшие практики верстки:
BEM naming, Flex и Grid CSS.
HTML5, новые теги, семантичная верстка
Мобильная верстка
и адаптивные сайты.
HTML5, новые теги, семантичная верстка
Bootstrap 5 для быстрой
и удобной верстки сайтов.
HTML5, новые теги, семантичная верстка
Как устроен интернет,
сервер и браузеры.
HTML5, новые теги, семантичная верстка
Все необходимые программы для верстальщика:
VS Code, Figma, Photoshop, Filezilla, и другие...
HTML5, новые теги, семантичная верстка
Впечатляющие проекты для
вашего портфолио.
HTML5, новые теги, семантичная верстка
Постановка верстки на WordPress
с размещением на хостинге.
На обучение приходят с целями
Научиться разрабатывать сайты на заказ
Стать веб-разработчиком и работать в IT компании
Работать на фрилансе из любой точки мира
Запустить проект для себя или своего бизнеса
Создать дополнительный источник дохода (от $300 до $500 в месяц)
Юрий Ключевский Юрий Ключевский Юрий Ключевский Юрий Ключевский
Преподаватель курса —
Юрий Ключевский

Основатель онлайн школы ВебКадеми. Веб-разработчик с 10-ти летним стажем. Работал в международных компаниях и на фрилансе. Автор обучающего YouTube канала и блога по веб-разработке.

  • Веб-разработчик: HTML, CSS, JS, PHP.
  • Product designer, UI & UX дизайнер.
  • Опыт в веб-разработке: более 10-ти лет.
  • Преподавательский стаж: более 5 лет.
  • Опыт работы в международных IT компаниях, из TOP 10 в своей отрасли. США, Норвегия. Делаю дизайн и фронтенд для IT продуктов.

Мне нравится делать, пожалуй, лучшие курсы по IT обучению в Рунете.

Я убежден, что при правильном подходе любой человек с желанием может стать веб-разработчиком. Объясняю сложные вещи простым и доступным языком.

Работа веб-разработчика позволяет мне работать удаленно, путешествовать и жить в любой точке мира. Позволит и Вам!)

Открытый доступ к базе знаний
только для студентов курса
Редакторы кода
  • Обзор редакторов кода
  • Установка и настройка редактора
    VS Code
  • Плагины для VS Code
  • Тема Material Theme
HTML5 и CSS3 верстка
  • HTML теги
  • Основные HTML теги
  • Структура проекта
  • Верстка таблиц
  • CSS3 эффекты
  • Градиенты
  • Трансформации
  • Анимация
Настройка сайта
  • Хостинг и домены
  • Работа сайта
  • Покупка домена
  • Покупка хостинга
  • Настройка Домена и Хостинга
Инструменты
  • Автообновление страницы при верстке
  • Firefox плагин AutoReload
  • Google Chrome LivePage
  • Стартовый шаблон для верстки
Веб-шрифты
  • Использование Google Fonts
  • Использование WebFont.ru
  • Генерация веб-шрифтов
  • Шрифтовые иконки
Интерактивные элементы
  • Карусель - подключение и настройка
  • Табы, вкладки и переключатели
  • Многоуровневая навигация
  • Галерея фотографий
  • Модальные окна
  • Сортировка и фильтрация элементов
  • Работа с Google Maps, вставка карт на сайт
Фреймворк Bootstrap
  • Сетка Bootstrap
  • Подключение и использование
  • Быстрое прототипирование на Bootstrap
  • Использование и стилизация компонентов
Техники верстки
  • Flex box верстка
  • Pixel Perfect верстка
  • CSS grid разметка верстка
  • Мобильная верстка
  • Адаптивная и отзывчивая верстка
  • Mobile first и desktop first подходы
  • Работа с сетками, создаем свою сетку
  • Photoshop, нарезка графики из макета
  • Основы юзабилити
Оптимизация верстки
  • Спрайты
  • Оптимизация работы с изображениями
Ускорение работы
  • Препроцессор SCSS
  • Сниппеты VS Code
  • Gist заготовки кода
Эффекты
  • Анимация при прокрутке страницы
  • Параллакс эффекты
  • Загрузчики (эффект загрузки страницы)
  • Плавная прокрутка на сайте
Мобильная верстка
  • Mobile first подход
  • Мобильная адаптивная навигация
JS, jQuery, PHP
  • Онлайн калькулятор
  • Формы обратной связи
  • Отправка писем с сайта
  • Валидация данных в формах
  • Подключение jQuery плагинов
  • Написание jQuery скриптов
Программирование
  • Основы PHP
  • PHP - основы ООП
  • Основы JavaScript (предпросмотр)
  • JavaScript - модульный подход
  • JavaScript - ООП
  • jQuery - библиотека языка JS
  • ajax запросы на сервер без обновления страницы
Git workflow - стандарт командной работы
  • Контроль версий - Git
  • Сервис GitHub
Программа курса
Учебная программа каждой недели
Тариф Стандарт
Модуль 1. Основы HTML и CSS. Валидация. Хостинг и домен
  • Основы HTML и CSS
  • Веб-шрифты
  • Валидация
  • Семантика
  • Оформление хостинга
  • Работа с FTP
  • VS Code и FileZilla
Модуль 2. Блочная верстка. Photoshop. PixelPerfect
  • Блочная модель
  • Абсолютное позиционирование
  • Псевдоклассы в CSS
  • CSS трансформация
  • CSS Анимация
  • Figma
  • Верстка карточки товаров, все в одну колонку
  • Flex-box модель
  • Упражнения на FlexBox
  • PixelPerfect
  • Верстка карточки
  • Работа с фотошопом
Модуль 3. Верстка сайта. Проект Forest Travel
  • Верстаем главную страницу ForestTravel
  • Верстаем Контакты
  • Стилизация формы в Контактах
  • Вставка карты Yandex / Google Maps на сайт
  • Верстаем внутренние страницы ForestTravel
  • Проверка с PixelPerfect, семантика
  • Opengraph для сайтов, SEO теги, семантика, фавиконка
Модуль 4. Адаптивная верстка для мобильных устройств
  • Адаптивная верстка для мобильных устройств
  • Adaptive (адаптивный) и responsive (отзывчивый) веб-дизайн
  • Desktop first and mobile first
  • Мобильная адаптация ForestTravel
Модуль 5. Лучшие практики верстки. SCSS и BEM naming. Оптимизация графики
  • BEM naming
  • SCSS препроцессор. (Пример - перевода Forest Travel на SCSS)
  • Работа с SVG спрайтами
  • Оптимизация графики для загрузки webp
  • Оптимизация под retina дисплеи
  • Верстка проекта - Юнит
Модуль 6. Основы JS и скрипты для проекта
  • Основы JS
  • Основы DOM
  • Пишем свои скрипты на JS
  • Подключаем JS скрипты
  • Основы jQuery
  • Пишем свои скрипты на jQuery
  • Подключаем jQuery плагины
  • Скрипты для лендинга
  • Мобильная адаптация проекта - Юнит
Модуль 7. PHP формы обратной связи. Оптимизация верстки. CSS Grid. Bootstap 5
  • Оптимизация скорости загрузки сайта
  • Оптимизация Google Page Speed
  • Bootsrtrap 5 сетка и прототипирование
  • CSS Grid, примеры использования
  • PHP формы обратной связи
Модуль 8. Трудоустройство и фриланс. Заработок на веб-разработке
  • Трудоустройство и карьера
  • Составление резюме
  • Фриланс в веб-разработке
  • Первые деньги на веб-разработке
  • Как считать стоимость своей работы. Пример.
  • Как обосновывать стоимость проекта заказчику
  • Оформление профиля на фрилансе
  • Ответы на проекты
  • Поиск заказов без фриланс бирж
  • Развитие себя как специалиста
Премиум группа
Модуль 9. JavaScript и jQuery плагины для верстки сайтов
  • Карусели
  • Модальные окна
  • Валидация формы
  • Маска для номера телефона
  • Мобильная навигация
  • Page scroll progress bar
  • Smooth scroll
  • One Page Scroll
  • Параллакс эффекты
  • Табы
  • fetch c JS
  • Ajax c jQuery
Модуль 10. Основы PHP. Отправка форм на почту и сохранение данных в БД
  • Неделя PHP
  • Основы PHP
  • Сайт с шаблонами на PHP
  • Формы обратной связи на PHP, отправка писем на почту
  • Основы работы с Базой Данных в PHP
Модуль 11. Система управления сайтами WordPress
  • Знакомство с CMS WordPress
  • Постановка верстки на CMS WordPress
  • Создание темы на CMS WordPress
  • Кастомные общие настройки сайта
  • Пользовательский тип контента
  • Пользовательские поля для контента
Модуль 12. Дополнительные инструменты. Контроль версий и сборка проекта
  • Сборка проекта с помощью Gulp
  • HTML шаблонизатор Pug
  • Контроль версий Git и GitHub
Учебные макеты
которые вы сверстаете во время обучения
сайт турагентства
сайт для коворкинга
сайт портфолио
Как проходит обучение
технические и организационные моменты

Видео уроки

Для удобства изучения все темы курса записаны в видео-уроки и доступны в хорошем качестве. Смотрите уроки в удобное для вас время. Обучайтесь когда вам удобно из любой точки мира.

Домашние задания

Для освоения материала после каждого урока есть задания с практической областью применения. Все домашние задания проверяются, и вы получаете конкретные рекомендации и советы от наставника.

Чат для общения

В чате потока участники курса общаются и помогают друг другу. Мы создаем дружественную атмосферу. Вместе учиться и достигать поставленной цели всегда легче, чем в одиночку.

Онлайн мастер-классы

Общий созвон раз в неделю, проводим мастер-класс по проектам, отвечаем на самые популярные вопросы и разбираем сложные ситуации.

Три выпускных проекта

Нет ничего лучше практики. В процессе обучения вы сверстаете несколько сайтов, и сделаете итоговый выпускной проект.

Консультации с наставником

Возникли трудности с проектом? Не беда! На индивидуальной консультации наставник подробно расскажет и объяснит что к чему.

Дружное сообщество
выпускников WebCademy
Клуб выпускников WebCademy

💁 Помогаем друг-другу

После обучения мы продолжаем общение с выпускниками курса. Помогаем друг-другу по вопросам верстки и веб-разработки.

👨‍💻 Вакансии и проекты

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

Часто ко мне обращаются руководители веб-студий, чтобы я порекомендовал лучших учеников для трудоустройства.

Ваше резюме
после прохождения курса
Фотография
Емельян Казаков
Должность: HTML-верстальщик
Емельян Казаков
Должность: HTML-верстальщик
Ключевые навыки
  • Полноценная верстка страниц сайта
  • Свободное владение HTML и CSS
  • HTML5 и CSS3
  • Знание Adobe Photoshop для работы с макетами
  • Кроссбраузерная верстка
  • Верстка для мобильных устройств (адаптивная и отзывчивая верстка)
  • Оптимизация под мобильные устройства
  • Оптимизация работы с изображениями
  • Умение разбираться в чужом коде
  • Понимание основ юзабилити
  • Основы JavaScript
  • Основы PHP
Желаемая зарплата
50 000 рублей
Опыт работы
менее 1 года
Зарплата верстальщика
от 30 000 до 60 000 рублей в месяц

На курсе есть блок по трудоустройству и фрилансу. Чтобы вы смогли найти достойную работу и хорошо зарабатывать, применяя навыки и знания полученные на курсе. Примеры вакансий с сайта headhunter.ru

Отзывы учеников
после прохождения курса

Оригиналы отзывов находятся в группе Вконтакте

Записаться на 61 поток
Старт 22-го Апреля 2024 года
Продолжительность от 8-ми недель

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

Стандарт: 22 Апреля — 14 Июня (8 недель)
Премиум: 22 Апреля — 12 Июля (12 недель)

Тест драйв
1-я неделя обучения
Только первая неделя 
  • Личный кабинет на обучающей платформе
  • Домашние задания
  • Проверка ДЗ куратором
  • 3 проекта на курсе
  • Сертификат участника
  • Доступ к материалам курса после завершения обучения
  • Ежедневная поддержка куратора и преподавателя в чате
  • Возможность созвона с наставником. Скайп созвон - 30 минут в неделю.
  • Дипломная работа: сайт Портфолио.
  • Фриланс коучинг. Получение первого заказа на фрилансе.
  • Подготовка к трудоустройству. Помощь в составлении резюме. Код-ревью тестовых заданий.
  • Подготовка и проведение тестовых собеседований перед трудоустройством.
990 ₽/первая неделя
Взять тест-драйв
Стандарт
Обучение в группе
8 недель обучения
  • Личный кабинет на обучающей платформе
  • Домашние задания
  • Проверка ДЗ куратором
  • 2 проекта на курсе
  • Сертификат участника
  • Доступ к материалам курса после завершения обучения
  • Ежедневная поддержка куратора и преподавателя в чате
  • Возможность созвона с наставником. Скайп созвон - 30 минут в неделю.
  • Дипломная работа: сайт Портфолио.
  • Фриланс коучинг. Получение первого заказа на фрилансе.
  • Подготовка к трудоустройству. Помощь в составлении резюме. Код-ревью тестовых заданий.
  • Подготовка и проведение тестовых собеседований перед трудоустройством.
стоимость курса
40'000
Скидка до 1-го апреля
28'000 ₽/за весь курс
8 недель обучения
оплата по частям

первый платёж 14'000 рублей
второй платеж 14'000 рублей

Записаться оплата двумя частями Системы оплаты
Премиум
Группа + Наставник
12 недель обучения
  • Личный кабинет на обучающей платформе
  • Домашние задания
  • Проверка ДЗ куратором
  • 3 проекта на курсе
  • Сертификат участника
  • Доступ к материалам курса после завершения обучения
  • Ежедневная поддержка куратора и преподавателя в чате
  • Возможность созвона с наставником. Скайп созвон - 30 минут в неделю.
  • Дипломная работа: сайт Портфолио.
  • Фриланс коучинг. Получение первого заказа на фрилансе.
  • Подготовка к трудоустройству. Помощь в составлении резюме. Код-ревью тестовых заданий.
  • Подготовка и проведение тестовых собеседований перед трудоустройством.
стоимость курса
48'000
Скидка до 1-го апреля
36'000 ₽/за весь курс
12 недель обучения
оплата по частям

первый платёж 18'000 рублей
второй платеж 18'000 рублей

Записаться оплата двумя частями Системы оплаты
Бонус тем, кто запишется сейчас!
записи всех интенсивов от школы WebCademy

Присоединяйтесь к курсу сейчас и получите в подарок доступ ко всем платным интенсивам по JavaScript, PHP, HTML и CSS от школы WebCademy - бесплатно.

Интенсив: «Верстка главной для блога».
Интенсив: «Верстка главной для блога».
290 Р
Бесплатно
Интенсив: «InstaPage - инстаграмм фото на сайте».
Интенсив: «InstaPage - инстаграмм фото на сайте».
990 Р
Бесплатно
Интенсив: «Интернет магазин техники на PHP и MySql».
Интенсив: «Интернет магазин техники на PHP и MySql».
990 Р
Бесплатно
Интенсив: “Букинг. Верстка сайта для бронирования”.
Интенсив: «Букинг. Верстка сайта для бронирования».
990 Р
Бесплатно
Интенсив: «Frontend на JS для магазина роллов».
Интенсив: «Frontend на JS для магазина роллов».
2900 Р
Бесплатно
Интенсив: «Твиттер на PHP и MySql».
Интенсив: «Твиттер на PHP и MySql».
990 Р
Бесплатно
Интенсив: «WikiPages и markdown на JavaScript».
Интенсив: «WikiPages и markdown на JavaScript».
990 Р
Бесплатно
Интенсив: «Клавиатурный тренажер на JavaScript».
Интенсив: «Клавиатурный тренажер на JavaScript».
990 Р
Бесплатно
Только 5 бонусных комплектов!
8 интенсивов
Общей стоимостью на 9 130 рублей
В подарок!
Ответы на вопросы
Общие вопросы по курсу
Где проходит обучение? Это онлайн курсы?

Это онлайн курсы. Для их прохождения и обучения вам не надо куда-либо ехать и тратить время на дорогу. Проходить курсы можно онлайн дома или за рабочим местом. Все что нужно - это компьютер и интернет. Во время прохождения курса вы смотрите видео-уроки в онлайн кабинете школы WebCademy, мы общаемся в slack чате и в группе ВКонтакте.

Как и в какое время проходят онлайн занятия?

Обучение проходит онлайн в формате видео-уроков. Уроки уже записаны и выдаются для просмотра на платформе. Вы можете смотреть их в любое удобное время.

Каждую неделю, в Понедельник выдаются новые учебные материалы и задания. На протяжении недели мы активно работаем, обучаемся и делаем задания. В Пятницу мы проводим онлайн мастер-классы где разбираем пройденный материал, тонкие моменты и аспекты в верстке. Все онлайн вебинары записываются и доступны в записи, после проведения занятия.

Сколько занятий в курсе?

В курсе будет более 50 уроков по всем по основным темам в верстке сайтов и в веб-разработке. Помимо видео-уроков, будет 8 онлайн мастер-классов для разбора практических тем и ответов на вопросы.

Я проживаю в другом часовом поясе. Как это скажется на моем обучении?

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

Часовой пояс никак не влияет на вашу эффективность обучения. На курсе обучаются люди из разных стран. Это и Россия, Украина, Казахстан, Германия, Эстония, Латвия, США, Канада и другие страны мира.

Вопросы по обучению
Кому я могу задать вопрос, если мне что-то непонятно?

При прохождении курса вы можете напрямую задавать вопросы преподавателю в общем учебном чате. Также можно задать вопрос для разбора на мастер классе или в личной онлайн консультации с наставником.

Что делать, если у меня проблема с которой я не могу справиться?

Для этого на курсе преподаватель выполняет роль наставника. В случае возникновения проблем и трудных ситуаций вы всегда можете созвониться онлайн с наставником, и с демонстрацией экрана решить вопрос по настройке программ, верстке и другим техническим моментам.

Что делать, если я пропустил еженедельный онлайн мастер-класс?

Если вы пропустили еженедельный онлайн мастер-класс, то всегда можете посмотреть его в записи. Запись доступна на следующий день после проведения занятия. Если у вас появятся вопросы по занятию, которое вы пропустили, всегда можно задать их преподавателю в онлайн чате или Вконтакте.

Как организована практика?

После каждого урока вы получаете задание для отработки полученных знаний на практике. Готовую работу вы отправляете преподавателю, он проверяет и дает подробный разбор, код-ревью на вашу работу. Пишет развернутый комментарий: что хорошо, что плохо, над чем стоит поработать. Практические задания выполняются на основе реальных макетов. Все домашние задания должны быть выполнены во время прохождения курса.

Кто преподает на ваших учебных программах?

Все наши преподаватели — практикующие эксперты с опытом работы в IT компаниях. Это одна из главных ценностей, которые вы получаете в рамках учебной программы: учитесь у специалистов, задаете им вопросы и получаете от них индивидуальные рекомендации по своим работам.

Какие знания и навыки я получу?

Вы научитесь самостоятельно верстать макеты средней сложности и познакомитесь с основами front-end разработки.

Что нужно для получения сертификата?

Все участники курса получают сертификаты. В сертификате мы делаем отметку о том насколько студент освоил материал курса. Есть разные отметки: "курс прослушал", "курс прошел" и "прошел курс с отличием". Для получения сертификата "курс прошел" и выше - необходимо сдать все домашние работы во время прохождения курса.

Вопросы по техническим моментам
Я совсем новичок и ничего не знаю о создании сайтов. Подойдет ли мне курс?

Курс рассчитан на новичков. Мы начинаем с самых азов и разбираем все детально с самого начала. Для обучения вы должны уметь пользоваться интернетом, браузером, электронной почтой, скайпом.

Нужно ли устанавливать специальные программы?

1. Для обучения вам понадобится браузер. Firefox, Google Chrome или Яндекс Браузер.

2. Текстовый редактор для написания кода мы рассмотрим и установим на курсе. Рекомендуемый редактор для прохождения курса Visual Studio Code (VS Code).

3. Для работы с дизайн макетами vs будем использовать редактор Figma и Photoshop. Все программы мы установим и настроим в процессе обучения. Стоимость лицензии Photoshop ~598 рублей в месяц.

В каком редакторе мы будем работать?

Мы будем работать в редакторе Visual Studio Code. Если у вас имеются предпочтения к другому редактору, вы сможете использовать его.

У меня нет компьютера и ноутбука. Можно ли обучаться с планшета или смартфона?

Курс и программы которые мы используем на курсе есть только на компьютерах. Подойдет система Windows, MacOs или Linux. Но на планшетах с Android или iOS у вас не будет всех необходимых программ. Поэтому для прохождения курса нужен только или компьютер или ноутбук. Планшет и смартфон - не подойдут.

Какой компьютер нужен для обучения?

Подойдет компьютер или ноутбук. Рекомендуем использовать ОС Windows 10. MacOs и Linux тоже подойдут, но курс записан полностью на Windows 10. По техническам характеристикам: оперативная память от 4 Gb, видео карта - не требуется. Елси вы планируете покупать компьютер - то рекомендуем процессор от Intel, начиная от версии i3 и выше.

Вопросы по оплате
Как оплатить курс?

Оплатить курс можно онлайн картами VISA, MasterCard, МИР. Возможен вариант оплаты переводом на банковский счет или на карту (для Украины). Для этого напишите по контактам внизу страницы, чтобы уточнить детали.

Нажмите на кнопку "Записаться", после заполните форму заявку. Далее вы попадете на страницу, с которой сможете оплатить участие в курсе. Там будут подробные инструкции по оплате.

Оплатить курс можно полностью, либо в рассрочку.

По вопросам, связанным с оплатой, пишите мне в личные сообщения Вконтакте.

Как оплатить курс в рассрочку?

Можно оплатить курс двумя частями. Первая часть - 50% до начала курса. И вторая часть оплаты до 5-ей недели обучения на курсе. По вопросам связанным с оплатой пишите мне в личные сообщения Вконтакте.

Могу ли я вернуть деньги за обучение, если курс мне не подойдет?

Вы можете запросить возврат денег в течение первой недели обучения. Вам будет возвращена полученная от вас сумма. Подробности указаны в Публичной Оферте.