Если до этого урока вы пробовали верстать только с помощью онлайн-сервисов, то настало время установить редактор кода, который позволит сохранять результаты вашей работы на компьютере или сервере.
На самом деле, в отличие от многих языков программирования для вёрстки возможно использовать лишь один «Блокнот» или другой стандартный текстовый редактор в вашей системе. Именно так и верстали сайты в 90-х — начале 2000-х. Ведь HTML и CSS отрабатывают в браузере, а это значит, что наша задача — верно дать ему данные.
И сейчас вы можете сделать именно так, но развитие редакторов принесло множество полезных функций, которые недоступны в стандартных текстовых редакторах:
В настоящее время есть множество разных редакторов. В этом уроке мы остановимся на одном из самых популярных решений от компании Microsoft — Visual Studio Code. Это мощный инструмент, который можно использовать не только для вёрстки, но и для программирования на любом языке. После его настройки вы получите инструмент, с помощью которого сможете как верстать, так и программировать.
Скачать редактор вы можете с официального сайта. С самого начала он хорошо настроен для работы с HTML и CSS, поэтому приступать к экспериментам можно уже сейчас.
Просто создайте новый файл с помощью комбинации Ctrl + N и сохраните его с расширением .html. Например, index.html. Скопируйте следующий HTML-код и посмотрите, как редактор подсветит все HTML-теги
<section>
<h1>Основы вёрстки на Hexlet</h1>
<p>В профессии «Верстальщик» вы изучите множество популярных технологий, которые используют при создании вёрстки.</p>
<p>Узнаете о работе с CSS, препроцессорами, немного попрограммируете. Изучите Bootstrap и научитесь проверять свой код с помощью специальных утилит.</p>
</section>
Попробуйте добавить любой HTML-элемент в эту разметку и вы увидите, что редактор начнёт предлагать вам различные варианты тегов, которые подходят под ту комбинацию символов, которую вы уже ввели.
Обратите также внимание на то, что закрывающий тег section стал красного цвета. Так редактор нам подсказывает, что в разметке есть ошибка. Она связана с тем, что пока мы не дописали тег и не закрыли его.
В качестве интересного примера попробуйте в пустом HTML-файле ввести символ ! и нажать клавишу Enter. Вы получите базовую разметку HTML-документа со всеми основными тегами и мета-тегами, которые используются в реальных проектах.
Это возможно благодаря встроенному в Visual Studio Code плагину Emmet. С работой этого плагина мы познакомимся в одном из следующих уроков.
Теперь создайте любой файл с расширением .css. Например, style.css. Редактор кода так же автоматически определит, что в этом файле идёт работа с CSS, и подключит специальную подсветку для данного языка.
Вы можете увидеть, что селектор, название свойства и его значение выделены тремя разными цветами. Это отлично помогает ориентироваться в больших CSS-файлах.
Это основные моменты при работе с HTML и CSS в редакторе Visual Studio Code, которые пригодятся вам в самом начале. При работе с этим редактором вы также познакомитесь с прекрасной системой установки плагинов. Так вы сможете настроить редактор под свои нужды и задачи.
Конечно же, выбор редактора для работы не ограничен только одним решением. В настоящее время на рынке достаточно много различных редакторов кода, которые вы можете использовать. Среди них есть как платные, так и бесплатные. Среди отличных бесплатных решений также есть:
Вы можете попробовать различные редакторы и остаться на том, который вам больше всего нравится. Запомните, что редактор — не более чем инструмент. Он не сделает за вас всю работу, поэтому достаточно один раз привыкнуть к любому редактору и менять его нет смысла.
Вам ответят команда поддержки Хекслета или другие студенты.
Выделите текст, нажмите ctrl + enter и отправьте его нам. В течение нескольких дней мы исправим ошибку или улучшим формулировку.
Загляните в раздел «Обсуждение»:
Курсы программирования для новичков и опытных разработчиков. Начните обучение бесплатно.
Наши выпускники работают в компаниях:
С нуля до разработчика. Возвращаем деньги, если не удалось найти работу.
Зарегистрируйтесь или войдите в свой аккаунт