В руководстве вэб

Основы веба, которые должен знать начинающий разработчик

В этом посте я объясню, как работает Интернет. Мы ответим на вопросы наподобие «Как браузер находит файл HTML для запрошенной веб-страницы?», «Как файл HTML превращается в интерфейс пользователя?», «Что можно сделать, чтобы ускорить этот процесс?», «Как устанавливается и поддерживается связь с сервером?», а также рассмотрим следующие концепции:

• Клиент-серверную модель
• Жизненный цикл запроса веб-страницы
• Hypertext Transfer Protocol
• Как браузеры рендерят контент

Клиент-серверная модель

Термин «клиент-серверная модель» — это обобщённое понятие, описывающее взаимодействие друг с другом двух компьютеров; один из компьютеров является клиентом, запрашивающим информацию, другой — сервером, отправляющим эту информацию. Эту модель можно использовать во множестве различных проектов, и одним из самых популярных примеров его применения является Интернет.

Когда мы пытаемся перейти на какой-нибудь веб-сайт, допустим, на linkedin.com, то наш браузер превращается в клиент. Он выполняет запрос к серверу. Сервер создаётся LinkedIn. Когда кто-то создаёт веб-сайт, он должен содержать этот веб-сайт на каком-то сервере. Иногда для этого используется поставщик облачных услуг наподобие AWS или Azure, или же можно создать сервер самостоятельно.

Сервер будет отправлять клиенту HTML, после чего клиент, который, повторюсь, является обычным веб-браузером, интерпретирует этот HTML и генерирует пользовательский интерфейс. Пока вы продолжаете пользоваться linkedin.com и взаимодействовать со страницей, браузер продолжает обмениваться данными с сервером.

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

Жизненный цикл запроса веб-страницы

Что же происходит, когда мы переходим на linkedin.com? Что делает браузер, чтобы запросить HTML для этой страницы с сервера LinkedIn? Чтобы ответить на эти вопросы, нам сначала нужно взглянуть на её URL. Полный URL может выглядеть примерно так: https://www.linkedin.com:443/feed. Давайте его разберём.

• HTTPS — это протокол, определяющий, как будет отформатирован этот запрос. HTTPS и HTTP — это стандартные протоколы для обмена данными в Интернете.
• После протокола идут двоеточие и две косые черты, затем поддомен, а также доменное имя. linkedin.com — это доменное имя, а также имя веб-сайта. www — это поддомен, его можно воспринимать как домен внутри домена linkedin. Доменное имя разбито на имя веб-сайта и домен верхнего уровня, то есть часть .com. Большинство доменов верхнего уровня связано с какой-нибудь страной.
• Далее указан порт 443, который можно не указывать, потому что это стандартный порт. Для HTTPS по умолчанию используется порт 443, а для HTTP — 80. В URL почти никогда не требуется указывать порт.
• Затем идёт путь к ресурсу, который мы запрашиваем. Если вы просто запрашиваете домашнюю страницу, то большинство серверов позволяет не указывать путь. Однако если вам нужен конкретный ресурс, например, лента новостей LinkedIn, то нужно будет добавить косую черту и путь feed.

Мы рассмотрели основные части URL, но он может включать в себя и другие элементы. Например, параметры запросов — пары «ключ-значение», которые мы передаём серверу, чтобы предоставить ему больше информации, обычно для фильтрации контента. Также можно добавить фрагмент. В нём используется символ фунта #, после чего добавляется ID какого-то элемента в HTML и браузеры обрабатывают это, по умолчанию выполняя скроллинг к этому элементу.

Разобравшись с URL, нам нужно найти сервер и отправить ему запрос HTML. Когда вам нужно отправить запрос к серверу, вы знаете, что его доменное имя linkedin.com, но необходимо ещё и определить адрес этого сервера. Его можно узнать при помощи IP-адреса. Это уникальный идентификатор компьютера в Интернете. Для поиска IP-адреса нужного домена используется Domain Name System (DNS, система доменных имён).

Когда браузер ищет IP-адрес веб-сайта, сначала он проверяет локальный кэш. Операционная система на вашей машине хранит локальный кэш каждого IP-адреса, который недавно был обнаружен при помощи DNS. Благодаря этому, ей не приходится выполнять повторные сетевые запросы. Если IP-адрес не найден в локальном кэше, в сеть передаётся DNS-запрос.

Сначала этот запрос передаётся на сервер ресолвинга имён, который проверяет собственный кэш. Сервер ресолвинга имён (resolving name server) обычно принадлежит вашему Интернет-провайдеру. Далее, если сервер ресолвинга имён не знает IP-адреса, то он будет искать корневой сервер имён. На этом сервере хранятся сопоставления доменов верхнего уровня наподобие .com с IP-адресами серверов доменных имён верхнего уровня. Для каждого домена верхнего уровня существует сервер, который знает, как найти IP-адреса всех доменов, зарегистрированных в этом домене верхнего уровня.

Корневой сервер имён может сообщить серверу ресолвинга имён, где искать, и где находится сервер домена верхнего уровня. Сервер ресолвинга имён использует эту информацию для выполнения запроса к нужному серверу доменных имён верхнего уровня (серверу имён TLD). Мы достигли сервера доменов верхнего уровня, который перенаправит нас на полномочный сервер имён. Полномочный сервер имён (authoritative name server) знает IP-адрес домена, который мы ищем, поэтому он отправит этот IP-адрес серверу ресолвинга имён, который, в свою очередь, вернёт его вашему компьютеру, и браузер будет знать, где искать.

