Как за 1-2 месяца овладеть современной адаптивной версткой, даже если сейчас вы не знакомы с азами HTML и CSS?

Верстка-мастер

Полное руководство

Овладейте современной адаптивной версткой с нуля

Новейшие стандарты: HTML5, CSS3, Sass, Gulp, Flexbox, Grid…

Реально много практики: три работы в портфолио по итогу

Только то, что применяется в реальной жизни и востребовано

Узнайте подробности

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

Купить курс

Для кого создавался курс

Полные новички и студенты

Курс подойдет полным новичкам в сайтостроении, студентам и тем, кто решил сменить профессию, связать свою жизнь с веб-разработкой, вёрсткой и веб-дизайном

Начинающие верстальщики

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

Веб-разработчики 
любого профиля

Не важно, фронтендер вы, бэкендер или фуллстек-вебмастер. Знания из этого видеокурса являются обязательными при трудоустройстве в любую веб-студию.

Фрилансеры и удалёнщики

Этот курс идеально подойдет для старта, если вы делаете первые шаги в верстке и дизайне как фрилансер и хотите получать приличные гонорары прямо на старте карьеры фрилансера.

Веб-дизайнеры 
и UX/UI-дизайнеры

MustHave для любого веб-дизайнера. Узнайте процесс верстки изнутри и ваша ценность на рынке вырастет – пропорционально объему востребованных навыков.

Бизнесмены, арбитражники, рекламщики

Как самостоятельно вносить правки в свои лендинги, чтобы не прибегать к услугам сторонних верстальщиков, экономьте свое время, деньги и нервы

Низкий порог входа

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

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

Никакой лишней информации

Мы показываем только то, что реально применяется и востребовано в практике современной вёрстки.

Курс построен по принципу «от простого к сложному». Сначала мы изучаем необходимую теорию, потом сразу закрепляем строго изученную теорию на верстке макетов сайтов. Ничего лишнего.

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

Три крутых работы в портфолио

Повторяя по шагам за автором, вы сверстаете с полного нуля 3 современных сайта: сайта креативного агентства, лендинга мобильного приложения и лендинга подбора подарков (скриншоты представлены ниже).

Макеты созданы как с помощью Photoshop, так и в набирающем популярность веб-сервисе Figma.

Итоговыми работами вы сможете наполнить ваше портфолио и продемонстрировать свою квалификацию перед работодателями и заказчиками на фрилансе.

Только востребованные технологии

Новый видеокурс от Webformyself дает только востребованные современные технологии и стандарты верстки. Только то, за что работодатели и заказчики готовы платить.

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

HTML5

CSS3

Препроцессор Sass

Сборщик проектов Gulp

Flexbox

CSS Grid Layout

Медиазапросы

Градиенты

Множественные фоны

Новые инструменты с фонами

Анимации

Трансформации

Адаптивная графика

Адаптивное видео

Адаптация таблиц

Адаптация любого контента

Ключевые характеристики курса

5 частей

85 уроков

14часов видео

3 сверстанных макета

Лишь две части курса теоретические и целых три – практические.

Купить курс

Как и куда мы будем двигаться

Подробная программа курса

Часть 1

Основы HTML

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

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

Урок 1. Введение. Установки редактора
В уроке мы выберем и установим подходящий для верстки редактор кода с широкими функциональными возможностями.
Урок 2. Обзор HTML-документа
В уроке показано, что такое HTML-документ, из каких частей он состоит, и за что каждая часть отвечает.
Урок 3. Теги форматирования текста
В уроке мы узнаем про теги, которые предназначены для выделения и обозначения текста.
Урок 4. Вставка изображений. Часть 1 - 2
В данных уроках рассмотрены различные возможности вставки изображений на веб-страницу.
Урок 5. Работа со ссылками
Из урока вы узнаете, как делать ссылки на странице, а также какие ссылки бывают и как их создавать.
Урок 6. Списки
Узнаете, как создавать вложенные списки и где они используются.
Урок 7. Таблицы
Из урока вы узнаете, как создавать таблицы для отображения табличных данных, как строить нестандартные таблицы.
Урок 8. Формы. Часть 1 - 2
В данных двух уроках вы узнаете, что такое HTML-формы, какие они могут быть. Узнаете, как создавать поля ввода различных типов, какие типы в каких ситуациях применяются.
Урок 9. Вставка видео. Часть 1 - 2
Из данных уроков вы узнаете, как правильно вставить видео на сайт и что для этого нужно предусмотреть. Рассмотрим несколько способов вставки видео на HTML-страницу.
Урок 10. Вставка аудио
Из урока вы узнаете, как правильно вставить аудио на HTML-страницу и что для этого нужно предусмотреть.
Урок 11. Семантические теги
В уроке познакомимся с семантическими тегами. Узнаем для чего они нужны, как их использовать и где применять.

