Введение

Я, наконец, готов написать это руководство после того, как посвятил 650 продуктивных часов (телефоны выключены, часы без отвлекающих факторов) на изучение полнофункциональной веб-разработки от полного новичка до создания моего собственного продукта «программное обеспечение как услуга», которым я сейчас занимаюсь. горжусь.

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

Что мне дали 650 часов самоотверженного обучения и строительства

Обучение программированию — это тяжелая и пугающая работа.

Один трюк, который я использовал, чтобы сохранять мотивацию и не сдаваться, — это реконструировать его и постоянно напоминать себе о том, что я хотел создать (что превратилось в совершенно новый продукт, созданный на основе технологии, которую я изучил, и того, что осуществимо, но вот так).

Если вам интересно, что я построил с помощью своих недавно приобретенных навыков (возможно, также для того, чтобы дать вам представление о минимальном минимуме, который вы можете построить, если будете следовать этому руководству):

Вы когда-нибудь просматривали бесчисленные страницы документов, пытаясь понять простую ключевую концепцию / ответить на простой экзаменационный вопрос, только чтобы обнаружить, что простое объяснение скрыто глубоко в абзацах, как иголка в стоге сена? Это не очень продуктивно, не так ли?

Это задача, которую пытается решить мой продукт SaaS, чтобы ускорить вашу продуктивность в понимании ключевых концепций, будь вы студентом, готовящимся к экзаменам Open Book, или работающим профессионалом. По сути, это персонализированный ChatGPT, который учится на документах из библиотеки знаний пользователя по предметной области.

короткая версия

Я подробно расскажу о плюсах и минусах всех перечисленных ресурсов, но если у вас мало времени, вот краткое изложение с некоторыми основными моментами, основанными на моем опыте (текстовая версия таблицы доступна на странице понятий).

1. Пройти эти два курса (каждый я проходил по 3 раза)

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

  • Курс Udemy: The Complete 2022 Web Development Bootcamp — Dr. Angela Yu доступен здесь.

  • Курс Udemy: The Web Developer Bootcamp 2022 — Colt Steele доступен здесь.

2. Оставайтесь в курсе, следуя за инструкторами

Новички могут подумать, что это слишком рано, но очень полезно следовать этим популярным инструкторам на раннем этапе. Программирование — это не сидение и обучение, а накопление знаний. Объясню больше в последующих разделах. Ниже приведены два «должны следовать», на мой взгляд

  • Следите за Fireship здесь: его 100-секундная серия очень популярна и помогает быстро понять ключевые понятия.

  • Следите за новостями Traversy Media здесь: прямо к делу и с упором на выполнение работы. Большой охват концепций (если вы боретесь с реализацией определенной функциональности, вполне вероятно, что Traversy покрыл ее)

3. Мозговой штурм собственного проекта

После прохождения двух основных курсов Udemy у вас будет довольно хорошая основа, и я уверен, что к этому времени у вас будет множество идей для проектов, которые вы хотите создать. И действительно, лучший способ научиться — это написать код собственной идеи/проекта, который вам нравится. Проведите небольшое исследование и оцените свои игры.

4. Просмотрите курсы, охватывающие промежуточные и продвинутые концепции

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

Например, базовые курсы могли не охватывать такие понятия, как асинхронные функции, веб-сокеты, управление производством и т. д., но мне пришлось изучить их для продукта, который я создал. Теперь, вспоминая, было бы намного продуктивнее, если бы я изучил их через курс / видео на YouTube, вместо того, чтобы самостоятельно читать документацию.

Я перечислил и подробно остановился на некоторых ниже, если вам интересно. Но вполне вероятно, что вы создадите свой собственный список в зависимости от вашей реализации.

5. Запишите и добавьте в закладки эти справочные ресурсы.

Всякий раз, когда я сталкиваюсь с новой концепцией, я часто сначала ищу ее на w3school, что дает мне быстрое и краткое объяснение того, что это такое. Если мне нужно глубоко погрузиться, я могу исследовать MDN или stackoverflow, если я знаю достаточно, чтобы сформулировать это в конкретный вопрос.

  • w3school здесь: краткое, но лаконичное объяснение понятий с основными примерами

  • Переполнение стека: объяснение не требуется. В 90% случаев, если вы знаете проблему достаточно хорошо, чтобы сформулировать ее в виде вопроса, вы найдете ответ на переполнении стека.
  • Веб-документы MDN здесь: исчерпывающая и подробная документация для глубокого погружения

  • Учебник: я больше не читаю учебники, но для тех, кто лучше понимает, читая книги, я приведу ниже несколько рекомендаций.

Длинная версия

Спасибо, если вы были со мной так долго. Я надеюсь, что вышеприведенный раздел был вам полезен.

