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

От теории до верстки популярных шаблонов

Станьте современным верстальщиком с нуля




Для кого

Абсолютные новички

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

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

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

Продвинутые верстальщики и фрилансеры

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

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

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

Действующие веб-программисты

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

Почему вам стоит пройти этот курс

Посмотрите живое видео
от автора курса

Так кто же такой верстальщик

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

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

Это процесс перевода макета сайта, созданного дизайнером в графической программе, в HTML-страницу. При этом используются специальные языки, которые для этого предназначены: HTML, CSS, JavaScript.

Соответственно, верстальщик — это человек, который занимается кодированием HTML-страницы.

Как создаются современные сайты

Если упрощенно рассмотреть схему создания сайта, то можно выделить следующие этапы

ПЛАНИРОВАНИЕ

Собирается информация о будущем сайте: для чего он создается, кто будут его основные посетители, какой должен быть функционал и т.д. Результатом является техническое задание (ТЗ)

ДИЗАЙН

Дизайнером на основе технического задания создается дизайн будущего сайта. Делается это в графическом редакторе. Чаще всего используется Photoshop

ВЕРСТКА

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

ПРОГРАММИРОВАНИЕ

Полученный на предыдущем этапе HTML-шаблон программируется, либо устанавливается на готовую CMS (систему управления сайтом). Делается это с целью автоматизации процессов добавления, редактирования, удаления страниц и прочего. Это нужно для того, чтобы было проще управлять сайтом и с работой мог справиться человек без технических знаний

РАЗМЕЩЕНИЕ САЙТА В ИНТЕРНЕТЕ

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

Современные стандарты верстки

По состоянию на конец 2018 года на верстку налагаются определенные требования, соблюдение которых де-факто является стандартом.

Верстка должна быть:

  • Кроссбраузерной — страница должна одинаково выглядеть во всех браузерах.
  • Адаптивной — также страница должна хорошо отображаться на экранах мобильных устройств: планшетов и смартфонов.
  • Оптимизированной — верстка изначально создается оптимизированной под поисковые системы.
  • Доступной – чтобы люди с ограниченными возможностями, например, инвалиды по зрению, также могли пользоваться сайтом.

Сегодня есть много технологий, которые применяются для верстки. Если раньше были HTML и CSS, то сегодня это HTML5 и CSS3, препроцессоры, технология Flex, различные фреймворки и так далее.

Путь успешного верстальщика

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

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

Верстка — это Must Have
для любого веб-разработчика!

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

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

Независимо от того, чем вы предпочтете в будущем заниматься в области сайтостроения (frontend, backend или полный цикл: fullstack), с навыком верстки вам придется сталкиваться постоянно. Верстка — это Must Have для любого веб-разработчика! Она — вход в веб-разработку.

КОМАНДА WEBFORMYSELF ПРЕДСТАВЛЯЕТ ДОЛГОЖДАННЫЙ ПРОДВИНУТЫЙ ВИДЕОКУРС ОБО ВСЕХ ТОНКОСТЯХ СОВРЕМЕННОЙ ВЕБ-ВЕРСТКИ

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

От теории до верстки
популярных шаблонов

ОСНОВНАЯ ЧАСТЬ:
2 фундаментальных блока
52 видеоурока
более 12 часов видео
БОНУСНАЯ ЧАСТЬ:
10 дополнительных курсов
89 видеоуроков

Посмотрите видео и
узнайте о курсе подробнее

Что внутри

Основная часть видеокурса состоит из двух больших практических блоков:

  • Блок 1. Верстка макета главной страницы интернет-магазина
  • Блок 2. Верстка макета Landing Page

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

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

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

Что конкретно вы получите*

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

01

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

02

Будете свободно верстать кроссбраузерные адаптивные сайты практически любой сложности.

03

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

04

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

05

Освоите современную теоретическую базу в области HTML и CSS, включая новейшие их версии, получите море практического опыта.

06

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

07

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

08

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

Главные фишки курса

Абсолютные новички

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

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

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

Продвинутые верстальщики и фрилансеры

