Технология CSS Grid

Руководство
по адаптивной верстке

Успеть заказать Хочу почитать...

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

  • Быстрый старт
для новичков

    Быстрый старт
    для новичков

  • Пошаговый план действий

    Пошаговый план действий

  • Актуальные технологии верстки

    Актуальные технологии верстки

  • 2 работы в ваше портфолио

    2 работы в ваше портфолио

CSS Grid – высший пилотаж в верстке

CSS Grid — это мощная новая технология в верстке. Она позволяет быстро создавать динамические, отзывчивые, современные макеты на чистом CSS. При этом код чище и проще в поддержке, по сравнению с традиционными методами верстки.

Grid Layout — это новая модель макета, которая обладает мощными способностями контролировать размеры и расположение блоков, а также их содержимого.

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

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

Возможности CSS Grid

Фиксированные и гибкие размеры полос Фиксированные и гибкие размеры полос

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

Расположение элемента Расположение элемента

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

Создание дополнительных полос для хранения контента Создание дополнительных полос для хранения контента

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

Управление выравниванием Управление выравниванием

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

Управление перекрывающимся контентомУправление перекрывающимся контентом

CSS Grid позволяет поместить в одну ячейку сетки более одного элемента. Также области могут частично перекрывать друг друга. Управление перекрывающимся контентом можно удобно контролировать с помощью свойства z-index

WEBFORMYSELF ПРЕДСТАВЛЯЕТ НОВЫЙ ВИДЕОКУРС

Технология CSS Grid

Руководство по адаптивной верстке

Технология CSS Grid

Уделите всего 7 минут обзору видеокурса!

Успеть заказать

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

  • Самые новички в сайтостроении

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

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

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

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

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

  • Опытные верстальщики и фрилансеры

    Опытные верстальщики и фрилансеры

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

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

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

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

Что внутри

Курс включает в себя 52 урока общей продолжительностью чуть более 13 часов – без учета бонусов, в которых содержится все необходимая и исчерпывающая теоретическая база для старта с нуля в изучении материалов курса!

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

  • 52

    видеоурока основной
    части

  • 13

    часов основной
    части

  • 10

    бонусных
    видеокурса

  • 91

    видеоурок бонусной
    части

  • 21

    час бонусных
    видеоуроков

Какие проблемы решает курс

  • Самые новички в сайтостроении

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

    В курсе собрана вся необходимая, без лишней воды, информация, которая научит даже самого новичка верстать востребованные макеты сайтов. Рассматриваются самые востребованные и современные подходы к верстке страниц. Собрана вся необходимая теория, причем по самым современным и передовым технологиям в верстке: Flex и Grid Layout. Далее нужно будет просто нарабатывать опыт. А сверстав пару макетов, появится понимание того, что с версткой делать дальше и какие далее есть этапы в создании сайтов. Вы сможете самостоятельно сделать осознанный выбор: оставаться вам верстальщиком и продвигаться в этой профессии или изучать что-то дополнительно: frontend, backend, либо разработку на CMS

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

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

    Для начинающих верстальщиков актуальна проблема самостоятельной верстки. Они знают HTML-теги, CSS-свойства, могут вносить мелкие правки в существующую верстку. Но испытывают трудности при верстке полноценного макета из Photoshop в HTML-страницу. Данный курс даст вам море практики. В нем с самого нуля верстаются два самых популярных видов макета: Landing Page и главной страницы сайта-визитки. Вы в реальном времени увидите и прочувствуете процесс верстки, поймете ее принципы. Узнаете, как управлять поведением блоков в потоке и сможете верстать сайты самостоятельно. Причем не какие-то учебные легкие макеты, а современные макеты, которые востребованы на рынке сегодня

  • Опытные верстальщики и фрилансеры

    Опытные верстальщики и фрилансеры

    Для более продвинутых верстальщиков и фрилансеров актуальна проблема изучения новых технологий и в целом постоянное появление новых технологий. Работодатели предъявляют все больше требований к верстальщикам: сегодня мало уметь просто сверстать страницу, нужно верстать быстро, используя современные подходы и принципы. В курсе показана верстка макетов как раз с использованием современных подходов. Используются технологии Grid, Flex, препроцессор Sass и сборщик Gulp. Верстка делается кроссбраузерной и адаптивной под любые устройства. После изучения видеокурса, при должном усердии и ответственном подходе, вы сможете в кратчайшие сроки использовать в своей работке все эти инструменты

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

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

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

