Фронтендом называют все что касается стороны клиента и браузера

Обновлено: 07.07.2024

Делает страницы сайта. Получает макет от дизайнера и превращает его в готовую страницу — расставляет на места все элементы и проверяет, что всё тянется на разных экранах, хорошо выглядит на смартфонах и не разваливается, если изменить размер окна. Это называется «вёрстка», а фронтенд-разработчиков часто называют верстальщиками. Верстку пишут на языках HTML и CSS. С макетами работают в Figma или фотошопе.

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

В реальной работе верстальщики делают не только страницы — иногда нужно сверстать макет для Wordpress или Drupal или подготовить вёрстку, которую будут использовать React-разработчики.

Фронтенд-разработчики верстают на HTML, CSS, пишут код на JavaScript и умеют работать с макетами в графических редакторах.

Как начать 👇

React-разработчик

Делает веб-приложения на React.js (это такая библиотека для усиления JavaScript). В них используются интерфейсы, которые похожи на привычные в компьютерных программах — сложные, из многих окон, с переходами и всем, что мы любим.

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

Учить React без знания JavaScript можно, но это как строить пятый этаж дома, не построив первые четыре. Скорее всего, придётся ставить подпорки, а потом всё развалится.

React-разработчики — это фронтенд-разработчики с улучшенным знанием JavaScript. Они пишут код на React.js. Умеют собирать проекты, работать с системами контроля версий, но, если нужно, могут и сверстать страницу с нуля.