В нашем курсе макеты верстаются как раз-таки с использованием современных подходов. При верстке мы будем применять технологию Flex, препроцессор SasS и сборщик Gulp. Верстку сделаем кроссбраузерной и адаптивной под любые устройства. После изучения курса вы сможете использовать в своей разработке все эти инструменты. Мы вместе активно используем эти технологии на практике

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

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

Действующие веб-программисты

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

Практический результат прохождения курса

В ходе прохождения основной части курса вы сверстаете современные макеты двух наиболее востребованных типов сайтов: Landing Page и главной страницы интернет-магазина.

В нашем курсе макеты верстаются по самым передовым технологиям на рынке –  с использованием технологии Flex, препроцессора SasS и сборщика Gulp. Мы изначально сделаем нашу верстку кроссбраузерной и адаптивной под любые устройства.

Мы полностью осветим современную (актуальность по состоянию на октябрь 2018 года) адаптивную кроссбраузерную оптимизированную верстку.

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

Сайты, которые мы создадим

Содержание видеокурса

Блок 1. Верстка макета главной страницы интернет-магазина

Количество уроков: 23

Продолжительность: более 5 часов

ЦЕЛИ И ЗАДАЧИ БЛОКА

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

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

Урок 1. Обзор макета главной страницы интернет-магазина

В данном уроке мы произведем обзор макета и рассмотрим все его составляющие.

Урок 2. Нарезка изображений из PSD-макета

В этом уроке мы рассмотрим несколько способов нарезки картинок из PSD-макета.

Урок 3. Сборка проекта при помощи Gulp

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

Урок 4. Реализация HTML-структуры для верхнего блока

В этом видео мы начинаем верстку макета и создадим HTML-структуру для верхнего блока.

Урок 5. Написание CSS-стилей для верхнего блока

В данном видео мы пропишем необходимые CSS-стили для верхнего блока.

Уроки 6. Адаптация верхнего блока под различные разрешения

В этом видеоуроке мы реализуем адаптацию верхнего блока под различные разрешения.

Уроки 7. Написание HTML-структуры для блока со слайдером

В данном уроке мы напишем необходимую HTML-структуру для блока со слайдером.

Урок 8. Полная стилизация слайдера

В данном уроке мы полностью стилизуем слайдер.

Уроки 9. Медиа-запросы для блока со слайдером

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

Урок 10. Настройка и подключения плагина Owlcarousel 2 для слайдера

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

Урок 11. Полная верстка блока категорий

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

Урок 12. Написание HTML-структуры для блока с предложениями

В этом уроке будет создана HTML-структура для блока с предложениями.

Урок 13. Стилизация блока с предложениями

В данном видео мы добавим CSS-свойства для блока с предложениями.

Урок 14. Адаптация блока с предложениями под различные разрешения

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

Урок 15. Полная верстка блока с баннером

В данном видеоуроке мы полностью сверстаем блок с баннером.

Урок 16. Полная верстка блока с продуктами

В данном видеоуроке мы реализуем верстку блока с продуктами.

Урок 17. Реализация HTML-структуры и написание стилей для блока с рекомендуемыми товарами

В этом видеоуроке мы сверстаем блок с рекомендуемыми товарами.

Урок 18. Подключение и настройка карусели для блока рекомендуемых товаров

В данном уроке к блоку с рекомендуемыми товарами будет подключена и настроена карусель.

Урок 19. Полная реализация блока с баннером

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

Урок 20. Верстка и адаптация блока с новостями

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

Урок 21. Верстка и адаптация блока со ссылками

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

Урок 22. Верстка подвала

В данном уроке мы сверстаем последний блок футера.

Урок 23. Модернизация блока с поиском при помощи JavaScript

В этом уроке будет модернизирован блок с поиском, при клике на иконку которого будет появляться форма поиска.

Блок 2. Верстка макета Landing Page

Количество уроков: 29

Продолжительность: около 7 часов

ЦЕЛИ И ЗАДАЧИ БЛОКА

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

Урок 1. Обзор макета и подготовка к верстке

В этом видео мы познакомимся с макетом и структурой проекта, подготовимся к верстке, установив необходимые зависимости при помощи пакетного менеджера NPM.

Урок 2. Написание HTML-структуры для верхнего блока

В этом видео мы реализуем необходимую HTML-структуру для создания верхнего блока.

Урок 3. Стилизация меню и блока с информацией

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

