Как стать фулл-стек веб-разработчиком

IT-блогер Conner Ardman рассказал, что нужно учить, чтобы стать фулл-стек феб-разработчиком в 2024 году.

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

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

Затем следует изучение основ JavaScript и манипуляции DOM для добавления интерактивности. После этого предлагается создать проект с интерактивностью, что позволит оттачивать навыки отладки и использования различных инструментов. Далее докладчик предлагает углубить знания в HTML, CSS и изучить основы бэкэнд-разработки, включая работу с сервером, базами данных, а также изучение Git и GitHub.

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

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

Вот, о чём идёт речь в видео:

1. Изучение программирования сложно, большинство начинающих терпят неудачу, особенно в веб-разработке из-за избытка информации.
2. Автор предлагает пошаговый подход к изучению веб-разработки без теоретических отступлений и множества возможных направлений.
   
3. Первым шагом является изучение HTML для определения содержания и структуры веб-сайта.
   
4. После HTML следует изучение CSS для добавления стилей и макета страницы.
   
5. Важно активно практиковаться, создавая проекты, например, портфолио или резюме, и использовать инструменты разработчика для тестирования CSS.
   
6. Следующий шаг - изучение JavaScript для добавления интерактивности на веб-сайты, начиная с основ языка и манипуляции с DOM.
   
7. После освоения JavaScript рекомендуется создать проект, например, игру в браузере, и практиковать отладку и поиск решений проблем в интернете.
   
8. Повторный взгляд на HTML и CSS: изучение доступности, адаптивного дизайна, анимаций, CSS-фреймворков и препроцессоров.
   
9. Переход к изучению серверной части с использованием Node.js и Express, а также основ работы с терминалом, Git и GitHub.
   
10. Изучение баз данных, включая SQL и NoSQL, начиная с MySQL и MongoDB.
    
11. Создание полноценного проекта с бэкендом и базой данных, добавление уникальных особенностей для резюме.
    
12. После основ начинается изучение фреймворков и библиотек, таких как React, для упрощения разработки.
    
13. Проект с использованием React и изучение TypeScript для строгой типизации в больших кодовых базах.
    
14. Основы компьютерных сетей, включая IP-адреса, HTTP/HTTPS и DNS.
    
15. Основы облачных вычислений и развертывания веб-приложений в облаке с использованием AWS и EC2.
    
16. Изучение Docker и контейнеров для обеспечения изоляции и одинаковой среды выполнения кода.
    
17. Основы безопасности веб-разработки, включая защиту от SQL-инъекций, межсайтовой подделки запросов и скриптинга.
    
18. Использование Next.js и серверной отрисовки для повышения производительности и индексации в поисковых системах.
    
19. Автор советует глубже изучать интересующие темы и избегать менее важных, но при этом следовать правильному подходу к обучению.
    

Ниже — транскрибированный перевод видео на русский язык.

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

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

Основы HTML и CSS

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

Сейчас вам не нужно слишком углубляться. Цель - просто уметь взять простой текст и преобразовать его в базовый HTML-документ. И после HTML пришло время изучить основы CSS или каскадные таблицы стилей. Это то, как мы добавляем стиль и макет на страницу. По сути, как мы берем наше содержание и придаем ему жизнь, добавляем цвета, макет и описываем, как оно должно выглядеть.

И после того, как вы изучите немного CSS, пришло время немного отдохнуть и попробовать поработать над своим первым проектом. Я крайний сторонник идеи, что вам нужно активно учиться. Поэтому не просто проходите кучу учебных пособий. Убедитесь, что вы делаете что-то, чтобы постоянно учиться и проверять свои знания. Если вам нужна идея, то можете сделать портфолио для себя или что-то вроде страницы "Обо мне" или резюме, используя HTML и CSS. Это также отличное время, чтобы научиться использовать инструменты разработчика, с которыми вы станете очень хорошо знакомы со временем.

Изучите JavaScript

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

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

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

И работая над этим проектом, вы, вероятно, обнаружите, что это самое сложное, что вы делали до сих пор, но это на самом деле хорошо. Это даст вам больше возможностей практиковать новые навыки отладки. Изучите, как использовать JavaScript с инструментами разработчика, а также научитесь искать проблемы с JavaScript в Google и на Stack Overflow. И я также рекомендую попробовать использовать ChatGPT, когда у вас возникают проблемы.

Теперь, не просто копируйте код с Stack Overflow или GPT или откуда-то еще. Используйте их как инструменты, чтобы научиться делать вещи. Но попробуйте начать включать их в свой рабочий процесс. Хорошо, теперь у вас есть этот невероятный веб-сайт с интерактивностью, но пришло время немного улучшить свои навыки и вернуться к некоторым вещам, которые мы ранее пропустили. 

