Новый исчерпывающий видеокурс от Webformyself

Освойте востребованные навыки верстки и дизайна и удвойте свой заработок

Научитесь создавать сайты «под ключ» от профи, за плечами которых 1910 успешных проектов

Получите видеокурс со скидкой 40%!

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

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

  • Комплексный процесс дизайна и верстки на примере лендинга

  • Пошаговый план действий и быстрый старт для новичков

  • Современные технологии дизайна и верстки: Figma, Grid, Flex, Sass

  • Много практики, инсайдерских секретов и крутая работа в портфолио

Figma

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

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

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

Именно за счет этого Figma завоевывает сердца специалистов в сфере веб-дизайна.

Почему Figma

  • Доступность

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

  • Удобные инструменты

    Photoshop изначально создавался как редактор фотографий, поэтому инструменты именно для рисования в нем — не самые удобные для дизайнеров. В Figma совершенно иной подход: удобный Pen Tool, удобное создание эффектов

  • Работа со шрифтами

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

  • Удобный бэкап

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

  • Совместная работа

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

  • Хранение файлов

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

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

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

NodeJs

Обзор дизайнерского блока

Обзор блока верстки

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

Что внутри

Основная часть видеокурса разделена на 2 фундаментальных блока и включает в себя 66 уроков общей продолжительностью порядка 13 часов. Вы получите блок по веб-дизайну и блок по верстке. А 11 бонусных видеокурсов, общей продолжительностью 20 часов, дадут новичкам всю необходимую теоретическую и практическую базу для старта с нуля в изучении материалов курса.

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

Также впервые в рамках единого видеокурса полученный дизайн-макет будет сверстан и создан сайт «под ключ». Причем использовать мы будем лишь современные и востребованных технологии верстки: HTML5, CSS3, CSS Grid Layout, CSS Flexbox Layout, CSS Sass, и других.

  • 66

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

  • 13

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

  • 78%

    материалов -
    практика

  • 11

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

  • 98

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

  • 20

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

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

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

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

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

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

  • Ультрасовременные технологии

    Увидите, как быстро создавать дизайн в Figma, а также верстать полученный дизайн, применяя CSS3, HTML5, Grid, Flex, Sass

  • Много практики

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

  • Крутая работа в ваше портфолио

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

  • Комплексный процесс

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

  • Экономьте время и деньги

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

  • Зарабатывайте до 2 раз больше

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

Что вы сможете после прохождения курса*

  • Действующие Backend- 
и Fullstack-разработчики

    Делать качественные дизайн-макеты

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

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

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

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

  • Фрилансеры-практики

    Верстать сайты

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

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

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

    Увидите, как верстать HTML-шаблоны по наиболее прогрессивным и востребованным на рынке технологиям: HTML5, CSS3, CSS Grid Layout, CSS Flexbox Layout, CSS Sass.

Используемые инструменты и технологии

Figma

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

HTML5 (HyperText Markup Language, version 5)

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

CSS3 (Cascading Style Sheets, version 3)

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

CSS Grid Layout

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

CSS Flexbox Layout

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

CSS Sass

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

Уроки курса

Раздел 1. Веб-дизайн Блок 1. Figma от А до Я

Хронометраж: 1 час 1 минута 18 секунд

Урок 1. Скачивание программы 01:05

Урок 2. Обзор интерфейса 04:23

Урок 3. Frame 02:18

Урок 4. Move и Scale 02:43

Урок 5. Инструмент формы 06:30

Урок 6. Перо и карандаш 01:36

Урок 7. Инструмент текст 05:00

Урок 8. Комментарии 01:04

Урок 9. Экспорт 01:24

Урок 10. Смарт-выравнивание 03:23

Урок 11. Маска слоя 02:12

Урок 12. Share 01:57

Урок 13. Модульная сетка 01:27

Урок 14. Режим смешивания 03:33

Урок 15. Стили для текста 03:31

Урок 16. Стили для цвета 04:13

Урок 17. Компоненты 07:47

Урок 18. Адаптивные элементы 03:58