Урок 4. Завершение стилизации верхнего блока и написание миксина

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

Урок 5. Адаптация верхнего блока под различные разрешения

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

Урок 6. Полная верстка блока с преимуществами

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

Урок 7. Полная реализация блока с историей

В данном уроке мы реализуем верстку блока с историей, напишем HTML-структуру, добавим CSS-стили и адаптируем блок при помощи медиа запросов.

Урок 8. HTML-структура для блока с услугами

В данном уроке мы напишем HTML-структуру для блока с услугами.

Урок 9. Написание стилей и адаптация блока с услугами

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

Урок 10. HTML-структура для блока портфолио

В данном уроке мы напишем HTML-структуру для блока портфолио.

Урок 11. Стилизация блока портфолио

В данном уроке мы займемся стилизацией блока портфолио и добавим CSS-код для заголовка, текста, разделителя, а также категорий работ.

Урок 12. Завершение стилизации блока портфолио и его адаптация

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

Урок 13. HTML-структура для блока Case Study

В данном видео мы напишем HTML-структуру для блока Case Study.

Урок 14. Написание стилей и адаптация блока Case Study

В этом уроке мы продолжим работу с блоком Case Study, полностью стилизуем и адаптируем его под различные разрешения.

Урок 15. Верстка блока со статистикой

Мы выполним верстку блока со статистикой, а именно реализуем структуру блока, а также зададим необходимые CSS-стили.

Урок 16. Написание HTML-структуры для блока с ценами

В данном видео мы приступаем к блоку с ценами и напишем его HTML-структуру.

Урок 17. Стилизация и адаптация блока с ценами

В этом уроке мы продолжаем работу над блоком цен, в нем будет выполнена стилизация и адаптация блока.

Урок 18. HTML-структура для блока с командой

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

Урок 19. CSS-стили для блока с командой

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

Урок 20. Адаптация блока с командой при помощи медиазапросов

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

Урок 21. Верстка блока Great Integrations

В данном видеоуроке мы полностью сверстаем блок Great Integrations.

Урок 22. HTML-структура для блока новостей

В этом уроке будет создана структура для блока новостей.

Урок 23. CSS-стили для блока новостей

В данном видео мы продолжим реализацию блока новостей и напишем необходимые CSS-стили.

Урок 24. Адаптация блока новостей под различные разрешения

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

Урок 25. HTML-структура для блока с формой

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

Урок 26. Стилизация и адаптация блока с формой

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

Урок 27. Верстка блока с предложением

В этом уроке будет полностью выполнена верстка блока с предложением.

Урок 28. Верстка подвала

В данном видео мы закончим верстку Landing Page, реализовав и адаптировав футер.

Урок 29. Доработка мелочей и заключение

В этом видео мы завершаем работу над версткой Landing Page, доработаем оставшиеся мелкие детали и подведем итог.

БОНУСЫ

Бонус 1.Премиум-курс «Редактор NotePad++»

Автор: Бернацкий Андрей

Длительность курса: 0:42:46

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

Среди продвинутых возможностей Notepad++ — опция подсветки текста и возможность сворачивания блоков, согласно синтаксису языка программирования. Пользователь может самостоятельно определить синтаксис языка программирования. Есть возможность настроить режим подсветки. Доступно выделение цветом директив и операторов языка программирования.

Notepad++ обеспечивает возможность одновременного просмотра и редактирования нескольких документов. Также Вы можете просматривать и редактировать в двух окнах отображения один и тот же документ в разных местах. Изменение документа в одном окне просмотра будет автоматически перемещено во второе окно просмотра (т. е. вы редактируете один документ, который имеет клона во втором окне просмотра).

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

Бонус 2.Премиум-курс «Редактор Sublime Text»

Автор: Бернацкий Андрей

Длительность курса: 0:31:41

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

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

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

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

Бонус 3.Премиум-курс «Учебник по основам HTML для начинающих»

Автор: Бернацкий Андрей

Длительность курса: 01:57:09

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

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

Задания для самостоятельного выполнения дадут возможность лучше изучить HTML и закрепить полученные знания на практике.

В курсе мы разберем форматирование текста, работу с изображениями, ссылками, списками, таблицами и формами.

