Часть 1. Начало пути
Последние три месяца я потратил на то, чтобы научиться писать код, и хотя иногда это было сложно, это был очень полезный опыт.
Одна из самых сложных задач заключалась в выборе того, чему учиться и где учить. Существует так много языков, структур и библиотек – и много противоречивых советов. Кроме того, некоторые учебные ресурсы были намного лучше, чем другие. Если бы я знал, на каких ресурсах сосредоточиться, я бы продвинулся в обучении еще быстрее.
Так что я подумал, что поделюсь тем, что сработало для меня. То, насколько быстро вы обучаетесь, не является признаком вашего потенциала разработчика, поэтому не беспокойтесь, если вам понадобится больше времени, чтобы пройти материал. Но, если вы можете посвятить достаточно времени своему увлечению, это можно сделать и за три месяца.
HTML
Если вы никогда раньше не занимались программированием, тогда HTML – отличное место для начала. Это основной строительный блок интернета, и в отличие от большинства других языков, он дает учащимся немедленную визуальную обратную связь по коду, который они пишут.
Я собирал кусочки HTML-кода, прежде чем начал относиться к кодированию более серьезно, но если бы мне пришлось выбирать один ресурс, чтобы изучить его сегодня, я бы выбрал https://www.freecodecamp.org/. Он хорош, быстр и прост, а кроме того, абсолютно бесплатен.
Если вы ищете среду, в которой можно практиковать то, что вы изучили, я рекомендую https://codepen.io/, которая является «песочницей» для основных языков Интернета (HTML, CSS и JavaScript).
CSS
CSS является естественным спутником HTML. На первый взгляд, он очень прост, хотя есть определенные концепции, особенно связанные с компоновкой и позиционированием, которые могут занять некоторое время, чтобы в них можно было разобраться.
И опять FreeCodeCamp – хороший выбор для CSS. Я не тратил много времени на изучение CSS с помощью курсов, так как синтаксис довольно прост, поэтому большая часть моего обучения пришла к тому, что я пробовал что-то в моих собственных проектах.
Самая сложная часть CSS – это понимание верстки. Большинство моих вопросов о макете уже задавали пользователи StackOverflow, поэтому быстрый поиск в Google решил большинство моих проблем.
JavaScript
HTML и CSS не являются полноценными языками программирования, и поэтому вы не получите полного представления о том, что такое программирование на самом деле, пока не начнете изучать один конкретный язык – JavaScript. Это язык программирования интернета.
Это делает JavaScript чрезвычайно безопасным выбором для изучения. Кроме того, он все чаще используется для других целей, благодаря таким технологиям, как Node.js.
Для начинающих JavaScript не так прост и доступен, как HTML или CSS, и я рекомендую вам переключаться между различными источниками, чтобы укрепить его основные концепции.
- Для начинающих. Как и в случае с HTML и CSS, я настоятельно рекомендую курс JavaScript по FreeCodeCamp. Я прошел несколько других курсов, наиболее полезными из которых были Codecademy и бесплатный вводный курс от Flatiron School;
- Средний уровень. Как только я стал лучше понимать JavaScript, я начал выполнять задачи на https://codewars.com. CodeWars – это просто фантастика, но проблема с классификацией трудностей просто поражает. Некоторые проблемы, предположительно для начинающих, могут показаться очень сложными.
Я предлагаю начать с нескольких проблем на самом низком уровне. Если вы застряли, поиск методов JavaScript на сайте MDN может оказаться очень полезным.
Часть 2. Другие обязательные части инструментария любого разработчика.
Git и Github
Git – это так называемая «система контроля версий», а Github – самая популярная облачная служба Git.
Проще говоря, Git позволяет создавать резервные копии ваших файлов, отслеживать изменения, делиться своим прогрессом с другими разработчиками и работать над совместными проектами.
Когда вы только учитесь, и вам не нужно использовать Git, он может показаться довольно сложным. Но это стоит того: подавляющее большинство профессиональных разработчиков полагаются на Github (или аналогичные сервисы), но наличие активного профиля Github может помочь вам обеспечить безопасность работы.
Чем раньше вы начнете передавать свою работу на Github, тем больше у вас будет доказательств вашего опыта разработчика. Я использовал Git Tutorial от Codecademy, чтобы помочь мне начать работу с этим сервисом.
Командная строка
Лучший способ использовать Git – через «терминал» или «командную строку», и это также важно для современных веб-разработчиков, так как позволяет вам легко добавлять сторонние пакеты на ваши сайты через NPM (Node Package Manager) или Yarn. Как и раньше, я сделал свои первые шаги здесь, используя Codecademy.
Примечание для пользователей Windows: я настоятельно рекомендую вам скачать https://gitforwindows.org/ и использовать его для Git и NPM/Yarn. Он позволяет вам использовать команды, знакомые пользователям Linux и Mac, и, насколько я могу судить, это всестороннее улучшение встроенной командной строки.
Часть 3. Создание набора навыков
Как только вы овладеете знаниями HTML, CSS и JavaScript, выбор технологий, которые вы сможете освоить, может оказаться ошеломляющим.
Вот что я бы порекомендовал для веб-разработчиков.
Sass
Sass – это препроцессор CSS. Он берет базовый CSS и добавляет несколько новых функций, которые делают его лучше, более легким для написания и поддержки. Он также очень легко изучается. Просто следуйте официальному руководству. Когда я начал использовать Sass, стало очень трудно вернуться к обычному CSS.
Bootstrap
Bootstrap – это библиотека компонентов, разработанная Twitter. Она позволяет разработчикам создавать прототипы очень быстро. Вместо пользовательского кодирования этого слайдера, или навигационной панели, или аккордеона, Bootstrap может помочь вам развернуть один слайдер за считанные секунды.
Как и в случае с Sass, изучение основ Bootstrap не займет много времени. Я рекомендую изучить Bootstrap, потому что он может помочь вам быстро настроить проект. Это особенно полезно, если вы создаете тестовый проект для изучения другой технологии и не хотите тратить время на внешний вид вашего сайта.
JQuery
2019 год может стать поворотным моментом для jQuery, поскольку все большее число разработчиков обращаются к таким фреймворкам, как React.js и Vue.js, тогда как стиль манипулирования DOM в JQuery считается уже моветоном.
Тем не менее, я все равно рекомендую изучать JQuery. Мало того, что в интернете все еще используется огромное количество JQuery (и вы почти наверняка встретите с ним как профессиональный веб-разработчик), но я еще и обнаружил, что изучение JQuery действительно помогло мне развить мои знания JavaScript. Лучшим местом для изучения JQuery для меня был его официальный сайт.
В настоящее время, когда я пытаюсь добиться эффекта в vanilla JavaScript, который, как я знаю, существует в JQuery, я смотрю на исходный код JQuery. Код JQuery хорошо написан, быстр и очень совместим, и это помогло мне многое понять о том, что может сделать ванильный JavaScript. Я определенно извлек выгоду из изучения JQuery, прежде чем занялся более современной технологией, такой как React.
Другие библиотеки, такие как Lodash и Underscore, используют принципы, аналогичные JQuery. Часто я предпочитаю попытаться понять исходный код этих технологий и написать его на Vanilla JavaScript. Тем не менее, нет необходимости заново изобретать колесо: если вы окажетесь в нескольких местах, где Lodash (например) будет полезен, то сделайте это!
React
Из всех этих библиотечных сред JS React является наиболее популярным и быстрорастущим. Он был разработан Facebook, и его подход к манипулированию DOM также дает ему преимущество, например, над Angular.
Мне очень нравится React. Его было сложнее освоить, чем JQuery, и на его написание уходит больше времени. Но преимущества становятся очевидными даже в небольших личных проектах: модульная природа React, использование состояния и скорость работы позволяют получать удовольствие от его использования.
Лучшим бесплатным ресурсом для изучения React был его собственный учебник.