news.shamcode.ru | Зачем изучать создание сайтов и что для этого нужно знать

Начнем с того, что в настоящее время огромное количество (а если точнее, то 5,5 миллиарда за 2024 год) пользователей по всему Интернету регулярно посещают различные сайты и веб‑страницы в поисках нужной им информации. И Вы в том числе.

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

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

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

Что такое Frontend разработка

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

Создают каркас страницы и наполняют её контентом.
Размечают текст и заголовки, изображения, кнопки, формы и другие элементы страницы.
Настраивают внешний вид и делают сайт красивым.
Подбирают цвета, шрифты, отступы и ставят блоки страницы на свои места.
Делают сайт удобным для всех устройств.
Адаптируют сайт под мобильные устройства, планшеты, ноутбуки и компьютеры.
Добавляют интерактивные элементы.
Реализуют выпадающие меню, модальные окна, анимации, вкладки
Делаю сайт быстрым и лёгким.
Оптимизируют изображения, минимизируют код и улучшают его производительность.
Обрабатывают пользовательский ввод.
Настраивают формы регистрации, поиска, комментариев, отзывов.
Связывают сайт с сервером и базами данных.
Подгружают данные о товарах, новостях, пользователях, динамически обновляют контент страницы.
Улучшают доступность для всех пользователей.
Настраивают поддержку экранных дикторов, делают контент понятным для людей с ограниченными возможностями.
Защищают сайт от ошибок и сбоев.
Обрабатывают некорректный ввод данных, предупреждают об ошибках, тестируют код перед выпуском.
Публикуют сайт в интернете и следят за его работой
Загружают сайт на сервер, обновляют контент, исправляют баги, адаптируют сайт под новые устройства и браузеры.

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

Необходимые технологии

Не смотря на то, что пункта 4, технологий необходимо изучить всего 3:

HTML (HyperText Markup Language) — язык гипертекстовой разметки.
CSS (Cascading Style Sheets) — каскадные таблицы стилей.
JavaScript — язык программирования для создания интерактивных элементов.

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

HTML

Язык гипертекстовой разметки появился еще в далеком 1991 году и был создан Тимом Бернерсом‑Ли (тот самый создатель Всемирной паутины). С тех пор HTML сильно изменился, он подвергался различным изменениям, и с 2014 года мы используем последний стандарт HTML5, включающий в себя все возможности для полноценной структуры страницы.

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

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

Строение HTML

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

Создадим пример простой HTML структуры для любой статьи:

<h1>Что такое HTML</h1>
<p><b>HTML</b> – это язык гипертекстовой разметки, был создан в <i>1991</i>году</p>
<p>Сегодня <b>HTML5</b> – это стандарт, который используется на всех современных сайтах и поддерживает мобильные устройства, анимации и даже игры в браузере!</p>
<img src="html-image.png" alt="Логотип HTML">

А теперь посмотрим на результат уже в браузере:

Можем заметить, что с помощью специальных тегов HTML, мы смогли явно выделить необходимые элементы страницы‑статьи:

Заголовок — тег <h1>
2 абзаца — тег <p>
Акцентные теги — <b> и <i> для оформления текста внутри абзаца
Изображение — тег <img>

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

Логотип CSS. Ресурс – https://ru.wikipedia.org/wiki/CSS — Логотип CSS. Ресурс — https://ru.wikipedia.org/wiki/CSS

CSS

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

В то время веб‑страницы были простыми и выглядели скучно — чёрный текст на белом фоне. CSS позволял отделить оформление от структуры, чтобы сделать страницы гибкими и стилизованными.

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

Возможности CSS3. Ресурс – https://ru.wikipedia.org/wiki/CSS — Возможности CSS3. Ресурс — https://ru.wikipedia.org/wiki/CSS

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

Строение CSS

CSS не отличается большей сложностью от HTML, но имеет слегка другой синтаксис, если в HTML мы указываем какие элементы должны быть на странице, то с помощью CSS‑правил мы можем указать то, как эти элементы должны выглядеть, посмотрим на HTML разметку прошлого примера с небольшим дополнением, весь контент был обернут в тег <body>, в который обычно помещается весь контент страницы:

<body>
    <h1>Что такое HTML</h1>
    <p><b>HTML</b> – это язык гипертекстовой разметки, был создан в <i>1991</i>году</p>
    <p>Сегодня <b>HTML5</b> – это стандарт, который используется на всех современных сайтах и поддерживает мобильные устройства, анимации и даже игры в браузере!</p>
    <img src="html-image.png" alt="Логотип HTML">
</body>

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

body {
    /* Отступы от краев экрана */
    margin: 0;

    /* Фоновый цвет страницы */
    background: #333;

    /* Внутренние отступы для контента */
    padding: 20px;

    /* Цвет всего текста */
    color: #fff;

    /* Используемые шрифты */
    font-family: Arial, Helvetica, sans-serif;
}

b {
    /* Размер шрифта */
    font-size: 18px;
}

img {  
    /* С помощью этих свойств картинка расположена по центру */
    display: block;
    margin: 0 auto;

    /* Размеры изображения */
    width: 200px;
    height: 200px;

    /* Скругление краев */
    border-radius: 10px;
}

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

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

Отсюда можем сделать вывод, что HTML и CSS тесно связаны друг с другом. Сейчас вы не встретите в Интернете ни одной страницы, которая не использует эти технологии вместе. Но вместе с этим, ни одна страница не обходится без близкого друга HTML и CSS (правило «третий лишний» здесь не работает) — JavaScript.

JavaScript

JavaScript был создан в 1995 году Брэнданом Айком в компании Netscape. Изначально язык назывался Mocha, затем LiveScript, а после ребрендинга получил название JavaScript. Несмотря на сходство в названии, JS не имеет отношения к языку Java — они совершенно разные.

Сегодня JavaScript является одним из самых популярных языков программирования. Он поддерживается всеми современными браузерами и используется не только в веб‑разработке, но и в серверном программировании, мобильных приложениях, разработке игр и даже искусственном интеллекте.

Посмотрим на один из примеров использования JavaScript. Реализуем навигацию на сайте, которая открывается по нажатию на кнопку. Сначала создадим верстку:

<button id="openNav" aria-label="Открыть навигацию">
    <!-- Иконка меню -->
</button>

<nav id="nav">
    <button id="closeNav" aria-label="Закрыть навигацию"></button>
    
    <!-- Пункты навигации -->
</nav>

Разберем подробнее:

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

Теперь представим, что по умолчанию навигация скрыта. Для этого в стилевом фале зададим свойство display: none, позволяющее скрыть элемент:

nav {
    display: none;
}

А теперь ниже добавим класс (чтобы указать, что стили будут применены к классу, то перед названием нужно указать знак .), который будет изменить свойство display, чтобы навигация снова стала видна:

.open {
    display: block;   
}

Таким образом, если мы добавим атрибут class="open" к тегу <nav>, то навигация станет видимой.

Но в ручную переключать класс, чтобы увидеть навигацию пользователи сайта конечно не будут, мы сделаем это за них с помощью JavaScript:

const openButton = document.querySelector('#openNav');
const closeButton = document.querySelector('#closeNav');
const navElement = document.querySelector('#nav');

function openNavigation() {
    navElement.classList.add('open');
}

function closeNavigation() {
    navElement.classList.remove('open');
}

openButton.addEventListener('click', openNavigation);
closeButton.addEventListener('click', closeNavigation);

Что здесь происходит:

Сначала мы нашли все элементы, которые у нас есть в разметке с помощью document.querySelector() и записали их в переменные с соответствующими названиями. Этот метод позволяет нам искать элементы в разметке, передав в него CSS селектор. Заметьте, чтобы найти элементы по атрибуту id, был использован знак # в начале селектора.
Вторым шагом мы создали функции openNavigation и closeNavigation, которые будут срабатывать только тогда, когда будет нажата соответствующая кнопка. Код внутри функций не срабатывает в момент создания, а только когда он действительно нужен и явно вызван.
В конце мы добавили два обработчика событий на найденные ранее кнопки. В этом нам помог метов addEventListener, принимающий 2 параметра — событие за которым нужно следить (в нашем случае клик по кнопке) и функцию, которая срабатывает каждый раз, когда событие наступает.