Что даст вам курс*

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

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

В этом пособии на практике используются самые актуальные в 2019 году и ближайшей перспективе технологии для верстки: Flexbox и CSS Grid. При этом все рутинные процессы автоматизированы при помощи последней версии Gulp 4.

Вот лишь некоторые задачи,

решение которых показано в курсе:

  • Компиляция SCSS кода в CSS и его минификация

    Компиляция SCSS кода в CSS и его
    минификация

  • Копирование необходимых файлов (изображения, HTML-файлы и шрифты)

    Копирование необходимых файлов
    (изображения, HTML-файлы и шрифты)

  • Минификация и объединение скриптов

    Минификация и объединение
    скриптов

  • Оптимизация изображений

    Оптимизация изображений

  • Создание SVG-спрайтов

    Создание SVG-спрайтов

  • Слежение за файлами и автоматическая перезагрузка браузера при внесении изменений

    Слежение за файлами и автоматическая
    перезагрузка браузера при внесении изменений

Быстрый старт для новичков Быстрый старт для новичков

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

Пошаговый план действий Пошаговый план действий

У вас будет четкий пошаговый план действий для верстки сайтов практически любой сложности: от лендингов до порталов

2 работы в ваше портфолио2 работы в ваше портфолио

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

Актуальные технологии версткиАктуальные технологии верстки

В материалах курса показано, как быстро верстать сайты, применяя новейшие технологии верстки: Grid Layout, Flex, SasS и Gulp

Бесценная практика Бесценная практика

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

Результат после прохождения*

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

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

В этом пособии на практике используются самые актуальные в 2019 году и ближайшей перспективе технологии для верстки: Flexbox и CSS Grid. При этом все рутинные процессы автоматизированы при помощи последней версии Gulp 4.

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

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

Вся работа будет начинаться с нуля – начиная от создания проекта и нарезки изображений в Photoshop и заканчивая написанием HTML-разметки, созданием сетки, стилизацией и адаптацией верстки.

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

Работа 1
Работа 2

Из каких уроков состоит курс

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

Хронометраж: 6 часов 36 минут

Урок 1. Обзор PSD-макета и готовой верстки Landing Page 4:59

Урок 2. Экспорт изображений для верстки из Adobe Photoshop CC 2018 7:27

Урок 3. Установка Node Js, Gulp CLI и инициализация проекта 7:07

Урок 4. Начало создания автоматизированной сборки при помощи Gulp 4 27:22

Урок 5. Создание дополнительных задач по автоматизации 19:17

Урок 6. Подготовка к верстке и детальный обзор проекта 15:55

Урок 7. Создание HTML-разметки для шапки сайта 7:25

Урок 8. Полная стилизация шапки сайта 18:52

Урок 9. Создание разметки для блока баннера 4:58

Урок 10. Стилизация баннера и написание собственного миксина 22:48

Урок 11. HTML-структура блока с преимуществами 7:14

Урок 12. Полная стилизация преимуществ 21:11

Урок 13. HTML-разметка блока с работами 8:04

Урок 14. Написание стилей для блока работ 32:53

Урок 15. Доступность интерактивных элементов и адаптация блока работ 14:05

Урок 16. Написание структуры для информационного блока 3:37

Урок 17. Полная стилизация информационного блока 16:15

Урок 18. Создание разметки для блока скиллов 5:37

Урок 19. Стилизация блока со скиллами 20:08

Урок 20. Анимация линий блока прогресса 13:34

Урок 21. HTML-структура блока новостей 7:51

Урок 22. Полная стилизация блока с новостями 42:25

Урок 23. HTML-разметка блока карусели 4:35

Урок 24. Стилизация карусели и подключение плагина OwlCarousel 30:45

Урок 25. HTML-разметка блока контактов 7:09

Урок 26. Полная стилизация блока контактов 20:17

Урок 27. Полная реализация подвала 4:30

Блок 2. Верстка главной страницы сайта студии

Хронометраж: 6 часов 25 минут

Урок 1. Обзор макета 3:56

Урок 2. Экспорт SVG из Adobe Illustrator 2:37

Урок 3. Подготовка к верстке 6:54

Урок 4. HTML-разметка шапки сайта 10:21

