Неделя 2. Хороший старт и первые проблемы. Сложно ли начать?

Вступление

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

Прежде всего хочется сказать об итогах запуска блога. Я даже близко не ожидал, что людей так заинтересует данная тема. В 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. В общем я хочу разобраться с этим и скидывать вам кодпены моих трудов.

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

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

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

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

Заключение:

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

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

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

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

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

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

dribbble / behance / facebook / instagram / producthunt / vk