Воркшоп по вёрстке адаптивной веб-страницы. Видеокурс (2015)
Ты уже сверстал пару страниц, но чувствуешь что твоих знаний недостаточно? Ты ищешь проверенные практикой приемы, но поиск в интернете дает лишь обрывки информации? Тогда этот воркшоп для тебя!
«Ускоряй работу без потери качества!» - именно под таким девизом будет проходить воркшоп. За 7 уроков ты получишь представление о том, как верстается современная адаптивная HTML-страница из графического макета в формате PSD. Мы разберем, как это делать быстро и эффективно.
Информация о курсе: Название: Воркшоп по вёрстке адаптивной веб-страницы Год выпуска: 2015 Автор: Никита Красник Жанр: Обучающее видео
Содержание: Урок 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: 1. Секция INTRO ARTICLES. 2. Секция RECENT WORKS. 3. Секция FOOTER. 4. Дорабатываем слайдер.
Урок 7. На заключительном этапе, мы сделаем веб-страницу адаптивной, то есть хорошо выглядящей на различных устройствах. Попутно будут рассмотрены сопутствующие техники и подходы. · Адаптивность и отзывчивость. Что к чему? · Прикручиваем адаптивность к макету Jetro: 1. Секции LOGO и NAVBAR. 2. Секция SLIDER. 3. Секция INTRO ARTICLES. 4. Секция RECENT WORKS. 5. Секция FOOTER. ЗАКОНЧЕННЫЙ ВИД МАКЕТА JETRO!
Урок 8. Будут рассмотрены методы максимальной оптимизации веб-страницы. · Анализ скорости загрузки через Инструменты Разработчика в Google Chrome: 1. Детальный обзор вкладки Network и её возможностей. 2. Последовательность загрузки файлов веб-страницы, как правильно подключать CSS, JS и остальные ресурсы. 3. Как извлекать информацию из временной диаграммы загрузки (Timeline) Инструментов Разработчика в Chrome. 4. Устранение ошибок 404 (если ресурс не найден). · Уменьшение размеров HTML,CSS и JS-файлов: 1. Что такое минификация и офускация. 2. Убираем все лишнее из файлов Bootstrap с помощью сборщика на официальном сайте getbootstrap.com. 3. CDN-сервисы, что это, зачем нужно и как с них подключать ресурсы. 4. Оптимизация и минификация нашего стилевого файла style.css. Как писать CSS-селекторы так, чтобы все работало максимально быстро. 5. Оптимизация и минификация HTML-страниц. · Графика и шрифты: 1. Оптимизация графики. JPG, PNG, SVG и кодирование в base64 - когда что лучше использовать? 2. Оптимизация шрифтов и практическое использование SVG. · Удаление лишних файлов.
Главная страница
Обратная связь
Карта сайта
Форум
Правила сайта
Программы • Coфт
Музыка MP3 • Flac
Фильмы • Видео
Клипы • Ролики
Игры на ПК
Обои для рабочего стола
Cкринсейверы
Юмор • Приколы
Книги • Чтиво
Все для мобилы
Аудиокниги
Разное
Журналы
Видеоуроки
Все для Photoshop
Ты здесь: -й день
