Кем я стану, когда выучу HTML и CSS?

26 апреля 2021

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

В последнее время нередко у многих возникает вопрос: «Если я выучу HTML и CSS — кем я стану: фронтендером, верстальщиком, программистом?». Давайте сегодня поговорим об этих специальностях, узнаем, являются ли HTML/CSS языками программирования, а также обсудим необходимый минимум для старта на позиции Frontend developer.

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

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

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

Найдите на компьютере любое изображение и откройте его с помощью браузера.

Открылась страница в новой вкладке с нашей картинкой посредине. Посмотрим, как именно браузер ее открыл, заглянув в консоль разработчика с помощью F12 или Ctrl + Shift + J

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

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

Если мы хотим отобразить элемент на странице, то должны описать его с помощью HTML

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

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

Но кнопка по-прежнему только описана, она еще ничего не делает. Чтобы при клике на кнопку происходило какое-то действие, добавим несколько строк JS:

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

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

Изучив HTML/CSS можно браться за верстку веб-страниц. Для этого приходите к нам на курс «Основы HTML, CSS». После его завершения следующим шагом должно стать изучение «Основы JavaScript». Освоив комплект из HTML/CSS/JS, вы можете считать себя полноценным верстальщиком. В сферу задач такого специалиста входит перенос дизайнерских макетов в интерактивные веб-страницы. 

Но для верстки макетов, как правило, требуются лишь поверхностные знания JavaScript. Если появляются задачи посерьезнее, то может возникнуть потребность в AJAX-запросах, работе с REST API и CORS. Появляются различные фреймворки и библиотеки. И уже овладев всем этим спектром, можно гордо называть себя фронтендером либо веб-разработчиком

Давайте погружаться в мир frontend-разработки вместе!

Похожие темы