Если вы новичок в веб-разработке и думаете о том, чтобы глубоко погрузиться в веб-разработку, то вы попали в нужное место. Я чертовски уверен, что в конце этой статьи у вас будет четкое представление о Где начать, Что учиться, и как учиться.
⚠ Если у вас уже есть опыт веб-разработки, я рекомендую вам посетить roadmap.sh. Он содержит подробный анализ стеков, чтобы стать веб-разработчиком. Также вы можете прочитать о моей Истории перехода на должность старшего специалиста по безопасности.
Прежде чем углубляться в то, где и как, давайте разберемся ЧТО?
Что такое интерфейс? Что такое Backend? Что такое полный стек? Как они связаны? Найдите ответы на все свои вопросы здесь.
Надеюсь, теперь вы понимаете, Что такое веб-разработка. Давайте разберемся, с чего мы можем с этим начать.
Вкратце, чтобы стать разработчиком полного цикла Javascript, вам необходимо выполнять эти задачи в определенной последовательности. Я подробно расскажу об этом в этой статье.
шаг 1: изучение HTML
шаг 2: изучение CSS
шаг 3: изучение CSS Framework ( например: Bootstrap, Tailwind и т. д. )
шаг 4: изучить JavaScript
шаг 5: изучить nodejs / expressjs (или, Hapi, KoaJs, fastify, NestJs и т. д.)
шаг 6: изучить sql / nosql (mongodb , PostgreSQL и т. Д.)
шаг 7: изучите react / vue / angular
шаг 8: вернитесь к шагу 4
🏆 Поздравляю, теперь вы - full-stack разработчик.
Теперь позвольте мне начать по очереди обсуждать, что и откуда вам нужно научиться, чтобы начать работу в этих технических областях. Кто-то может возразить, почему сначала не React / Vue / Angular, а затем Node / Express. Мое мнение: вы можете это сделать, но поскольку все эти интерфейсные фреймворки / библиотеки зависят от диспетчера пакетов, почему бы сначала не изучить Node.
HTML - ›CSS -› СТРУКТУРА CSS (например: Bootstrap, Tailwind)
HTML: язык гипертекстовой разметки - это стандартный язык разметки для документов, предназначенных для отображения в веб-браузере.
Должен знать темы: что такое HTML? Анатомия HTML-тега, Структура HTML-документа, Основные HTML-теги, HTML-форма.
CSS: каскадные таблицы стилей - это язык таблиц стилей, который объясняет представление документа, написанного на языке разметки, таком как HTML.
Темы, которые необходимо знать: что такое CSS? Анатомия CSS, селекторы CSS (элемент, класс и идентификатор), комбинирование селекторов, псевдоселекторы, специфичность CSS (разрешение конфликтов), блочная модель и макет, CSS-сетка, CSS Flexbox, относительное и абсолютное позиционирование элементов, блочная модель, медиа-запросы ( Адаптивный дизайн с использованием CSS).
Фреймворк CSS. Это фреймворк CSS, упрощающий процесс проектирования. Это бесплатные CSS-фреймворки с открытым исходным кодом, предназначенные для гибкой интерфейсной веб-разработки, ориентированной на мобильные устройства. Он содержит шаблоны дизайна на основе CSS и JavaScript для типографики, форм, кнопок, навигации и других компонентов интерфейса. Например: https://getbootstrap.com/, https://tailwindcss.com/
JAVASCRIPT
Его часто называют JS, это язык программирования, соответствующий спецификации ECMAScript. Это высокоуровневый, часто скомпилированный вовремя и мультипарадигмальный. Он имеет синтаксис фигурных скобок, динамическую типизацию, объектную ориентацию на основе прототипов и первоклассные функции.
В JavaScript есть чему поучиться, поэтому вместо того, чтобы упоминать темы, я порекомендую вам курсы, которым вы можете следовать и освоить. Вы можете посетить веб-сайт javascript.info для получения подробной и хорошей документации по JavaScript.
Курсы, которым вы можете следовать, чтобы начать работу с HTML, CSS и JS.
HTML, CSS и JavaScript для веб-разработчиков:
Это один из замечательных курсов, доступных для начала веб-разработки. Здесь вы познакомитесь с HTML, CSS, Bootstrap, JavaScript и AJAX. Вы можете подать заявку на финансовую помощь или просто пройти аудит курса.
OR
Учебный курс для веб-разработчиков:
Здесь я предлагаю вам завершить до РАЗДЕЛА 20 (Проект списков дел).
После того, как вы закончите вышеуказанный курс, самое время погрузиться в подробности и узнать все о JavaScript и его архитектуре .
Учебный курс современного JavaScript
Совершенный и полный курс, который поможет вам понять каждый нюанс и уголок JS. Этот курс представляет собой идеальную комбинацию проектного обучения, а также более глубокое понимание того, почему и как JavaScript.
OR
вы можете обратиться к этому видео и списку воспроизведения, чтобы начать работу с JS. [БЕСПЛАТНО]
Кроме того, есть один постоянный курс от Акшая Шайни, который обсуждает архитектуру и основы JavaScript. [Namaste Javascript]
Необязательно: (Сейчас хорошее время пересмотреть все, что вы узнали.) Я порекомендую вам посетить freecodecamp и завершить проекты Сертификации адаптивного веб-дизайна получить сертификат; Если вы чувствуете, что застряли, вы обязательно можете просмотреть предоставленное там руководство.
Как только вы закончите с этим, теперь самое время погрузиться в структуру / библиотеку.
УЗЕЛ - › ЭКСПРЕСС -› МОНГО-ДБ
Для Backend я порекомендую один курс. Кроме того, вы можете подробно изучить каждую тему, следуя отдельному руководству для каждой.
Node.js, Express, MongoDB и другие: полный учебный курс 2021 года
Это курс с самым высоким рейтингом на Udemy. Этот курс прекрасно охватывает все основы Backend, включая NodeJS, Express JS, Mongo и Mongoose, а также модульное тестирование.
вы можете обратиться к этим видео и плейлистам, чтобы начать работу с Node.JS [БЕСПЛАТНО]
ФРОНТЕНДНАЯ БИБЛИОТЕКА / РАМКА (например: React, Vue, Angular):
Я, конечно, дам ссылки, которые мне показались забавными. Я, как разработчик стека MEAN, сам прошел курсы Angular и React, а по Vue я узнал мнения своих друзей, работающих с Vue.
Примечание. Какой интерфейс / библиотеку выбрать?
Учитывая текущий рыночный сценарий, React - лучший выбор, но в то же время Vue JS медленно растет и, как ожидается, полностью превзойдет React. Раньше Angular был на вершине, больше нет. Однако не имеет значения, какой фреймворк вы знаете, как только вы освоитесь с какой-либо библиотекой или фреймворком, вы можете легко выбрать и другие. Для более подробного анализа того, что выбрать, вы можете выполнить поиск и найти множество полезных статей. Основное различие между разными стеками можно найти здесь. И если вы просто хотите узнать индивидуально, что они из себя представляют, что можно увидеть здесь.
УГЛОВОЙ
Angular - Полное руководство (издание 2020 г.):
Это один из самых всеобъемлющих курсов по angular. На самом деле иногда бывает слишком много деталей, но лучше перестраховаться.
Or,
вы можете следовать this, чтобы быстро начать работу с Angular. [БЕСПЛАТНО]
Учебник по Angular для начинающих
Vue JS
Полное руководство (включая Vue Router и Vuex):
Будучи одним из самых высоко оцененных курсов по Удеми, которые преподает Максимилиан Шварцмюллер, я, несомненно, могу сказать: Давай. Он один из ЛУЧШИХ инструкторов в индустрии высоких технологий.
OR
вы можете обратиться к этим видео и плейлистам, чтобы начать работу с VueJs. [БЕСПЛАТНО]
or,
React JS
OR
вы можете обратиться к этим видео и плейлистам, чтобы начать работу с ReactJs. [БЕСПЛАТНО]
or,
Какую бы интерфейсную библиотеку / фреймворк вы ни выбрали и завершили курс, а затем начните создавать проекты на основе этого.
Предложение IDE: https://code.visualstudio.com/
Если вы хотите изучить больше и найти еще несколько относительных руководств. Вы можете перейти по этой ссылке.
Поздравляем, теперь вы готовы погрузиться в разработку и стать полнофункциональным JavaScript-разработчиком.
Хочу узнать о моем путешествии. Прочтите это здесь:
История перехода на старшую роль СЭ
Вы можете найти меня в LinkedIn !!!
Обратная связь приветствуется !!!