Бонус 4.Премиум-курс «Учебник по основам CSS для начинающих»

Автор: Бернацкий Андрей

Длительность курса: 01:31:17

При верстке веб-страниц HTML отвечает за разметку страницы, то есть за ее построение. А за оформление страницы, то есть за ее дизайн и внешний вид, отвечает CSS.

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

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

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

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

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

Бонус 5.Премиум-курс «Верстка сайта для начинающих»

Автор: Бернацкий Андрей

Длительность курса: 01:24:02

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

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

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

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

Бонус 6.Премиум-курс «Курс по HTML5. Основы»

Автор: Бернацкий Андрей

Длительность курса: 02:23:17

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

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

В данном премиум-курсе по HTML5 мы рассмотрим лишь основы, наиболее востребованные и актуальные в процессе верстке.

Мы рассмотрим важные новшества, которые появились в HTML5 и которых не было в предыдущих спецификациях стандарта.

Появились новые теги, которые делают разметку страницы более структурированной и семантической: header, footer, article, nav, section...

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

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

Теперь стало возможным рисование векторных фигур прямо в браузере. Делается это с помощью тега Canvas. Именно с помощью данного тега можно рисовать векторные фигуры, а с помощью JavaScript можно управлять нарисованными фигурами, тем самым создавая анимации, небольшие мультфильмы, и даже игры!

Так же с приходом HTML5 стало возможно хранить некоторые данные на стороне клиента, используя LocalStorage(локальное хранилище).

Еще одна полезная возможность, которая стала доступна в HTML5 - это геолокация. То есть теперь мы можем легко определять местоположение посетителя нашего сайтов.

Бонус 7.Премиум-курс «Курс по CSS3»

Автор: Булыга Денис

Длительность курса: 04:46:02

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

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

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

Основными преимуществами CSS3 являются простота использования, ускорение процесса разработки и оформления web-страниц, уменьшение размера кода, практически 100% кроссбраузерность, при этом множество свойств уже можно использовать без префиксов.

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

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

Автор: Булыга Денис

Длительность курса: 02:02:19

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

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

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

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

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

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

Автор: Булыга Денис

Длительность курса: 01:58:51

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

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

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

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

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

Бонус 10.Курс «Размещение лендинга в интернете. Хостинг. Домен»

Автор: Булыга Денис

Длительность курса: 00:09:18

В этом бонусном блоке мы поговорим с вами о том, что такое домен и хостинг, для чего они нужны, а также купим необходимые услуги на сервисе хостинг-провайдера «Макхост».

Разместим страницу Landing Page в интернете, используя в качестве файлового менеджера панель управления хостингом.

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

По результатам урока вы научитесь размещать статические страницы сайтов в интернете.

АВТОР ВИДЕОКУРСА
Денис Булыга

  • Автор проекта WebForMySelf
  • Успешный высокооплачиваемый фрилансер-практик, профессиональный верстальщик
  • Специализируется на верстке и дизайне сайтов, а также разработке сайтов с нуля на движке WordPress
  • В общей сложности успешно завершено более 100 проектов
  • Страница профиля на всем известной бирже фриланса, где можно увидеть примеры выполненных работ: freelance.ru/felon20 
  • К слову, на одной только этой бирже у Дениса 50 положительных отзывов и ни одного отрицательного, что уже многое говорит о его профессионализме…

Что говорят
о профессионализме автора

Стоимость видеокурса

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

Сразу после успешной оплаты на указанный вами email придет ссылка для мгновенного скачивания курса на ваш жесткий диск

7 970 руб.

100% возврат средств в случае неудачи

Почему видеокурс покупать выгоднее
чем участвовать в тренингах

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

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

Но при этом – в 3-5, а иногда и 10 раз дешевле!

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

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

Сколько зарабатывают верстальщики

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

Востребованность на фрилансе

Кроме того, верстальщики очень популярны на фрилансе. На соответствующие биржи за их услугами обращаются иногда и те же веб-студии, и предприниматели: для создания лендингов, внесения правок в существующие сайты и лендинги, рекламщики и так далее. Зарабатывать на фрилансе верстальщику до 100 тысяч рублей в месяц более чем реально. Конечно, на фрилансе есть немаленькая конкуренция, но по своему опыту можем смело сказать, что хороших специалистов, которые ответственно относятся к работе и заказчикам, не так уж много.