Теперь мы знаем IP-адрес linkedin.com, но у нас возникает следующий вопрос: как браузер подключается к linkedin.com? Каким образом два компьютера связываются друг с другом? Это соединение происходит по TCP, что расшифровывается как Transmission Control Protocol. Это сетевой протокол, используемый для установки соединения между двумя компьютерами в Интернете. TCP — это основной механизм доставки HTTP-запросов. Он передаёт информацию от одного компьютера другому при помощи пакетов. Это небольшой фрагмент данных, часть большего фрагмента данных; пакеты объединяются вместе, образуя передаваемый большой фрагмент данных.

Чтобы создать TCP-соединение, клиент должен инициировать подключение. Клиент делает это, отправляя пакет синхронизации (SYN), а сервер отвечает клиенту подтверждением синхронизации. Затем клиент отвечает серверу, подтверждая, что получил подтверждение синхронизации. Это называется подтверждением клиентом и сервером, а также трёхэтапным рукопожатием (three-way handshake).

После этого два компьютера подключены друг к другу по TCP, поэтому могут начать передавать HTTP-сообщения. Когда пользователь уходит с веб-сайта, соединение завершается. Для завершения этого TCP-соединения каждая из сторон отправляет другой стороне пакет завершения (fin), который другая сторона подтверждает. Это обозначает завершение соединения.

Hypertext Transfer Protocol (HTTP)

HTTP — это стандартный сетевой протокол, используемый для отправки запросов и ответов в вебе. HTTP-запросы в общем случае состоят из трёх компонентов:

1. Строка запроса — включает в себя метод, путь и версию HTTP
2. Заголовки — содержат пары «ключ-значение» дополнительной информации для сервера
3. Тело — содержимое запроса, например, новые данные, загружаемые в POST-запросе.

HTTP-ответы соответствуют тому же стандартному формату, что и запросы, однако в верхней строке (строке состояния) отсутствует метод и путь. В этой строке содержится код состояния и сообщение. Например, код состояния 200 с сообщением OK включается в ответ на успешный GET-запрос.

Распространённые методы запросов:

• GET-запрос — это запрос серверу с просьбой отправки какой-то информации.
• POST-запрос используется, когда клиент отправляет информацию на сервер.
• PUT заменяет данные на сервере
• DELETE удаляет данные с сервера
• PATCH частично обновляет данные на сервере
• HEAD — это то же самое, что и GET, но без тела

Распространённые коды состояния, которые сервер может отправлять в качестве ответа:

• 200: OK (запрос выполнен)
• 201: создан (часто с POST-запросами)
• 301: перемещён навсегда (перенаправление)
• 302: обнаружен (перемещён временно)
• 400: плохой запрос
• 401: не авторизован (без аутентификации)
• 403: запрещён (у клиента отсутствует доступ к тому, что он пытается использовать)
• 404: не найден (указанный путь не содержит ресурса)
• 500: внутренняя ошибка сервера
• 503: сервис недоступен (если сервер отключён на запланированное обслуживание)

В HTTP не реализована конфиденциальность. Маршрутизаторы и промежуточные устройства, контролируемые вашим провайдером Интернета, а также веб-сайты могут читать и изменять всю информацию, передаваемую по HTTP, в том числе HTTP-заголовки, IP-адреса отправителя и получателя, и даже данные ответа. Причина этого заключается в том, что HTTP не зашифрован.

Hypertext Transfer Protocol Secure (HTTPS) — это расширение HTTP, используемое для безопасных онлайн-коммуникаций. Этот протокол требует, чтобы у серверов были доверенные сертификаты и чтобы они использовали Transport Layer Security (TLS) — протокол безопасности, надстроенный поверх TCP и предназначенный для шифрования данных, передаваемых между клиентом и сервером.

Перед передачей HTTP-сообщения по сети HTTPS оборачивает его в зашифрованные конверты. HTTPS скрывает тело сообщения и HTTP-заголовки, но не IP-адреса отправителя и получателя, показывающие, какие узлы общаются друг с другом.

Как браузеры рендерят контент

Что делает браузер с файлами HTML, получив их от сервера? Как он превращает этот HTML в страницу, с которой может взаимодействовать пользователь? Процесс получения файла HTML и его преобразования в пользовательский интерфейс называется критическими этапами рендеринга (critical rendering path). Всего существует пять критических этапов рендеринга:

1. Парсинг HTML, создание дерева DOM и запросы всех найденных ресурсов (изображений, скриптов, шрифтов и таблиц стилей).
2. Парсинг CSS в дерево CSS Object Model (CSSOM).
3. Объединение DOM и CSSOM в дерево рендеринга, содержащее информацию об узлах, которые будут рендериться на странице.
4. Вычисление структуры (ширины, высоты, местоположения) узлов на основании размера вьюпорта.
5. Отрисовка экрана на основании дерева рендеринга и вычислений структуры.

▍ Динамические изменения

Что происходит, когда JavaScript пытается изменить какие-то элементы на странице? Мы можем разделить такие изменения на три типа:

1. Изменение цвета: узел будет перерисован, это очень быстрая операция.
2. Изменение позиции: повторный перерасчёт и перерисовка изменённого узла и одноуровневых узлов.
3. Крупные изменения: повторный перерасчёт и перерисовка всей страницы.

На этапе парсинга HTML браузер находит различные ресурсы и запрашивает их, например, изображения. Но в случае высокоприоритетных ресурсов наподобие таблиц стилей и скриптов, которые необходимы для работы страницы, используется нечто под названием сканер предварительной загрузки (pre-load scanner). Во время парсинга HTML он проходит по HTML в поисках всех ресурсов, имеющих высокий приоритет, и делает к ним HTTP-запросы ещё в процессе парсинга. Благодаря этому, нам не приходится ждать возврата этих запросов, как бы это происходило, если бы HTML искал их.

