Воркшоп по вёрстке адаптивной веб-страницы. Видеокурс (2015) PCRec скачать через торрент бесплатно

	Название: Воркшоп по вёрстке адаптивной веб-страницы Год выпуска: 2015 Автор: Никита Красник Жанр: видеокурс Содержание: <br /> <b>Урок 1. Настройка среды разработки: графический редактор, редактор кода и другие дополнительные инструменты, необходимые для удобной и эффективной работы.</b><br /> · На какой операционной системе работать?<br /> · Разнообразие веб-браузеров.<br /> · Краткий обзор сервиса BrowserStack.com для кросс-браузерного тестирования и немного про виртуальные машины.<br /> · Коротко о графических редакторах.<br /> · Коротко о редакторах кода.<br /> · Браузер Google Chrome и установка плагинов. Обзор плагинов PerfectPixel и HTML5 Outline.<br /> · Другие браузеры и их отличия.<br /> · Обзор LiveReload 2 и демонстрация силы командной строки и автоматизации работы.<br /> · Разбираемся с «Инструментами разработчика» в Google Chrome (правка DOM-дерева и CSS-стилей, доступ к ресурсам страницы, эмуляция различных устройств для тестирования адаптивности и др.)<br /> · Какую версию Photoshop поставить для воркшопа?<br /> · Редактор кода Sublime Text 3, как устанавливать плагины и как максимально ускорить свою работу в ST.<br /> · Список плагинов, которые нам понадобятся для работы в воркшопе.<br /> · Методология познания. Как учиться веб-разработке?<br /> <br /> <b>Урок 2. Анализ макета. На этом этапе мы коснемся того, как оценивать объем работ глядя на имеющийся макет, а также как в уме или на бумаге готовиться к верстке.</b><br /> · Введение в проблематику вопроса.<br /> · Общие аспекты анализа макета.<br /> · Технические аспекты анализа макета.<br /> · Пример плохого PSD-макета.<br /> · Пример хорошего PSD-макета.<br /> · Чем еще отличается хороший макет от плохого?<br /> · Анализ PSD-макета Jetro, который верстается в процессе воркшопа.<br /> · Немного об особенностях работы на фрилансе.<br /> <br /> <b>Урок 3. Работа с макетом в среде Adobe Photoshop и извлечение графики для будущей веб-страницы.</b><br /> · Типы графических форматов. Растровые изображения.<br /> · Типы графических форматов. Векторные изображения.<br /> · Немного о формате SVG.<br /> · Способы перевода растрового изображения в векторное (трассировка).<br /> · Извлечение графики из макета Jetro. Старый способ.<br /> · Извлечение графики из макета Jetro. Новый способ.<br /> <br /> <b>Урок 4. Подготовительные действия и начало верстки HTML-каркаса. Мы будем использовать популярный фреймворк Bootstrap. Многие хотели бы узнать как его применить на практике, чем мы и займемся с тобой на реальном примере.</b><br /> · Введение и немного истории: от табличной верстки к блочной.<br /> · Семантика HTML и алгоритм HTML Outline.<br /> · Старый алгоритм: HTML 4 Outline.<br /> · Новый алгоритм: HTML5 Outline.<br /> · Подключение Bootstrap и верстка HTML-каркаса макета Jetro.<br /> <br /> <b>Урок 5. Настройка фреймворка Bootstrap и стилизация страницы через CSS. В нашей работе мы применим препроцессор Less. Если до этого ты с ним не сталкивался, то будешь поражён насколько это ускоряет работу!</b><br /> · Обзор возможностей официального сайта Bootstrap.<br /> · Разбираем сборщик Bootstrap’a.<br /> · Настройка, компиляция и замена стандартного стилевого файла Bootstrap на файл с настроенными переменными под макет Jetro. Брейкпоинты (breakpoints), медиа-запросы (media queries) и ширина макета.<br /> · Начинаем стилизацию. Настройка Less и LiveReload.<br /> · Переменные в Less. Задаем цветовые переменные для макета.<br /> · Кросс-браузерное подключение шрифтов и их конвертация через сервис FontSquirrel.com.<br /> · Пишем общие стили.<br /> · Стилизация навигационной панели с логотипом.<br /> · Стилизация слайдера.<br /> <br /> <b>Урок 6. Продолжаем стилизацию нашей страницы и подгоняем все детали.</b><br /> · Что такое Flexbox’ы и как с ними работать.<br /> · Продолжаем стилизацию макета Jetro:<br /> 1. Секция INTRO ARTICLES.<br /> 2. Секция RECENT WORKS.<br /> 3. Секция FOOTER.<br /> 4. Дорабатываем слайдер.<br /> <br /> <b>Урок 7. На заключительном этапе, мы сделаем веб-страницу адаптивной, то есть хорошо выглядящей на различных устройствах. Попутно будут рассмотрены сопутствующие техники и подходы.</b><br /> · Адаптивность и отзывчивость. Что к чему?<br /> · Прикручиваем адаптивность к макету Jetro:<br /> 1. Секции LOGO и NAVBAR.<br /> 2. Секция SLIDER.<br /> 3. Секция INTRO ARTICLES.<br /> 4. Секция RECENT WORKS.<br /> 5. Секция FOOTER.<br /> ЗАКОНЧЕННЫЙ ВИД МАКЕТА JETRO!<br /> <br /> <b>Урок 8. Будут рассмотрены методы максимальной оптимизации веб-страницы.</b><br /> · Анализ скорости загрузки через Инструменты Разработчика в Google Chrome:<br /> 1. Детальный обзор вкладки Network и её возможностей.<br /> 2. Последовательность загрузки файлов веб-страницы, как правильно подключать CSS, JS и остальные ресурсы.<br /> 3. Как извлекать информацию из временной диаграммы загрузки (Timeline) Инструментов Разработчика в Chrome.<br /> 4. Устранение ошибок 404 (если ресурс не найден).<br /> · Уменьшение размеров HTML,CSS и JS-файлов:<br /> 1. Что такое минификация и офускация.<br /> 2. Убираем все лишнее из файлов Bootstrap с помощью сборщика на официальном сайте getbootstrap.com.<br /> 3. CDN-сервисы, что это, зачем нужно и как с них подключать ресурсы.<br /> 4. Оптимизация и минификация нашего стилевого файла style.css. Как писать CSS-селекторы так, чтобы все работало максимально быстро.<br /> 5. Оптимизация и минификация HTML-страниц.<br /> · Графика и шрифты:<br /> 1. Оптимизация графики. JPG, PNG, SVG и кодирование в base64 — когда что лучше использовать?<br /> 2. Оптимизация шрифтов и практическое использование SVG.<br /> · Удаление лишних файлов.<br /> Скриншоты <img loading="lazy" src="https://s019.radikal.ru/i612/1509/14/b14f6ea83e96t.jpg" /> <img loading="lazy" src="https://s006.radikal.ru/i214/1509/18/e3423d7e30ebt.jpg" /> <img loading="lazy" src="https://s019.radikal.ru/i606/1509/66/cd5bbe14f39at.jpg" /> <img loading="lazy" src="https://s018.radikal.ru/i520/1509/df/6d1300b35d54t.jpg" /> Выпущено: Россия Продолжительность: 19:34:03 Файл Формат: MP4 Качество: PCRec Видео: AVC/H.264, 1280x720, ~958 Kbps Аудио: AAC, 2 ch, 192 Kbps