Нам можно доверять

Издательство WebForMyself вот уже 11 лет известно высочайшим качеством своей продукции и профессиональным уровнем нашей команды. За все это время издательство выпустило более 30 видеокурсов на самые разные темы сайтостроения и веб-дизайна.

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

За это время более 115 тысяч веб-мастеров по всему миру успело оценить качество наших видеокурсов и качественной послепродажной поддержки. В Рунете мало кто может похвастаться подобными достижениями!

ГАРАНТИИ

Издательство WebForMyself предоставляет на все свои продукты уникальную 4-уровневую гарантитворенности

Гарантия №1

БЕЗУСЛОВНЫЙ ВОЗВРАТ ДЕНЕЖНЫХ СРЕДСТВ ПО ПЕРВОМУ ТРЕБОВАНИЮ

Издательство WebForMyself официально гарантирует вам полный безусловный возврат стоимости курса, если вы по каким-либо причинам посчитаете, что знания и навыки из курса оказались вам бесполезными.

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

Если мы не сможем вам помочь в течение 48 часов с момента вашего обращения, то мы вернем вам все средства обратно – ВСЕ ДО ПОСЛЕДНЕЙ КОПЕЙКИ!

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

Гарантия №2

ВЫСОЧАЙШЕЕ КАЧЕСТВО*

Все уроки — эксклюзивные, актуальные и подробные, тщательно подготовленные лично мной, профессиональным верстальщиком Денисом Булыгой.

Вы на наглядных примерах с полного нуля научитесь верстку PSD-макеты для главной страницы интернет-магазина и для посадочной страницы (Landing Page).

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

Гарантия №3

ПОЛУЧЕНИЕ КУРСА

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

Объем видеокурса составляет 8,4 Гбайт – скачивание займет от нескольких минут до нескольких десятков минут (в зависимости от скорости вашего Интернет-провайдера).

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

Если вдруг (всякое бывает!) ссылка не работает — просто напишите в службу поддержки. Мы сразу устраним проблему и вы в кратчайшие сроки начнете работать с курсом.

Гарантия №4

ПОСЛЕПРОДАЖНАЯ ПОДДЕРЖКА

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

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

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

ОТЗЫВЫ УЧЕНИКОВ

(на другие продукты WebForMyself.com)

Садыревa Ольгa

Садыревa Ольгa

Понравилось качество курсов, их оформление, профессионализм авторов не вызывает сомнений

Вопрос: Опишите себя в начале пути?

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

Вопрос: Опишите себя сейчас?

Ответ: Сейчас у меня этой решимости только прибавились. Имея за плечами больше 20 лет педагогического стажа, поняла, что это совсем не то, чем мне хочется заниматься сейчас и в дальнейшем. Совсем уходить из преподавания мне бы не хотелось. Идеальный вариант: остаться работать на 0,25 ставки, а остальное время заниматься разработкой сайтов на заказ. Тем более сейчас, когда уровень знаний значительно вырос по сравнению с началом пути.

Вопрос: Что впервые подумали, когда узнали о нашем проекте? Какие мысли у Вас возникли?

Ответ: Очень крутой проект. Нужно познакомиться с ним поближе. Обязательно воспользоваться учебными ресурсами вашего проекта.

Вопрос: Что Вам понравилось?

Ответ: Понравилось качество курсов, их оформление, профессионализм авторов не вызывает сомнений.

Вопрос: Какие у Вас были ощущения?

Ответ: Полный восторг от процесса обучения.

Вопрос: Какие перемены к лучшему произошли в жизни?

Ответ: Курсы помогли систематизировать разрозненные знания, и появилась уверенность, что у меня все получится.

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

Смогу ли я освоить курс?

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

Нужен ли курс, ведь есть масса бесплатных материалов по верстке?

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

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

А если у меня не получится освоить верстку?

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

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

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

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

Минимальный срок поддержки – 6 месяцев со дня покупки курса (на практике мы не ограничиваем срок поддержки строго шестью месяцами и идем навстречу нашим ученикам).

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

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

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

В каком порядке проходить блоки курса?

