Раздача ]Эксклюзив] Как научится верстать адаптивную страницу из psd - макета за 7 дней

[Nathan]

Описание курса: Ты уже сверстал пару страниц, но чувствуешь что твоих знаний недостаточно? Ты ищешь проверенные практикой приемы, но поиск в интернете дает лишь обрывки информации? Тогда этот воркшоп для тебя! «Ускоряй работу без потери качества!» — именно под таким девизом будет проходить воркшоп. За 7 уроков ты получишь представление о том, как верстается современная адаптивная HTML-страница из графического макета в формате PSD. Мы разберем, как это делать быстро и эффективно. День 1 Настройка среды разработки: графический редактор, редактор кода и другие дополнительные инструменты, необходимые для удобной и эффективной работы. Краткое содержание:

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

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

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

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

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

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

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

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

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

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

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

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

• Адаптивность и отзывчивость. Что к чему? Прикручиваем адаптивность к макету Jetro: Секции LOGO и NAVBAR. Секция SLIDER. Секция INTRO ARTICLES. Секция RECENT WORKS. Секция FOOTER.

ЗАКОНЧЕННЫЙ ВИД МАКЕТА JETRO! День 8 Будут рассмотрены методы максимальной оптимизации веб-страницы. Краткое содержание:

• Анализ скорости загрузки через Инструменты Разработчика в 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.

Скачать:

Авторизуйтесь, чтобы посмотреть скрытый контент

Пароль: Rhy42jIjo783x

 

[Podsolnux]

А кто автор, подскажите, пожалуйста

 

[lyudamila]

А кто автор, подскажите, пожалуйста

Автор - Владимир Гынгазов

 

[PirateCrypto]

Хотите влиться в мир криптотрейдинга, но нет знаний? Доверьте это профессионалам!

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

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

Все что вам остается - это включать бота и разрешить ему торговлю.

Подробнее

 

[diesel3993]

А кто автор, подскажите, пожалуйста

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

 

[lyudamila]

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

Такой же курс получила в качестве бонуса к тренингу Adobe Muse по-взрослому. Тренинг Владимира Гынгазова.

 

[Podsolnux]

Мнения разошлись

 

[diesel3993]

Такой же курс получила в качестве бонуса к тренингу Adobe Muse по-взрослому. Тренинг Владимира Гынгазова.

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

 

[Buzyale]

Так а стоит ли курс смотреть? Меня больше всего интересуют моменты работы с Bootstrap