Урок 19. Прототипирование 03:14

Раздел 1. Веб-дизайн Блок 2. Дизайн. Десктоп версия

Хронометраж: 3 часа 25 минут 5 секунд

Урок 1. Frame и Grid 10:52

Урок 2. Перенос ТЗ 11:31

Урок 3. Основные элементы 19:27

Урок 4. Первый экран 10:30

Урок 5. Второй экран 13:30

Урок 6. Третий экран 20:23

Урок 7. Четвертый экран 11:33

Урок 8. Пятый экран 13:12

Урок 9. Шестой экран 13:41

Урок 10. Добавление цвета 15:27

Урок 11. Добавление графики 16:16

Урок 12. Всплывающие меню 15:41

Урок 13. Подготовка макета для верстки 15:38

Урок 14. Интерактивные элементы 17:24

Раздел 1. Веб-дизайн Дизайн. Мобильная версия

Хронометраж: 2 часа 5 минут 30 секунд

Урок 1. Теория о мобильной версии и бутсрап-сетка 17:04

Урок 2. Первый экран 17:29

Урок 3. Второй экран 12:33

Урок 4. Третий экран 17:47

Урок 5. Четвертый экран 11:48

Урок 6. Пятый экран 12:04

Урок 7. Шестой экран 19:39

Урок 8. Меню 17:06

Раздел 2. Верстка сайта

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

Урок 1. Подготовка к верстке 12:00

Урок 2. Разметка фиксированного меню и первого экрана 09:48

Урок 3. Стилизация фиксированного блока 13:30

Урок 4. Адаптивность фиксированного блока 17:49

Урок 5. Стилизация первого экрана 19:40

Урок 6. Адаптивность первого экрана лендинга 20:52

Урок 7. Подключение библиотеки Fullpage 13:19

Урок 8. HTML-разметка для экрана с проектами 12:37

Урок 9. Стилизация второго экрана 29:01

Урок 10. Адаптивность второго экрана 23:02

Урок 11. Разметка экрана Details 03:28

Урок 12. Стилизация блока Details 09:38

Урок 13. Адаптивность блока Details 22:29

Урок 14. HTML-разметка блока List-of-works 05:10

Урок 15. Стилизация блока List-of-works 09:53

Урок 16. Адаптивность блока List-of-works 08:08

Урок 17. HTML-структура экрана с калькулятором 15:40

Урок 18. CSS-стили для калькулятора 16:23

Урок 19. Адаптивность калькулятора 23:17

Урок 20. HTML-разметка для экрана контактов 04:21

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

Урок 22. Адаптивность контактов 05:14

Урок 23. Реализация точечной навигации 22:39

Урок 24. HTML-структура главного меню 05:58

Урок 25. Полная стилизация главного меню 22:58

ПРОГРАММА КУРСА

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

Блок 1.
Figma от А до Я

Количество уроков: 19
Продолжительность: более 1 часа

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

Урок 1. Скачивание программы

Урок 1. Скачивание программы

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

Урок 2. Обзор интерфейса

Урок 2. Обзор интерфейса

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

Урок 3. Frame

Урок 3. Frame

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

Урок 4. Move и Scale

Урок 4. Move и Scale

Move – это основной инструмент, которым будем взаимодействовать при работе. Также будет рассмотрен малоиспользуемый инструмент Scale.

Урок 5. Инструмент формы

Урок 5. Инструмент формы

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

Урок 6. Перо и карандаш

Урок 6. Перо и карандаш

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

Урок 7. Инструмент текст

Урок 7. Инструмент текст

Узнаете параметры данного инструмента и то, как с ним работать.

Урок 8. Комментарии

Урок 8. Комментарии

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

Урок 9. Экспорт

Урок 9. Экспорт

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

Урок 10. Смарт-выравнивание

Урок 10. Смарт-выравнивание

Смарт-выравнивание есть только в Figma – это очень удобная функция, которую мы разберем.

Урок 11. Маска слоя

Урок 11. Маска слоя

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

