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

Инструменты, языки и фреймворки

Когда дело доходит до веб-разработки, можно использовать три основных языка: HTML, CSS и Javascript. HTML означает язык разметки гипертекста. HTML позволяет пользователю создавать документы для отображения в Интернете. CSS означает каскадные таблицы стилей. CSS — это язык, который используется для стилизации веб-сайта: цветов, размещения и многого другого. Javascript (иногда называемый JS) — это язык программирования, который позволяет сделать веб-страницу интерактивной. Например, то, что происходит, когда вы нажимаете кнопку, контролируется Javascript.

Фреймворк — это часть предварительно созданного программного обеспечения, которое может быть написано на Javascript, но не обязательно, и которое улучшает вашу веб-страницу и упрощает разработку внешнего интерфейса. Фреймворк внешнего интерфейса управляет пользовательским интерфейсом (то, что видит пользователь). Три основные среды веб-разработки для веб-интерфейса — это Vue, Angular и React JS. Самый популярный интерфейс и лучший фреймворк (на мой взгляд) — React JS. React JS стал самым популярным интерфейсным фреймворком в 2020 году, потому что он чрезвычайно настраиваемый, легкий и мощный. Некоторые веб-сайты, использующие React JS, включают Instagram, Netflix, Facebook, Uber, и этот список можно продолжить. Бэкэнд-фреймворк — это то, что упрощает создание сервера. Бэкэнд-фреймворки, которые будут включены в этот план, являются одними из самых популярных: Node.js, Express.js, GraphQL и другие.

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

1-й месяц

Первый месяц посвящен изучению основ и привыканию к программированию и инструментам разработчика. Вы погрузитесь в CSS, HTML, Javascript и немного в React, Node и Express. Я бы рекомендовал использовать VSCode в качестве редактора кода (где вы пишете код) и немного изучить Git и Github (контроль версий и место, где разработчики делятся кодом). Я рекомендую как бесплатные, так и платные курсы. Когда я начал веб-разработку, я выбрал платный курс и многому научился на нем, но если у вас ограниченный бюджет, то бесплатные курсы вполне подойдут.

Курс(ы):

Бесплатно:

Платно: https://www.udemy.com/course/the-complete-web-developer-zero-to-mastery/

2-й месяц

Второй месяц — это когда вы начинаете делать проекты самостоятельно и начинаете знакомиться с инструментами разработчика, языками и фреймворками. Я бы порекомендовал выбрать один из этих проектов для самостоятельного выполнения в React: калькулятор, приложение погоды, генератор случайных цитат или система голосования. Если вы застряли, StackOverFlow — отличное сообщество, где разработчики помогают другим разработчикам решать их проблемы. После создания некоторых базовых проектов React я бы порекомендовал изучить структуры данных и алгоритмы. Это может быть сложно и больше основано на теории, но я обещаю, что оно того стоит. Структуры данных и алгоритмы будут иметь важное значение в любой области веб-разработки, которую вы выберете. Я бы рекомендовал этот курс: https://youtu.be/t2CEgPsws3U. После изучения структур данных и алгоритмов я рекомендую вам создать структуру данных или визуализатор алгоритмов в React. Некоторые идеи включают визуализатор сортировки, визуализатор поиска пути или визуализатор двоичного дерева. Это укрепит ваши знания о структуре данных или алгоритме, которые вы выбираете для своего проекта. Поделитесь этим проектом на Github. Если вы еще не знаете, что такое Git или Github, рекомендую этот мини-курс: https://youtu.be/DVRQoVRzMIY.

3-й месяц

Этот месяц посвящен освоению основ и переходу к промежуточным и продвинутым темам. Я бы порекомендовал создать приложение для чата в реальном времени самостоятельно, используя React и Firebase. Обязательно используйте React Hooks и последние стандарты React (например, функциональные компоненты). После этого я бы порекомендовал изучить Typescript. Typescript добавляет типы в Javascript. Это необязательно, но, скорее всего, вы будете использовать его в своей будущей работе и на рабочем месте. Большинство людей предпочитают Typescript для больших проектов, потому что Typescript гораздо более масштабируем и безопасен, чем Javascript. Я бы порекомендовал прочитать документацию по Typescript, потому что к настоящему времени вы являетесь разработчиком среднего уровня и должны научиться эффективно читать документацию. После этого я бы рекомендовал посмотреть этот туториал о том, как реализовать Typescript в React: https://www.youtube.com/watch?v=Z5iWr6Srsj8. Чтобы закончить месяц, я бы рекомендовал этот учебник: https://youtu.be/Fy9SdZLBTOo, но сделать это в Typescript.

4-й месяц

В порядке. Вы уже серьезный разработчик, вы потратили 3 месяца на изучение веб-разработки. Я бы порекомендовал этот курс для самого сложного проекта, который вы когда-либо делали (еще раз, попробуйте сделать это на Typescript): https://youtu.be/7qAXvOFhlDc. После этого я бы порекомендовал сделать блог-сайт (может быть, даже клон Medium), используя стек PERN+Typescript, который вы изучили в предыдущем уроке. После того, как вы закончите свой блог, я бы предпочел изучить GraphQL. Подобно тому, как вы изучали Typescript, прочтите документацию по GraphQL, чтобы изучить его. После изучения основ GraphQL научитесь создавать с его помощью REST API. Вы можете сделать любой проект с полным стеком, какой пожелаете. Чтобы закончить этот месяц, решите несколько забавных задачек по программированию на LeetCode. Эти задачи улучшат ваши навыки работы со структурами данных и алгоритмами и доставят вам немного удовольствия при решении задач!

5-й месяц

Вы почти закончили с 6-месячным планом. Время освоить связь между интерфейсом, серверной частью и базой данных. Этот учебник подводит итог тому, что вы уже узнали, используя GraphQL, Typescript, Postgresql, React, Express, и учит вас некоторым новым фреймворкам/инструментам. Этот учебник можно найти здесь: https://youtu.be/I6ypD7qv3Z8. Во время выполнения этого урока и до конца месяца старайтесь решать 1 или 2 простые/средние задачи на Leetcode в день. После завершения обучения добавьте дополнительные функции, такие как страницы пользователей, комментарии, хэштеги / теги, будьте изобретательны! Если у вас есть еще немного времени, я призываю вас еще немного поработать над проектом Reddit Clone.

6-й месяц

Это последний месяц, почти! Вы сделали много впечатляющих проектов. Просмотрите Github и найдите несколько проектов, которые вас заинтересуют (например, VSCode). Чтобы получить некоторый опыт работы с открытым исходным кодом, добавьте новые функции в свои любимые проекты. Вклад в открытый исходный код — отличный способ разрабатывать продукты вместе с другими разработчиками и работать над поиском решений реальных проблем. Поскольку проекты с открытым исходным кодом должны поддерживать определенное качество кода, вклад в них также поможет вашему коду стать более масштабируемым, пригодным для повторного использования и понятным. В качестве бонуса создайте полное портфолио, демонстрирующее удивительные проекты, которые вы уже создали.

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

Генри

Визуальное резюме:

Гитхаб: https://github.com/henryboisdequin