Урок 5. Стилизация шапки сайта 33:58

Урок 6. Адаптив шапки сайта 10:49

Урок 7. Улучшение типографики 10:42

Урок 8. Создание разметки для блока меню 3:32

Урок 9. Стилизация блока меню 25:15

Урок 10. Доработка меню 13:29

Урок 11. HTML-разметка блока проектов 19:15

Урок 12. Стилизация блока проектов. Часть 1 17:09

Урок 13. Стилизация блока проектов. Часть 2 18:53

Урок 14. Стилизация блока проектов. Часть 3 44:25

Урок 15. Адаптация блока проектов 32:22

Урок 16. HTML-разметка блока студио 16:26

Урок 17. Стилизация блока студио. Часть 1 23:08

Урок 18. Стилизация блока студио. Часть 2 12:22

Урок 19. Адаптация блока студио 19:32

Урок 20. HTML-разметка блока с новостями 6:47

Урок 21. Стилизация блока новостей 12:46

Урок 22. Адаптация блока новостей 8:34

Урок 23. Разметка подвала 3:13

Урок 24. Полная стилизация подвала сайта 16:43

Урок 25. Подключение Google maps 12:16

ПОДРОБНОЕ СОДЕРЖАНИЕ КУРСА

(наведите курсор мыши на урок, чтобы смотреть детально)

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

Количество уроков: 27
Продолжительность: 6 часов 36 минут

В первой части курса вы познакомитесь с макетом Landing Page.

Эта часть включает в себя 27 уроков общей продолжительностью более 6 часов.

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

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

В итоге Вы увидите полноценную верстку Landing Page.

Урок 1. Обзор PSD-макета и готовой верстки Landing Page

Урок 1. Обзор PSD-макета и готовой верстки Landing Page

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

Урок 2. Экспорт изображений для верстки из Adobe Photoshop CC 2018

Урок 2. Экспорт изображений для верстки из Adobe Photoshop CC 2018

В данном уроке будет рассмотрено два способа экспорта изображений из графического редактора Photoshop CC 2018, а также создание иконок при помощи копирования SVG.

Урок 3. Установка Node Js, Gulp CLI и инициализация проекта

Урок 3. Установка Node Js, Gulp CLI и инициализация проекта

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

Урок 4. Начало создания автоматизированной сборки при помощи Gulp 4

Урок 4. Начало создания автоматизированной сборки при помощи Gulp 4

В этом видео Вы увидите создание сборки на Gulp 4, в которой производится декомпозиция файлов и настройка таких задач как: компиляция SCSS кода в CSS, конкатенация и минификация скриптов, копирование и удаление файлов проекта.

Урок 5. Создание дополнительных задач по автоматизации

Урок 5. Создание дополнительных задач по автоматизации

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

Урок 6. Подготовка к верстке и детальный обзор проекта

Урок 6. Подготовка к верстке и детальный обзор проекта

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

Урок 7. Создание HTML-разметки для шапки сайта

Урок 7. Создание HTML-разметки для шапки сайта

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

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

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

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

Урок 9. Создание разметки для блока баннера

Урок 9. Создание разметки для блока баннера

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

Урок 10. Стилизация баннера и написание собственного миксина

Урок 10. Стилизация баннера и написание собственного миксина

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

Урок 11. HTML-структура блока с преимуществами

Урок 11. HTML-структура блока с преимуществами

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

Урок 12. Полная стилизация преимуществ

Урок 12. Полная стилизация преимуществ

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

Урок 13. HTML-разметка блока с работами

Урок 13. HTML-разметка блока с работами

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

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

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

В этом уроке создается необходимая сетка для блока при помощи CSS Grid и верстка элементов согласно макету.

Урок 15. Доступность интерактивных элементов и адаптация блока работ

Урок 15. Доступность интерактивных элементов и адаптация блока работ

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

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

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

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

Урок 17. Полная стилизация информационного блока

Урок 17. Полная стилизация информационного блока

В этом видео увидите стилизацию и адаптацию при помощи медиа запросов блок Responsive.

Урок 18. Создание разметки для блока скиллов

Урок 18. Создание разметки для блока скиллов

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

Урок 19. Стилизация блока со скиллами

Урок 19. Стилизация блока со скиллами

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

Урок 20. Анимация линий блока прогресса

Урок 20. Анимация линий блока прогресса

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

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

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