Урок 12. Share

Урок 12. Share

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

Урок 13. Модульная сетка

Урок 13. Модульная сетка

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

Урок 14. Режим смешивания

Урок 14. Режим смешивания

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

Урок 15. Стили для текста

Урок 15. Стили для текста

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

Урок 16. Стили для цвета

Урок 16. Стили для цвета

Помимо текстовых стилей вы можете еще сделать библиотеку из цветовых стилей.

Урок 17. Компоненты

Урок 17. Компоненты

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

Урок 18. Адаптивные элементы

Урок 18. Адаптивные элементы

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

Урок 19. Прототипирование

Урок 19. Прототипирование

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

Блок 2.
Дизайн. Десктоп версия

Количество уроков: 14
Продолжительность: 3.5 часа

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

Урок 1. Frame и Grid

Урок 1. Frame и Grid

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

Урок 2. Перенос ТЗ

Урок 2. Перенос ТЗ

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

Урок 3. Основные элементы

Урок 3. Основные элементы

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

Урок 4. Первый экран

Урок 4. Первый экран

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

Урок 5. Второй экран

Урок 5. Второй экран

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

Урок 6. Третий экран

Урок 6. Третий экран

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

Урок 7. Четвертый экран

Урок 7. Четвертый экран

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

Урок 8. Пятый экран

Урок 8. Пятый экран

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

Урок 9. Шестой экран

Урок 9. Шестой экран

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

Урок 10. Добавление цвета

Урок 10. Добавление цвета

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

Урок 11. Добавление графики

Урок 11. Добавление графики

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

Урок 12. Всплывающие меню

Урок 12. Всплывающие меню

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

Урок 13. Подготовка макета для верстки

Урок 13. Подготовка макета для верстки

В этом уроке увидите подготовку макета перед версткой. Будут структурированы все элементы, слои и папки.

Урок 14. Интерактивные элементы

Урок 14. Интерактивные элементы

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

Блок 3.
Дизайн. Мобильная версия

Количество уроков: 8
Продолжительность: более 2 часов

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

Урок 1. Теория о мобильной версии и бутсрап-сетка

Урок 1. Теория о мобильной версии и бутсрап-сетка

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

Урок 2. Первый экран

Урок 2. Первый экран

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

Урок 3. Второй экран

Урок 3. Второй экран

В этом уроке увидите, как переносить галерею с навигацией.

Урок 4. Третий экран

Урок 4. Третий экран

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

Урок 5. Четвертый экран

Урок 5. Четвертый экран

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

Урок 6. Пятый экран

Урок 6. Пятый экран

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

Урок 7. Шестой экран

Урок 7. Шестой экран

В этом уроке увидите, как перенести форму контактов и карту.

Урок 8. Меню

Урок 8. Меню

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

Раздел 2.
Верстка сайта

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

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

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

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

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

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

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

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

Урок 2. Разметка фиксированного меню и первого экрана

Урок 2. Разметка фиксированного меню и первого экрана

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

Урок 3. Стилизация фиксированного блока

Урок 3. Стилизация фиксированного блока

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

Урок 4. Адаптивность фиксированного блока

Урок 4. Адаптивность фиксированного блока

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

Урок 5. Стилизация первого экрана

Урок 5. Стилизация первого экрана

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

Урок 6. Адаптивность первого экрана лендинга

Урок 6. Адаптивность первого экрана лендинга

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

Урок 7. Подключение библиотеки Fullpage

Урок 7. Подключение библиотеки Fullpage

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

Урок 8. HTML-разметка для экрана с проектами

Урок 8. HTML-разметка для экрана с проектами

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

Урок 9. Стилизация второго экрана

Урок 9. Стилизация второго экрана

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

Урок 10. Адаптивность второго экрана

Урок 10. Адаптивность второго экрана

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

Урок 11. Разметка экрана Details

Урок 11. Разметка экрана Details

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

Урок 12. Стилизация блока Details

Урок 12. Стилизация блока Details

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

Урок 13. Адаптивность блока Details

