Привет! С вами снова Дима Бловер. Для тех, кто забыл, напомню: я предприниматель, веб-дизайнер и крипто-евангелист. Также в свободное время я фотографирую, пишу картины и путешествую по миру. Продолжаю цикл заметок/статей о том "как дизайнеру стать кодером" или другими словами, как я изучаю код и для чего мне это нужно. Первая часть - тут.

Прежде всего хочется сказать об итогах запуска блога. Я даже близко не ожидал, что людей так заинтересует данная тема. В telegram канале @designer_coder уже более 120 человек. Статья набрала больше 1300 просмотров. Пост в моем в фейсбуке набрал очень большую популярность (125 комментов в общей сложности, 90 лайков) развернулись сильные дискуссии и споры на эту тему.

Вот самые популярные комментарии:

• дизайнер должен развиваться как Т специалист и не лезть в другие не смежные области
• будет сложно уследить за обоими областями
• останется ли он хорошим дизайнером, ведь это будет мешать его креативу
• код это же так сложно, это целый мир и жизни не хватит для его изучения

Отвечаю по порядку.

дизайнер должен развиваться как Т специалист и не лезть в другие не смежные области

В корне не верное утверждение. Если вы пристально посмотрите вокруг, то увидите, что специалисты высшего уровня изучали очень многие дисциплины и занимались абсолютно разными вещами. Особенно это важно для предпринимателей, которые должны разбираться во многих дисциплинах сразу. Также, я считаю, чтобы достичь наибольшего успеха в своей области нужно развиваться в разных направлениях сразу. Изучая другие дисциплины, ты понимаешь, что постепенно учишься новым навыкам, смотришь на вещи разными взглядами, и используешь знания из других областей уже в своей профессии. Для продуктового или веб-дизайнера крайне важно разбираться в коде, и понимать как устроен продукт.

будет сложно уследить за обоими областями

Конечно сложно будет уследить за обоими областями сразу, но я не говорил, что нужно бросать дизайн и становиться программистом. Уделять изучению кода 2 часа в день, это не так много. Зато 2 часа в день - это 14 часов в неделю или 56 часов в месяц.

Конкретно, мне нужны знания кода для того, чтобы сделать свои сайд-проекты, разбираться в сфере для того, чтобы не чувствовать себя скованным, чтобы лучше понимать свои продукты, чтобы общаться с программистами на одном языке, лучше их понимать, ставить им задачи, а в свободное от работы время кодить в свое удовольствие.

останется ли он хорошим дизайнером, ведь это будет мешать его креативу

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

код это же так сложно, это целый мир и жизни не хватит для его изучения

Программирование сложнейшая дисциплина, но нужно очень четко разграничивать, о чем идет речь. О том, чтобы верстать простейшие сайты и нацеплять на них простейший бакенд. Это сложно? А вы пообщайтесь с кодерами, которые занимаются программированием сложнейших задач, а не простейшие сайтики делают, тогда поймете, что это далеко не самое сложное. Никто пока и речи не ведет о том, чтобы писать сложный фронт-енд на React.js, или делать сложный бак-енд на Ruby. Для начала цель освоить верстку, а потом шаг за шагом двигаться вперед. Ведь затягивает же. Хочу побыстрее научиться анимировать svg и делать прикольные штуки типа вот этого сайта.

Также мне очень понравилось, что люди писали мне в личку и делились мнением на счет того, что им хотелось бы видеть и что их интересует. Антон(@hateon) написал о том, что webstorm мне пока не нужен, так как грузит систему и для новичка хватит sublime.

А Даниил написал по пунктам обзор:

"Хотел бы видеть больше фактов, инсайдов о самом обучении, что получается и что не получается. Больше всего интересно, что сделал, что не смог, как делал, скриншоты, инсайд. Интересно видеть план - результат, т.е. не успел или успел, ленился, как с работой увязывал, сколько времени потратил. Хочется видеть больше постов и итераций. Интереснее читать несколько коротких заметок, чем одну большую."

