Чему нужно научиться, чтобы вникнуть в фронтенд разработку

Веб-разработка Фронтенд HTML CSS JavaScript

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

Понимание

Прежде чем начать что-либо изучать, спросите себя, знаете ли вы, что такое веб-разработка? На случай, если вы не знаете:

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

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

Ваша отправная точка

Под фронтендом, как мы уже знаем, подразумевается клиентская часть. Что именно это значит? Итак, фронтенд — это все, что видит пользователь: страницы, элементы ввода, кнопки, анимация и другие элементы пользовательского интерфейса.

Итак, для создания этих элементов нам нужны некоторые инструменты. По сути, фронтенд состоит из 3 основных технологий:

HTML
CSS
JavaScript

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

HTML

HTML — это язык разметки гипертекста. Не очень понятно, да? Я предпочитаю думать об этом как о языке, который мы используем для определения скелета нашего будущего веб-сайта. Этот язык довольно прост, поэтому именно с него вам следует начать свой путь обучения. Давайте посмотрим на пример кода.


                            index.html
                        
                        <!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Page Title</title>
    </head>
    <body>
    <!-- Your code here -->
    </body>
</html>

Каждый HTML-файл должен следовать этой структуре, чтобы работать правильно.

В HTML мы используем так называемые «теги», которые выглядят как <tagname></tagname>. Существует огромное количество различных тегов, и вам, вероятно, не стоит пытаться выучить их все сразу, потому что со временем вы будете использовать разные теги снова и снова и в конечном итоге запомните многие из них по мере работы с ними. Вот полный список существующих HTML-тегов.

HTML-теги всегда должны быть закрыты. Существует два типа тегов: традиционные и самозакрывающиеся. Разница между ними в том, что традиционные теги должны иметь свои открывающие и закрывающие теги (пример <body></body>), когда самозакрывающиеся теги открываются и закрываются внутри одного тега, например <img />.

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

Теперь давайте посмотрим и объясним наш пример:

<!DOCTYPE html> сообщает браузеру, что это наш тип документа. В этом примере указано, что тип документа — HTML 5, самая последняя версия HTML.
<html></html> играет роль оболочки для наших HTML-элементов.
<head></head> является домом для наших метаданных, ссылок и скриптов. Мы используем этот тег для связи файлов CSS и JavaScript, чтобы мы могли использовать их на нашей странице. Метаданные — это данные, которые представляют информацию о нашей странице, такую как кодировка, ключевые слова, описание или, как в нашей структуре, тег заголовка. Мы используем тег заголовка, чтобы присвоить нашей странице имя, которое будет отображаться на вкладке вашего браузера.
<body></body> здесь мы собираемся написать наш HTML-код.

CSS

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

Чтобы связать ваш CSS-файл, все, что вам нужно сделать, это использовать <link/> тег в вашем HTML-файле. Как мы уже знаем, нам следует сделать это в теге <head>. Не забудьте добавить к тегу <link/> атрибуты rel="stylesheet" и href="/path/to/your/style.css" !


                        
                            index.html
                        
                        <!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Page Title</title>
        <link rel="stylesheet" href="/path/to/your/style.css" />
    </head>
    <body>
    <!-- Your code here -->
    </body>
</html>

Селекторы

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

Вот некоторые из наиболее часто используемых:

Имена тегов

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


                            h1 {
    font-size: 32px;
}

В этом примере h1 это селектор. Размер шрифта каждого тега h1 составит 32 пикселя.

CSS-классы

Чтобы написать класс CSS нам нужно написать точку и желаемое имя нашего класса. Эти стили будут влиять только на те элементы, которые имеют имя класса без точки в атрибуте class="". Один элемент может иметь несколько классов.


                            
                                example.css
                            
                            .my-class {
    background-color: red;
}


                            
                                example.html
                            
                            <div class="my-class">
    example
</div>

В этом примере будет затронут каждый элемент с классом .my-class. Также имейте в виду, что эти селекторы можно комбинировать. В следующем примере эти стили будут работать только с тегами div имеющими класс my-class.


                            div.my-class {
    background-color: red;
}

Стили

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

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


                        .my-heading {
    color: #3ebd49;
}

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

JavaScript

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

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

Чтобы включить файл JS, добавьте тег <script> прямо внизу тега <body>, а затем добавьте атрибут src="" к тегу. В этом атрибуте вам нужно передать путь к вашему JS-файлу.


                        
                            index.html
                        
                        <!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Page Title</title>
        <link rel="stylesheet" href="/path/to/your/style.css" />
    </head>
    <body>
    <!-- Your code here -->
    <script src="/path/to/your/main.js"></script>
    </body>
</html>

А поскольку JavaScript — это обширная тема, мы не будем говорить о нем в этой статье, поэтому следите за обновлениями в следующих статьях! Или вы также можете использовать этот ресурс.

В заключение

В этой статье мы увидели лишь верхушку огромного айсберга под названием веб-разработка. Теперь вы имеете некоторое представление о технологиях, которые используются во фронтенде. Что дальше? Вам следует потратить достаточно времени на изучение HTML, CSS и JavaScript при создании простых проектов. Как только вы почувствуете себя комфортно с этими технологиями, обратите внимание на Bootstrap и ReactJS. Но не спешите, не торопитесь и получайте удовольствие!

Это все на данный момент. Спасибо за чтение и удачного взлома!