В данном видео создается HTML-разметка для блока новостей.

Урок 22. Полная стилизация блока с новостями

Урок 22. Полная стилизация блока с новостями

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

Урок 23. HTML-разметка блока карусели

Урок 23. HTML-разметка блока карусели

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

Урок 24. Стилизация карусели и подключение плагина OwlCarousel

Урок 24. Стилизация карусели и подключение плагина OwlCarousel

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

Урок 25. HTML-разметка блока контактов

Урок 25. HTML-разметка блока контактов

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

Урок 26. Полная стилизация блока контактов

Урок 26. Полная стилизация блока контактов

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

Урок 27. Полная реализация подвала

Урок 27. Полная реализация подвала

В этом уроке завершается верстка страницы Landing Page.

Блок 2.
Верстка главной страницы сайта студии

Количество уроков: 25
Продолжительность: 6 часов 25 минут

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

Данная часть включает в себя 25 уроков общей продолжительностью более 6 часов.

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

Начнем с обзора макета, после чего будет рассмотрен еще один способ экспорта графики, а именно SVG из Adobe Illustrator. Далее подготовка к верстке, создание проекта и установка в него необходимых зависимостей, и шаг за шагом реализация имеющихся блоков.

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

Урок 1. Обзор макета

Урок 1. Обзор макета

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

Урок 2. Экспорт SVG из Adobe Illustrator

Урок 2. Экспорт SVG из Adobe Illustrator

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

Урок 3. Подготовка к верстке

Урок 3. Подготовка к верстке

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

Урок 4. HTML-разметка шапки сайта

Урок 4. HTML-разметка шапки сайта

В этом видеоуроке увидите написание HTML-структуры шапки сайта.

Урок 5. Стилизация шапки сайта

Урок 5. Стилизация шапки сайта

В этом видеоуроке увидите, как создается Grid-сетка для шапки сайта, а также ее стилизация.

Урок 6. Адаптив шапки сайта

Урок 6. Адаптив шапки сайта

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

Урок 7. Улучшение типографики

Урок 7. Улучшение типографики

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

Урок 8. Создание разметки для блока меню

Урок 8. Создание разметки для блока меню

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

Урок 9. Стилизация блока меню

Урок 9. Стилизация блока меню

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

Урок 10. Доработка меню

Урок 10. Доработка меню

В этом уроке увидите завершение реализации блока меню с добавлением JavaScript-кода.

Урок 11. HTML-разметка блока проектов

Урок 11. HTML-разметка блока проектов

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

Урок 12. Стилизация блока проектов. Часть 1

Урок 12. Стилизация блока проектов. Часть 1

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

Урок 13. Стилизация блока проектов. Часть 2

Урок 13. Стилизация блока проектов. Часть 2

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

Урок 14. Стилизация блока проектов. Часть 3

Урок 14. Стилизация блока проектов. Часть 3

В этом видео размещается информация внутри элементов на свои места согласно дизайн макета.

Урок 15. Адаптация блока проектов

Урок 15. Адаптация блока проектов

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

Урок 16. HTML-разметка блока студио

Урок 16. HTML-разметка блока студио

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

Урок 17. Стилизация блока студио. Часть 1

Урок 17. Стилизация блока студио. Часть 1

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

Урок 18. Стилизация блока студио. Часть 2

Урок 18. Стилизация блока студио. Часть 2

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

Урок 19. Адаптация блока студио

Урок 19. Адаптация блока студио

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

Урок 20. HTML-разметка блока с новостями

Урок 20. HTML-разметка блока с новостями

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

Урок 21. Стилизация блока новостей

Урок 21. Стилизация блока новостей

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

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

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

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

Урок 23. Разметка подвала

Урок 23. Разметка подвала

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

Урок 24. Полная стилизация подвала сайта

Урок 24. Полная стилизация подвала сайта

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

Урок 25. Подключение Google maps

Урок 25. Подключение Google maps

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

БОНУСЫ

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

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

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

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

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

Количество уроков: 8
Продолжительность курса: 01:57:09
Автор: Андрей Бернацкий

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

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

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

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

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

Количество уроков: 10
Продолжительность курса: 01:31:17
Автор: Андрей Бернацкий

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

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

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

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

В курсе пошагово показано, как выполнить верстку на примере конкретного проекта.

