Веб разработка
Дорожная карта по веб-разработке
Общая информация
Все прикрепленные далее статьи и курсы только на русском языке и все бесплатно.
Необходимые общие знания и инструменты:
Git - Инструмент для отслеживания изменений в коде. Коротко о самом инструменте: https://thecode.media/git/. Источники для изучения:
программа, где вы будете писать код, для начала подойдут:
Если нравится максимально простой интерфейс https://notepad-plus-plus.org/downloads/
как работает интернет https://thecode.media/how-internet-works-1/
факультативно о безопасном интернете https://thecode.media/ssl/
о формате данных, который широко используется в веб-разработке https://thecode.media/json/
Существует 3 основных направления в веб-разработке:
Верстка - это создание с помощью кода внешнего вида сайта
Frontend программирование - подключение логики к сайту. Чуть подробнее - https://thecode.media/frontend/
Back-end программирование - обработка и сохранение различных данных уже на сервере. Чуть подробнее - https://thecode.media/backend/
План развития по каждому из направлений
У верстки и front-end программирования есть общие этапы:
1) HTML - язык разметки, инструмент, который позволяет создавать скелет внешнего вида сайта. Подробнее о том, что это такое: https://thecode.media/html/. CSS - язык стилей, который нужен для того, чтобы сделать страницу красивой. Т. е. устанавливать размер картинкам и тексту, изменять цвета и т. п.
Источники для изучения:
https://htmlacademy.ru/ - курсы по HTML в текстовом виде
https://stepik.org/course/38218/ - курсы по HTML в видео-формате
https://www.w3schools.com - справочник по HTML и не только (в правом верхнем углу можно выбрать русский язык)
Для тренировки и для наполнения портфолио делать свои сайты, используя макеты http://psd-html-css.ru/ . И так как сейчас большОе количество людей использует интернет в основном с телефона - нужно делать так, чтобы сайт хорошо выглядел не только на экране компьютера, но и на экране смартфона. Это называется адаптивной версткой.
Также здесь полезно почитать о том, как правильно структурировать разметку сайта: https://ru.bem.info/methodology/quick-start/ (достаточно раздела быстрый старт).
После освоения этих знаний можно искать работу по профилю верстка. Но если интересно добавлять на сайт какую-то логику - то смотрим пункты дальше.
2) JavaScript (сокращенно JS) - язык программирования, который используется для сайтов. Источники для изучения:
https://htmlacademy.ru/ - уже знакомый нам сайт, там также есть курсы по JS
https://learn.javascript.ru/ - учебник по JS с задачами после каждой статьи
https://www.youtube.com/watch?v=H6G63NKRSi8&list=PL363QX7S8MfSxcHzvkNEqMYbOyhLeWwem - плейлист по основам JS
https://github.com/azat-io/you-dont-know-js-ru/blob/master/up%20%26%20going/README.md#%D0%92%D1%8B-%D0%BD%D0%B5-%D0%B7%D0%BD%D0%B0%D0%B5%D1%82%D0%B5-js-%D0%9D%D0%B0%D1%87%D0%BD%D0%B8%D1%82%D0%B5-%D0%B8-%D0%A1%D0%BE%D0%B2%D0%B5%D1%80%D1%88%D0%B5%D0%BD%D1%81%D1%82%D0%B2%D1%83%D0%B9%D1%82%D0%B5%D1%81%D1%8C - книга для начинающих в программировании
3) Сборщики кода, например, Webpack - нужны для того, чтобы собирать код из многих файлов в один. Статья для ознакомления - https://medium.com/nuances-of-programming/%D0%B2%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5-%D0%B2-webpack-%D0%B4%D0%BB%D1%8F-%D0%BD%D0%BE%D0%B2%D0%B8%D1%87%D0%BA%D0%BE%D0%B2-6cafbf562386
4) Менеджер пакетов npm. Многие вещи в программировании написаны за нас, и вместо того, чтобы писать их заново - мы можем использовать уже написанные куски программ. Такие куски программ называются фреймворками и библиотеками. Подробнее - https://thecode.media/framelibs/.
5) Для того, чтобы писать сайты было быстрее и удобнее есть много различных фреймворков. Для начала советую выбирать Vue.js или React.js.
Для изучения Vue.js:
https://oz.by/books/more10814911.html - книга
https://ru.vuejs.org/v2/guide/index.html - официальный источник
Для изучения React.js:
https://ru.reactjs.org/docs/getting-started.html - официальный источник
Дополнительно
Если интересно делать back-end часть сайта - необходимо изучить пункты 2, 3 и 4. В дальнейшем изучении поможет https://thecode.media/node-js.
Факультативно рекомендую изучать основы программирования, для этого подойдут следующие источники:
Книга по изучению алгоритмов в программировании (без привязки к конкретному языку программирования) https://oz.by/books/more10569541.html
Видеокурс по основам программирования (он непростой, возможно стоит его отложить на второе полугодие изучения программирования, но даже если после первого просмотра будет много непонятного - это нормально) https://javarush.ru/quests/QUEST_HARVARD_CS50