Неделя 1. Почему я решил изучать код.

Вступление

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

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