Количество уроков: 5
Продолжительность курса: 1:24:02
Автор: Андрей Бернацкий

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

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

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

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

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

Количество уроков: 13
Продолжительность курса: 02:23:17
Автор: Андрей Бернацкий

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

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

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

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

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

Количество уроков: 20
Продолжительность курса: 04:46:02
Автор: Денис Булыга

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

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

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

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

Количество уроков: 10
Продолжительность курса: 02:23:44
Автор: Денис Булыга

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

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

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

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

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

Количество уроков: 6
Продолжительность курса: 01:07:01
Автор: Денис Булыга

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

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

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

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

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

Количество уроков: 7
Продолжительность курса: 02:02:19
Автор: Денис Булыга

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

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

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

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

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

Количество уроков: 10
Продолжительность курса: 02:09:49
Автор: Денис Булыга

Бонус 10
Мини-курс «Построение сеток при помощи Masonry»

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

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

Количество уроков: 2
Продолжительность курса: 00:45:05
Автор: Денис Булыга

Автор видеокурса

Денис Булыга

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

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

Об авторе

Сколько стоит курс?

Bootstrap 4

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

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

5970 руб.

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

Успеть заказать

Мы гарантируем высокое
качество наших видеокурсов

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

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

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

ГАРАНТИИ

  • Возврат денег

    Возврат денег

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

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

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

    Срок действия гарантии возврата средств – 90 дней с момента получения вами курса.

  • Высокое качество

    Высокое качество

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

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

    Вы на наглядных примерах с полного нуля увидите верстку PSD-макетов для главной страницы студии и для посадочной страницы (Landing Page). Мы покажем вам, как быстро верстать сайты, применяя новейшие технологии верстки: CSS Grid, Flex, Sass и сборщик Gulp.

  • Получение курса

    Получение курса

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

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

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

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

Успеть заказать

Отзывы покупателей других курсов от команды Webformyself.com

  • Бондарь Валерия

    Бондарь Валерия

  • Ермилова Виталия

    Ермилова Виталия

  • Дударев Сергей

    Дударев Сергей

  • Новиков Дмитрий

    Новиков Дмитрий

  • Юлия Волобой

    Юлия Волобой

  • Хохлов Денис

    Хохлов Денис

Хочу выразить благодарность команде WebForMyself.com и отдельно Денису Булыге за видеокурс «Верстка-мастер. От теории до верстки популярных шаблонов». Тезисно, что понравилось:

  • Приятный голос автора ;))
  • Хороший темп, замечательно рассказывает и все объясняет. Предвосхищает вопросы.
  • Отличный выбор шаблонов. Две трендовые работы, которые хочется быстрее сверстать.

Реализация верстки. Я давно не новичок и сверстала более 100 проектов, но многие моменты делала «по-старинке» и была приятно удивлена, как это можно делать проще, быстрее.

Интересно, полезно и без «воды».

Кому бы я порекомендовала данный курс?

  • Новичкам обязательно! Все бонусы буквально «разжеваны». Не освоить материал – это надо сильно постараться.
  • Продвинутые верстальщики. Вас порадует подход. Денис верстает все с .psd макета. Очень качественно и четко, объясняя все на своем пути.

Денис, я хочу еще один курс на эту же тему, только с другими шаблонами. =)

Как итог, ускорила этап верстки, нашла много «вкусного» в реализации нетипичных блоков. Закрепила работу с препроцессором SESS и обработкой svg-иконок. Попрактиковала верстку под моб. устройства. В дальнейшем планирую создать свой собственный css-фреймворк.

Еще раз спасибо огромное WFM =)

Купленные курсы:

  • WordPress-Мастер: от Личного блога до Премиум шаблона

Научилась выстраивать логически структурированную HTML-разметку и работу со стилями CSS. Познала тайны создания шаблона для WordPress.

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

Что помогло принять решения для покупки курса? Несколько ранее купленных курсов и бесплатных уроков от Андрея Бернацкого и Андрея Кудлая. Некоторые уроки проделывала по 2 раза, чтобы лучше усвоить и запомнить.

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

Запомнилась последовательность, с которой Андрей Бернацкий начинал анализ страницы для верстки. Мне это очень помогло. Затем шаг за шагом из набора символов выстраивалась страничка на которую приятно посмотреть в браузере. И самое главное — в любом браузере. Вот это «волшебство» и запомнилось. Хочется повторить.

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