Урок 13. Адаптивность блока Details

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

Урок 14. HTML-разметка блока List-of-works

Урок 14. HTML-разметка блока List-of-works

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

Урок 15. Стилизация блока List-of-works

Урок 15. Стилизация блока List-of-works

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

Урок 16. Адаптивность блока List-of-works

Урок 16. Адаптивность блока List-of-works

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

Урок 17. HTML-структура экрана с калькулятором

Урок 17. HTML-структура экрана с калькулятором

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

Урок 18. CSS-стили для калькулятора

Урок 18. CSS-стили для калькулятора

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

Урок 19. Адаптивность калькулятора

Урок 19. Адаптивность калькулятора

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

Урок 20. HTML-разметка для экрана контактов

Урок 20. HTML-разметка для экрана контактов

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

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

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

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

Урок 22. Адаптивность контактов

Урок 22. Адаптивность контактов

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

Урок 23. Реализация точечной навигации

Урок 23. Реализация точечной навигации

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

Урок 24. HTML-структура главного меню

Урок 24. HTML-структура главного меню

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

Урок 25. Полная стилизация главного меню

Урок 25. Полная стилизация главного меню

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

Практический итог

Увидите создание дизайн-макета в Figma для современного, функционального лендинга: отдельно для десктопа и отдельно для мобильных устройств.

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

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

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

Кому идеально подойдёт этот курс*

  • Начинающие веб-дизайнеры

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

    Овладеете навыком самостоятельной верстки дизайн-макетов, выполняя лендинги «под ключ»: и дизайн, и верстку. А значит – сможете брать всю стоимость заказа, а не делить с верстальщиком

  • Веб-дизайнеры с опытом

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

    Сможете брать более дорогие и сложные проекты и выполнять их быстрее. Что особенно актуально для дизайнеров-фрилансеров.

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

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

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

  • Верстальщики с опытом

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

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

БОНУСЫ

Бонусы к урокам по веб-дизайну

Бонус 1
Интерактивный прототип

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

Количество уроков: 1
Продолжительность курса: 00:07:37
Автор: Даниил Волосатов

Бонус 2
7 лайфхаков по работе в Figmа

В данном бонусе будет рассказано о 7 секретных функций Figma, которые упростят вашу работу.

Количество уроков: 1
Продолжительность курса: 00:06:20
Автор: Даниил Волосатов

Бонусы к урокам по верстке

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Авторы-эксперты

[уроки по веб-дизайну]

Даниил Волосатов

  • 9 лет в сфере дизайна
  • Сделал 1735+ работ
  • За всю карьеру ни потратил ни рубля на рекламу
  • Обучил 1000+ человек веб-дизайну
  • Специализация: лендинги, сервисы, интерфейсы, баннеры, логотипы, дизайн упаковки, оформление соц. сетей, блоги, презентации и сложные дизайн-системы
  • Владение инструментами: Photoshop, Illustrator, Sketch, Figma
  • В 19 лет поставил цель за 12 месяцев заработать на новую BMW 3-й серии и успешно справился с заданием
  • Стабильный ежемесячный доход на дизайне колеблется у отметки 200 тысяч рублей

АВТОР КУРСОВ:


Основы коммерческого дизайна

Дизайн-система

Веб-дизайнер профессионал

Возраст:

24 года

Место жительства:

Россия, г. Тамбов

Сайт:

daniilvolosatov.ru

Клиенты Даниила Волосатова:

[уроки по верстке]

Денис Булыга

  • Автор проекта WebForMySelf
  • Успешный фрилансер-практик, профессиональный верстальщик
  • Специализируется на верстке и дизайне сайтов, а также разработке сайтов с нуля на движке WordPress
  • В общей сложности успешно завершено 175+ проектов, более 50 положительных отзывов (и ни одного отрицательного)
  • Девиз: «Качество – залог успеха!»
  • Страница профиля на всем известной бирже фриланса, где можно увидеть примеры выполненных работ и отзывы: freelance.ru/felon20
  • Возраст: 27 лет
  • Место жительства: Беларусь, г. Минск
  • Стабильный ежемесячный доход обычно превышает 150 тысяч рублей, что на порядок выше средней зарплаты по стране