Часть 2

Основы CSS

Чтобы оформить внешний вид страницы – нужен CSS. Именно с помощью CSS мы задаем цвет текста, указываем шрифт и его размер, назначаем цвет для ссылок… Все это делается с помощью CSS-свойств и их значений.

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

Урок 1. Подключение CSS
Из урока вы узнаете, как подключить таблицу стилей CSS к странице HTML, чтобы описанные свойства применились. Узнаете, как можно назначить CSS-стили для HTML-документа.
Урок 2. Назначение классов
В данном уроке мы поговорим про назначение классов. Узнаете, для чего нужны классы, как классы назначать, какие классы бывают.
Урок 3. Свойства шрифта
Из урока вы узнаете про все свойства шрифта. Узнаете, как назначить шрифт, размер, жирность для текста. Увидите полную и сокращенную форму записи свойств шрифта.
Урок 4. Свойства текста
Из урока вы узнаете про свойства, которые позволяют оформлять текст. Узнаете, как задавать цвет, выравнивание для текста и так далее.
Урок 5. Назначение фона
В уроке вы увидите, как можно назначать фоновый цвет и фоновое изображение. Также узнаете, как фоновым изображением можно управлять.
Урок 6. Ширина, высота
В данном уроке мы поговорим о ширине и высоте для HTML-блоков. Узнаем, как их назначать, рассмотрим различные варианты поведения контента блока в зависимости от ширины и высоты блока.
Урок 7. Рамка
В данном уроке вы узнаете, как назначить рамки для блока, какими они бывают. Узнаете полную и сокращенную запись для описания рамок.
Урок 8. Отступы
В уроке мы познакомимся с отступами для блоков HTML. Узнаем, какие отступы могут быть. Увидим полную и сокращенную форму записи для описания отступов.
Урок 9. Центрирование
В уроке мы рассмотрим один из наиболее популярных и простых способов центрирования блоков.
Урок 10. Единицы измерения
Единиц измерения в CSS достаточно много. Некоторые практически не применяются, а без каких-то, напротив, не обойтись. Есть абсолютные и относительные единицы измерения и все это и многое другое мы рассмотрим в данном уроке.
Урок 11. Выравнивание
В данном уроке рассматриваются способы выравнивания блоков по какой-либо из сторон. На примере рассматривается поведение остального контента при выравнивании какого-либо блока.
Урок 12. Видимость элементов
В данном уроке поговорим об отображении блоков. Разберем разницу между «элемент невидимый» или элемент «не отображается» на конкретном примере.
Урок 13. Блочные и строчные элементы
В HTML все элементы можно разделить на две большие группы: блочные и строчные. В данном уроке мы узнаем, чем они отличаются и рассмотрим различные примеры.
Урок 14. Позиционирование
В уроке рассматривается свойство, с помощью которых можно позиционировать элементы на странице. Изучаем особенности каждого варианта позиционирования.

Часть 3

Практика. Верстка сайта креативного агентства

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

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