На что сделать упор в HTML и CSS

С HTML я бы сосредоточился на том, как писать доступный HTML. А с CSS я бы сосредоточился на адаптивном дизайне. И если вас особенно интересует CSS, вы можете учить такие вещи, как переходы и анимации, систему сетки и как писать более сложные селекторы, такие как псевдоклассы и псевдоэлементы. Вы также можете использовать это время, чтобы изучить некоторые CSS-фреймворки, такие как Bootstrap и Tailwind, которые по сути являются предварительно написанным CSS для вас, или вы можете изучить некоторые препроцессоры, такие как SAS или less, которые добавляют некоторые интересные функции в CSS.

И чтобы быть ясным, я не думаю, что вам нужно это делать. Я просто хотел упомянуть об этом на случай, если вас особенно интересует CSS. И теперь вы должны быть довольно комфортны на фронт-энде, и пришло время начать работать с бэк-эндом. Так что на этом этапе я бы сначала научился делать запрос к серверу с фронт-энда. Так что с помощью JavaScript, как использовать fetch и как писать асинхронный код.

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

Терминал и GitHub

И еще одна конкретная вещь, которую нужно изучить с терминалом, это как использовать Git и GitHub. Git - это просто система контроля версий. Она просто отслеживает все ваши изменения, как история Google Docs, но только для кодирования.

И GitHub - это просто веб-сайт для загрузки вашего репозитория Git, таким образом, вы можете поделиться им с другими людьми. И теперь, чтобы начать писать некоторый бэк-энд код, я бы порекомендовал вам изучить Node.js с Express. Причина, по которой я говорю это, заключается в том, что Node.js позволяет вам использовать JavaScript на бэк-энде, так что вам не нужно изучать целый новый язык программирования, просто несколько новых функций для JavaScript. И с Node вам также нужно изучить NPM или менеджер пакетов node, который просто позволяет вам интегрировать открытый исходный код в ваши собственные проекты.

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

Базы данных и SQL

И для этого вам нужно изучить немного о базах данных. Существует два основных типа баз данных, и я бы изучил немного обоих. Так что у нас есть SQL-базы данных и NoSQL-базы данных. SQL или SQL - это реляционная база данных.

Так что это позволяет вам в основном иметь множество различных таблиц и как-то связывать их между собой. И существует множество вариантов SQL. Большинство из них очень похожи друг на друга, но MySQL, вероятно, хорошее место для начала, но не стесняйтесь использовать тот, который вам больше нравится. А NoSQL-база данных - это просто любой другой тип базы данных. Так что это может быть хранилище документов или некоторая система пар ключ-значение.

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

Так что если это то, что вы хотите делать, попробуйте добавить какой-то уникальный поворот к любому вашему проекту, чтобы он немного выделялся. И на этом этапе вы можете сказать: где фреймворки и библиотеки? Где модные слова, такие как React и Vue и Angular? И сейчас пришло время, я думаю, начать их изучать. И ключевой момент, который здесь следует отметить, заключается в том, что мы долго ждали, чтобы их изучать.

Фреймворки и библиотеки

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

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

Изучите TypeScript

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

Это действительно будет очень важно в будущем. Просто изучите основы того, что происходит, когда вы вводите URL в свой браузер. Если вы можете ответить на этот вопрос, вы, вероятно, хорошо разбираетесь в компьютерных сетях, если только вас это не интересует и вы хотите углубиться. И конкретно это означает, что вам нужно понять такие вещи, как IP-адреса, HTTP и HTTPS, и систему DNS. И я создавал эти веб-сайты, но мы знаем только, как запускать их с нашего собственного компьютера. Поэтому пришло время изучить немного об облачных вычислениях, потому что что бы произошло, если бы в моем доме отключили свет?

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

Облачные вычисления

Облачные вычисления просто позволяют вам запускать свой код на компьютерах кого-то другого. Крупнейшие поставщики облачных вычислений будут Amazon с AWS, Google с GCP и Microsoft с Azure. Я бы порекомендовал начать с AWS, просто потому что это самый популярный, но любой из них подойдет.

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

Docker и контейнеры

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

Таким образом, убедитесь, что мы используем HTTPS и что мы шифруем пользовательские данные, такие как пароли. И теперь вы создаете эти невероятные веб-сайты, но вам нужно убедиться, что они действительно производительны и что они высоко ранжируются в поиске на Google. Хороший способ сделать это - использовать Next.js и более обще изучить серверный рендеринг. Это позволяет вам рендерить некоторые компоненты с серверной стороны и отправлять их обратно, как сырой HTML на фронт-энд.

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