Хочешь свой плейлист?
1. AC DC - Back in Black
2. AC DC - HIGWAY TO HELL
3. AC⁄DC - Touch To Much
4. Alle Farben - Bad Ideas
5. Arilena Ara - Nëntori (Bess Remix)
6. Artik pres. Asti - Никому не отдам
7. Ben Delay - I Never Felt so Right (Club Mix)
8. Bob Marley - Three Little Birds
9. Brandon Flowers - Can't Deny My Love
10. Burak Yeter feat. Danelle Sandoval - Tuesday
11. D.idJ - DoIt
12. Deadpool Rap - Sexy Motherfucker
13. Ellie Goulding - Lights
14. Ellie Goulding - Little Dreams
15. Eminem - Ass Like That
16. Estradarada - Вите Надо Выйти
17. Example - Changed The Way You Kiss Me
18. Gutter Brothers - Bitch (Original Mix)
19. IOWA - Нам же нравится одно и тоже (2014)
20. Innerpartysystem - American Trash
21. Jah Khalib feat. Кравц - Do It
22. Justin Timberlake - My Love (feat. T.I.)
23. Kadebostany - Teddy Bear (Astero Remix)
24. Lana Del Rey - Serial Killer
25. Lana Del Rey - Serial Killer (K Theory Remix)
26. M83 - Oblivion
27. METAHESH - Better Than Sex
28. Mapei - Don't Wait
29. Misha Daniels - Run Away (Deep Mix)
30. Moonbeam & Indifferent Guy Eva Pavlova - Follow Me
31. Mos Def And Massive Attack - I Against I
32. Nero - Satisfy (Original Mix)
33. No Limits, Jovan Wilder - Slow Down
34. Oh Wonder - Shark (Illenium Remix)
35. Queen - I Want To Break Free
36. Radio Record - РОДРИГЕС ТИМУР
37. Shakira - Waka Waka (Time for Africa)
38. Snakehips & MØ - Don't Leave
39. The Black Eyed Peas - Meet Me Halfway
40. The Prodigy - Girls
41. The Rolling Stones - God Gave Me Everything
42. The Weeknd ft. Daft Punk - Starboy
43. Vitalic - Poison Lips
44. Wiz Khalifa - Work Hard, Play Hard
45. Баста - Голос (feat. Полина Гагарина)
46. Батишта и Ромади - Формула любви
47. Би - 2 & Чичерина
48. Градусы - Радио дождь
49. Елка - Грею счастье внутри
50. Иван Дорн - Ты всегда в плюсе
51. Каста - Радиосигналы
52. Кравц - Море
53. Марсу Нужны Любовники - Ветер сдувает с крыш
54. Марсу Нужны Любовники - Дальневосток
55. Марсу Нужны Любовники - Её глаза
56. Марсу Нужны Любовники - Застелю Цветами
57. Марсу Нужны Любовники - Скользим
58. Михаил Озеров & Ирина Обрезкова - Лава
59. Моя Мишель - Настя
60. ПИЦЦА & L'One - Мир
61. Пика - Патимейкер
62. Пицца - Романс

Добро пожаловать на DevsAid.Com!

Внимание! Объявляем конкурс на лучший новостной пост!
Получай уведомления в Telegram или по СМС!
Заработай на публикации тем на форуме!


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

Тема в разделе "Дизайн и Графика", создана пользователем Dump_Bot, 10 сен 2016.

  1. 1125b8f675f3445e85915d994bb6d2a5.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.
    [*]Удаление лишних файлов.
     

    Загрузка...
  • Кто мы?

    2 разработчика которые решили помочь другим разработчикам в решении их проблем, а так же пользователям с поиском самых свежих и качественных инфопродуктов. За 4 с небольшим месяца мы создали этот форум на который заходят ежедневно 1500 человек и посещаемость постоянно растёт. Мы создали панель лицензирования для защиты PHP скриптов от воровства и SEO панель для мониторинга наших сайтов и выбора верной стратегии их развития. Мы надеемся что то что мы создали пригодится Вам и возможно Вы поможете нам развиваться и совершенствоваться вместе с Вами.
  • Набираем команду!

    Мы набираем в нашу команду умных и амбициозных людей! Не важно в какой сфере Вы преуспели, Вы можете попасть в нашу команду и развивать с нами действительно достойный ресурс.

    Вступай!