Для более качественного освоения материала мы рекомендуем следующий порядок прохождения блоков курса:

  1. Бонус 3. Премиум-курс «Учебник по основам HTML для начинающих»
  2. Бонус 4. Премиум-курс «Учебник по основам CSS для начинающих»
  3. Бонус 5. Премиум-курс «Верстка сайта для начинающих»
  4. Бонус 6. Премиум-курс «Курс по HTML5. Основы»
  5. Бонус 7. Премиум-курс «Курс по CSS3»
  6. Бонус 8. Премиум-курс «Курс по Flexbox»
  7. Бонус 9. Премиум-курс «Курс по SasS»
  8. Бонус 1. Премиум-курс «Редактор NotePad++»
  9. Бонус 2. Премиум-курс «Редактор Sublime Text»
  10. Блок 1 основной части курса: «Верстка макета главной страницы интернет-магазина»
  11. Блок 2 основной части курса: «Верстка макета Landing Page»
  12. Бонус 9 «Размещение лендинга в интернете. Хостинг. Домен»

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

На какой период рассчитано изучение?

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

Если же у вас есть хотя бы базовые знания по HTML, CSS и JavaScript, то освоение курса будет более быстрым, около 1 месяца.

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

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

Могу ли я приобрести ваш курс из дальнего зарубежья?

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

Куда можно обратиться, если возникнут вопросы?

По всем техническим, организационным и финансовым вопросам вы можете обращаться в нашу службу поддержки: http://support.webformyself.com

Какие требования к ПК для прохождения видеокурса?

Требования самые минимальные: процессор 800 MHz, оперативная память 512 МБ, звуковая карта (можно встроенную в материнскую плату), видеокарта (можно встроенную в материнскую плату), DVD-дисковод (для физической версии) и операционная система Windows 2000/XP/Vista/7/8.1/10.

Вы принимаете оплату на ваш банковский счет?

Нет, к сожалению, пока что оплату на наш банковский счет мы не принимаем.

Нужна ли доплата за бонусы?

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

На какие гарантии я могу рассчитывать?

1. Гарантия качества

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

3. Гарантия послепродажной поддержки в течение 6 месяцев с момента покупки

4. Гарантия возврата денег. В данном курсе действует правило возврата средств при обращении в течение 3 месяцев с момента покупки курса.

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

Отправляете ли вы видеокурс по почте?

Нет. Этот видеокурс продается только в электронной версии и доступен для скачивания мгновенно после оплаты. Это очень удобно, намного быстрее (мгновенно) и дешевле, если сравнивать с отправкой дисков по почте.

Можно ли смотреть курс на Mac?

Да, можно. Меню курса сверстано в HTML-формате, таким образом Вы сможете смотреть курс через любой браузер

Требуется ли знание английского для изучения вашего курса?

Нет, знание английского языка не требуется.

Не ищите серебряную пулю!

Потому что ее не существует.

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

Если вы новичок, вам необходимо получить базу. И эту базу более чем полностью восполняет данный курс. Далее нужно будет просто нарабатывать опыт – практиковаться, практиковаться и еще раз практиковаться.

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

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

В нашем курсе макеты верстаются по самым передовым технологиям на рынке –  с использованием технологии Flex, препроцессора SasS и сборщика Gulp. Мы сделаем нашу верстку кроссбраузерной и адаптивной под любые устройства.

Больше, чем просто курс

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

Учитывая поддержку автора курса, вы получаете все преимущества тренингов (и даже намного больше!), заплатив при этом в 3-10 раз меньше стоимости типичного тренинга! Вы получаете фундаментальную теорию с пошаговым планом действий по новейшим трендам и фишкам верстки от успешного высокооплачиваемого профи с личными инсайдерскими секретами.

В ходе прохождения курса вы сверстаете современные макеты двух наиболее востребованных типов сайтов: Landing Page и главной страницы интернет-магазина. Как итог – получите 2 заслуживающие внимания работы в портфолио – для того, чтобы устроиться на работу в веб-студию либо начать зарабатывать на фрилансе.

Верстка — это Must Have
для любого веб-разработчика!

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

Действуйте сейчас и не ждите пока знания устареют. Ловите волну. Уверен, у вас все получится.

Автор видеокурса
Денис Булыга