Большая благодарность Андрею Бернацкому, Андрею Кудлаю — их уроки, подача материала, живое объяснение во время видео, даже когда что-то не получается у них самих из-за пропущенной запятой ;) — все это создает особую атмосферу. Хочется подсказать «да вот же запятую забыл, потому не показывает, а я нашла!». Внимание фиксируется еще раз и запоминается навсегда.

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

Купленные курсы:

  • Фреймворк Bootstrap: практика адаптивной верстки от А до Я

Главный результат — перспектива работы и дальнейшего совершенствования для начинающего WEB программиста! Возможность верстать достаточно сложные макеты и создавать сайты без углубленного понимания и знания CSS и JavaScript в современных стандартах HTML5 и CSS3.

До настоящего курса с фреймворком не работал. Писал программы в классическом виде в HTML и CSS.

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

Прослушав вводные уроки бесплатного курса Bootstrap 3, оценив качество материала, способ представления, да и просто лексику автора (Андрей Кудлай) и сравнив с тем материалом, который присутствует в интернете без сомнений решил приобрести курс «Фреймворк Bootstrap: практика адаптивной верстки от А до Я»

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

Что мне запомнилось больше всего из курса? Умение автора разделить материал: о чём необходимо рассказать, возможно даже «разжевать».

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

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

Купленные курсы:

  • HTML5 и CSS3 с Нуля до Профи
  • Корпоративный сайт под ключ
  • JavaScript & jQuery с нуля до профи
  • Angular 4 c Нуля до Профи. Полное руководство для современной веб-разработки
  • 1С-Битрикс. Практика создания веб-проектов
  • Фреймворк VUE JS. Полное руководство для современной веб-разработки
  • FullStack-Мастер. Разработка CRM-системы на Node.js, Express, Angular6

Вопрос: Сфера деятельности?
Ответ: IT — ERP система «Галактика», программирую на Атлантис (есть сертификаты учебных центров), также могу администрировать данную систему.

Вопрос: Ваш сайт?
Ответ: Своего сайта нет, я пока не нашел, чем бы я мог поделиться с другими.

Вопрос: Ссылки на Ваши социальные сети?
Ответ: Не пользуюсь социальными сетями, только электронной почтой.

Вопрос: Жизненный опыт?
Ответ: Программирую на C#, VBA (хорошее знание объектной модели Word, Excel, Access), раньше писал на Delphi. Последний год-полтора заинтересовался веб-программированием, все началось с верстки сайтов и плавно перетекло в изучение PHP и JavaScript, версткой сейчас не занимаюсь, при необходимости заказываю верстку на fl.ru, я же пишу движок сайта и сажаю на него сверстанные страницы.

Вопрос: Опишите себя в начале пути?
Ответ: В начале пути для меня веб-программирование было «темным лесом», где было страшно и неуютно, но жажда знаний заставила двигаться вперед, да, на Делфи мне приходилось писать парсеры, были написаны Ebay снайпер, программа для участия на тендерах. На данный момент я понимаю, что написать подобное лучше на PHP (не нужно «придумывать велосипед» с библиотекой Synapse).

Вопрос: Опишите себя сейчас?
Ответ: Мне сложно описывать себя сейчас, это все субъективно. Точно могу сказать, что каскадные таблицы стиля и HTML не вводят в ступор. PHP, хоть и не является таким же гибким, как C#, он мне нравится. Уйти с функционального программирования в PHP на ООП не составило труда, язык не сложный, нет множественного наследования — выручают трейты. Ну а в остальном, все так же, как и в других языках, нет сильной типизации — для меня это и плюс, и минус. Ну что еще, не заморачиваюсь с уничтожением объектов, как в Делфи — в PHP работает сборщик мусора.

Вопрос: Что Вы скажете по поводу возражений, с которыми Вы, возможно, сталкивались перед покупкой информационных продуктов, как преодолевали данные возражения (нет денег; у меня не получится; слишком поздно начинать; слишком рано начинать; родственники против; слишком сложно; возможно, какие-либо Ваши возражения)?
Ответ: Я никогда не жалел денег на самообразование, а отговорки типа «поздно начинать» или «я не смогу», для меня не приемлемы — дорогу осилит идущий.