Урок 1. Введение. Обзор макета
В уроке показаны различные способы, как с данным макетом можно работать. Рассмотрены как платные решения для работы с макетом, так и бесплатные.
Урок 2. Подготовка. Нарезка изображений
В данном уроке показано, как вырезать необходимые изображения. Также рассмотрены варианты правильного сохранения картинок для веб-страниц.
Урок 3. HTML-разметка шапки сайта
В уроке показано, как определить шапку сайта, какой она должны быть. И создается сама HTML-разметка шапки сайта.
Урок 4. CSS-стили для всей страницы
В этом уроке мы рассмотрим макет более детально и назначим стили, которые будут общими для всей страницы.
Урок 5. CSS-стили для шапки сайта
В данном уроке мы увидим, как полностью оформить стили для шапки сайта, чтобы она выглядела так, как на макете.
Урок 6. HTML-разметка блока текста
В данном уроке показано, как создать разметку для блока основного текста страницы.
Урок 7. CSS-стили для блока текста
В данном уроке показано, какие стили должны быть для основного блока текста, чтобы он выглядел так, как требуется в макете.
Урок 8. HTML-разметка формы контактов
Из урока вы узнаете, как создать форму для отправки контактов. Как назначать различные типы input и как сделать кнопку.
Урок 9. CSS-стили формы контактов
В уроке рассматривается назначение стилей для формы. Назначаются стили для различных типов тега input. Рассматриваются особенности задания стилей для кнопки формы.
Урок 10. HTML-разметка подвала страницы
В уроке показано, как создать разметку для подвала сайта.
Урок 11. CSS-стили подвала страницы
В уроке показано, как назначить стили для подвала страницы, чтобы он выглядел так, как требуется в макете.
Урок 12. Заключение
В данном уроке подводится итог верстки. Показывается, что можно сделать по-другому, что можно улучшить, что можно сделать проще, усовершенствовав свои знания.

Часть 4

Практика. Верстка лендинга мобильного приложения

В данной части курса подразумевается, что вы уже знаете базовый HTML, CSS и вы умеете их применять при верстке страниц. У вас уже есть знания по более расширенному CSS3, и есть знания по Flex.

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

Урок 1. Введение
В данном уроке мы познакомимся с инструментом для работы с макетами Figma. Рассмотрим варианты использования Figma. Откроем и рассмотрим наш макет в Figma.
Урок 2. Подготовка. Экспорт изображений
В уроке мы экспортируем и подготовим все необходимые для верстки макета изображения.
Урок 3. HTML-разметка шапки сайта
Из данного урока вы узнаете, как создать HTML-разметку для шапки нашего лендинга.
Урок 4. Подключение reset.css
В данном уроке мы познакомимся с файлом reset.css, узнаем для чего он нужен и что в нем находится. А также поговорим о том, где его взять и как он формируется.
Урок 5. CSS-стили для шапки сайта. Часть 1 - 2
В данных уроках мы назначим стили для классов шапки сайта. В отличие от верстки предыдущего макета сайта креативного агентства, здесь мы будем использовать более современную технологию Flex.
Урок 6. HTML-разметка блока «О приложении»
В данном уроке показано, как создать разметку для блока «О приложении», который состоит из двух колонок.
Урок 7. CSS-стили блока «О приложении»
Из урока вы узнаете, как и какие стили нужно назначить для двухколоночного блока «О приложении», чтобы он выглядел так же, как и на макете.
Урок 8. HTML-разметка блока «Возможности»
В данном уроке показано, как создать разметку для блока «Возможности», который состоит из трех колонок.
Урок 9. CSS-стили блока «Возможности»
Из урока вы узнаете, как и какие стили нужно назначить для трехколоночного блока «Возможности», чтобы он выглядел так же, как и на макете.
Урок 10. HTML-разметка блока «Технологии»
В данном уроке показано, как создать разметку для блока «Технологии», который состоит из четырех колонок.
Урок 11. CSS стили блока «Технологии»
Из урока вы узнаете, как и какие стили нужно назначить для четырехкнопочного блока «Технологии», чтобы он выглядел так же, как и на макете. Кроме этого, узнаете еще один способ центрирования блоков.
Урок 12. HTML-разметка блока «Скачать»
Поскольку данный блок выглядит так же, как и блок «О приложении» (он тоже состоит из двух колонок), мы за основу возьмем код блока «О приложении» и поправим его, чтобы контент блока был правильным.
Урок 13. CSS-стили блока «Скачать»
В данном уроке мы создадим CSS-стили для блока «Скачать», выстроим все блоки так, как этого требует макет и создадим кнопки на скачивание приложения.
Урок 14. HTML-разметка блока контактов
В уроке показано, как создать разметку для блока контактов. Как сделать разметку для формы отправки своих данных.
Урок 15. CSS-стили блока контактов
Из урока вы узнаете, как и какие стили назначать для блока контактов. Самое главное в этом уроке – это стили для формы обратной связи и кнопки. Как это все правильно оформить и будет рассмотрено в данном уроке.
Урок 16. HTML-разметка подвала страницы
В данном уроке будет показано, как создать разметку для подвала сайта.
Урок 17. CSS-стили подвала страницы
Из урока вы узнаете, как создать стили для подвала сайта, чтобы он выглядел, как на макете.
Урок 18. Адаптация макета. Часть 1 - 4
Мало просто сверстать макет. Сегодня необходимо, чтобы сайтом можно было удобно пользоваться с различных устройств. Мы с помощью медиа запросов будем адаптировать наш макет, чтобы он хорошо выглядел и сайтом можно было пользоваться на различных устройствах.
Урок 19. Адаптация макета. Часть 5. Заключение
В данном уроке мы завершим адаптацию нашего макета и подведем итог нашей работы по верстке макета и наметим, куда двигаться дальше.