Затем я предоставлю более подробную информацию, организованную в следующих разделах (и не стесняйтесь переходить к интересующему вас разделу, как вы, вероятно, понимаете, я очень ценю продуктивность и ваше время) .

  1. Почему я выбрал Udemy вместо других курсов
  2. Подробный обзор плюсов и минусов двух основных курсов Udemy.
  3. Почему я считаю, что очень полезно подписаться на инструкторов по веб-разработке, таких как Fireship и Traversy Media
  4. Наличие доступных ресурсов для промежуточных / продвинутых концепций
  5. Мой систематический подход к решению любой новой проблемы реализации с использованием как видеоуроков, переполнения стека, так и документации.
  6. Мой журнал создания собственного продукта SaaS. Вы не получите большой пользы от этого раздела, но я все же напишу кое-что об этом для тех, кому интересно

Выбор Udemy в качестве основной платформы для обучения

Конечно, есть и другие платформы для обучения программированию, такие как Udacity, codeacademy, Udex, Coursera и многие другие.

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

  • Ценник

Курсы Udemy относительно дешевле по сравнению с другими премиальными курсами, такими как Udacity (платный курс может обойтись вам в тысячи долларов). Если вы просто хотите научиться программировать, а не после сертификата или персонализированного обзора, например, Udemy вполне достаточно.

  • Множество вариантов

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

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

Обзор курса: полный курс веб-разработки 2022 года — д-р Анджела Ю

Я большой поклонник доктора Анджелы Ю и даже создал приложение для IOS, следуя одному из ее курсов. Кроме того, учитывая, что Анджела является очень опытным инструктором, работающим лицом к лицу, она очень хорошо определяет, когда и где ученики склонны теряться, и даже оценивает, когда ученики чувствуют себя обескураженными. Именно поэтому, если вы начинаете с нуля, я рекомендую именно этот курс.

Точно так же этот курс также является одним из моих любимых начальных курсов для изучения веб-разработки, и я думаю, что он абсолютно необходим для начинающих. Я сам прошел курс не менее трех раз. Что касается продукта SaaS, который я создал, я бы сказал, что этот курс охватил 60 % того, что мне было нужно.

Уникальность ее преподавания заключается в том, что курс:

  • Базовый, но хороший охват концепций очень хорошо объяснен. Др. Ю хорошо известен тем, что хорошо объясняет понятия учащимся. Это отличный курс, если вы пытаетесь понять основные понятия, такие как интерфейс, что такое сервер, как они работают вместе и т. д. Анжела предоставит вам множество хороших примеров, чтобы убедиться, что у вас нет запомнить его, но в состоянии понять и связать понятия с реальным примером жизни.
  • Она прекрасно может предвидеть, что может вас смутить, и придумать отличный пример/аналогию, чтобы хорошо объяснить это. Это делает ее не только хорошим программистом, пишущим стильный код, но и лучшим учителем.
  • Дополнительныесоветы по сохранению мотивации и продуктивности. Ближе к концу каждого модуля будет показано короткое видео «Анжела, подбадривающая вас», которое научит вас тому, как сохранять мотивацию. Кроме того, у нее есть множество приемов и советов по повышению производительности, которыми она может поделиться (полезные инструменты и веб-сайты, шаблоны заметок, которые доказали свою эффективность в научных исследованиях и т. д.).
  • Быстро наблюдайте, как «результаты» вашего обучения окупаются за счет создания крутых проектов. Один из способов разочароваться — потратить много времени на обучение, но не увидеть результатов. Этот курс разработан таким образом, чтобы ваш прогресс хорошо отражался в построении проекта на этом пути. Например, этот курс очень быстро создаст и развернет ваш собственный веб-сайт с помощью Heroku на довольно раннем этапе курса (даже несмотря на то, что приложение очень простое в использовании), давая вам некоторое вознаграждение / отзыв, прежде чем вы начнете думать о том, чтобы сдаться. Учитывая, что Анжела имеет большой опыт проведения очных курсов в автономном режиме, она очень хорошо определяет, когда/если студенты разочаровываются.
  • Бонусный модуль подизайну приложений, маркетингу и поисковой оптимизации (SEO): Анджела не просто программист. У нее также есть замечательное деловое чутье, и она расскажет вам не только о коде, но и о том, как вывести приложение на рынок. Например, она научит вас дизайну (сочетание цветов, теория цвета, типографика и т. д.), как продвигать свое приложение с помощью таких инструментов, как поиск продукта и создание собственной аудитории, а также как проводить SEO и т. д. Лично я считаю, что это чрезвычайно интересно узнать, даже если вы не думаете о создании собственного продукта. Хорошо бы немного смешать вещи, чтобы сделать «кодирование» немного менее скучным.

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