Вопрос: Какую проблему Вы пытались решить, какие проблемы испытывали до приобретения курса?
Ответ: Главной проблемой до приобретения курсов был мой нулевой уровень знаний. Да, конечно, можно на ютубе смотреть кучу бесплатных роликов, тут ты не потратишь денег, но зато потратишь самое ценное — время. На ютуб большинство роликов содержат кучу воды, так как авторы стараются сделать видео максимально длинным, чтобы заработать на рекламе.

Вопрос: О чем Вы думали в начале пути?
Ответ: Нашел через интернет, на тот момент нужно было срочно сделать сайт-галерею, и я приобрел первый курс по верстке. Тот проект я благополучно завалил — не хватало знаний. Сверстать макет я смог, прикрутил даже JQuery, а дальше мои знания закончились, нужна была админка, нужно было хранить где-то данные. Тут произошло мое знакомство с паттерном MVC и желание освоить PHP (с MySQL проблем не было, так как по роду своей деятельности я хорошо знаком с SQL, часто приходится вытаскивать данные из БД в разрезе складов, контрагентов и т.д.).

Вопрос: Вы испытывали какие-то сомнения?
Ответ: Нет.

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

Вопрос: Каков был Ваш первый шаг? Как это было?
Ответ: Мой первый шаг можно описать фразой — «это фиаско, братан» — мне не хватало знаний, а одного курса по верстке было недостаточно…. Сейчас с моими знаниями я, даже не задумываясь, использовал CMS-ку (Wordpress, Jumla, Droopal) и за тройку дней сделал бы сайт-галерею, благо плагинов и тем в интернете хоть отбавляй. Даже больше, сейчас я способен сам написать движок для подобного сайта на PHP, но на это уйдет просто чуть больше времени.

Вопрос: Что могло бы случиться, если бы Вы не смогли решить свои проблемы, если бы Вы не воспользовались нашими продуктами?
Ответ: Вряд ли бы что-то серьезное случилось, веб-разработка — это мое хобби, я не беру денег за это, и берусь лишь за то, что мне действительно интересно. Ну, а что касается именно Ваших продуктов, именно они направляли меня в мире веб-разработки, так как в начале пути я был подобен слепому котенку, мои знания были нулевыми, и я не знал, куда идти, и что делать. Я считаю, в начале пути просто необходим наставник, указывающий тебе путь, и этим наставником для меня как раз и стали Ваши курсы. Да, не все сразу получилось, но главное — не сдаваться.

Вопрос: Каких успехов Вы достигли?
Ответ: Каких успехов добился? Буквально за 2 недели написал сайт для сервисных центров Huawei в Казахстане, сейчас этот сайт уже не действует, так как Huawei интегрировали внесение заявок в свою систему. Писал сайт для транспортной компании с возможностью отследить расположение груза онлайн, сайт интернет-магазина, сайт для сестры — она практикующий психолог. Особо-то и хвастаться нечем, это для меня прежде всего хобби.

Вопрос: На какую сумму дохода Вы планируете выйти через полгода?
Ответ: 2500–3000 $ (возможно, такой доход и не будет связан с веб-разработкой).

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

Купленные курсы:

  • Angular 4 с нуля допрофи. Полное руководство для современной веб-разработки
  • Премиум клуб
  • Практика оптимизации сайта. Ускорение загрузки сайта в разы
  • JavaScript и jQuery с нуля до профи
  • Фреймоврк YII2 с нуля до профи
  • Верстка сайта под мобильные устройства
  • Фреймворк Bootstrap. Практика адаптивной верстки от А до Я
  • Фреймоврк CakePHP с Нуля до Гуру

Этим летом получила первый заказ на верстку.

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

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

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

И самое главное - хорошая практика, которую получаю теперь в большом объеме, работая одновременно с 20 сайтами.

Всё это результат знания из Ваших курсов:

Yii2 - 5 сайтов из 20, с которыми работаю, сделаны на нем - без этих знаний не смогла бы делать необходимые правки.

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

Bootstrap, адаптивная верстка, HTML5, CSS3 - все знания применяются каждый день.

Остальные на OpenCart и WordPress - с ними разбираюсь без проблем.

Я мама двоих девочек 4 и 6 лет - это к вопросу о нехватке времени. Многие считают невозможным совмещать семью, работу и учебу. Да, это непросто, но всё возможно. Главное - огромное желание и упорство! Важно не опускать руки, поскольку при малейших неудачах, а их будет немало, легко бросить любое увлечение, посчитав, что "это не мое".

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