Часть 5

Практика. Верстка лендинга подбора подарков

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

У вас уже есть необходимые знания по CSS Grid, препроцессору Sass и Gulp.

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

Урок 1. Введение
В данном уроке мы изучим макет, который предстоит сверстать. Также откроем сборку проекта и запустим ее.
Урок 2. HTML-разметка шапки сайта
В уроке показано, как создать разметку для шапки сайта.
Урок 3. CSS-стили для шапки сайта. Часть 1 - 2
Из урока вы узнаете, как лучше организовать файлы для создания стилей страницы, какие стили нужно назначить для шапки сайта.
Урок 4. Адаптация шапки сайта
Адаптацию данного макета мы будем производить не всего сразу, как в предыдущей практической части, а по частям. В данном уроке показано, как адаптировать шапку сайта для различных устройств.
Урок 5. HTML-разметка блока «О компании»
Из урока вы узнаете, как создать разметку для блока «О компании» и что в ней нужно предусмотреть, чтобы можно было центрировать блоки по вертикали и горизонтали.
Урок 6. CSS-стили для блока «О компании». Часть 1 - 2
На протяжении уроков показано, как создавать стили для части страницы «О компании». Поскольку структура блока двунаправленная, будем использовать Grid.
Урок 7. Адаптация блока «О компании»
В данном уроке показано, как можно адаптировать блок «О компании» под различные устройства. Из урока вы узнаете, как при адаптации менять порядок следования блоков и зачем это нужно.
Урок 8. HTML-разметка блока подарков
В данном уроке показано, как создать разметку для блока подарков, который состоит из четырех колонок.
Урок 9. CSS-стили блока подарков
Из урока вы узнаете, как и какие стили нужно назначить для четырехкнопочного блока подарков, чтобы он выглядел так же, как и на макете.
Урок 10. Адаптация блока подарков
Из урока вы узнаете, как адаптировать под различные устройства блок, внутри которого расположено еще четыре блока в один ряд.
Урок 11. HTML-разметка блока регистрации
В данном уроке показано, как создать разметку для блока и как сделать кнопки регистрации.
Урок 12. CSS-стили блока регистрации
Из урока вы узнаете, как и какие стили нужно назначить для двухколоночного блока подарков, чтобы он выглядел так же, как и на макете.
Урок 13. Адаптация блока регистрации
Из урока вы узнаете, как лучше выполнить адаптацию блока, состоящего из двух колонок, в одном из которых расположены кнопки.
Урок 14. HTML-разметка блока постов
В данном уроке показано, как создать разметку для нестандартного блока постов блога.
Урок 15. CSS-стили блока постов. Часть 1 - 2
Из уроков вы узнаете, как, используя Grid, сделать разметку для нестандартного блока постов, первый из которых занимает две колонки, а остальные занимают по одной.
Урок 16. Адаптация блока постов
Из данного урока вы узнаете, как адаптировать блок с постами под различные разрешения. Узнаете, как при адаптации менять порядок следования блоков.
Урок 17. HTML-разметка подвала страницы
В данном уроке показано, как создать разметку для подвала сайта.
Урок 18. CSS-стили подвала страницы
Из урока вы узнаете, как создать стили для подвала сайта, чтобы он выглядел, как на макете.
Урок 19. Заключение
В данном уроке мы подведем итог по верстке наших макетов. Поговорим о том, как продолжить совершенствовать знания, какие есть способы повышения уровня практической верстки.

