Ниша веб-разработчик. Подробный гайд для маркетологов и программистов

На связи Михаэль. Сегодня я расскажу тебе как начать свой путь в веб-разработке и даже больше.

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

Веб-разработка для маркетолога

Здесь всё достаточно просто. Тебе для работы маркетологом нужна будет, по сути, лишь Tilda или Wix. Мой тебе совет - используй именно тильду, так как для неё больше всего обучающих материалов в интернете и она намного удобнее Wix.

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

Суммируя всё сказанное выше я даю тебе пошаговый план:

1. Изучи основы Tilda Берёшь любой гайд на ютубе и просто ознакамливаешься с интерфейсом и функциями.
2. Изучи основы веб-дизайна Тут изучи основы Figma, на таком же уровне, как ты изучил недавно тильду. Найти гайды можно так же в ютубе, курс я тебе тут снимать не буду, информации в интернете просто килотоннами.
   Затем углубляйся в дизайн. Обязательно нужно понимать следующие вещи:
   - Основы композиции
   - Основы колористики (Круг Иттена хотя бы, особо не заморачивайся)
   - Сочетание и подбор шрифтов
   - Создание макетов и гайдлайнов/гайдбуков к ним
3. Повысь свою насмотренность
   Открывай разные сайты в интернете, анализируй их с точки зрения дизайна, подмечай интересные вещи, запоминай. Референсы для своих работ, работы других дизайнеров и различные подборки для повышения насмотренности можно найти на таких сайтах как:
   - behance.net - можно найти примеры работ/референсы/подборки шрифтов и цветов
   - pinterest.com - можно найти подборки цветов и шрифтов, а иногда и примеры работ
   - color.adobe.com - можно найти подборки цветов
   - colorhunt.co - можно найти подборки цветов
4. Практикуйся Совмести все свои знания дизайна в фигме и создания сайтов в тильде. Возьми себе бесплатный проект/придумай себе идею вымышленного проекта и сделай для него дизайн в фигме, а в тильде сделай сайт основываясь на макетах фигмы

Приватный способ повышения насмотренности и хранения идей:

Поздравляю! Теперь ты можешь делать сайты, которые уже можно и продать на неплохой чек

Веб-разработка для программиста

Сначала мы разберём Front-end, а потом и Back-end

Роадмап для Front-end разработчика:

1. Ознакомься с базисом веб-теории:
   Нужно узнать это:
   - Как в целом работает интернет?
   - Что такое доменное имя?
   - Что такое хостинг?
   - Что такое HTTP/HTTPS?
   - Что такое DNS?
   - Как браузер рисует тебе страничку сайта из кода? (там очень много всего, долго здесь не топчись, просто узнай как это примерно работает)
2. Изучи основы HTML и CSS, а затем немного попрактикуйся
   Используй следующие ресурсы:
   - developer.mozilla.org/ru/docs/Web/HTML
   - developer.mozilla.org/ru/docs/Web/CSS
   - w3schools.com/html/default.asp
   - w3schools.com/css/default.asp
   - doka.guide/html/
   - doka.guide/css/
3. Изучи основы JS и попробуй добавить логику на твой проект, который ты делал ранее для практики
   Используй следующие ресурсы:
   - learn.javascript.ru/
   - doka.guide/js/
   - developer.mozilla.org/ru/docs/Web/JavaScript
4. Ознакомься с Node.js
   Используй следующие ресурсы:
   - metanit.com/web/nodejs/ - только первые четыре главы
5. Изучи основы TypeScript
   Используй https://metanit.com/web/typescript/
6. Выбери и изучи фреймворк (У нас будет React.js), а затем немного попрактиуйся
   Для изучения React.js ты можешь посмотреть любой краткий курс на ютубе (он длится пару часов) и ознакомиться с реактом, а затем глубоко изучить его уже в документации - https://react.dev/learn
7. Выбери сборщик и изучи на уровне базовой базы. Мы остановимся на Vite
   Для изучения Vite просто используй официальную доку, тут ничего сложного нет - https://vite.dev/guide/
