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

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

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

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

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

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

1. Создают каркас страницы и наполняют её контентом.
   Размечают текст и заголовки, изображения, кнопки, формы и другие элементы страницы.

2. Настраивают внешний вид и делают сайт красивым.
   Подбирают цвета, шрифты, отступы и ставят блоки страницы на свои места.

3. Делают сайт удобным для всех устройств.
   Адаптируют сайт под мобильные устройства, планшеты, ноутбуки и компьютеры.

4. Добавляют интерактивные элементы.
   Реализуют выпадающие меню, модальные окна, анимации, вкладки

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

6. Обрабатывают пользовательский ввод.
   Настраивают формы регистрации, поиска, комментариев, отзывов.

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

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

9. Защищают сайт от ошибок и сбоев.
   Обрабатывают некорректный ввод данных, предупреждают об ошибках, тестируют код перед выпуском.

10. Публикуют сайт в интернете и следят за его работой
    Загружают сайт на сервер, обновляют контент, исправляют баги, адаптируют сайт под новые устройства и браузеры.

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

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

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

• HTML (HyperText Markup Language) — язык гипертекстовой разметки.

• CSS (Cascading Style Sheets) — каскадные таблицы стилей.

• JavaScript — язык программирования для создания интерактивных элементов.

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

HTML

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

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

1. Определяет структуру страницы.
   HTML определяет какие элементы и в каком порядке будут находится на веб‑странице.

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

Строение HTML

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

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

Что такое HTML
HTML – это язык гипертекстовой разметки, был создан в 1991году
Сегодня HTML5 – это стандарт, который используется на всех современных сайтах и поддерживает мобильные устройства, анимации и даже игры в браузере!

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

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

• Заголовок — тег

• 2 абзаца — тег

• Акцентные теги — и  для оформления текста внутри абзаца

• Изображение — тег

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

Логотип 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

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

Строение CSS

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

    
Что такое HTML
    
HTML – это язык гипертекстовой разметки, был создан в 1991году
    
Сегодня HTML5 – это стандарт, который используется на всех современных сайтах и поддерживает мобильные устройства, анимации и даже игры в браузере!
    

К каждому из этих тегов мы можем применить 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;
}

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

HTML + CSS

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

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

JavaScript

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

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

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

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

• Самый первый элемент — кнопка, которой мы задали дополнительные параметры, в HTML они называются атрибутами. Нас интересует первый атрибут id, по которому мы будем искать эту кнопку в JavaScript коде.

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

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

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

nav {
    display: none;
}

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

.open {
    display: block;   
}

Таким образом, если мы добавим атрибут class="open" к тегу