▍ Оптимизация под критические этапы рендеринга

Что же мы можем сделать для оптимизации своего кода? Вот несколько идей:

• Использовать defer/async-скрипты — смысл заключается в том, чтобы скрипты не мешали рендерингу.
• Минимизировать размер DOM — чем глубже идёт наш код HTML, тем сложнее должно быть дерево DOM и тем дольше занимает парсинг такого HTML. Однако никогда не стоит жертвовать accessibility.
• Уменьшить размеры файлов при помощи сжатия/минификации.
• Использовать ленивую загрузку — определите, какой минимальный объём контента требуется вашей странице и не запрашивайте всё за раз. Когда страница становится интерактивной, начинайте запрашивать дополнительные ресурсы в фоновом режиме.
• Анимации с аппаратным ускорением — анимации сложны и способны сильно замедлить страницу. Если у вас есть замедляющая страницу анимация, то можно повысить её скорость рендеринга, добавив CSS-правило transform:translate 3D(0,0,0). Это один из способов, которым можно сообщить браузеру, что необходимо использовать композитинг. При работе с трёхмерным пространством нам нужно выстраивать элементы послойно. Когда браузер выполняет это выстраивание, он понимает, насколько сложна анимация и применяет её аппаратное ускорение. Он будет обрабатывать её в GPU, а не в CPU, что обычно повышает производительность. Можно воспользоваться этим способом, если у вас есть проблемы со скоростью рендеринга анимаций.

Это ключевые концепции, необходимые для понимания работы веба. Надеюсь, они будут вам полезны.

🏆 Голосуй за нас на премии «ЦОДы РФ»!

От нуля до героя веб-разработки.

Эта статья предназначена для людей, которые хотят начать веб-разработку с изучения HTML, CSS и JavaScript, прежде чем переходить к более сложным темам, таким как React и NodeJS.

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

В конце этой статьи я дам несколько ссылок, если вы хотите перейти к более сложным темам.

Что такое HTML

HTML — это аббревиатура от языка гипертекстовой разметки, который является стандартом для создания веб-страниц. HTML описывает структуру веб-страницы, где CSS определяет стиль или внешний вид, а JavaScript добавляет интерактивности веб-странице.

Элементы HTML сообщают веб-браузеру, чего ожидать. Например: «Это абзац. Это стол, а это образ». Мы делаем это с помощью тегов и атрибутов.

Теги

Теги HTML состоят из двух частей (за некоторыми исключениями) и определяют элементы. Начальный тег и конечный тег. Теги состоят из слов, заключенных в треугольные скобки, где завершающий тег также имеет косую черту.

В этом примере <p> и </p> — это теги, а This is a paragraph — это контент. Обратите внимание, что содержимое между тегами может быть и самим новым элементом. Мы называем это вложением.

Очень простой HTML-документ содержит шаблонный код. Давайте посмотрим на пример и проверим, что все это такое и на что обращать внимание.

Первая строка является одним из таких исключений. <!DOCTYPE html> сообщает браузеру, что он просматривает документ HTML5. У него нет конечного тега.

если вы внимательно посмотрите на документ, в нашем теге <html>, который определяет начало нашей страницы, вы можете увидеть, что у нас есть <head> и <body>.

<head> документа HTML определяет метаданные нашей веб-страницы. Большая часть кода внутри <head> не видна пользователю. Однако <title> виден пользователю. Google Chrome, Microsoft Edge, Firefox и все другие браузеры используют этот заголовок на вкладках.

Затем элемент <body> определяет каждый визуальный элемент нашей страницы. В нем мы определяем большой заголовок с <h1> вместе с простым абзацем с использованием <p> .

Примечание: все элементы от начального до конечного тега и все, что находится между ними, является элементом.

Запуск веб-страницы

HTML-документы можно создавать с помощью простого блокнота по умолчанию, но я предпочитаю использовать подходящую IDE. Интегрированная среда разработки. По сути, это текстовый редактор со специальными инструментами для разработчиков, такими как автозаполнение и подсветка кода.

Хорошими вариантами для веб-разработки являются Visual Studio Code и Notepad++. На данный момент я использую WebStorm со студенческой лицензией, но это может быть слишком для простых проектов, подобных этому.

Установите один из них и создайте новый файл с именем index.html.

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

Мы можем запускать файлы HTML без веб-сервера, потому что он обслуживает статическое содержимое. Для этого не требуется сервер, поскольку у него нет кода на стороне сервера для запуска.

Атрибуты

Как я упоминал ранее, элементы могут содержать теги и атрибуты. Но что такое атрибуты и как их добавить?

Атрибуты — это дополнительные свойства, которыми может обладать элемент. Это могут быть style, href, alt и многие другие в зависимости от элемента. Одним из наиболее распространенных примеров атрибутов является тег привязки.

Тег <a> используется для гиперссылок. При нажатии на нее вы будете перемещены на другую веб-страницу, например https://google.com . Мы можем добавить эту информацию, используя атрибут href.

Добавьте эту строку кода в свой элемент body и перезагрузите страницу. Теперь вы должны увидеть ссылку, которая переместит вас в Google.

Вы также можете добавить стиль к элементам. Здесь используется атрибут style с некоторым кодом CSS между кавычками.

Это все основы HTML-разработки. Вы можете прочитать больше на этом сайте. Вы также можете продолжить чтение этой статьи, так как мы собираемся перейти к более сложным темам, таким как основы CSS и JavaScript, а также HTML.

Проверка элементов