8. Изучи любой стейт-менеджер (У нас будет Redux и Zustand):
   - Изучи базовый стейт-мененджмент в реакте - https://react.dev/learn/state-a-components-memory
   - Изучи Zustand (для маленьких и средних проектов) по документации - https://zustand.docs.pmnd.rs/guides/typescript, так же можешь посмотреть сжатый курс на ютубе
   - Изучи Redux (для адекватных проектов) по документации - https://redux.js.org/introduction/getting-started, так же можешь посмотреть сжатый курс на ютубе
9. По желанию можешь изучить фреймворки, которые используют React.js, библиотеки для стилей на основе CSS и SSR
   
   Фреймворки с основой на React.js, коннектом с ним или с SSR:
   - Preact.js - https://preactjs.com/guide/v10/tutorial/
   - Astro.js - https://docs.astro.build/en/getting-started/ (СОВЕТУЮ)
   - Next.js - https://nextjs.org/docs (СОВЕТУЮ)
   
   Библиотеки/фреймворки для стилей на основе CSS:
   - SASS - https://sass-lang.com/documentation/
   - SCSS - https://sass-lang.com/documentation/syntax/#caps (СОВЕТУЮ)
   - TailwindCSS - https://v2.tailwindcss.com/docs (СОВЕТУЮ)

Роадмап для Back-end разработчика:

1. Изучи Nodejs
   Используй metanit.com/web/nodejs/
2. Изучи TypeScript
   Это тотальная база. Используй https://metanit.com/web/typescript/
3. Изучи основы Nest.js
   Можешь использовать документацию - https://docs.nestjs.com/
4. Изучи основы Docker
   Сейчас наша задача - научиться билдить проекты и поднимать базы. Советую тебе курс от Гоши Дударя на ютубе по докеру (Я знаю, что его хейтят многие, но мы сейчас не ракету для запуска в космос в контейнер помещаем и билдим, а лишь монгу и постгрес поднять локально пытаемся, поэтому нам Гоши с головой хватит)
5. Изучи основную информацию про базы данных
   Ты должен понимать следующие вещи:
   - Что такое база данных?
   - В чём отличие реляционной и нереляционной базы данных?
   - Что такое СУБД?
   - Что такое ORM?
6. Изучи ORM для твоей базы данных и попрактикуйся в создании API с БД
   Для Postgresql/Mysql и других реляционок - возьми TypeORM - https://typeorm.io/ и https://docs-nestjs-com-seven.vercel.app/techniques/database
   Для Mongodb бери Mongoose - https://mongoosejs.com/docs/index.html и https://docs.nestjs.com/techniques/mongodb
7. Изучи информацию про Аунтификацию
   Ты должен понимать следующие вещи:
   - Что такое Token Authentication?
   - Что такое Cookie-Based Authentication?
   - Что такое JWT?
   - Что такое OAuth?
8. Изучи информацию про API в целом
   Ты должен понимать следующие вещи:
   - Что такое Rest API?
   - Что такое JSON API?
   - Что такое SOAP?
   - Что такое GraphQL?
9. Изучи информацию про кеширование
   Ты должен понимать следующие вещи:
   - Что такое кеширование и для чего оно нужно?
   - Что такое CDN?
   - В чём отличие Client side от Sever side кеширования?
   Для кеширования в Nest.js изучи этот раздел документации - https://docs-nestjs.netlify.app/techniques/caching
10. Изучи вопросы безопасности
    Ты должен понимать следующие вещи:
    - Что такое MD5?
    - Что такое SHA?
    - Что такое Scrypt и Bcrypt?
    - Что такое HTTPS?
    - Что такое CORS?
    - Что такое CSP?
    - Что такое OWASP?
    - Что такое SSL/TSL?
    Для многих тем из этого списка есть отдельные статьи в документации Nest.js
11. Болье информации про базы данных
    Ты должен понимать следующие вещи:
    - Что такое ACID?
    - Что такое transactions в БД?
    - Что такое N+1 problem?
    - Что такое normalization для бд?
    - Что такое Profiling Performance?

Для более детального обучения так же можешь воспользоваться роадмапами из интернета. Приведу парочку из них:

• https://roadmap.sh/
• https://github.com/CIS-Team/Front-End-Roadmap-2024
• https://github.com/bzick/oh-my-backend

Наконец-то ты стал веб-разработчиком на уровне джуна, по крайней мере