6 премиум-курсов – в подарок

В комплекте с основным видеокурсом мы предоставляем 6 премиальных авторских видеокурсов нашего издательства (уже включены в стоимость). Они дадут все недостающие азы любому новичку.

*Рекомендуемую последовательность изучения материалов основного курса и бонусных курсов – смотрите в разделе ответов на частые вопросы (в самом низу этого сайта).

6 бонусных курсов

17 часов видео

65бонусных уроков

Бонус 1. Премиум-курс «CSS3. Основы»

В премиум-курсе рассматриваются основы CSS3, наиболее востребованные и актуальные в процессе верстки.

Спецификация CSS3 предоставляет нам множество возможностей и свойств, при помощи которых можно реализовывать различные визуальные эффекты, некоторые из которых ранее применялись только с использованием JavaScript или изображений.

Видеокурс продемонстрирует на практике множество новых возможностей и свойств CSS3, которые сделают вашу работу более продуктивной и комфортной.

20 уроков, 5 часов видео

Бонус 2. Премиум-курс «Flexbox»

В видеокурсе рассматривается CSS-модуль Flexbox, используя который можно верстать гибкие макеты различной сложности, при этом не используя float и inline-block.

Изучаются все основные свойства, которые нам предоставляет Flexbox. Также по шагам разобраны необходимые в процессе верстки полезные функции модуля.

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

В практической части показывается верстка макета с чистого листа, начиная от написания структуры HTML и заканчивая CSS-стилями.

7 уроков, 2 часов видео

Бонус 3. Премиум-курс «Введение в Gulp»

Gulp – это таск-менеджер, который позволяет автоматизировать выполнение часто встречаемых операций.

Например, Gulp может объединять несколько CSS- или JS-файлов в один и уменьшить их размер. Может сжимать изображения, следить за изменениями в файлах и обновлять страницу при внесении изменений. И многое другое.

Мы детально разберем: как работает инструмент Gulp, где брать для него плагины, как их устанавливать, подключать и использовать.

5 уроков, 1,5 часа видео

Бонус 4. Премиум-курс «Препроцессор Sass»

CSS-препроцессор Sass — это профессиональный инструмент, который должен освоить каждый web-разработчик.

Написание кода с его использованием становится более простым и понятным, однако это является далеко не основным преимуществом препроцессора.

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

Помимо этого, появляется возможность использования переменных, вложенных селекторов, создания функций, условий, циклов, миксинов и множество других операций.

10 уроков, 2,5 часа видео

Бонус 5. Премиум-курс «CSS Grid Layout»

Мы познакомимся с очень популярным модулем CSS Grid Layout, который позволяет строить двумерные сетки и создавать довольно удобные и гибкие пользовательские интерфейсы.

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

Также мы постепенно погрузимся в изучение работы различных свойств, предназначенных для создания grid-контейнера, разметки, размеров колонок и рядов, именования grid-линий и многих других возможностей для работы с grid-элементами и grid-контейнером.

По окончанию теоретической части мы закрепим полученные знания и сверстаем макет при помощи технологии Grid.

13 уроков, 3 часа видео

Бонус 6. Премиум-курс «Теория и практика адаптивной верстки»

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

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

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

10 уроков, 2,5 часов видео

