Как научиться верстать адаптивную HTML-страницу из PSD-макета за 7 дней?

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

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

«Ускоряй работу без потери качества!» - именно под таким девизом будет проходить воркшоп.

За 7 уроков ты получишь представление о том, как верстается современная адаптивная HTML-страница из графического макета в формате PSD. Мы разберем, как это делать быстро и эффективно.

Что ты получишь?

Прочные практические навыки

Прочные практические навыки

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

Возможность хорошего трудоустройства

Возможность хорошего трудоустройства

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

Личный наставник

Личного
наставника

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

Почему именно этот воркшоп?

Система домашних заданий

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

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

Знания и умения для хорошего трудоустройства

Если ты еще пока только мечтаешь о высокооплачиваемой работе или дополнительном заработке, то этот воркшоп нужен тебе вдвойне!

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

Рабочая технология верстки

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

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

Шаг за шагом ты освоишь все основные моменты, которые необходимо знать и понимать, чтобы твоя верстка выглядела профессионально, чисто и работала с максимальной производительностью!

Об авторе курса

Автор курса Никита Красник

Никита Красник

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


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


Кроме того, на YouTube-канале PSD2HTML ты можешь посмотреть различные ролики и видеопереводы моего авторства по теме веб-разработки.

Как будет проходить обучение?

План работы

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


Краткое содержание:

  • На какой операционной системе работать?
  • Разнообразие веб-браузеров.
  • Краткий обзор сервиса BrowserStack.com для кросс-браузерного тестирования и немного про виртуальные машины.
  • Коротко о графических редакторах.
  • Коротко о редакторах кода.
  • Браузер Google Chrome и установка плагинов. Обзор плагинов PerfectPixel и HTML5 Outline.
  • Другие браузеры и их отличия.
  • Обзор LiveReload 2 и демонстрация силы командной строки и автоматизации работы.
  • Разбираемся с "Инструментами разработчика" в Google Chrome (правка DOM-дерева и CSS-стилей, доступ к ресурсам страницы, эмуляция различных устройств для тестирования адаптивности и др.)
  • Какую версию Photoshop поставить для воркшопа?
  • Редактор кода Sublime Text 3, как устанавливать плагины и как максимально ускорить свою работу в ST.
  • Список плагинов, которые нам понадобятся для работы в воркшопе.
  • Методология познания. Как учиться веб-разработке?

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


Краткое содержание:

  • Введение в проблематику вопроса.
  • Общие аспекты анализа макета.
  • Технические аспекты анализа макета.
  • Пример плохого PSD-макета.
  • Пример хорошего PSD-макета.
  • Чем еще отличается хороший макет от плохого?
  • Анализ PSD-макета Jetro, который верстается в процессе воркшопа.
  • Немного об особенностях работы на фрилансе.

Работа с макетом в среде Adobe Photoshop и извлечение графики для будущей веб-страницы.


Краткое содержание:

  • Типы графических форматов. Растровые изображения.
  • Типы графических форматов. Векторные изображения.
  • Немного о формате SVG.
  • Способы перевода растрового изображения в векторное (трассировка).
  • Извлечение графики из макета Jetro. Старый способ.
  • Извлечение графики из макета Jetro. Новый способ.

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


Краткое содержание:

  • Введение и немного истории: от табличной верстки к блочной.
  • Семантика HTML и алгоритм HTML Outline.
  • Старый алгоритм: HTML 4 Outline.
  • Новый алгоритм: HTML5 Outline.
  • Подключение Bootstrap и верстка HTML-каркаса макета Jetro.

Настройка фреймворка Bootstrap и стилизация страницы через CSS. В нашей работе мы применим препроцессор Less. Если до этого ты с ним не сталкивался, то будешь поражён насколько это ускоряет работу!


Краткое содержание:

  • Обзор возможностей официального сайта Bootstrap.
  • Разбираем сборщик Bootstrap’a.
  • Настройка, компиляция и замена стандартного стилевого файла Bootstrap на файл с настроенными переменными под макет Jetro. Брейкпоинты (breakpoints), медиа-запросы (media queries) и ширина макета.
  • Начинаем стилизацию. Настройка Less и LiveReload.
  • Переменные в Less. Задаем цветовые переменные для макета.
  • Кросс-браузерное подключение шрифтов и их конвертация через сервис FontSquirrel.com.
  • Пишем общие стили.
  • Стилизация навигационной панели с логотипом.
  • Стилизация слайдера.

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


