Стать Front-end разработчиком с нуля
Вступление: несмотря на то, что у меня есть способности к аналитическому мышлению и решению задач, я раньше не занимался программированием всерьез. Я уже знаком со многими самыми распространенными языками, и могу написать простые программы, но такого уровня явно недостаточно чтобы зарабатывать деньги. Я смотрел и читал разные книги по разным языкам просто потому, что мне было интересно узнать что-то новое, попробовать как это все работает. Зато сейчас я понимаю в какую сторону я вообще хочу идти и какой результат получить.
Самым интересным для меня является веб-разработка, так как можно сделать приложение для всех, у кого есть интернет, скорость разработки достаточно высокая, а возможности очень большие. К тому же эта область очень быстро растет и развивается, значит в ней есть потенциал. Пока что хочу сделать упор в программировании на JavaScript + знание верстки, по мере необходимости буду подключать в изучение серверный язык. JavaScript мне нравится почти во всем и я бы хотел писать на нем, в принципе есть много вакансий только на JS с его технологиями.
Что я имею на данный момент?
Я имею общее представление про разные языки программирования и примерно понимаю что с их помощью можно сделать. Я "на ты" с фотошопом и другими графическими редакторами, могу легко создать любой интерфейс приложения или сайта. Я немного умею верстать, на уровне простых шаблонов.
Зачем я поставил эту цель?
- Для того чтобы постоянно контролировать прогресс.
- Для того чтобы заявить о своих намерениях и не забросить это на половине пути.
- Для того чтобы доказать себе и другим что можно сменить специализацию и выучить новую профессию.
Как я буду двигаться к цели?
Толковых инструкций и советов я не нашел, поэтому буду все проверять и пробовать самостоятельно. Начну с основ JavaScript, потом буду изучать фреймворки и библиотеки для него. Параллельно буду или верстать шаблоны, или проходить уроки по верстке.
Буду записывать сколько времени в день я потратил на изучение и практику, что сделал, над чем работал. В конце отдельных этапов буду показывать готовые мини-проекты.
Скорее всего буду прыгать между темами и этапами, я так привык изучать что-то новое - одновременно со всех сторон.
Когда буду уверенно создавать небольшие скрипты и решать задачи интерактивной верстки создам цель ил пункт в этой цели по фрилансу и поиску заказов. Параллельно для корректировки цели буду смотреть требования работодателей к вакансиям по JS и задачи которые люди выкладывают на фриланс.
Какие могут быть сложности на пути?
- Мне может надоесть однообразие процесса. Для преодоления можно подходить к изучению с разных сторон, можно делать больше практики и "прикольных" проектов. Ведь благодаря этим навыкам можно быстро прототипировать множество идей на лету и смотреть что из этого будет получаться. Еще можно на время переключится на дизайн, сделать прототип приложения, которое в будущем можно реализовать.
- Я могу застрять на какой-то теме, потому что она окажется сложной для понимания. Здесь главное не сдаваться, можно отложить задачу на какое-то время и вернуться к ней немного позже. Можно попросить у кого-то помощи. Можно просто отвлечься и попробовать еще раз с начала.
Погнали!
Цель будет постепенно дополняться и развиваться, потому что сразу предусмотреть все невозможно.
Буду рад любым комментариям: советам, вопросам, идеям и предложениям)
Документ, где я собираю полезные ресурсы и материалы по теме. Будет пополняться.
Критерий завершения
Самым честным критерием считаю количество заработанных на программировании денег. Способ не имеет значения: это может быть или постоянная работа, или фриланс. Сумма минимум - $1000 за время всей цели. Если я могу заработать на этих навыках - значит я чему-то научился и могу это применять. Если мне никто не платит за мои знания, значит этих знаний недостаточно.
⠀
Вторая группа критериев относится к каждому этапу: я должен реализовать мини-приложение с использованием каждой изученной технологии, ну а в финале сделать полноценное приложение которое можно использовать на практике, которым смогут пользоваться люди и это приложение будет приносить пользу. Буду благодарен , если вы предложите идею для такого приложения)
Личные ресурсы
Свободное время, некоторое начальное понимание программирование и сферы разработки, навыки дизайна, способность обучаться.
Экологичность цели
Это первый этап развития себя как программиста в вебе. Делаю я это для 2 вещей:
- я хочу уметь самостоятельно уметь разрабатывать приложения любой сложности, так как часто приходят интересные идеи для приложений но я не могу их воплотить в жизнь.
- я хочу стабильно зарабатывать на фрилансе или работе. Для этого нужны навыки и опыт.
-
Пройти Fron-end developer certification на freecodecamp.com
Как только поставил цель, попался этот ресурс www.freecodecamp.com. Там с нуля обещают научить всему что нужно для программирования. Основы HTML, CSS и дальше по нарастающей JS и все что с ним идет дальше. Для быстрого старта буду использовать его.
-
HTML + CSS
-
Bootstrap
-
jQuery
-
Basic Front End Development Projects
-
Basic JavaScript
-
Basic Algorithm
-
JSON APIs and Ajax
-
Intermediate Front End Development Projects
-
Intermediate Algorithm Scripting
-
Advanced Algorithm Scripting
-
Advanced Front End Development Projects
-
-
Познакомиться с библиотекой визуализации данных D3.js
Когда нужно нарисовать графики, диаграммы, графы и вообще все, чем можно визуально представить набор данных - нужно использовать d3.js. В ней куча встроенных методов для обработки любого набора значений, так что не нужно изобретать велосипед.
Пока что нужно изучить основы, которых хватит для выполнения заданий на ФриКодКампе. Когда разберусь, смогу уже по аналогии изучать новые типы графиков по необходимости.
![]()
-
Столбиковая диаграмма
-
Диаграмма распределения
-
Тепловая карта
-
Графы (Force Directed Graph)
-
Работа с геолокациями
-
-
Создание полноценного приложения
Это своего рода вызов себе. Из задач и требований можно выделить примерно следующее:
- Приложение будет на Node.js
- Можно использовать любые модули для Нода.
- Возможно с использованием Реакта, в этом я пока не уверен.
- Должна быть база данных: это или Mongo или mySQL
- Приложение загружено на сервер и доступно по доменному имени.
Над самой идеей пока что думаю.
Стоимость этапа — 1000 ₽
![]()
-
Верстка: HTML Academy - Базовый HTML и CSS
Без верстки я вообще ничего не сделаю в вебе, тем более если я хочу делать симпатичные приложения с приятным дизайном.
Решил пока что не создавать отдельную цель на этот подпункт, так как сильно расфокусирует. Буду по чуть-чуть проходить "HTML Academy - Базовый HTML и CSS", там обещают научить до уровня которого хватит для трудоустройства. А этого мне пока что вполне достаточно. Все что сверху нужно я смогу подтянуть самостоятельно.
-
Вводный
-
Разметка
-
Фотошоп для верстальщика
-
Сетки
-
Декоративные элементы
-
Оформление контента
-
Введение в JS
-
Прогрессивное улучшение
-
Финал
-
-
React js - первое знакомство
Библиотека для построения интерфейса от Фейсбука. В этом пункте я хочу научиться создавать простые компоненты и задавать ихнее взаимодействие. Весь этот пункт относится только к клиентской части Реакта, так что никакого взаимодействия с данными на сервере тут не будет. Это так сказать первый вброс с Реакт, чуть позже буду расширять знания о нем.
Опять таки критерий завершения: сделать все задания по Реакту на ФриКодКампе. Ну и может в процессе сделаю еще что-то для тренировки, или гайды пройду какие-то.
![]()
-
Предпросмотр разметки маркдаун
-
Таблица учасников FreeCodeCamp с сортировкой
-
Список рецептов с удалением/редактированием
-
Игра "Жизнь"
-
Игра типа "RogueLike RPG"
-
-
Верстка: HTML Academy - продвинутый HTML и CSS
Продолжаю изучать верстку. Базовая часть пройдена, задание выполнено, переходим на новый уровень. Очень нравится подача материала и объяснения.
-
Вводный
-
Методологии
-
Препроцессоры
-
Адаптивные сетки
-
Флексбокс
-
Адаптивная графика
-
Производительность верстки
-
Автоматизация
-
Инструменты ускорения
-
Финал
-
-
Пройти уроки на learn.javascript.ru
Основа - это и в Африке основа, без нее никуда.
-
Введение
-
Основы JS
-
Качество кода
-
Структуры данных
-
Замыкания и области видимости
-
Методы объектов и контекст вызова
-
Некоторые другие возможности
-
ООП в функциональном стиле
-
ООП в прототипном стиле
-
Современные возможности ES-2015
-
Документ и объекты страны
-
Основы работы с событиями
-
События в деталях
-
Формы и элементы управления
-
Создание графических компонентов
-
-
Node js
Дает возможность писать серверную часть на JS`e, что позволит не прыгать с языка на язык.
-
Скринкаст Ильи Кантора часть 1
-
Скринкаст Ильи Кантора часть 2
-
freecodecamp: Node.js + express
-
freecodecamp: git
-
freecodecamp: MongoDB
-
freecodecamp: API projects
-
freecodecamp: dynamic web aplication projects
-
-
Верстка: Level-up
В наше время есть очень много инструментов облегчающих работу верстальщику. Это и препроцессоры, и сборщики проектов, сетки и фреймворки и другие полезные штуки. Так что в этом пункте я хочу ознакомится с некоторыми из них и научиться их использовать в своих проектах. Кроме этого хочу немного лучше изучить некоторые элементы и свойства.
-
Системы сборки проектов
-
Анимация в CSS
-
Испольщование SVG
-
bootstrap http://dedushka.org/tag/bootstrap
-
CASS + SCSS http://marksheet.io/
-
Jade https://habrahabr.ru/post/278109/
-
-
GIT и система контроля версий
Без этой системы уже никто не работает, все продукты так или иначе используют Git и без понимая его работы я не смогу разрабатывать устойчивые версии продукта, не будет системы развития отдельного функционала, да и почти все работодатели требуют знать эту вещь.
-
Angular JS
Фреймвок от Гугла, на котором разработаны множество приложений.
-
Electron js
Фреймворк для написания десктопных приложений на веб технологиях.
-
Сделать свой сайт-портфолио
Благодаря освоенным навыкам я хочу сделать свой сайт, на нем я буду выкладывать свои работы по верстке, скриптам и дизайну. Сделать хочу все самостоятельно, без шаблонов, ну и конечно же со многими интерактивными элементами.
-
Сверстать 10 небольших макетов с Дрибла
![]()
![]()
![]()
![]()
-
1
-
2
-
3
-
4
-
5
-
6
-
7
-
8
-
9
-
10
-
Не пропустите новые записи!
Подпишитесь на цель и следите за ее достижением