АВТОР КУРСОВ:

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

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

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

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

Отзывы клиентов Дениса

Об авторе

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

Bootstrap 4

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

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

5970 руб.

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

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

Сколько зарабатывают веб-дизайнеры

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

Работайте из любой точки мира и достойно зарабатывайте!

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

Если говорить о фрилансе, то там нет никакой закономерности. Поскольку веб-дизайнер — профессия творческая, а оценка дизайна для многих проходит очень субъективно, то заработок может очень сильно варьироваться и достигать и 200 000, и даже 300 000 рублей. На фрилансе для веб-дизайнеров, скорее, важно, за сколько ты сможешь продать свои услуги, свои дизайны.

ГАРАНТИИ

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Мы дорожим нашей репутацией

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

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

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

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

  • Усков Евгений

    Усков Евгений

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

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

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

    Юлия Волобой

  • Никульшина Агата Васильевна

    Никульшина Агата Васильевна

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

    Холодов Денис

  • Унгер Олег

    Унгер Олег

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

  • FullStack-Мастер
  • Фреймворк VUE JS. Полное руководство для современной веб-разработки
  • Angular 4 с Нуля до Профи
  • Фреймворк Laravel с Нуля до Профи. Быстрая разработка с фреймворком №1
  • Фреймворк Yii2 с Нуля до Профи
  • Препроцессоры Sass и Less. Автоматизация Front-end разработки

Так уж получилось, что я пошёл учиться по специальности программиста практически случайно (это была вторая специальность по приоритетам). После обучения посчастливилось сразу устроиться программистом 1С, в итоге я задержался в этой сфере на целых 5 лет.

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

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

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