Оценка	10 из 10
Категория	Другое
Добавлен	05-09-2015 5:11:27
Размер	7.65 GB (8216359389 Bytes)
Добавить в	закладки
Связанные раздачи Добавлен Название Размер Пиры 18 Окт 23 Grand Secret, Максим Волков и др. - Подборка видеокурсов школы массажа Grand Secret (2019-2023) WEBRip 720p | MP4, TS 99.91 GB  5  2 10 Янв 23 Мультитренажер своими руками за 7 дней. Видеокурс (2014) PCRec 8 2.34 GB  4  0 29 Июл 21 Оксана Долинка - Деловой Английский за 5 недель [Видеокурс] (2021) WEBRip 720p 3.18 GB  12  0 09 Июл 21 Мария Батхан - Разборки с училкой [Видеокурс] (2020) WEBRip 1080p 2 18.26 GB  3  0 07 Июл 21 Дмитрий Скоромнов - Настройка MikroTik за 15 шагов [Видеокурс] (2019) WEBRip 720p 1 252.14 MB  8  0 27 Янв 21 Специалист. HTML и CSS. Уровень 1-3. Видеокурс (2016) PCRec 13 5.85 GB  1  0 20 Дек 20 В мир электричества - как в первый раз! - 2. Видеокурс (2014) PC 3.77 GB  1  0 19 Дек 20 В мир электричества - как в первый раз! Видеокурс (2009) PC 1 3.91 GB  1  0
Файлы (25)	Название Размер PSD2HTML_Воркшоп_Как_научиться_верстать_адаптивную_страницу_из_PSD/Adds/10 плагинов для Sublime Text 3 (mind map из видео).xmind 389.17 kB (398509) PSD2HTML_Воркшоп_Как_научиться_верстать_адаптивную_страницу_из_PSD/Adds/10 плагинов для Sublime Text 3. Как устанавливать.mp4 144.04 MB (151033393) PSD2HTML_Воркшоп_Как_научиться_верстать_адаптивную_страницу_из_PSD/Adds/9 советов для эффективной работы в Sublime Text 3.mp4 133.36 MB (139838712) PSD2HTML_Воркшоп_Как_научиться_верстать_адаптивную_страницу_из_PSD/Adds/Введение в CSS-препроцессоры_ Sass, Less, Stylus.mp4 41.28 MB (43289939) PSD2HTML_Воркшоп_Как_научиться_верстать_адаптивную_страницу_из_PSD/Adds/Вебинар HTML5 быстрый старт - ссылки.docx 13.14 kB (13457) PSD2HTML_Воркшоп_Как_научиться_верстать_адаптивную_страницу_из_PSD/Adds/Вебинар HTML5_ Быстрый старт.mp4 675.09 MB (707882866) PSD2HTML_Воркшоп_Как_научиться_верстать_адаптивную_страницу_из_PSD/Adds/Видео по блочной модели элемента в веб-браузере Понимание CSS_ блочная модель элемента, свойства box-sizing и box-shadow.mp4 68.65 MB (71984879) PSD2HTML_Воркшоп_Как_научиться_верстать_адаптивную_страницу_из_PSD/Adds/Перевод мастер-класса Криса Койера, создателя портала CSS-Tricks.com/Крис Койер. Среда разработки современного веб-дизайнера (Часть 1_6).mp4 29.35 MB (30772034) PSD2HTML_Воркшоп_Как_научиться_верстать_адаптивную_страницу_из_PSD/Adds/Перевод мастер-класса Криса Койера, создателя портала CSS-Tricks.com/Крис Койер. Среда разработки современного веб-дизайнера (Часть 2_6).mp4 93.04 MB (97564167) PSD2HTML_Воркшоп_Как_научиться_верстать_адаптивную_страницу_из_PSD/Adds/Перевод мастер-класса Криса Койера, создателя портала CSS-Tricks.com/Крис Койер. Среда разработки современного веб-дизайнера (Часть 3_6).mp4 31.22 MB (32738678) PSD2HTML_Воркшоп_Как_научиться_верстать_адаптивную_страницу_из_PSD/Adds/Перевод мастер-класса Криса Койера, создателя портала CSS-Tricks.com/Крис Койер. Среда разработки современного веб-дизайнера (Часть 4_6).mp4 124.32 MB (130363059) PSD2HTML_Воркшоп_Как_научиться_верстать_адаптивную_страницу_из_PSD/Adds/Перевод мастер-класса Криса Койера, создателя портала CSS-Tricks.com/Крис Койер. Среда разработки современного веб-дизайнера (Часть 5_6).mp4 161.76 MB (169622027) PSD2HTML_Воркшоп_Как_научиться_верстать_адаптивную_страницу_из_PSD/Adds/Перевод мастер-класса Криса Койера, создателя портала CSS-Tricks.com/Крис Койер. Среда разработки современного веб-дизайнера (Часть 6_6).mp4 161.33 MB (169169986) PSD2HTML_Воркшоп_Как_научиться_верстать_адаптивную_страницу_из_PSD/Adds/Тайминг уроков, ссылки.doc 45.50 kB (46592) PSD2HTML_Воркшоп_Как_научиться_верстать_адаптивную_страницу_из_PSD/Adds/Технический английский для IT-специалиста _ 1-я лекция.mp4 154.73 MB (162247004) PSD2HTML_Воркшоп_Как_научиться_верстать_адаптивную_страницу_из_PSD/kurs/День 0. Введение. Воркшоп по адаптивной верстке с Bootstrap и Less.mp4 617.75 MB (647761834) PSD2HTML_Воркшоп_Как_научиться_верстать_адаптивную_страницу_из_PSD/kurs/День 1. Настройка среды разработки.mp4 705.36 MB (739623510) PSD2HTML_Воркшоп_Как_научиться_верстать_адаптивную_страницу_из_PSD/kurs/День 2. Анализ макета.mp4 491.16 MB (515023530) PSD2HTML_Воркшоп_Как_научиться_верстать_адаптивную_страницу_из_PSD/kurs/День 3. Извлечение графики.mp4 636.93 MB (667866399) PSD2HTML_Воркшоп_Как_научиться_верстать_адаптивную_страницу_из_PSD/kurs/День 4. Подготовка к верстке и создание HTML-каркаса веб-страницы.mp4 757.01 MB (793781165) PSD2HTML_Воркшоп_Как_научиться_верстать_адаптивную_страницу_из_PSD/kurs/День 5. Настройка Bootstrap и стилизация веб-страницы.mp4 844.28 MB (885296913) PSD2HTML_Воркшоп_Как_научиться_верстать_адаптивную_страницу_из_PSD/kurs/День 6. Flexbox и окончание стилизации веб-страницы.mp4 573.18 MB (601027211) PSD2HTML_Воркшоп_Как_научиться_верстать_адаптивную_страницу_из_PSD/kurs/День 7. Делаем нашу веб-страницу адаптивной.mp4 732.12 MB (767684572) PSD2HTML_Воркшоп_Как_научиться_верстать_адаптивную_страницу_из_PSD/kurs/День 8. Методы оптимизации. Оптимизируем нашу веб-страницу. БОНУС!.mp4 628.76 MB (659300510) PSD2HTML_Воркшоп_Как_научиться_верстать_адаптивную_страницу_из_PSD/kurs/О воркшопе Верстка адаптивной HTML-страницы на Bootstrap и Less.mp4 30.54 MB (32028443)

Скачать Воркшоп по вёрстке адаптивной веб-страницы. Видеокурс (2015) PCRec через torrent magnet в хорошем качестве

Zt@Z	22-05-2016 16:47:31 (98 месяцев назад)
сам пример верстки - просто кошмар.... косяков полно.. не рекомендую учится по ней
R.O.T.O.R	29-10-2015 15:44:24 (105 месяцев назад)	Оценил на: 10
Как раз сейсас очень нужно - спасибо Вам атолл за умные раздачи!
Alexs555	05-09-2015 15:26:09 (106 месяцев назад)	Оценил на: 10