Ошибки, сложный материал, вопросы >
Нашли опечатку или неточность?

Выделите текст, нажмите ctrl + enter и отправьте его нам. В течение нескольких дней мы исправим ошибку или улучшим формулировку.

Что-то не получается или материал кажется сложным?

Загляните в раздел «Обсуждение»:

  • задайте вопрос нашим менторам. Вы быстрее справитесь с трудностями и прокачаете навык постановки правильных вопросов, что пригодится и в учёбе, и в работе программистом;
  • расскажите о своих впечатлениях. Если курс слишком сложный, подробный отзыв поможет нам сделать его лучше;
  • изучите вопросы других учеников и ответы на них. Это база знаний, которой можно и нужно пользоваться.
Об обучении на Хекслете

Редакторы кода

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

На самом деле, в отличие от многих языков программирования для вёрстки возможно использовать лишь один «Блокнот» или другой стандартный текстовый редактор в вашей системе. Именно так и верстали сайты в 90-х — начале 2000-х. Ведь HTML и CSS отрабатывают в браузере, а это значит, что наша задача — верно дать ему данные.

Старые редакторы кода

И сейчас вы можете сделать именно так, но развитие редакторов принесло множество полезных функций, которые недоступны в стандартных текстовых редакторах:

  • Подсветка HTML и CSS. С помощью подсветки можно просто отделять одни части от других. Например, в CSS подсветка разграничивает селекторы, названия свойств и их значения.
  • Автодополнение кода. Начав вводить нужное свойство или значение редактор предложит вам возможные варианты. Это похоже на то, как было во вкладке Styles в Chrome DevTools.
  • Валидация кода. То есть его проверка на корректность. Используя HTML, очень просто забыть закрыть блочный элемент. Браузеры как могут стараются сглаживать такие ошибки и автоматически закрывать блоки, но они не всегда могут угадать ваш замысел.

Visual Studio Code

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

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

Просто создайте новый файл с помощью комбинации Ctrl + N и сохраните его с расширением .html. Например, index.html. Скопируйте следующий HTML-код и посмотрите, как редактор подсветит все HTML-теги

<section>
    <h1>Основы вёрстки на Hexlet</h1>

    <p>В профессии «Верстальщик» вы изучите множество популярных технологий, которые используют при создании вёрстки.</p>

    <p>Узнаете о работе с CSS, препроцессорами, немного попрограммируете. Изучите Bootstrap и научитесь проверять свой код с помощью специальных утилит.</p>
</section>

Подсветка синтаксиса HTML

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

Автодополнение в VSCode

Обратите также внимание на то, что закрывающий тег section стал красного цвета. Так редактор нам подсказывает, что в разметке есть ошибка. Она связана с тем, что пока мы не дописали тег и не закрыли его.

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

Emmet в VSCode

Это возможно благодаря встроенному в Visual Studio Code плагину Emmet. С работой этого плагина мы познакомимся в одном из следующих уроков.

Теперь создайте любой файл с расширением .css. Например, style.css. Редактор кода так же автоматически определит, что в этом файле идёт работа с CSS, и подключит специальную подсветку для данного языка.

Подсветка CSS в VSCode

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

Это основные моменты при работе с HTML и CSS в редакторе Visual Studio Code, которые пригодятся вам в самом начале. При работе с этим редактором вы также познакомитесь с прекрасной системой установки плагинов. Так вы сможете настроить редактор под свои нужды и задачи.

Другие редакторы

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

  • Atom. Мощный редактор, который схож во многих моментах с Visual Studio Code.
  • Sublime Text — частично бесплатный редактор. Может быть достаточно сложен в первоначальной настройке, но всё равно он заслуженно любим многими программистами за небольшой вес и стабильную работу.
  • Vim — решение для любителей пощекотать себе нервы. Невероятно лёгкий и при этом сложный редактор. За всем этим стоит возможность гибкой настройки. Редактору уже скоро стукнет 30 лет, но он пользуется невероятной популярностью.
  • Brackets — редактор, рассчитанный на работу с HTML, CSS и Javascript. Не настолько расширяемый, как другие, но свою работу выполняющий хорошо.

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


<span class="translation_missing" title="translation missing: ru.web.courses.lessons.mentors.mentor_avatars">Mentor Avatars</span>

Остались вопросы? Задайте их в разделе «Обсуждение»

Вам ответят менторы из команды Хекслета или другие студенты.

Зарегистрироваться

или войти в аккаунт

Курсы программирования для новичков и опытных разработчиков. Начните обучение бесплатно.

  • 115 курсов, 2000+ часов теории
  • 800 практических заданий в браузере
  • 250 000 студентов

Отправляя форму, вы соглашаетесь c «Политикой конфиденциальности» и «Условиями оказания услуг».

Наши выпускники работают в компаниях:

Логотип компании Альфа Банк
Логотип компании Rambler
Логотип компании Bookmate
Логотип компании Botmother

Есть вопрос или хотите участвовать в обсуждении?

Зарегистрируйтесь или войдите в свой аккаунт

Отправляя форму, вы соглашаетесь c «Политикой конфиденциальности» и «Условиями оказания услуг».