Веб разработка

Дорожная карта по веб-разработке

Общая информация

Все прикрепленные далее статьи и курсы только на русском языке и все бесплатно.

Необходимые общие знания и инструменты:

Существует 3 основных направления в веб-разработке:

  • Верстка - это создание с помощью кода внешнего вида сайта

  • Frontend программирование - подключение логики к сайту. Чуть подробнее - https://thecode.media/frontend/

  • Back-end программирование - обработка и сохранение различных данных уже на сервере. Чуть подробнее - https://thecode.media/backend/

План развития по каждому из направлений

У верстки и front-end программирования есть общие этапы:

1) HTML - язык разметки, инструмент, который позволяет создавать скелет внешнего вида сайта. Подробнее о том, что это такое: https://thecode.media/html/. CSS - язык стилей, который нужен для того, чтобы сделать страницу красивой. Т. е. устанавливать размер картинкам и тексту, изменять цвета и т. п.
Источники для изучения:

    1. https://htmlacademy.ru/ - курсы по HTML в текстовом виде

    2. https://stepik.org/course/38218/ - курсы по HTML в видео-формате

    3. https://www.w3schools.com - справочник по HTML и не только (в правом верхнем углу можно выбрать русский язык)

Для тренировки и для наполнения портфолио делать свои сайты, используя макеты http://psd-html-css.ru/ . И так как сейчас большОе количество людей использует интернет в основном с телефона - нужно делать так, чтобы сайт хорошо выглядел не только на экране компьютера, но и на экране смартфона. Это называется адаптивной версткой.
Также здесь полезно почитать о том, как правильно структурировать разметку сайта: https://ru.bem.info/methodology/quick-start/ (достаточно раздела быстрый старт).
После освоения этих знаний можно искать работу по профилю верстка. Но если интересно добавлять на сайт какую-то логику - то смотрим пункты дальше.

2) JavaScript (сокращенно JS) - язык программирования, который используется для сайтов. Источники для изучения:

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