Во всех основных веб-браузерах есть инструменты, которые разработчики могут использовать, когда сталкиваются с неожиданным поведением или ошибками. Эти инструменты называются инструментами разработчика, и к ним можно получить доступ, щелкнув правой кнопкой мыши веб-страницу и выбрав «Проверить элемент» или просто «Проверить». Распространенным ярлыком является нажатие F12 на клавиатуре.

Первая вкладка «Элементы» полезна для разработки внешнего интерфейса веб-страницы. Вкладка «Консоль» в основном используется для разработки JavaScript и бэкэнда. Остальные вкладки нам пока не нужны и связаны с сетями и производительностью.

На вкладке элементов мы видим представление нашей HTML-структуры. Это называется DOM или объектная модель документа. Эта тема будет чаще всплывать при разговоре о JavaScript.

В правой части изображения у нас есть инструменты для проверки стиля и CSS нашей веб-страницы. Это полезно для веб-дизайна.

Вы не можете вносить постоянные изменения с помощью инструментов разработчика, но можете вносить временные изменения. Попробуйте изменить некоторые значения CSS или удалить/изменить элемент в DOM. Если вы перезагрузите страницу, она снова станет нормальной.

Контейнеры

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

Слева у нас есть простой макет веб-страницы.

Верхняя панель, боковая панель и основной квадрат содержимого.

Все они находятся на одной веб-странице, в нашем элементе <body>. Но они разные. Итак, мы размещаем несколько элементов в <body>, но какой элемент мы должны добавить, чтобы разделить эти части контента?

Элемент <div> предназначен для этой работы. Элемент div — это невидимый элемент, стиль которого можно использовать для создания контейнеров.Элемент div определяет раздел или раздел веб-страницы.

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

div имеет значение для своего display , мы можем проверить это, используя элемент проверки. Значение по умолчанию — block, что означает, что создается блок, охватывающий всю ширину родительского элемента. Наша верхняя панель должна иметь это, но наша боковая панель и контент могут быть лучше, если они будут inline или inline-block.

используя атрибут style, мы устанавливаем значение display двух наших нижних элементов равным inline-block, чтобы они могли существовать рядом друг с другом. Наша верхняя панель останется block по умолчанию. Мы также задаем всем элементам фоновый цвет, чтобы они выглядели похожими на наше изображение выше.

Как вы могли заметить, элементы не очень точно выровнены. Они оставляют пробелы. Это связано со значениями по умолчанию margin и padding наших элементов <p>, которые находятся внутри наших элементов <div>. Это означает, что нам, возможно, потребуется немного углубиться в стилизацию наших элементов с помощью CSS.

Стилизация веб-страницы с помощью CSS

Мы уже использовали CSS в нашем коде, используя атрибут style. Но, как вы можете видеть, очень скоро это может стать очень уродливым, если вы будете писать весь свой стиль «встроенным», используя атрибут style. Вот почему мы можем захотеть перейти к файлам CSS.

Если вы используете IDE, например Visual Studio Code, вы можете добавить файл в ту же папку, что и ваш HTML-файл, с именем style.css. В этом файле мы можем определить стили, которые применяются ко всем элементам одного и того же типа, или мы можем применить их к определенным элементам, используя classes и id.

В head HTML-файла добавьте следующую строку.

Это соединяет два файла вместе, поэтому мы можем использовать стили из таблицы стилей в нашем файле HTML. Теперь давайте взглянем на базовый CSS и на то, как использовать его на вашей веб-странице.

Примечание. Вместо отдельного файла CSS можно использовать элемент style в head . Точно так же вы пишете CSS в элементе style и в отдельном файле.

Базовый синтаксис CSS

Синтаксис CSS очень прост и не имеет большого разнообразия, хотя есть некоторые вещи, которые вам нужно помнить.

## CSS 
.h1 {...} /* This is applied to a class called "h1" */
h1 {...}  /* This is applied to the h1 element */
#h1 {...} /* This is applied to an element with "h1" as id */
## HTML ##
<h1 class="h1">This is with a class</h1>
<h1>This is without a class or id</h1>
<h1 id="h1">This is with an id</h1>
## CSS syntax
element {
    key: value;
    key: value;
}

CSS использует сокращение с использованием точки или хэштега для обозначения классов или идентификаторов. Вместо тегов мы используем скобки {}, чтобы открывать и закрывать то, что мы хотим между ними.

/* Sample styled class */
.large-red-text {
    font-size: 32px;
    font-weight: bold;
    color: red;
}

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

Даже мне и другим веб-разработчикам по-прежнему нужно проверять, не пишут ли они бессмысленные записи и действителен ли ключ. Может быть трудно различить стили на основе font и text, такие как размер, вес и цвет. Но со временем ситуация улучшится.

Строки с /* */ являются комментариями. Они не влияют на стиль и улучшают читабельность. Например, вы можете прокомментировать, для чего используется определенный стиль.

Наконец, вы могли заметить, что мы заканчиваем все строки точкой с запятой. Это делается для того, чтобы браузер знал, что это конец строки. Вы также можете хранить все в одной строке таким образом, но это вряд ли читаемо.

Отступы, поля и границы

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

Квадрат в центре — это элемент, в данном случае это один из тегов <p>, на котором я удалил margin и padding. Если есть значения, они будут отображаться здесь.

• Отступ находится в элементе.
• Поля находятся за пределами элемента.
• Граница находится между отступом и полем.

Вы можете проверить различные свойства отступов, полей и границ, используя border-color, background-color, padding, margin вместе с border-width, чтобы увидеть, как они реагируют на другие элементы и на самих себя.

Позиционирование

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

Для позиционирования нам нужно знать атрибут CSS position. Может иметь одно из 5 значений: static relative fixed absolute sticky, где static — значение по умолчанию.