Краткое содержание:

  • Что такое Flexbox’ы и как с ними работать.
  • Продолжаем стилизацию макета Jetro:
    • Секция INTRO ARTICLES.
    • Секция RECENT WORKS.
    • Секция FOOTER.
    • Дорабатываем слайдер.

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


Краткое содержание:

  • Адаптивность и отзывчивость. Что к чему?
  • Прикручиваем адаптивность к макету Jetro:
    • Секции LOGO и NAVBAR.
    • Секция SLIDER.
    • Секция INTRO ARTICLES.
    • Секция RECENT WORKS.
    • Секция FOOTER.
  • ЗАКОНЧЕННЫЙ ВИД МАКЕТА JETRO!

Будут рассмотрены методы максимальной оптимизации веб-страницы.


Краткое содержание:

  • Анализ скорости загрузки через Инструменты Разработчика в Google Chrome:
    • Детальный обзор вкладки Network и её возможностей.
    • Последовательность загрузки файлов веб-страницы, как правильно подключать CSS, JS и остальные ресурсы.
    • Как извлекать информацию из временной диаграммы загрузки (Timeline) Инструментов Разработчика в Chrome.
    • Устранение ошибок 404 (если ресурс не найден).
  • Уменьшение размеров HTML,CSS и JS-файлов:
    • Что такое минификация и офускация.
    • Убираем все лишнее из файлов Bootstrap с помощью сборщика на официальном сайте http://getbootstrap.com.
    • CDN-сервисы, что это, зачем нужно и как с них подключать ресурсы.
    • Оптимизация и минификация нашего стилевого файла style.css. Как писать CSS-селекторы так, чтобы все работало максимально быстро.
    • Оптимизация и минификация HTML-страниц.
  • Графика и шрифты:
    • Оптимизация графики. JPG, PNG, SVG и кодирование в base64 - когда что лучше использовать?
    • Оптимизация шрифтов и практическое использование SVG.
  • Удаление лишних файлов.

Отзывы

Ученик Рахматуллин Раиль

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

Рахматуллин Раиль

Ученик Дюстер Андрей

"Здравствуйте ) Я участвовал в недавнем (апрель 2015) воркшопе по адаптивной верстке web-страницы с использованием BS. Честно говоря, в подобном формате обучения работал в первый раз. Мне очень понравилось, как Никита и Алексей всё организовали. Конечно иногда не на всё у них хватало времени, но я считаю что все заявленные обещания они выполнили и даже конкурс был ) Спасибо большое, буду еще участвовать! :)"

Дюстер Андрей

Ученик Алиев Руслан

"Огромное спасибо за воркшоп, все очень качественно, дружелюбно и познавательно! Очень нравится как проверяется ДЗ, внимание ко всем мелочам! Жду еще воркшопов!"

Алиев Руслан

Ученик Кисляк Андрей

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

Кисляк Андрей
Testimonials

Стоимость воркшопа

FREE

БЕСПЛАТНО

Доступ к записям воркшопа в хорошем качестве (дни 1 и 2)
Доступ к текстам домашних заданий и материалам
Доcтуп к исходникам макета, верстаемого на воркшопе
Стоимость личной консультации:
1000 руб/час
Записаться на FREE

* доступ за репост

VIP

7000 3500руб

Доступ к записям воркшопа в хорошем качестве
Доступ к текстам домашних заданий и материалам
Доcтуп к исходникам макета, верстаемого на воркшопе
Проверка домашних заданий и контроль на каждом этапе
Стоимость личной консультации:
700 руб/час
Оплатить VIP

STANDARD

1590 790руб

Доступ к записям воркшопа в хорошем качестве
Доступ к текстам домашних заданий и материалам
Доcтуп к исходникам макета, верстаемого на воркшопе
Стоимость личной консультации:
900 руб/час
Оплатить STANDARD

Оставь свой вопрос или предложение