Обзор курса: Учебный курс веб-разработчиков 2022 — Кольт Стил

Этот курс на самом деле чрезвычайно популярен на Udemy (действительно заслуженно), и это еще один курс, который я проходил несколько раз.

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

Что касается веб-сайта, который я создал, этот курс дал 70 % того, что мне нужно было знать.

Некоторые из уникальных аспектов этого курса

  • Большой охват полезных концепций в очень практической форме (не такой простой и важный, но вам, скорее всего, понадобится подавляющее большинство рассмотренных концепций, особенно если вы думаете о создании собственных веб-приложений).
  • Отличные примеры кодирования: по сравнению с курсом Анджелы вы быстро заметите, что этот курс намного более практический и практический, с гораздо большим количеством примеров кодирования (вместо объясняющие концепции и лежащие в их основе концепции / рациональные, например). Это одна из причин, почему, если вы новичок, я бы сначала прошел курс Анжелы, прежде чем проходить этот курс (если, конечно, позволяет время).
  • Курс имеет достаточный охват, который дает вам достаточно знаний, чтобы знать, с чего начать, избегая при этом слишком большого количества ненужных концепций. Что я обнаружил, так это то, что я часто начинал пересматривать определенный модуль курса Colt, прежде чем прыгать в документацию (например, MDN) и переполнение стека, просто чтобы знать, что я ищу и какие вопросы я должен задать.

Минусы:

Сам курс гигантский, и если у вас есть опыт программирования (например, Python), этот курс будет идеальным.

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

Это значительно снизит риск того, что вы бросите курить через несколько месяцев, что, как я видел, делают многие люди.

Начни подписываться на популярных инструкторов и обращай внимание на их уведомления и публикации

Я упомянул, что было бы чрезвычайно полезно следовать этим популярным инструкторам на раннем этапе, потому что программирование — это не сидение и обучение, а накопление знаний. И эти инструкторы часто делают свои уроки на основе требований/полезности.

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

Вы не знаете, чего не знаете, и не знаете, что реализовать, если не знаете, что можно реализовать.

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

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

  • Подписывайтесь на Traversy Media здесь:

Стиль Траверси прямо к делу и сосредоточен на том, чтобы «делать работу». Он сделал много видео, ускоренных курсов и практических руководств, выпущенных много лет назад. В нем содержится большое количество концепций, и если вы испытываете затруднения с реализацией определенной функциональности, вполне вероятно, что Traversy где-то рассмотрел ее.

По моей оценке, Traversy сэкономил мне как минимум 2 недели времени сборки, когда я следовал его руководствам вместо того, чтобы самому копаться в документации и пытаться найти ошибку (иногда вы услышите, как Traversy говорит: «Это заставило меня застрять на некоторое время». и я в конце концов понял это). Итак, спасибо, Traversy, что разобрались с ними, чтобы у меня их тоже не было.

Я не большой поклонник твиттера/повторного редактирования (хотя я считаю, что мне было бы полезно быть им), но если бы вы были им, я бы начал подписываться на людей раньше. Иногда я обнаруживал, что, когда я впервые слышу о концепции, я усваиваю только 30% ее, но я усваиваю 80% во второй раз и полностью усваиваю ее после повторного изучения. Здесь я хочу подчеркнуть, что вы можете быстро натолкнуться на концепцию и не запомнить большую часть контента, опубликованного преподавателями, но это нормально, потому что, когда вы сталкиваетесь с ней во второй раз, вы бы подумали: о, я слышали об этом, и это чувство прекрасно!

Наличие доступных ресурсов для промежуточных/продвинутых концепций или, по крайней мере, осведомленность об их существовании

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

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

Я включу несколько примеров того, что мне показалось полезным, включая реализацию функций, используемых в моем продукте SaaS, на приведенных ниже снимках экрана. Но помните, что функции, необходимые вашему проекту, могут сильно различаться. Вы даже можете использовать совершенно другой фреймворк (например, flask с использованием Python, если ваша основная функциональность — это анализ данных и машинное обучение), и в этом случае ваш список будет сильно отличаться от моего. Текстовая версия фотографии доступна на этой странице идей. (Обратите внимание, это повторяющийся контент из раздела выше)

Также стоит упомянуть, что если вы лучше учитесь, читая учебники, стоит проверить два приведенных ниже, хотя я не читал их подробно, потому что не считаю учебник хорошим ресурсом для обучения программированию.

  • Веб-разработка с помощью Node и Express: Использование стека JavaScript, Итан Браун, опубликовано O’Reilly.

  • JavaScript — «Полное руководство: освойте самый популярный в мире язык программирования» Дэвида Фланагана, опубликованное O’Reilly