• Относительно располагается относительно своего нормального положения.
• Fixed позиционируется относительно области просмотра, что означает, что он всегда остается на одном и том же месте, даже если страница прокручивается. Свойства top, right, bottom и left используются для позиционирования элемента.
• Абсолютный позиционируется относительно ближайшего позиционированного предка (а не позиционируется относительно окна просмотра, как фиксированный).
• Sticky позиционируется в зависимости от положения прокрутки пользователя. Липкий элемент переключается между relative и fixed в зависимости от положения прокрутки. Он позиционируется относительно до тех пор, пока в окне просмотра не встретится заданное положение смещения, после чего он «застревает» на месте (например, position: fixed).

Взято из W3Schools.

Все это кажется очень трудным для запоминания, но все станет ясно, как только вы поработаете с этим несколько раз. Давайте посмотрим, как мы можем их использовать.

Это создаст div в правом нижнем углу веб-страницы. Попробуйте изменить размер страницы, она останется в углу. Он остается там из-за position: fixed . Мы также используем bottom и right, чтобы было немного места от угла. Мы могли бы также использовать margin для этого.

Если вы измените position на absolute , произойдет то же самое, но почему? Это связано с прокруткой. Элемент fixed останется на экране, если вы прокрутите его вниз, элемент absolute исчезнет с экрана. Вы можете проверить это, если добавите height: 1000px; к другому элементу, чтобы можно было прокручивать.

Цвета

Цвета являются важной частью каждого веб-сайта. Кто бы узнал банки Coca-Cola, если бы они не были такими яркими и красными? Наверное, любой, но все же цвета — огромная часть создания сайтов.

До сих пор мы использовали такие цвета, как red , blue и так далее, но есть целый список, который вы можете найти здесь. Но где специфический красный цвет голландского флага? Его нет. Вот почему у нас есть больше способов добавить наши собственные цвета, используя HEX-коды и другие значения.

Самый простой способ добавить другой цвет — использовать шестнадцатеричные коды. Шестнадцатеричные «числа» идут от 0 до F, 16 различных значений. если мы добавим два рядом друг с другом, например FF, у нас будет 255. Это именно то, из чего состоят цвета в классическом шестнадцатеричном формате RGB. Три значения от 0 до 255 в шестнадцатеричном формате.

Помните: поместите код CSS в head или таблицу стилей!

Мы также используем несколько классов для стилизации этих элементов! Просто добавьте больше слов в атрибут class и добавьте их в свою таблицу стилей. Это отличный способ разделить стили на более мелкие повторно используемые части.

Но это не единственный способ добавить цвет на веб-страницу. Мы также можем использовать HSL и полные значения RGBA. Об этом можно прочитать на этой странице. За время работы разработчиком я чаще всех остальных сталкивался с шестнадцатеричной системой счисления. При необходимости его также очень легко преобразовать в шестнадцатеричный формат.

Добавление интерактивности на вашу веб-страницу с помощью JavaScript

Теперь мы собираемся перейти к самой сложной части. Интерактивность. Наша веб-страница может выглядеть не так, как надо, но если вы все сделали правильно, теперь у вас есть основы, и вы сможете создать что-то хорошее. Мы также рассмотрели один из лучших ресурсов для получения знаний о веб-разработке: W3Schools.

Интерактивность веб-страниц реализована на JavaScript. JavaScript, или сокращенно JS, — это язык сценариев. Он предлагает гораздо больше функциональных возможностей, чем HTML и CSS вместе взятые, например, взаимодействие с кнопками и манипулирование DOM.

Это также послужит очень хорошим шагом к мастерству веб-разработки, если вы планируете использовать NodeJS для разработки на стороне сервера. Или любую внешнюю библиотеку, такую ​​как React. Но это сейчас не важно.

Пишем свой первый код

JavaScript, как и CSS, может выполняться в самом файле HTML или в другом файле, файле .js. В HTML у нас есть тег <script>. Между тегами <script> вы можете написать код JS.

Эта строка кода будет «печатать» или записывать текст в консоль в инструментах разработчика, которые мы видели раньше. Вы можете «логировать» что угодно, от определенных типов данных, таких как объекты и массивы, до простых строк, таких как эта, или чисел.

Мы вызываем функцию log, которая находится внутри объекта console. Мы используем точечную нотацию для доступа к вложенным данным или объектам.

object.subObject.subSubObject.func()

Мы вызываем функцию, используя скобки (). В этих скобках мы помещаем наши параметры. О функциях мы поговорим позже, но это просто для того, чтобы вы знали, что происходит с console.log .

Если вы хотите запускать код из внешнего файла, а не внутри HTML, вам нужно создать файл JS и импортировать его в HTML с помощью тега script.

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

Переменные

Мы уже рассмотрели console.log, теперь приступим к реальному программированию. Мы знаем, что можем регистрировать что угодно с помощью функции log, и что это будет отображаться в консоли нашего браузера, к которой мы можем получить доступ, используя «Проверить элемент».

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

Переменная может быть любым допустимым типом данных. В JS самыми основными типами данных являются числа и строки. Строки — это фрагменты текста, заключенные в кавычки. Числа не должны быть окружены чем-либо.

Есть и более продвинутые типы данных, но мы рассмотрим их позже.

Переменные создаются с помощью let, var или const. Разница между let и var невелика, поэтому рекомендуется использовать let. Отличие от const в том, что это значение нельзя изменить. Это константа. Но с этого момента мы будем использовать только let.

Приведенный выше код будет регистрировать приветствие для любого значения yourName. Если мы изменим значение yourName, изменится и приветствие.

Мы используем нечто, называемое объединением строк между скобками функции console.log . По сути, это означает объединение двух строк текста в одну строку.

"Hello " + "Steven" = "Hello Steven"

