Перейти к содержимому








Фотография
Скачать

[ЭКСКЛЮЗИВ] КАК НАУЧИТЬСЯ ВЕРСТАТЬ АДАПТИВНУЮ СТРАНИЦУ ИЗ PSD-МАКЕТА ЗА 7 ДНЕЙ



  • Авторизуйтесь для ответа в теме
Сообщений в теме: 8

#1 agrx

agrx
  • Сливапер LVL 7
  • Сообщений: 1 516
  • Регистрация: 23.09.2014
  • Заработано: 213 руб.
Репутация: 1 224

Награды: 28

  
  
  
  
  
  
  
  

Отправлено 22 Февраль 2016 - 18:03

HA3QH8E.jpg

Описание курса:

Ты уже сверстал пару страниц, но чувствуешь что твоих знаний недостаточно? Ты ищешь проверенные практикой приемы, но поиск в интернете дает лишь обрывки информации? Тогда этот воркшоп для тебя! «Ускоряй работу без потери качества!» — именно под таким девизом будет проходить воркшоп. За 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.
  • Удаление лишних файлов.

Скачать:

Скрытый контент:

  Для просмотра содержимого необходимо 1 очков репутации (вам не хватает 1)

 Скачать без ограничений   Купить этот материал за 390 руб.



🔔 Подпишись на наш канал telegram @slivup_live и бота @kurs_slivup, что бы следить за крутыми новинками форума

  • 7

#2 be_happy

be_happy
  • Platinum
  • Сообщений: 197
  • Регистрация: 10.06.2014
  • Заработано: 3 руб.
Репутация: 226

Награды: 20

  
  
  
  
  
  
  
  

Отправлено 22 Февраль 2016 - 20:27

продажник:

Скрытый контент:

  Для просмотра содержимого необходимо 5 очков репутации (вам не хватает 5)

 Скачать без ограничений   Купить этот материал за 390 руб.

отзывы со складчины:

Скрытый контент:

  Для просмотра содержимого необходимо 5 очков репутации (вам не хватает 5)

 Скачать без ограничений   Купить этот материал за 390 руб.


Сообщение отредактировал be_happy: 22 Февраль 2016 - 20:28

  • 3

#3 tigra10

tigra10
  • Premium
  • Сообщений: 427
  • Регистрация: 23.12.2013
  • Заработано: 12 руб.
Репутация: 441

Награды: 22

  
  
  
  
  
  
  
  

Отправлено 22 Февраль 2016 - 20:49

Не знаю что тут эксклюзивного.

http://nnm-club.me/f...ic.php?t=927613

http://new-rutor.org...urs-2015-pcrec/


  • 1

#4 angangell

angangell
  • Platinum
  • Сообщений: 257
  • Регистрация: 27.06.2015
  • Заработано: 16 руб.
Репутация: 324

Награды: 22

  
  
  
  
  
  
  
  

Отправлено 22 Февраль 2016 - 21:01

вы лучше курс по бутстрапу от WebForMySelf слейте))

 

P.S. Но спасибо и за данный материал!Человек очень доходчиво объясняет)


Сообщение отредактировал angangell: 22 Февраль 2016 - 21:01

  • 0

#5 Chuprun

Chuprun
  • Сливапер LVL 4
  • Сообщений: 198
  • Регистрация: 21.05.2016
  • Заработано: 6 руб.
Репутация: 61

Награды: 13

  
  
  
  
  
  
  
  

Отправлено 15 Июнь 2016 - 08:33

Тут про Sublime Text есть информация?


  • 0

#6 Gevosya

Gevosya
  • Platinum
  • Сообщений: 427
  • Регистрация: 26.01.2015
  • Заработано: 8 руб.
Репутация: 31

Награды: 21

  
  
  
  
  
  
  
  

Отправлено 30 Июль 2016 - 01:38

Что можете сказать о данном курсе? Какие плюсы или минусы курса. Спасибо!


  • 0

#7 niko

niko
  • Сливапер LVL 5
  • Сообщений: 114
  • Регистрация: 05.09.2014
  • Заработано: 3 руб.
Репутация: 116

Награды: 14

  
  
  
  
  
  
  
  

Отправлено 30 Июль 2016 - 13:03

вы лучше курс по бутстрапу от WebForMySelf слейте))

 

P.S. Но спасибо и за данный материал!Человек очень доходчиво объясняет)

http://nnm-club.me/f...ic.php?t=992910


  • 1

#8 angangell

angangell
  • Platinum
  • Сообщений: 257
  • Регистрация: 27.06.2015
  • Заработано: 16 руб.
Репутация: 324

Награды: 22

  
  
  
  
  
  
  
  

Отправлено 30 Июль 2016 - 19:06

Что можете сказать о данном курсе? Какие плюсы или минусы курса. Спасибо!

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


  • 0

#9 Gevosya

Gevosya
  • Platinum
  • Сообщений: 427
  • Регистрация: 26.01.2015
  • Заработано: 8 руб.
Репутация: 31

Награды: 21

  
  
  
  
  
  
  
  

Отправлено 01 Август 2016 - 13:48

Понял. Нужно будет попробывать! Опыт набирать нужно. Надеюсь урок по верстке действительно толковый.
  • 0



Похожие темы Collapse

Количество пользователей, читающих эту тему: 1

0 пользователей, 1 гостей, 0 анонимных

×

Зарегистрируйся моментально!