Отзывы наших покупателей

  • Якименко Сергей

  • Игорь Очеретный

  • Андрей Николаев

  • Владимир Трунов

«Материалы удивили своей подробностью и качеством»

Сейчас уже не вспомню, как и когда я впервые попал на webformyself.com, но материалы, предлагаемые на этом ресурсе, удивили своей подробностью и качеством подаваемого материала.

Я нашел ответы на то, что раньше не понимал, и многое встало на свои места.

Очень много полезного и нового для себя узнал в курсе по HTML5 и CSS3. Многое из почерпнутых знаний я уже применил в своих разработках.

Якименко Сергей
г. Москва

«Webformyself.com — незаменимый помощник для каждого верстальщика, веб-дизайнера, программиста или обычного блогера»

Избранный командой WebForMySelf формат уроков, а также потрясающая наглядность и доступность для понимания абсолютными новичками, делают ресурс webformyself.com незаменимым помощником для каждого верстальщика, веб-дизайнера, программиста или обычного блогера, который хочет быть настоящим хозяином своего интернет-проекта, способным на самом деле его контролировать и достигать любых поставленных целей.

Я с удовольствием получаю уведомления о появлении каждого нового урока от ребят из WebForMySelf и с чистой совестью рекомендую этот замечательный ресурс своим подписчикам. Так держать, парни!

Игорь Очеретный

«Продукт действительно качественный»

Продукт действительно качественный, сразу видно, что автор наклепал уже не одну сотню сайтов. В курсе подробно, даже детально всё разжёвывается, что и как нужно делать.

Об авторах коротко хочется сказать следующее: парни, Вы молодцы продолжайте в том же духе!

Покупкой доволен! -))

Андрей Николаев

«Считаю, что мне повезло. здесь ребята просто честно делают свое дело»

Что мне особенно импонирует, так это отсутствие назойливости у команды WebForMyself, чем грешат очень многие в интернете. Я ни разу не слышал от них чего-нибудь вроде «Наш видеокурс поможет вам разбогатеть, даже если вы ничего не знаете и не хотите знать! Купите наш видеокурс - и доллары сами будут за вами бегать!».

Нет, здесь ребята просто честно делают свое дело, делятся тем, что сами знают и умеют, и совершенно справедливо хотят получить за свой труд разумное вознаграждение.

А за ценность и качество выдаваемой ими информации я могу поручиться (и уверен, что буду не одинок).

Владимир Трунов

Купить курс

Автор курса

Андрей Бернацкий

Со-основатель, автор и идейный вдохновитель WebForMySelf.com

За плечами 14-летний опыт веб-разработки, включая вёрстку

7,5 тысяч покупателей и учеников из 28 стран мира

Более 120 тысяч подписчиков в активе издательства

Любимые темы: современная верстка, HTML5, CSS3, Sass

За 12 лет стал автором и соавтором более 20 видеокурсов-бестселлеров

Цена курса



Мгновенное скачивание

5 970 руб.

100% безусловный возврат денежных средств по первому требованию в течение 90 дней с момента покупки гарантирован!

Это действительно выгодное предложение

Наши ближайшие конкуренты (если их можно назвать конкурентами) за сопоставимые деньги дают в разы меньше теории и практики.

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

Просто попробуйте и оцените сами – наша гарантия снимает с вас все риски (о гарантиях читайте ниже).

Будьте востребованы на рынке

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

Эти профессионалы также нужны в интернет-СМИ, рекламных агентствах, IT-отделах некоторых организаций. Прибавьте сюда тысячи вакансий на удалёнке и заказов на фрилансе.

Сколько зарабатывают

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

Стартуйте на фрилансе

Верстальщики очень популярны на биржах фриланса.

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

Зарабатывать на фрилансе верстальщику до 100 000 рублей в месяц более чем реально.

Наша тройная гарантия

Гарантия №1

Безусловная гарантия возврата

Мы гарантируем вам полный безусловный возврат стоимости курса, если по каким-либо причинам вы посчитаете, что он оказался вам бесполезным.

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

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

Гарантия №2

Гарантия качества и актуальности