Систематический план атаки для решения любых задач

Многие люди сказали бы вам, что программирование — это пошаговый подход к решению проблемы. Это то, что мы будем делать здесь.

Вот как я решил ошибки / новые концепции / проблемы / новые реализации функций, когда я создавал свой продукт SaaS.

  1. Чтобы повторно просмотреть материалы курса, если мне нужно освежить в памяти основные понятия и шаблоны кода.
  2. Если концепции совершенно новые и не охвачены ни одним из курсов, я сразу перехожу к w3school, который помогает мне быстро понять суть концепции с помощью краткого объяснения и простых примеров.
  3. Несмотря на то, что w3school — очень хорошее начало, я иногда обнаруживал, что оно не дает мне достаточно подробностей для моей реализации. Это когда я перехожу к документации MDN, которая содержит более подробную и полную документацию
  4. К этому времени я уже достаточно знал об этой проблеме, чтобы сформулировать свой вопрос для поиска переполнения стека или поиска Google. В этом случае 80% моих вопросов, если они правильно сформулированы после вышеуказанных шагов, будут решены с помощью страницы переполнения стека.
  5. В случае, если это не так, я бы провел больше исследований в Google и глубоко погрузился.

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

Это путешествие обучения, разочарования и удовлетворения от решения проблемы, а также постоянное убеждение себя закончить то, что я начал.

На самом деле я не новичок в кодировании.

По образованию я компьютерщик. У меня двойная степень в области финансов с математическими и информационными науками (по специальности информатика), и я получил степень магистра в области финансов, чтобы лучше разбираться в бизнесе. И после окончания учебы я присоединился к бухгалтерской фирме большой четверки в качестве консультанта.

Тем не менее, веб-разработка для меня совершенно нова, и в университете этому не учат, даже если вы занимаетесь информатикой.

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

Я зарегистрировал в общей сложности 650 часов (у меня есть привычка регистрировать свои продуктивные часы с помощью приложения для леса или Atracker, если я хочу быть более точным, когда я выключаю свой телефон и сосредотачиваюсь) с тех пор, как я написал свою первую строку веб-страницы. код разработки с декабря прошлого года. Иногда я хожу в библиотеку. Иногда я провожу несколько часов после работы в офисе, а в основном сижу перед своим столом в маленькой студии в Сиднее. Теперь снова Рождество, и я каким-то образом понял, что, о Боже, это много часов, которые я не проводил на улице, идя на пляж и наслаждаясь солнечным светом, или выходя на вечеринку в пятницу вечером (давайте посмотрим правде в глаза , это все равно не вариант, ха-ха), или даже просто расслабься.

Теперь, оглядываясь назад, я начал с работы над двумя курсами, о которых говорил снова и снова. Мне действительно очень понравилось изучать оба курса, потому что они были очень новыми, и я, наконец, узнал, как работает Интернет. Удивительно, что четыре года обучения в области информатики не научили меня этому.

Наконец-то я узнал, как работает сервер, как проектируется и создается веб-сайт, как запросы и ответы отправляются, принимаются, обрабатываются и как строится внутренняя логика. это было очень ново, но очень интересно для меня.

Именно после прохождения этих двух курсов я начал думать о создании собственного продукта «программное обеспечение как услуга», который здесь еще не закончен и не развернут. Это продукт, которым я действительно горжусь.

www.stla.tech/knowlery/home

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

Я полагаю, что ключевой идеей здесь является важность оставаться информативным, работать над курсами (даже если у вас еще нет четкой конечной цели, идея придет, когда вы будете работать над курсами, я обещаю) и слушать Ютуберы внедряют определенные функции, которые медленно, по мере того, как вы совершенствуетесь и узнаете больше, ваша идея начинает обретать форму.

То, что произошло потом, было довольно скучно. Я проектировал приложение, блок за блоком, снова и снова настраивал цвет и макет, начал с моей первой строки кода, прошел множество итераций и бесчисленных коммитов и, наконец, развернул его, чтобы оно было доступно для всех, кто заинтересован. Я видел, как продукт «взрослел» от самой первой строчки «сервер успешно запустился на порту 300» до того, как он выглядит сейчас (знаю, знаю, может для вас это некрасиво, но тем не менее, это мой малыш хаха)

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

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

Заключение

Вот как я создавал свой продукт «программное обеспечение как услуга» с нуля, от изучения моей первой строки кода веб-разработки через 650 часов до развернутого и полнофункционального продукта SaaS.

Я надеюсь, что ресурсы, которые помогли мне развить свои навыки, помогут и вам, особенно если вы только начинаете.

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

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

Наконец, я цитирую Алека Хардисона из Leverage: Age of Geek baby.