Условные операторы

Условные операторы являются неотъемлемой частью программирования. Это позволяет нам отображать несколько путей, по которым может следовать наш код. Например:

Мы объявляем возраст в переменной с именем age. Мы проверяем, является ли возраст больше или равен 18, используя >= . Если оно не больше или равно 18, мы используем else, чтобы перехватить все возможности, которые еще не перехвачены.

Условные операторы состоят из трех частей. Требуется только первая часть, оператор if. Если вам нужны более конкретные тесты, вы можете объединить несколько операторов, используя else if . Операторы Else if выполняют определенную проверку, например if . Операторы Else просто перехватывают все другие возможности.

Вы можете посмотреть this Gist для более подробного объяснения ловушек условных операторов и того, на что следует обратить внимание. Все, от порядка проверок до использования нескольких проверок с использованием else if .

Мы не говорили о что заключать в скобки оператора if. Нам нужно поместить в него оператор, который разрешается в логическое значение, поэтому либо true, либо false.

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

Петли

Теперь, когда мы немного освоились с условными операторами и булевой логикой, мы можем перейти к циклу. Цикл будет многократно выполнять часть кода, пока не будет выполнено условие.

В зависимости от типа цикла, это произойдет после того, как будет выполнено определенное количество циклов, или переменная получит определенное значение. Не волнуйтесь, если сейчас это звучит странно, мы перейдем к самым основным циклам.

Цикл, который вам, скорее всего, будет показан, — это цикл while. Цикл while будет выполнять блок кода до тех пор, пока не будет выполнено условие. Это условие вам придется запрограммировать самостоятельно, иначе вы получите бесконечный цикл.

Типичным примером является простой счетчик. Если вы хотите, вы можете добавить console.log в тело цикла, чтобы увидеть его в действии. Мы определяем две переменные вне цикла и меняем их внутри него. Логическое значение loop останется прежним, пока мы его не изменим.

Другой тип петли — это петля for. Цикл for будет повторяться до тех пор, пока он не будет повторяться определенное количество раз. Например, для каждого элемента в списке или для каждой буквы в строке.

Синтаксис выглядит более продвинутым, но его нетрудно понять. Мы устанавливаем переменную, добавляем условие и добавляем наше значение приращения. В этом случае условие должно быть true, когда цикл должен работать. Мы используем «индекс меньше, чем длина нашей строки».

for (
    let i = 0; // set initial number using a variable name
    i < str.length; // Set our condition.
    i++ // Set our incrementer.
)

Вот еще несколько допустимых примеров циклов for и while.

На этом мы закончим нашу главу о циклах. Если это все еще кажется вам немного странным, не волнуйтесь, для полного понимания циклов требуется время и практика, и большинству студентов это не удается.

Функции

Функции — это способ разделения блоков кода и их повторного использования, возможно, с переменными, которые вы можете изменить. Синтаксис прост:

function funcName(parameters) {
    // Function body
}
// Calling the function
funcName(6)

Функцию можно сделать, после того, как она сделана, ее можно вызвать. Если функция returns имеет значение, вы также можете добавить значение к переменной. Давайте посмотрим на некоторые примеры.

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

Больше типов переменных

Мы уже рассмотрели много кода. И может показаться, что это уже тяжело. Будет еще веселее. Я чуть не забыл включить это, но это очень важно знать, когда вы становитесь разработчиком JavaScript. Массивы, объекты, null и undefined.

Иногда JavaScript работает загадочным образом. Но есть некоторые типы переменных, с которыми мы можем столкнуться случайно. Возможно, вы уже видели один из них. Null и undefined — это типы переменных, которые кажутся похожими. Одно — это отсутствие значения, а другое — полное отсутствие переменной. вот простое изображение, чтобы показать вам.

Вот небольшой фрагмент кода, чтобы показать вам.

Значение undefined — это то, что вы вряд ли захотите обнаружить. Это может означать, что ваш код находится не в том месте и что переменная еще не создана, или это может означать, что у вас опечатка. Мы не будем углубляться в это, но было бы полезно узнать разницу между null и undefined .

Далее идут массивы. Массивы — это, по сути, списки, которые могут содержать значения. Эти значения можно запросить с помощью индекса. Индекс — это число от 0 до конца списка. Давайте покажем вам код

Массив создается с помощью квадратных скобок [ ... ] . Внутри него у нас есть значения, разделенные запятыми. Значения могут быть любыми: функциями, числами, логическими значениями, строками, объектами и другими массивами (так называемыми вложенными массивами).

Мы получаем каждый элемент, используя индекс в квадратных скобках. Если у нас есть несколько массивов внутри друг друга, также будет другой набор скобок с другим числом внутри них. Мы можем использовать циклы для регистрации каждого элемента в массиве.

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

Однако мы могли бы захотеть иметь лучший способ получения дней вместо чисел от 0 до 6. Для этого мы могли бы использовать объекты.

Объекты в некотором роде являются более продвинутыми списками. Они написаны в JSON, нотации объектов JavaScript. Я написал статью о JSON, которую вы можете найти здесь, но мы все же рассмотрим основы в этой статье.

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

Вот наша повестка дня в форме объекта вместо вложенного массива. Использование массивов на каждый день.

Вы также можете использовать вложенные объекты для частей каждого дня.

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

Это все для этих продвинутых типов, давайте продолжим.

Соединение HTML и JavaScript

Соединение HTML и JavaScript можно осуществить несколькими способами. Мы уже рассмотрели, как подключить файлы, но пока не знаем, как использовать функции JavaScript на нашей веб-странице.