Все уроки — авторские, актуальные, подробные и тщательно подготовлены лично автором видеокурса: профессиональным веб-разработчиком Андреем Бернацким. Материалы основного и бонусных видеокурсов даются в строгой последовательности по принципу «от простого к сложному» и практически полностью лишены «воды». Только самые актуальные и востребованные знания и навыки.

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

После прохождения курса и небольшой практики вы узнаете, как выполнять верстку практически любой сложности с использованием современных стандартов верстки: HTML5, CSS3, Sass и Gulp, Flex, Grid и т.д.

Гарантия №3

Гарантия получения курса

Этот видеокурс предоставляется только в электронном виде – ссылка на скачивание на ваш жесткий диск будет доступна сразу же после оплаты.

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

Часто задаваемые вопросы

  • В какой последовательности рекомендуется проходить курс?

    При овладении версткой рекомендуется следующая последовательность прохождения курса:

    1. В первых двух блоках мы изучаем основы HTML и CSS. Знания, полученные в первых двух частях курса, используются верстальщиками при верстке любого макета.
    2. Сразу после теории в третьем блоке автор по шагам продемонстрирует, как сверстать первый макет. Мы не будем использовать ничего, чтобы мы не изучили в предыдущих блоках.
    3. Далее продолжить изучение рекомендуется бонусными курсами Премиум-курс «CSS3. Основы» и Премиум-курс «Flexbox». Только после изучения данных курсов можно переходить к практической части по верстке лендинга мобильного приложения.
    4. В практической части курса по верстке лендинга мобильного приложения будут использоваться более продвинутые техники верстки: технология Flex, а также более продвинутые свойства CSS3. Верстка данного макета изначально будет адаптивной.
    5. После этого рекомендуется продолжить изучение бонусными курсами «Введение в Gulp», Премиум-курс «Препроцессор Sass», Премиум-курс «CSS Grid Layout».
    6. Закрепить полученные знания рекомендуется версткой макета сайта по подбору подарков – как показано в последней, практической части курса. Повторяя по шагам за автором курса.
  • На какой период рассчитано изучение?

    Если уделять изучению курса 2-3 часа ежедневно, то в таком темпе можно очень хорошо освоить курс в течение 2-3 месяцев, даже с полного нуля.

    Время рекомендуется распределять следующим образом: 1 час – изучаем теорию, и 1-2 часа – внедряем полученные знания на практике.

    Если у вас изначально были уже какие-то знания по верстке, то процесс изучения будет идти быстрее.

  • Получится ли у меня?

    Не получится только в том случае, если вы сами ничего не будете делать! В остальных случаях – у вас все обязательно получится.

  • Какие минимальные знания требуются для изучения курса?

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

  • А что, если в процессе изучения я пойму, что это не моё?

    Webformyself гарантирует вам полный возврат стоимости курса в течение 90 дней по первому требованию, если вы по каким-либо причинам вы посчитаете, что курс оказался вам бесполезным.

    Этого времени более чем достаточно, чтобы сделать обоснованные выводы. Все денежные риски мы полностью берем на себя (смотрите наши гарантии – выше по тексту).

  • Можно ли смотреть данный видеокурс на OS X (Mac OS)?

    Да. Этот видеокурс можно изучать как в Windows, так и в OS X (Mac OS). Он открывается в любом современном браузере.

  • Ограничено ли количество устройств, на которых я могу изучать курс?

    Нет, не ограничено. Вы можете запускать курс на любом компьютере без ограничений.

  • Я не из России, могу ли я купить ваш курс?

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

  • Какие виды оплаты вы принимаете?

    JustClick — возможность оплаты следующими способами: Visa, MasterCard, электронные деньги (Вебмани, Киви, Яндекс-деньги), интернет-банкинг, терминалы и салоны связи (Евросеть, Связной, Яндекс-деньги), платежные системы (RBKMoney), денежные переводы (Банковский перевод, Альфа-клик, Промсвязьбанк, Контакт, Лидер).

    PayPal — международная система оплаты PayPal.

  • Остались еще вопросы? Напишите нам!

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


Купить курс