👉 Что нужно уметь React-разработчику (или как отличить библиотеку от фреймворка.

Бэкенд-разработчик

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

Бэкенд может быть «тяжёлым» — его пишут на PHP, Python или Ruby, или «лёгким» — его пишут на JavaScript с помощью Node.js. Язык нужно выбирать в зависимости от того, что нужно в конкретной компании или на конкретном проекте. И неудивительно, почему многие бэкендеры выбирают PHP .

Важно одно — бэкендеру тоже нужно понимать, как работает JavaScript и как устроена вёрстка. JavaScript нужен как раз для лёгкого бэкенда, а с вёрсткой бэкендеры работают регулярно — например, эта статья загружена с бэкенда и красиво выведена на страницу с его помощью.

Как и React-разработчику, бэкендеру на работе не обойтись чистым PHP. Нужно знать фреймворки, которые упрощают работу, помогают сэкономить время и всё унифицировать, если в компании несколько разработчиков.

Бэкенд-разработчики отвечают за базы данных и пользовательскую информацию. Они пишут на бэкенд-языках, но разбираются и в том, как устроена вёрстка.

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

Давайте начнем с определений.

Фронтенд — все, что браузер может читать, выводить на экран и / или запускать. То есть это HTML, CSS и JavaScript.

HTML (HyperText Markup Language) говорит браузеру, каково содержание страницы, например, «заголовок», «параграф», «список», «элемент списка».

CSS (Cascading Style Sheets) говорит браузеру, как отображать элементы, например, «после первого параграфа отступ в 20 пикселей» или «весь текст в элементе body должен быть темно-серым и написан шрифтом Verdana».

25–27 ноября, Онлайн, Беcплатно

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

Структура взаимодействия бэкенда и фронтенда

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

Серверные приложения

Между получением запроса и ответом сервер обычно ищет по запросу информацию в базе данных и встраивает ее в шаблон (ERB, Blade, EJS, Handlebars).

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

Связь с использованием AJAX

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

Клиентские (одностраничные) приложения

AJAX позволяет вам загружать данные без обновления страницы. Больше всего это используется в таких фреймворках, как Angular и Ember. После сборки такие приложения отправляются в браузер, и любой последующий рендеринг выполняется на стороне клиента (в браузере).

Универсальные/изоморфные приложения

Некоторые библиотеки и фреймворки, например, React и Ember, позволяют вам исполнять приложения как на сервере, так и в клиенте.

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

Вне фронтенда и бэкенда

Автономный фронтенд

Веб-приложениям, которые вы собираетесь создавать, подключение к Сети будет требоваться всё меньше и меньше.

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

Легкий бэкенд

Бэкенд, в свою очередь, становится легче и легче. Такие технологии, как хранилища документов и графовые базы данных, приводят к сокращению количества обращений к бэкенду для повторного агрегирования данных. Задача клиента — уточнить, какие данные ему нужны (базы данных графов), или извлечь все различные фрагменты данных, которые ему нужны (REST API).

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

Размытые границы

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

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

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

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

Как работает веб?

Ваш браузер – это дверь в интернет. Он нужен для того, чтобы:

Скачивать различные данные из интернета и показывать их вам, часто в виде веб-страницы;
Принимать введенные вами данные – нажатие на кнопки, текст, введенный в текстовые поля. Браузер отправляет все это в интернет, а он колдует с введенными данными и отвечает более понятным образом.

Чтобы понять, как работает веб, рассмотрим пример – форму при регистрации:

Итак, что такое сервер?

В данном контексте сервер – это компьютер, который находится в интернете.

«Интернет» – это просто набор из множества серверов; многие компьютеры (без подключенных к ним экранов) используют магию и отправляют результаты в браузер для вашего удовольствия.

Вернёмся к примеру, который позволил понять, как работает веб (он приведен выше). В нем ваш браузер общался с сервером.

Сервер принимает данные от пользователя (его имя, адрес электронной почты и т. д.) и сохраняет их для дальнейшего использования.

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

Теперь, когда у нас есть представление о том, что такое сервер, давайте поговорим о том, что такое браузер.

Что такое клиент?

Клиент – это программное обеспечение, которое работает на компьютере пользователя (ноутбуке, iPad, смартфоне) и может взаимодействовать с сервером.

В приведенном выше примере клиентом является ваш браузер. Он может интерпретировать информацию (HTML и CSS, изображения, видео), которую сервер отправляет, и отображать ее в понятной форме. Он может принимать ваши данные (текст, аватары, видеозаписи) и отправлять их на сервер для манипулирования и/или сохранения.

Давайте поговорим о другом типе «клиента», который вы, вероятно, используете каждый день. Это мобильные и компьютерные приложения.

Давайте для примера рассмотрим мобильное приложение facebook.

Клиентская или серверная сторона (client-side vs server-side)

Эти термины, по сути, нужны для выяснения того, где происходит конкретная операция. Она происходит на стороне сервера или клиента?

Операции, протекающие на клиентской стороне

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

Но общение с сервером – это не все, что делает клиент.

Давайте рассмотрим мобильное приложение instagram:

Как мы знаем, instagram – это социальная сеть для обмена изображениями и их просмотра;
Instagram позволяет вам видеть фотографии людей, на которых вы подписаны. Для этого изображения загружаются с сервера и отображаются;
Приложение также позволяет загружать изображения для просмотра другими пользователями (оно берет ваши изображения, искусно составленные подписи и отправляет их на сервер);
Одна из замечательных особенностей instagram – это то, что вы можете применить фильтр к своему изображению, прежде чем поделиться им с миром;
«Фильтр» – это программа, которая изменяет внешний вид изображения или части изображения, меняя оттенки и цвета пикселей определенным образом»;
В случае instagram этот фильтр выполняется внутри самого приложения. Это означает, что разработчики мобильного приложения instagram написали код для управления изображениями прямо на вашем смартфоне;
Это и есть операция на стороне клиента;
Изображения могут быть отправлены на сервер для того, чтобы на них был наложен фильтр, но в instagram это работает не так;
Пользователи хотят иметь возможность переключаться между фильтрами и видеть результаты как можно быстрее, не дожидаясь, пока приложение загрузит изображение на сервер, а затем снова отобразит его после наложения фильтра. От этого процесс выбора фильма был бы более длительным и раздражающим.

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

Операции, протекающие на стороне сервера

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

Давайте продолжим рассматривать instagram в качестве примера:

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

Задача команды разработчиков ПО состоит в том, чтобы решить, будет ли операция выполняться на стороне клиента или на стороне сервера (на основе их внутренних ограничений), чтобы обеспечить наилучшее взаимодействие с пользователем.

Рендеринг

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

Что такое рендеринг?

В данном контексте рендеринг – это смесь данных с HTML и CSS, которая будет показываться браузером.

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

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

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

Этот процесс сбора релевантных данных и объединения их с HTML и CSS, которые нужны браузеру для отображения, представляет собой рендеринг.

Рендеринг на стороне сервера

Ранее было сказано, что серверы отправляют HTML и CSS вашему браузеру, и это сообщает, что и как нужно отображать.

При рендеринге на стороне сервера эта смесь данных (текста, изображений и т. д.) и правил отображения выполняется исключительно на стороне сервера. Разработчики написали код, который указывает серверу брать данные из БД, объединять эти данные с правилами отображения (HTML & CSS) и отправлять их браузеру.

Введение в JavaScript

Помимо HTML и CSS есть еще один язык, который понимают браузеры. Он называется JavaScript.

JavaScript – это круто, потому что:

Это означает, что мы можем использовать JavaScript, чтобы развлекаться на стороне клиента.

Почему не стоит запрашивать HTML и CSS у сервера много раз?

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

Мы можем ускорить взаимодействие с пользователем, запрашивая только данные (без информации об интерфейсе пользователя). Сами по себе данные относительно легки. Их загрузка будет проходить быстрее, чем если бы помимо них скачивались бы еще HTML и CSS.

По ту сторону пользовательского интерфейса

JavaScript способен не только манипулировать пользовательским интерфейсом.

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

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

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

Рендеринг на стороне клиента

Именно в таком случае рендеринг (соединение данных с HTML и CSS) осуществляется на стороне клиента (буквально в браузере) с помощью JavaScript.

Фронтенд или бекенд?

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

Что такое фронтенд?

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

Это означает, что каждый фронтенд-разработчик должен понимать HTML и CSS.

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

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

Что такое фреймворк?

В разработке ПО фреймворк (или библиотека) – это заранее написанный код, который облегчает повторное создание одного и того же типа вещей.

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

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

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

Фронтенд фреймворки

Думаю, понятие «фронтенд фреймворк» много кого сбивает с толку.

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

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

Как правило, фронтенд фреймворк – это библиотека кода, т. е. ранее написанный код, который упрощает, ускоряет рендеринг на стороне клиента (с использованием JavaScript), делает его более эффективным.

Примеры: React , Vue , Angular .

Что такое бекенд?

Это все, что происходит на стороне сервера, но не связано с пользовательским интерфейсом.

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

…бекенд фреймворки?

Большинство фреймворков, которые люди называют бекенд фреймворками, на самом деле являются «веб фреймворками общего назначения».

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

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

Примеры: Rails , Django , Laravel , Express.js .

JavaScript на стороне сервера: Node.js

По мере того как JavaScript становился все более популярным и все больше разработчиков стало изучать язык, было решено запускать JavaScript где-то еще, а не только в браузере.

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

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

Понятие Frontend-разработки

Под понятием Frontend подразумевается разработка видимого для пользователя интерфейса и всех функций, с которыми он может взаимодействовать. По сути, когда вы переходите на любой сайт, то видите там кнопки, текст, различную анимацию и другие составляющие – все это реализовано при помощи фронтенда. Для создания этих элементов используются три разных языка – HTML, CSS и JavaScript.

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

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

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

Если разработчик учит HTML, он обязательно осваивает и CSS (Cascading Style Sheets). Этот язык отвечает за внешний вид страницы. С его помощью вы работаете с цветами, шрифтами и расположением различных блоков. Если простыми словами, то CSS используется для красивого оформления страницы и настройки ее внешнего вида уже после того, как основная структура была написана при помощи HTML.

JavaScript

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

Backend-разработка

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

отправка информации от пользователя,

ее обработка на сервере,

получение информации и форматирование кода в читаемый вид.

Используемые языки программирования в бэкенде

Если в случае с фронтендом нет никакой вариативности, так как разработчики всегда используют описанные языки программирования для достижения желаемого результата, то вот с backend все обстоит немного иначе. Выбор языка и инструментов зависит от сервера. Зачастую ограничений нет, и разработчик выбирает практически любой универсальный ЯП. К таким относятся:

В большинстве случаев бэкенд-разработчику понадобятся знания по управлению базами данных, которых тоже существует немало. Популярнее всего MySQL, но есть еще и PostgreSQL, SQLite, MongoDB. От выбранной системы управления базами данных меняются и обязанности разработчика, поскольку действия выполняются разными путями.

Приведенное выше описание дает ответ на вопрос «что такое backend‎».‎

Варианты взаимодействия frontend и backend

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

Есть еще инструментарий под названием AJAX. В таком случае запрос отправляется при помощи JavaScript, который подключен в веб-обозревателе. Ответ возвращается в XML или JSON, а с чтением этих форматов отлично справляется JS.

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

Подключаемые библиотеки Ember или React предназначены для использования приложения одновременно на сервере и в клиентской части. Две рассматриваемые сферы связываются через AJAX и HTML-код с обработкой на сервере.

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

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

Предисловие

Но давайте начистоту: если вы задумываетесь о том, чтобы стать фронтенд-разработчиком, то вы 100% имеете представление о браузерах и их назначении, а вникать в технические особенности DNS-серверов на ранних этапах необязательно. Поэтому в этом роадмапе будет меньше теории и больше практики.

И еще момент. В этой статье предполагается, что вы умеете создавать файлы в текстовом редакторе и знаете английский на уровне B2. Придется много читать на иностранных ресурсах и работать с программами в духе Sublime Text или VS Code.

Этап 1: Верстка HTML

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

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

Наличие сверстанной страницы частично решает эту проблему, позволяя работать с «реальными» объектами разработки, а не просто решать логические задачки и общаться с голой математикой (оставьте это бэкендерам).

Заодно вы освоите навыки по созданию классов и правильному оформлению HTML в соответствии с правилами валидаторов. Это будет полезно и при стилизации сайта, и при добавлении логики в приложение.

Так что учим семантику HTML, запоминаем базовые теги и принципы оформления блоков с текстом, изображениями и другим контентом. Учимся подключать внешние документы (с программным кодом и стилями) и т.п.

Используемые технологии:

Ссылки:

Этап 2: Стилизация при помощи CSS

Следующим этапом станет освоение CSS – каскадной таблицы стилей, отвечающей за расположение объектов на странице и их внешнее оформление.

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

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

Используемые технологии:

HTML с классами и ID

Полезные ссылки:

Подробный гайд по Flexbox и лучший гайд по Grid

Этап 3: Базовые аспекты JavaScript

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

Сначала придется учить JavaScript в отрыве от HTML и CSS, чтобы понять, как работает программирование в целом и JavaScript в частности. Надо ознакомиться с типами данных, понять, что такое консоль, редакторы кода, переменные, операторы и т.д.

Обучение может проходить параллельно в двух направлениях:

Чтение учебников, изучение алгоритмов и проверка своих навыков в сервисах наподобие Codewars. Тут вам поможет ресурс Javascript.info и куча полезных книжек в духе «Грокаем алгоритмы».

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

Используемые технологии:

Полезные ссылки:

Этап 4: GitHub и пакетные менеджеры

Во многих школах по изучению JavaScript и программирования в целом этот этап становится первым. Но на онлайн-курсах в этом есть необходимость (нужно проверять задания и где-то хранить код). Я же решил перенести этот этап сюда, потому что работать с git трудно. Он запутанный, и пока в нем не освоишься, все дико раздражает. Если начать с git, то может и вовсе пропасть желание работать с кодом.

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

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

Так что наберитесь терпения и вперед читать git-how-to.

Используемые технологии:

Менеджер пакетов npm (или yarn)

Полезные ссылки:

Этап 5: Вспомогательные инструменты

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

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

Prettier – утилита, которая автоматически корректирует форматирование страницы, чтобы код выглядел симпатично и аккуратно.

ESLint – плагин, заставляющий программиста писать код в соответствии с определенными правилами (например, используя только современный синтаксис).

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

DevTools – браузерные инструменты, которые упростят верстку и позволят проверять гипотезы в отношении CSS, не покидая браузер.

Читайте также: