Хотите стать веб-разработчиком и создавать сайты, но не знаете с чего начать? Заходите – расскажем. Обсудить

Практически каждый человек, гуляя по просторам интернета, хотя бы раз в жизни мечтал о собственном сайте – блоге, портфолио с примерами работ или же сайте для стартапа/бизнеса.

Веб-разработка сейчас – невероятно востребованная специальность. С активным развитием цифрового мира спрос на веб-разработчиков растет.

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

Как работает интернет

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

Интернет – это большая сеть компьютеров, которые могут общаться друг с другом. Мы можем получить доступ к ресурсам, которые на них хранятся. Для этого нужно открыть браузер и ввести правильный URL-адрес.

Что почитать о клиентах и серверах:

• Клиент-серверная архитектура в картинках
• О модели взаимодействия клиент-сервер простыми словами

Хорошая новость для новичков – хостинг (размещение в интернете) сайтов сегодня стал очень простым делом. Вам не нужно собственноручно настраивать сервер и привязывать к нему домен – все это сделает провайдер. Кроме того существует много сервисов, на которых можно разместить свой сайт бесплатно, например, GitHub Pages или Netlify.

Три типа веб-разработчиков

Создание сайта – комплексный процесс, состоящий обычно из нескольких стадий. Он начинается с дизайна и создания макета, определяющего, как сайт будет выглядеть. Затем картинку нужно перевести в код – адаптивно сверстать, разработать пользовательский интерфейс, добавить функциональные возможности. И наконец, нужно написать серверный код и развернуть сайт на сервере.

Обычно этими задачами занимаются разные люди:

1. Фронтенд-разработчики (Front-end) отвечают за пользовательский интерфейс, вид сайта в браузере и его адаптивность на разных устройствах.
2. Бэкенд-разработчики (Back-end) занимаются серверной частью проекта, обрабатывают клиентские запросы, взаимодействуют с базами данных.
3. Фуллстек-разработчики (Full Stack), или разработчики полного стека, обладают и фронтенд- и бэкенд-навыками.

Что почитать о фронтенде и бэкенде:

• Простыми словами: бэкенд, фронтенд и их взаимодействие
• Фронтенд и бэкенд: о самом главном

Front-end разработка

Фронтендеры отвечают за внешний вид сайта. Основные технологии, которыми они должны владеть, – HTML, CSS и JavaScript.

HTML нужен для создания основной разметки, CSS управляет стилями (оформлением), а JavaScript добавляет динамику и различную функциональность.

Тонкости

Верстка сайта – весьма сложный и комплексный процесс. Пользователь видит ваш сайт через браузер, а браузеры бывают разные. Некоторые вещи могут работать в одном, но не работать в другом – и хороший фронтенд-разработчик должен знать об этом.

При разработке важно учитывать, как сайт выглядит на экранах разных размеров. Люди все чаще и чаще заходят в интернет с мобильных устройств, нужно позаботиться, чтобы у них все отображалось правильно. Это называется адаптивной или отзывчивой версткой. Для обеспечения адаптивности используются медиа-запросы CSS и подход mobile first.

Что почитать о фронтенд-разработке:

• Освоить основы фронтенда за 12 часов: большая видеоподборка
• 10 вещей, которые должен знать фронтендер

Фреймворки

Когда вы разобрались в основах, можно переходить к освоению каких-нибудь фронтенд-фреймворков. Фреймворки – это специальные инструменты, облегчающие работу фронтендера. Они избавляют от необходимости писать один и тот же код много раз и предлагают удобные решения часто встречающихся задач.

Существуют CSS-фреймворки, например, Bootstrap, Material CSS, Tailwind. Они предоставляют сетку для разметки сайта и множество вспомогательных классов для стилизации элементов.

Есть также и JS-фреймворки, предназначенные для удобного создания динамических интерфейсов. Самые популярные из них – React, Vue и Angular, реализующие компонентный подход.

Что почитать о фронтенд-фреймворках:

• Список лучших CSS фреймворков для фронтенд-разработки
• Vue vs React vs Angular: какой фронтенд-фреймворк выбрать?

Back-end разработка

Бэкенд нужен не для каждого сайта. Если вы создаете простую статичную страницу, то ее можно разместить на бесплатном хостинге Github или Netlify и обойтись без серверной части. Однако более сложные приложения обычно используют базу данных или аутентификацию пользователей – для всего этого требуется бэкенд.

Основные задачи бэкендера:

• проектирование базы данных и взаимодействие с ней;
• аутентификация пользователей;
• обработка клиентских запросов;
• масштабирование приложения;
• внедрение автоматизированного тестирования.

Если у фронтенда есть основной язык – JavaScript, то бэкенд более свободен в выборе технологий. Например, серверную часть приложения можно писать на Python, Java, PHP, .Net или на том же JS.

Кроме того, бэкендер должен уметь работать с базами данных – реляционными (MySQL) или нереляционными (MongoDB).

Фреймворки

Для бэкенда тоже существуют фреймворки и платформы. Например, если вы хотите использовать один язык во всех частях приложения, начните изучать Node.js. Это платформа для серверного JavaScript.

У других языков тоже есть разнообразные инструменты – Django, Flask, ASP .Net, J2EE и т. д. – выбирайте подходящий.

Подготовка к интервью

Популярное

Наиболее востребованным навыком на рынке на текущий момент является знание фреймворков JavaScript, как клиентских (React, Vue), так и серверных (Node.js). Больше всего вопросов на собеседованиях веб-разработчиков затрагивают именно эти темы. Разумеется, вы также должны хорошо разбираться в “ванильном” JavaScript.

Специфика позиции

Обычно вы претендуете или на позицию фронтендера, или бэкендера. Реже – фуллстека. Выбранное направление во многом определяет, что будет на интервью. Например, фронтендера скорее будут спрашивать про верстку и особенности разных браузеров, а бэкендера – про базы данных.

Опыт

Очень часто компании хотят, чтобы претендент имел некоторый опыт работы с указанными технологиями, поэтому новичку имеет смысл начать с фриланса или вклада в open source проекты, чтобы прокачать скиллы и получить кейсы для портфолио.

Что почитать о прохождении интервью на веб-разработчика:

• Успешное прохождение интервью для фронтенд разработчика
• Техническое собеседование на фронтенд разработчика