Что ж постараюсь учесть пожелания.

Пишите, советуйте. Лучшие советы, выделю в следующих статьях.

Про курсы

Я начал смотреть курсы Lynda. А конкретно Lynda.com - CSS Концепция. Честно говоря, материал там древний, излагается слишком подробно, и без реальных примеров. Похоже на лекции в универе, говорят как важные, так и абсолютно не нужные. Полезно, но меня не покидает чувство, что можно найти лучше. Потратил на просмотр около 3 часов, постоянно отвлекаясь и на гуглинг разных материалов. В итоге, пока на время остановил просмотр этих курсов и начал искать другие курсы. Проблема с которой я столкнулся, это то, что нет нормальных курсов вообще. Особенно современных. Все древнее, 2013 год. Когда вышел CSS3, все запилили курсы и бросили дело. А ведь с тех пор, все изменилось, подача материала, качество камер, инструменты, технологии даже. Пускай CSS3 остался не изменным, но у той же Линды в курсах показан не современный текстовый редактор, а древняя Aptana Studio. Очень много воды и говорят про то, что банально и уже все знают. Например про совместимость с IE9, или то что не все функции CSS3 поддерживаются. Ребят, на дворе 2017 и все юзают хром. Сколько можно. Пока из того, что я нашел и что больше всего понравилось это Tuts+, frontendmasters.com, teemtreehouse. Но пока я их изучил только бегло. У tuts+ сразу на реальных примерах рассказывают, плюс там все учителя говорят отлично, качество подачи прекрасное (сдвоенный экран кода и результата). Огромное количество видосов и преподавателей. Подумываю купить их подписку, она стоит всего 29$ в месяц, но она дает возможность пользоваться Envato elements. А это уже очень интересно!

В итоге я потратил еще часа 3 на изучение курсов, которые есть на рынке. Что хочу сказать про русские курсы. Все, которые я видел отстой. Можете кидать в меня камнями, но я не нашел нормальных. Если вы найдете - кидайте в личку(@dimablover), буду рад затестить ваши курсы, посмотреть. Если они мне понравятся, я готов на каждом углу говорить, что курсы хороши и почему хороши. Всякие вебинары это вообще тихий ужас. Контент - одна вода плюс не структурированная подача информации. Много слов про и так понятные вещи, и почти нет интересных примеров. Смотреть все это невозможно, долго, скучно, неинтересно. Пример как начинаются русские вебинары и курсы: "Всем привет. Поставьте плюс кто знает, что такое HTML?" (:facepalm:). После этого можно выключать видео.

Я считаю, что концепция всех курсов в корне не верна и устарела. Самое интересное обучение на реальных примерах, или распределить по задачам. Например нужно сверстать классный современный минималистичный сайт, чтобы нормально отображался во всех браузерах, и был адаптивным. Господи, я перерыл весь интернет! Нет ни одного подобного урока, хотя это ведь вообще баян. Опять же, если я не нашел скидывайте. Мне аж самому захотелось сделать такой урок! Надеюсь все таки хватит терпения и я его сделаю, он будет просто и по нему можно будет понять всю базу. Но для начала мне нужно самому все изучить, а я пока ничегошеньки не умею.

Чуть позже напишу краткий обзор на курсы, которые изучил и скажу какие лучше.

Первая верстка

Выбрал самый простейший блок из нашего продукта phoenix-startup и начал верстать его.

Написать тело html, подключить стили, создать контейнер, присвоить ему стили, подключить шрифты, написать контент, присвоить им стили, сделать текст по центру. Простейшие действия, становятся очень сложными, когда их делаешь в первый раз.