В HTML у нас есть button элементов, которые могут иметь атрибут onClick. Вероятно, это самый простой способ подключить функции JavaScript к вашей HTML-странице. Вы можете вызывать только функции таким образом, но с функциями вы можете делать все что угодно.

Но при этом мы не можем манипулировать DOM так, как, вероятно, хотим. Мы можем захотеть показать результаты функции или изменить некоторые переменные, которые мы хотим использовать внутри нашей функции.

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

В JavaScript у нас есть функция document.getElementById. Эта функция вернет элемент HTML, если он имеет идентификатор, который вы передаете в качестве параметра. Это одна из причин, по которой атрибут ID всегда должен быть уникальным.

Этот фрагмент является простым примером того, как использовать поля ввода и JavaScript для добавления интерактивности на веб-страницу. Вы можете сохранить эту страницу и открыть ее в своем браузере, чтобы увидеть, как она работает.

Мы могли бы добавить меры безопасности на случай, если одно из полей будет пустым, используя операторы if, но чтобы не отходить от темы, мы не делаем этого здесь. Но здесь еще есть что распаковать.

Во-первых, мы определяем наши элементы в HTML и присваиваем им уникальные идентификаторы, используя атрибут id. Мы создаем два поля ввода с type="number" , таким образом можно вводить только числа. Мы также добавляем кнопку и элемент абзаца, чтобы показать ответ суммы обоих значений.

В элементе script мы определяем наши переменные, чтобы мы могли получить доступ к нашим полям. Это также может быть сделано внутри функции. Мы получаем поля, используя getElementById.

В созданной нами функции add мы получаем элемент абзаца и получаем ответ. Поскольку value возвращает строку, нам нужно привести значения к числам.

Наконец, мы устанавливаем innerHTML абзаца на ответ. Поскольку ответ является числом, нам нужно снова преобразовать его в строку.

innerHTML — это строковая версия всего, что находится между тегами элемента. Это может быть больше элементов или просто текст, как здесь.

Если бы вы приложили к этому некоторые усилия, то, обладая этими знаниями, уже сейчас можете создать работающий калькулятор. Вы можете подумать, что вам не хватает знаний, но теперь все здесь.

Еще одно отличное упражнение – создание приложения для работы со списком дел. Нам известны списки, мы можем добавлять значения с помощью элементов ввода и можем отображать текст из нашего скрипта.

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

Вывод

Веб-разработка может показаться сложной, но если вы следовали этому курсу, вы уже на пути к тому, чтобы стать веб-разработчиком. Я тоже начал с этого, изучив основы трех «столпов» веб-разработки. Javascript, CSS и HTML.

Хотя еще многому предстоит научиться. Существуют фреймворки для изучения стилей, адаптивного веб-дизайна, бэкэнд-разработки и многого другого.

Я за полтора года работы на Medium написал более сотни статей, связанных с веб-разработкой. Статьи для начинающих и статьи для более продвинутых программистов. Вы можете ознакомиться с ними в моем профиле или в моей публикации: Быстрое программирование.

Если вы хотите поддержать меня, вы можете стать участником Medium, используя эту ссылку, и подписаться на меня в Twitter, чтобы получать новости о моей жизни и моих статьях.

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

• Статья о jQuery, простой в использовании библиотеке для работы с DOM.
• Веб-сайт Node Package Manager для бэкенд-разработки с использованием NodeJS.
• Введение в Python, статья для изучения программирования на Python, если вы хотите узнать больше о программировании за пределами Интернета.
• Сайт Bootstrap, самый известный фреймворк для оформления веб-сайтов.
• Подробнее об объекте console в JavaScript.
• Создание веб-сайтов с использованием GatsbyJS, фреймворка, использующего React.
• Создание сайтов с помощью NextJS, мой любимый фреймворк.
• Анонимные функции в JavaScript.
• Все разные циклы JavaScript.
• Создание бота Discord с помощью JavaScript с использованием NodeJS.

Большое спасибо за чтение, если вы зашли так далеко. Удачного путешествия по изучению программирования и прекрасного дня.

От автора: самым популярным запросом новичков-разработчиков является «веб-разработка с чего начать». И правда, самостоятельно определить точку начала обучения практически невозможно. Сфера наполнена большим количеством различных инструментов, а значит требует целого набора навыков. Мы поможем вам узнать, в какой последовательности осваивать работу с софтом и языками для web, чтобы в кратчайшие сроки вы смогли назвать себя разработчиком.

Начинать стоит!

Если бы вы в начале 2000-х бывалого программиста спросили о том, что изучать интересней всего, он бы сказал, не моргнув глазом: «разработку программного обеспечения». В то время, объем работы в этом направлении и правда был велик: предстояло создать основные операционные системы, антивирусы, браузеры и движки для игр. Сегодня все это продолжает свое развитие, но в центре внимания web.

Создание интернет-продуктов интересно для начинающих. Это то, что они видят каждый день: страницы и приложения. Их использование активно, а значит, такие специалисты требуются рынку. К тому же, обучение теперь доступно для каждого, у кого есть Интернет — больше нет нужды работать с массивами информации в библиотеке.

Веб-разработка привлекает людей с творческим складом ума. Здесь и программисты, и художники. Продукту нужно качественное ядро — так же, как и привлекательная внешность. До сих пор активно ведутся споры о том, что же все-таки важнее для веб-продукта: внешний вид или быстродействие. И если одни (Telegram, Facebook*) демонстрируют, что даже простая визуальная часть хорошо воспринимается пользователем, то другие (Instagram*) показывают, что иногда пользователь готов заплатить скоростью за красиво оформленное приложение.