Мне помогают мотивирующие книги, ключевой оказалась книга Барбары Шер "Лучше поздно чем никогда". Никогда не поздно начинать, и никогда не нужно думать о "возрасте". Лично у меня нет понятия "в моем возрасте...", и очень странно слышать это от людей моложе, считающих что жизнь почти закончена, и поздно что-либо начинать или менять. Как сильно они заблуждаются.. Не сделав первый шаг уже сегодня, вы его так и будете откладывать, а потом еще неприятнее - жалеть о потерянном времени. Эта книга помогла написать свой план реализации задуманного.

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

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

Купленные курсы:

  • Фреймворк Bootstrap: практика адаптивной верстки от А до Я
  • Практика монетизации блога: от раскрутки до реальных денег
  • Фреймворк CakePHP: с нуля до гуру
  • Карьера веб-дизайнера. С нуля до первой продажи за 14 дней
  • Мастер веб-дизайна 2.0
  • Практика верстки под мобильные устройства
  • Интернет-магазин под ключ
  • Корпоративный сайт под ключ
  • Практика резиновой верстки
  • Премиум клуб
  • Верстка сайта: от основ до конкретного результата

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

Начал с изучения курса «Интернет-магазин под ключ», но позже понял, что нужно вникнуть и в другие тонкости, т.е. в азы программирования, верстки и разметки. Естественно не забыл и о веб-дизайне. В настоящее время очень активно продолжаю изучать уроки PHP из курса «Интернет-магазин под ключ».

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

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

До приобретения курсов испытывал проблемы как и у многих людей сегодня. Трудности с нормальной работой и ее оплата.

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

После огромного количества потраченного времени в интернете на поиск нужной и недорогой CMS-ки для интернет-магазина, я наткнулся на рекламу Вашего курса «Интернет-магазин под ключ», которая привела меня на Ваш сайт.

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

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

Изучая курс «Интернет-магазин под ключ» я уже понял, что такое веб-дизайн, как по нему делается разметка и верстка будущего сайта интернет-магазина. Сейчас осваиваю уроки по PHP, после которых MYSQL и далее продолжу изучение программирования интернет-магазина.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    Если знаний по верстке нет совсем, то начинать изучение нужно с бонусов, и тогда на освоение уйдет чуть больше времени: примерно 1,5 – 2 месяца. Однако, это все очень сильно зависит от ваших индивидуальных знаний и навыков.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Верстка — это вход в веб-разработку

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

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

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

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

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

  • 1 Junior

    Знает основные HTML-теги и CSS-свойства, может править контент на странице, добавлять встроенное содержимое — например, видеоролик из YouTube или карту Googlе. При самостоятельной верстке макета испытывает некоторые затруднения и нуждается в наставнике и руководителе.

    Junior должен знать HTML и CSS, разбираться в работе с изображениями, аудио и видео. Обязан знать, какие есть браузеры, редакторы кода, инструменты разработчика. Средний месячный заработок: 40-70 тысяч рублей.

  • 2 Middle

    Middle – это уже самостоятельный верстальщик, способный создавать макеты практически любой сложности. Причем сверстанные страницы будут кроссбраузерными и адаптивными. Объем знаний и навыков Middle намного больше уровня Junior. Он должен знать все, что знает Junior, а также: медиазапросы, анимацию, CSS-фреймворки, препроцессоры, Grid, Flexbox, JavaScript и jQuery. Средний месячный заработок: 70-90 тысяч рублей.

  • 3 Senior

    Самостоятельный верстальщик, способный вести сложные проекты, планировать время на выполнение, обучать других сотрудников. Senior должен знать все, что знают Junior и Middle, на высочайшем уровне. Кроме того, у него обязательно должны быть знания из смежных областей: например, SEO, основы PHP, знание популярных CMS, оптимизации загрузки и т.д. Средний месячный заработок: 90-150 тысяч рублей и даже больше.

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

Ценность знаний – в их актуальности

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

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

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

В этом руководстве на практике используются самые актуальные в 2019 году и ближайшей перспективе технологии для верстки: Flexbox и CSS Grid. При этом все рутинные процессы автоматизированы при помощи последней версии Gulp 4.

Действуйте сейчас и не ждите пока знания устареют!

Успеть заказать