HTML, CSS, JS - инструменты разработчика сайтов

Привет!

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

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

Из прошлого поста тебе стало известно, что frontender разрабатывает сайты совместно с дизайнерами и теми, кто отвечает за backend.

НО интереснее же узнать о том, чем занимается он изо дня в день ?

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

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

HTML - это язык гипертекстовой разметки. Он состоит из тегов и их атрибутов, помогает понять браузеру, что и в какой последовательности отразить на странице в интернете. Элементы разметки, т.е. теги, могут быть парными и одинарными.
Парные теги состоят из двух частей: <тег> - открывающей и закрывающей - </тег>.
Одиночные обладают только открывающей частью.

Это одиночный тег img с атрибутом src. Этот тег выводит картинку в браузере, адрес которой содержится в атрибуте src.

Это тег p, он необходим для создания абзацев в тексте. Является парным тегом. Он выведет на сайте надпись "Привет, мир".

CSS - это каскадные таблицы стилей. В общем-то, тоже язык, но уже отвечающий за внешний вид html - элементов. Код на CSS состоит из селекторов и правил. Синтаксис выглядит следующим образом:

и все это целиком называется правилом

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

Это CSS правило означает, что информация, содержащаяся в теге p должна быть выведена в браузере синим цветом

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

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

P.S. Главное в вёрстке - это семантика, т.е. у каждого тега есть собственное назначение, которое стоит знать. Например, в тег, предназначенный для размещения ссылок нельзя записать текст. Или наоборот. Чем качественнее сделана верстка, тем лучше к сайту будут относиться поисковые системы (Яндекс, Google )

Удачи!