Стать веб-разработчиком нужно и потому, что здесь каждый подход находит свое применение. Это мир постоянного развития и поиска. Здесь все ориентировано на клиента и его потребности. К тому же, набравшись опыта в среде web, можно заняться и разработкой программного обеспечения: языки и инструменты стали общими для этих видов разработки.
Фронтенд или бэкенд?

Даже те, кто начинает изучение сферы с нуля, знает, что в разработке есть эти два основных направления. Вот только мало кто знает, что означает каждое из них. И если с «фронтом» все более-менее понятно, то серверная часть, бэкенд, для чайников покрыта мраком. Без основательного понимания каждого из векторов развития невозможно определить, с каким их них вам будет комфортнее всего. Детальный обзор может прояснить для начинающих.

Самое интересное — за кадром: бэкенд

Именно так можно в целом охарактеризовать, что собой представляет создание продукта для web. Нет, мы не настаиваем на том, что новичку нужно выбирать именно бэк, просто это более таинственная сторона.

И правда, то, как строится большинство элементов в их визуальной части, в целом, понятно каждому. Но то, какая магия заставляет загружать элементы функционала, которые нужны в конкретный момент, понятно не всем. Этим волшебством в сети управляет серверная сторона: информация, которая обрабатывается на сервере, а не на машине пользователя.

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

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

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

Например, самое популярное приложение для карпулинга BlaBlaCar зависимо от бэкенда больше, чем все страницы-визитки вместе. С его серверной стороной взаимодействует огромная команда разработчиков, в том время как фронтенд у него понятен, даже для чайников веба. Нужно не только оформить весь процесс запросов-ответов. Но также создать мобильные и десктопные приложения для каждой из платформ.

Те, у кто больше склонен к программированию, обычно выбирают «бэк». Он может быть скучным для начинающих, которые мечтали создавать хорошую визуальную часть и переходы между страницами. Но у специалистов этой стороны разработки есть свое преимущество: стабильность. Выучив определенную технологию, они могут вооружится ею на долгие годы, в то время как фронт — это постоянная гонка со временем.

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

На самом деле, язык, который вы выберете для изучения, не так важен. Ведь каждый из них хорошо подходит для взаимодействия с сервером. Кроме них, будет кстати выучить язык запросов. Самый известный и используемый — SEQUEL, или SQL. Сходство между этими языками сильное. Так что, выучив один, будет несложно перестроиться для операций с другим.

Этот язык нужен для общения с базами данных — именно так можно сделать быстрым приложение, которые использует большие массивы данных. Самыми популярными системами управления базами данных являются MySQL, MSSQL, MariaDB и другие. Трудно сказать какая из них лучше, но наибольшую популярность получила именно MySQL. Навык взаимодействия с базами данных — необходимый момент для разработчика веб-приложений, это касается как фронтенд так и бэкенд специалистов. Освоить ключевые моменты нетрудно, но для профессионального владения необходим опыт решения конкретных задач.

Не дизайном единым

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

Рисовать — не кодить

У фронта есть два крупных вектора развития: дизайнеры и верстальщики. Если вам по душе творчество и макеты, значит начинайте изучать основы дизайна для web. Прежде всего, установите графический редактор, например, Adobe Photoshop. Обучающих материалов в этом направлении немало, и они качественны. Львиная доля ориентирована, как раз, для чайников.

Сразу после установки PS, функционал и интерфейс покажется вам недружелюбным, а инструменты сложными в использовании. Действительно, работа с программой требует определенных навыков. Но, во-первых, это не так сложно, как кажется, а во-вторых, весь потенциал возможностей Photoshop вам ни к чему. Существуют курсы на YouTube, которые специализируются на работе с макетами веб-продуктов. Их и выбирайте для обучения!

Если говорить о касте верстальщиков, то их задача в том, чтобы превращать макеты в код, который понимает браузер — HTML. Но его вам будет мало. На язык гипертекста у вас уйдет не больше двух дней при упорном изучении, и еще столько же на основы CSS, который делает сайт красочным. Это не то же самое, что языки программирования — будто создано для начинающего.

Если же говорить о языке программирования, то у фронтендщика это — Javascript. И было бы здорово, если бы не гонка со временем, которую мы упоминали выше. Благодаря ей современному разработчику для web приходится трудится сразу с двумя стандартами: пятым и шестым ECMAScript. Новые продукты написаны на 6-том, но некоторое количество продуктов еще использует пятый. Вам придется разобраться с каждым.

Несколько лет назад, важным навыком было умение писать кроссбраузерный код. Если вкратце, это значит написать программу на Javascript, которая хорошо будет выполняться на основных браузерах. Ранее, производители софта для серфинга web, соревновались за то, чья технология станет общепринятой. Но сегодня почти все обозреватели стандартизированы, а их отличия сконцентрированы в пользовательском интерфейсе. Еще совсем недавно кроссбраузерность означала, что код Javascript будет подходить для современных браузеров и Internet Explorer. Но общество признало IE неработоспособным и отказалось от его использования чуть менее, чем полностью.

В последнее время, к фронтенд разработчикам предъявляются требования более высокого порядка. Если ранее, такой разработчик по большей мере напоминал верстальщика, который обучен тонкостям клиентского JS и «прикручивает» скрипты из библиотеки, то теперь это человек с обширным набором навыков. Современный рынок хочет видеть фронтендщика примерно таким:

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

А может в фулл-стек?

В любой сфере, будь вы врачом, инженером, математиком или web-разработчиком, нужно стремиться к освоению полного набора навыков. И то, что от фронтендщика сегодня требуют знания основ бэкенда — закономерное явление.

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

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

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

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

Ну и напоследок главное правило: никогда не останавливайтесь в совершенствовании, какую сторону разработки вы бы ни выбрали.

* Признана экстремистской организацией и запрещена в Российской Федерации.