А теперь взглянем на результат:

Другие технологии для разработки

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

React — это библиотека JavaScript, созданная Facebook для удобного построения пользовательских интерфейсов. Она позволяет разбивать интерфейс на небольшие, переиспользуемые компоненты, что делает код более понятным и поддерживаемым. React использует виртуальный DOM (специальное представление структуры страницы в памяти), что ускоряет обновление интерфейса, так как изменения сначала применяются в виртуальном DOM, а затем обновляется только изменившаяся часть реального DOM. Важно отметить, что React — это не полноценный фреймворк, а библиотека, поэтому для полноценной разработки часто используются дополнительные инструменты, такие как React Router (для навигации между страницами) и Redux (для управления состоянием приложения).
TypeScript — это расширение JavaScript, добавляющее статическую типизацию, что помогает находить ошибки еще на этапе написания кода. В обычном JavaScript переменная может менять тип (например, сначала быть числом, а потом строкой), что может привести к неожиданным ошибкам. TypeScript позволяет заранее указывать, какого типа данные ожидаются, и предупреждает, если что‑то идет не так. Это делает код более надежным и понятным. Еще одно преимущество TypeScript — возможность использования современных функций JavaScript даже в старых браузерах, так как TypeScript перед компиляцией преобразуется в обычный JavaScript.
Vue.js — это еще один популярный фреймворк для создания интерфейсов, который удобен своей простотой и низким порогом входа. В отличие от React, Vue сразу предоставляет встроенные инструменты для работы с маршрутизацией (Vue Router) и управлением состоянием (Pinia или Vuex). Его основная концепция — декларативный подход к построению интерфейсов: разработчик описывает, как интерфейс должен выглядеть в зависимости от данных, а Vue сам обновляет страницу при изменении этих данных. Благодаря этому код получается компактным и легко читаемым. Vue особенно популярен среди небольших команд и стартапов, так как он требует меньше настроек и быстрее осваивается.
Webpack — это инструмент для сборки фронтенд‑проектов. Когда разрабатывается сложное приложение, код часто разбивается на много файлов (модули), которые используют разные форматы (например, SCSS, TypeScript, изображения). Браузер сам по себе не умеет работать с такими файлами, и Webpack нужен для того, чтобы собрать все эти ресурсы в понятный браузеру вид. Он может минимизировать код (делать его компактнее и быстрее), оптимизировать загрузку картинок и шрифтов, а также позволяет использовать современные функции JavaScript, даже если браузер их не поддерживает. Webpack часто используют вместе с React и Vue.
Figma — это онлайн‑инструмент для создания дизайна интерфейсов, который особенно популярен среди фронтенд‑разработчиков и дизайнеров. В отличие от традиционных программ (например, Adobe Photoshop или Sketch), Figma работает прямо в браузере, а это значит, что не нужно устанавливать дополнительное ПО, а файлы автоматически сохраняются в облаке.

Как правильно изучать и планировать время

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

Для того, чтобы не запутаться, в каком порядке начинать изучение той или иной технологии, существуют дорожные карты разработчика (Roadmaps). Они позволяют следовать определенной траектории обучения и построены так, чтобы изучение было понятным на каждом из этапов. Вот хороший пример Roadmap: https://roadmap.sh/frontend

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

Итог

Что в итоге мы имеем? Как оказалось, начать свой путь в мир IT не так сложно как кажется на первый взгляд, главное правильно расставить порядок изучения технологий и распределить учебное время. А самих технологий не настолько много, чтобы начать создавать полноценные сайты. Обобщим:

Frontend‑разработка — стремительно развивающееся и легкое для входа направление, занимающееся созданием сайтов и веб‑приложений.
Для создания красивых лендингов достаточно знать всего 2 технологии: HTML и CSS. Если нужна логика внутри сайта, например переключение навигации, как в примере из статьи, то подключается язык программирования JavaScript.
Для грамотного распределения времени лучше всего использовать тайм‑трекеры, а для организации общего процесса обучение использовать Roadmap.

Если статья была полезной для вас, то можете посетить Телеграм канал с различными обучающими видео и полезными материалами для начинающих Frontend разработчиков — https://t.me/sanwed_it