Первая сложность с которой столкнулся это подключение google fonts. Я прогуглил и все сделал как написано везде. Но шрифты не подключаются и все тут, также как и картинка не подключается. Пытался разобраться в проблеме минут 30, но не нашел никакого решения. Решил отложить на следующий день. На следующий день меня осенило, и я понял какой же я лошара. Я положил файл css в корень, а в пути в html указал путь в папку: <link rel="stylesheet" type="text/css" href="css/main.css">. Первый и главный урок, который я усвоил, если у вас что-то не отображается или отображается так будто вы не присваивали стили, проверьте первым делом, не отвалились ли стили и файл css.

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

Третья огромная проблема. Это центрирование блока текста по центру страницы. Ох вот тут я застрял и искал решение наверное 1.5 часа. Нашел огромную статью на хабре на эту тему - https://habrahabr.ru/company/netcracker/blog/277433/ но она мне не помогла, почему то текст не выравнивался. По совету моего друга я воспользовался методом "Выравнивание с помощью transform". Вот так выглядит css моего блока текста:

h1 {
text-align: center;
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 100%;
}

У меня на локалке в хроме отлично отображается сверстанный мною блок через codekit. Но как его вам показать я не знаю, я попробовал вставить codepen в статью, но у некоторых отваливается картинка. Поэтому просто скидываю ссылку - https://codepen.io/dimablover/pen/JrxqeP. В общем я хочу разобраться с этим и скидывать вам кодпены моих трудов.

Мои результаты за неделю:

1. Смотрел курсы Lynda.com - CSS Концепция - время: 3 часа
2. Читал статьи, что такое HTML, CSS, про то как правильно расставлять теги, про разметку, про семантику, про оформление кода - время: 2.5 часа
3. Изучал какие курсы, есть на рынке, искал лучшие для себя варианты. Буду продолжать поиски, пока остановился на Tuts+, teemtreehouse, frontendmasters - время: 3 часа
4. Зарегался на codepen.io - потрясающий ресурс для изучения кода на реальных примерах. Примеров тысячи и можно форкать и добавлять к себе чужой код и баловаться с ним. Очень круто, маст хав! - время: 25 минут
5. разбирался с codekit. Научился запускать проект локальном сервере, смотреть в реальном режиме свои изменения - время: 30 минут.
6. зарегался на stackoverflow - время: 5 минут
7. верстал простейший блок из нашего продукта phoenix-startup - время: 4 часа (смешно знаю)
8. изучал как выравнивать текст по центру страницы - время: 1.5 часа
9. сделал свой первый пен на codepen - время: 20 минут
10. изучал псевдо-классы - время: (Продолжу потом, пока они не нужны.) - время: 25 минут.

План действий на следующую неделю:

1. Досмотреть курсы Lynda (пока не уверен на счет них)
2. Заверстать простейшую кнопку со скруглением
3. Заверстать тень для кнопки
4. Задача сделать простейший блок, который верстал на этой неделе кроссбраузерным и адаптивным
5. Научиться пользоваться codepen, понять почему картинка отваливается, чем код в codepen отличается от кода на локалке.
6. Научится вставлять codepen в тело статьи
7. Начать изучать @mediascreen, адаптивность и кроссбраузерность
8. Начать смотреть курс teemtreehouse CSS Layout Basics [2015, ENG]

Заключение:

В итоге я сделал почти все, что планировал в прошлый раз, и даже перевыполнил план в каких-то действиях.

Заметки писать раз в неделю очень сложно, потому что в течении недели происходит уйма всего, очень много частных кейсов. На эту заметку у меня ушло 8 часов чистого времени. Очень долго вышло по времени, писалось в разы сложнее, чем я писал первую.

Хочется обо всем рассказать, о переживаниях, о поисках мотивации, поделиться кучей ссылок и множества информации, которую я тщательно выбираю среди тон мусора. Скорей всего я перейду на формат коротких заметок по частным темам, которые удобнее и лучше читать. Частные кейсы как я что-то верстаю и с какими проблемами сталкиваюсь. Какие интересные моменты я замечаю, где ищу мотивацию и как улучшаю свой workflow.

Ждите новых отчетов и кратких выжимок в телеграме. До новых встреч

Подписывайтесь на меня везде (можно найти как dimablover), я активно веду много аккаунтов и стараюсь добавлять прикольные штуки:

Телеграм канал designer_coder

dribbble / behance / facebook / instagram / producthunt / vk

Всем привет. Меня зовут Дима Бловер. Я дизайнер, предприниматель, художник, фотограф и путешественник. Я всю жизнь мечтал научится воплощать свои идеи. Для этого я с детства что-то рисовал, что-то мастерил руками из дерева, выпиливал, стругал, строил, пошел учиться на инженера-проектировщика, мечтал стал архитектором, потом бросил университет ради дизайна, обучился самостоятельно дизайну и до сих пор я мечтаю реализовать свои идеи, а не реализую их.

Хватит мечтать, с этого момента я буду реализовать свои мечты, идеи, проекты и все доводить до конца. Для этого я буду вести блог, в котором буду описывать каждое свое действие, все что я делаю, начиная с 9 октября 2017. Сейчас, я поставил цель изучить программирование (html, css, js, php, rails) и сделать свой проект с нуля полностью сам.

Почему изучать код полезно и нужно?

Наверное, все знают что программирование дает огромные возможности в реализации всего что ты задумал, ведь любому проекту нужен, как минимум, сайт. Не смотря на то, что я занимаюсь веб дизайном уже года 4, я не могу и не умею верстать сайты. Все это время я знал поверхностно html, css, js, php, лишь для того чтобы курировать верстку или сказать верстальщику, что поправить и может быть иногда поменять пару строчек кода. Но часто попадаются ситуации, что нет взаимопонимания с верстальщиком вообще. Думаю все веб-дизайнеры меня понимают. Они верстают без души, не добавляют микроанимаций, делают топорные транзишины, и вообще не имеют хотя бы маленького эстетического вкуса. Не все верстальщики так, но многие. Кроме того, что самое главное, верстальщики не любят дизайн, так как любим его мы, дизайнеры. Также складывается ощущение, что верстальщикам сложно креативить и их нужно направлять, но мы же не знаем как изменить функцию javascript так, чтобы сайт работал плавно. У них отторжение от него. К примеру я обожаю сайты, которые есть на awwwards, и просто диву даюсь, где же эти умельцы, которые так могут и любят делать. Например вот оч крутой сайт у minglabs. Прямо произведение искусства. Хочется видеть такое чаще и делать чаще.

Из-за всех этих проблем, дизайнер все это время чувствует себя как в клетке. Дизайн ты можешь сделать, а реализовать, воплотить его в жизнь нет. Попутно возникает много идей для проектов, а сделать ты их не можешь, нужна команда, нужны программисты, заинтересованные люди, а с этим всегда сложности. Да, что уж говорить, элементарно портфолио нужно и персональный сайт, но у скольких дизайнеров он есть? Мне кажется, если изучить код даже на начальном уровне - это уже даст огромное преимущество перед другими дизайнерами, а также поможет быстрее реализовывать идеи и проекты.

Как-то утром я проснулся и понял, что мы совсем не правильно оцениваем время, которое у нас есть. И нужно просто посмотреть на то, что ты сделал за последние полгода и понять для себя, а научился ли я чему-нибудь новому, узнал ли я что-то такое, что поможет мне в будущем и в течении всей жизни? И так я понял и выделил для себя многие вещи, которым я хочу обучиться до 30-ти лет. Ведь после 30-ти лет, мы будем еще ленивее, будем еще более занятыми, а также менее гибкими к чему-то новому. Базовые знания кода, это как минимум то, что должно пригодится в моей жизни, а может и в жизни каждого. Конечно, я начал с фронт-енда и html, css. Я пока и не говорю даже о PhP, Rails, Phyton и даже JS.

С чего начать?

Я начал с того, что понял и убедил себя в том, что это мне нужно. Я не просто сказал, все мне это нужно, а долго настраивал себя и взвешивал плюсы и минусы. Ведь если начать что-то изучать, то ты должен понимать, что это затянется надолго и первые результаты придут далеко не сразу. Вообще все это может растянуться на месяцы, на годы. И это нормально! Первое, что я для себя решил, что не нужно гнать лошадей и принять для себя, что обучение это долгий и кропотливый процесс. Значит нужно запасаться терпением и долгосрочной мотивацией. Для начала нужно выяснить с каких курсов и статей начать изучение.

Первым делом я открыл ссылки, которые мне скинул друг фронт-ендер:

От нуля до героя фронт-енда (Часть 1)

От нуля до героя фронт-енда (Часть 2)

Исходя из них я запомнил, что на ближайшее время одним из самых важных сайтов для меня будет w3.org. Начать можно с чтения о селекторах CSS - Selectors Level 3 - World Wide Web Consortium.

Также из этой статьи я узнал о codeacademy. И взял на заметку, что просмотрю и изучу все доступные там курсы.

Первое что я также уяснил, мой самый любимый и часто посещаемый сайт будет htmlbook.ru.

Мои результаты за неделю

1. Я изучал тематику, зачем нужно изучать код, замотивировал себя и приступил к изучению базы html, css.
2. Установил Sublime Text 3.
3. Подключил package Emmet для быстрого написания HTML.
4. Сделал так, чтобы в настройках sublime все файлы открывались не в новом окне, а в новой вкладке (Бесило это, пришлось разобраться с настройками sublime). Полезная статья о sublime на хабре.
5. Прочитал пособия по HTML и CSS от Mozilla Developer Network.
6. Прошел курс на codeacademy Как создать сайт?. Он состоит из 4-х мини курсов: Site Structure, A Closer Look at CSS, Boundaries and Space, Building with Bootstrap. Мне они очень помогли втянуться в работу и начать понимать, что к чему. Всем советую, прекрасная возможность для старта. Ушло на курс "Как создать сайт" в сумме часов 5.
7. Первое время, постоянно захожу на htmlbook.ru. Читаю все, что там написано, пытаюсь запомнить.
8. Установил Codekit, для запуска сервера на локалке.
9. Установил WebStorm, но не разобрался с ним.

План действий на следующую неделю

1. Пройти курс про веб формы на codeacademy.
2. Посмотреть видео-курс про CSS от Lynda. (Lynda.com - CSS Концепция).
3. Посмотреть видео-курс Lynda.com - CSS Макеты страниц
4. Посмотреть видео-курс Lynda.com - CSS. Стилизация навигации
5. Посмотреть видео-курс Lynda.com - CSS Фреймворки и Сетки
6. Попробовать курс teamtreehouse.
7. Самое сложное задание на неделю, взять готовый дизайн простого элемента и начинать его верстать, с нуля, чтобы понять процесс. А начну я с нашего продукта Phoenix Startup UI Kit, потому что он идеально для этого подходит.
8. Разобраться как компилировать проект, запускать на локальном сервере.
9. Попробовать Brackets, говорят крутой редактор.
10. Попробовать WebStorm.

Заключение

Через неделю напишу новый отчет о том, что сделал и надеюсь показать результаты. Ну или скину еще крутых ссылок для начала изучения кодинга и куча примеров крутых сайтов. Всем пока 🖖.

Если вам понравилась данная статья буду рад, если вы поделитесь ей с друзьями. Может она замотивирует кого-то, как меня замотивировали многие примеры.

Подписывайтесь на меня везде (можно найти как dimablover), я активно веду много аккаунтов и стараюсь добавлять прикольные штуки:

Телеграм канал designer_coder

dribbble / behance / facebook / instagram / producthunt / vk