Далее был самостоятельный опыт разработки пары магазинов на Joomla+Virtuemart, знания и решения черпались непосредственно с курса «Интернет-магазин на Joomla» (https://webformyself.com/jshop/).

Затем в жизни случился крутой поворот, я заключил первый полноценный контракт с IT-компанией. После налаживания всех внутренних процессов и понимания стратегии компании, у меня появилось время для дальнейшего саморазвития в области веб-разработчика. Остановил свой выбор на PHP-фреймворке Yii2 и, без сомнений, приобрел курс на эту тему у команды webformyself (https://webformyself.com/yii2/).

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

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

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

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

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

При этом меня полностью поддерживала моя супруга во всех важных профессиональных решениях.

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

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

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

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

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

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

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

  • 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 лет - это к вопросу о нехватке времени. Многие считают невозможным совмещать семью, работу и учебу. Да, это непросто, но всё возможно. Главное - огромное желание и упорство! Важно не опускать руки, поскольку при малейших неудачах, а их будет немало, легко бросить любое увлечение, посчитав, что "это не мое".

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

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

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

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

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

  • Joomla-Мастер: с нуля до Премиум шаблона
  • Практика верстки под мобильные устройства
  • JavaScript&jQuery с нуля до профи
  • Премиум клуб

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

Об окончательном результате мне пока еще говорить рано, в данный момент все курсы, которые я приобрела, еще изучаю и, думаю, что в практической деятельности буду не раз еще обращаться к этим УНИКАЛЬНЫМ по своему содержанию материалам.

Мои первые достижения: поняла, что сделать сайт для себя и приобрести профессию веб-дизайнера — это реальность. Особенно если есть большое желание, если у тебя в руках есть такие мощные профессиональные инструменты, как курсы от команды Webformyself. Если говорить совсем конкретно, то на днях с помощью вашего урока смогла исправить ошибку на сайте и переустановить версию Джумлы :)

Возникла идея создать свое интернет-пространство назрела давно, но знаний не хватало.

Мое желание, узнать, «а как это все работает?» привело к приобретению более глубоких курсов с практической основой. Курсы, подготовленные командой Webformyself для меня стали настоящей находкой!

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

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

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

Думаю, что через полгода мой проект станет приносить доход. Я в этом уверена. Хочу добавить, что главное — это поставить цель, а помочь в ее достижении сумеет команда профессионалов! Спасибо вам, ребята! Оставайтесь на высоте!

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  • Фреймворк Laravel с Нуля до Профи
  • Фреймворк YII2 с Нуля до Профи
  • FullStack-Мастер. Разработка CRM-системы на Node.js, Express, Angular 6
  • Angular 4 c Нуля до Профи

Вопрос: Сфера деятельности?
Ответ: Программирование.

Вопрос: Ссылки на Ваши социальные сети?
Ответ: https://vk.com/ungers

Вопрос: Жизненный опыт?
Ответ: После школы поступал на программиста, но баллов не хватило. Учился на инженера-электронщика. Работал в разных сферах, в основном — на производстве.
Та сфера, которая раньше приносила неплохой доход — перекочевала в Китай, работу стало сложно найти, да и надоело уже.

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

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

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

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

Вопрос: Как Вы себя из-за этого чувствовали?
Ответ: Чувствовал себя неуверенно.

Вопрос: Как Вы нас нашли? Как установили контакт?
Ответ: В соцсетях наткнулся на серию видео по программированию на PHP.

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

Вопрос: Что впервые подумали, когда узнали о нашем проекте?
Ответ: Подумал, как хорошо, что столько информации есть в одном месте.

Вопрос: Вы испытывали какие-то сомнения?
Ответ: Честно говоря, сомнения были. Но я подписался на Премиум клуб. И я многому научился по видео: PHP, JavaScript, регулярные выражения, курс по объектно-ориентированному программированию (ООП PHP) и пр.

Вопрос: В какой момент Вы решили купить курсы?
Ответ: На тот момент я уже полтора года изучал веб-разработку, проходил разные курсы. Пора было начинать искать работу в этой сфере. Просматривая вакансии, выделил востребованные навыки в IT на рынке труда. Мое направление — PHP, Backend, поэтому стоял выбор между фреймворками Laravel и Yii2.

Вопрос: О чем Вы думали, когда принимали это решение?
Ответ: Я думал о том, что если в курсе так же все подробно и доступно будет объяснено, как и в уроках, то курс себя окупит.

Вопрос: Что Вам понравилось?
Ответ: Мне очень понравилось, что бонусом к курсу шли другие курсы и видео из премиум доступа.
И так удачно было, что мне не пришлось выбирать между Yii2 и Laravel, потому что они шли в комплекте.

Вопрос: Что Вас пугало?
Ответ: Ничего не пугало.

Вопрос: Что могло бы случиться, если бы Вы не смогли решить свои проблемы, если бы Вы не воспользовались нашими продуктами?
Ответ: Мне пришлось бы потратить много времени на поиски более-менее структурированной информации по нужным темам.

Вопрос: Каких успехов Вы достигли?
Ответ: Как-то незаметно для себя, стал разбираться в том, что раньше казалось недоступным для понимания.
На данный момент почти год работаю программистом (Yii, MS SQL Server, JavaScript), участвую в разработке нового функционала и сопровождении проекта CRM в организации, занимающейся системами безопасности, автоматики и связи.

Вопрос: На какую сумму дохода Вы планируете выйти через полгода?
Ответ: Через полгода еще не планирую. Но через год, может быть, от 80 тысяч рублей, после того как освою курс «FullStack-Мастер. Разработка CRM-системы на Node.js, Express, Angular 6».

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

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

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

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

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

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

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

    Этим мы отличаемся от подавляющего числа представленных на рынке материалов. Более того, мы используем лишь наиболее актуальные и востребованные инструменты и технологии: Figma, HTML5, CSS3, CSS Grid Layout, CSS Flexbox Layout, CSS Sass, и других.

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

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

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

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

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

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

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

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

    Если уделять изучению примерно по 2-3 часа в день, то освоить курс можно ориентировочно за 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-формате, таким образом Вы сможете смотреть курс через любой браузер

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

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