Как познакомиться с HTML и CSS

Рассказывает
Всеволод Устинов,
руководитель

Знание основ HTML и CSS полезно маркетологам, менеджерам, дизайнерам и другим нетехнологам. Входит в план обучения джедаев.»

Чем полезно

Реже нужно привлекать технолога → проще вносить изменения → меньше преград для улучшения проектов:

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

Как начать

Начните без специальных инструментов, откройте любую страницу:

Видим длинный заголовок, попробуем перенести больше текста на вторую строку. Кликните на заголовок правой кнопкой мыши и выберите «Просмотреть код» или «Inspect» (если вы в гугл хроме):

Появился код справа и страница ужалась — неудобно.

Перенесём код вниз. Нажмите на меню в верхнем правом углу, затем «Dock to bottom»:

Теперь можно редактировать:

Перенесём «и условий по вкладам» на вторую строку. Нажмите на строку кода с заголовком правой кнопкой мыши и выберите «Edit as HTML»:

Добавьте между «рекламой» и «и» тег «br»:

Смотрим, что получилось:

Стало лучше, делаем принтскрин и показываем дизайнеру.



Так же меняем размеры, цвет текста и прочее: выделяем элемент и меняем его код в списке стилей справа. Увеличим размер с 36 пикселей до 48:

Ищите html-теги и css-стили в интернете или справочнике htmlbook слева, добавляйте в код и оценивайте изменения. Нравится — делайте скриншот и отправляйте дизайнеру.

Браузер меняет страницу только для вас, другие посетители этого не видят. Удобно визуально протестировать гипотезу.

Следующий шаг

Если хочется углубиться в вёрстку, выполните упражнение от Артёма Поликарпова:

  1. Откройте блокнот на компьютере.
  2. Вставьте туда код:
    <style>
      .angry {
        color: red;
      }
    </style>
    <p class="angry">Красный текст.</p>
  3. Нажмите «Файл → Сохранить как», назовите файл «some.html», сохраните.
  4. Откройте файл через браузер:
  5. Вернитесь в блокнот, red замените на blue, после точки с запятой поставьте пробел и добавьте font-size: 100px. Нажмите «Файл → Сохранить» и обновите вкладку в браузере:

Примечание: чтобы сохранить файл как html должны быть включены расширения или введите код и сохраните файл через Notepad++.

Что дальше

Дальше можно пройти один из онлайн-курсов:

Курсы простые, пройти их может каждый.

Что об этом думают сотрудники

Эльдар Забитов, ведущий менеджер:

«HTML знаю неплохо, а CSS совсем базово. Изучал на HTML Academy и Codecademy. Базовые знания HTML необходимы для SEO. Иногда неплохо через инструменты разработчика в браузере посмотреть, тот ли цвет подобрали элементу. Плюс если курируешь разработку сайта или лендинга, хорошо понимать что такое bootstrap, на чём он основан и в чём прелести.»

Павел Алимов, менеджер:

«В школе верстал сайт, а фрилансером проверял баги и работал с разработчиками. Также проходил курс на Codeacademy, поэтому понимаю логику вёрстки. Если вижу баг в аналитике сайта — сразу проверяю, правильно ли установлен код. Смотрю в код, когда хочу узнать, какой установлен код аналитики или какие сервисы есть на сайте. Могу потестировать дизайн в браузере через инструменты для разработчиков. Такие мелочи ускоряют работу.»

Роман Игошин, ведущий джедай:

«Отдельный курс не проходил → был предмет в универе плюс работал вебмастером. Знание основ HTML и CSS — мастхев для джедая: добавить что-то на сайт клиента, сверстать рассылку, найти в коде сайта счётчик или элементы разметки. Дополнительно знания CSS позволяют «ковырять» верстку в firebug: менять расположение и оформление блоков, размер и цвет текста. Можно самостоятельно прикинуть улучшения и обсудить с дизайнером.»

«Я проходила курс около месяца по полчаса-час в день. Сейчас мне эти знания каждый день не нужны, но могу уверенно посмотреть в коде где что настроено, могу сама GTM настроить на любые элементы. Ну и когда хоть немного знаешь код, чувствуешь себя увереннее, когда ставишь таск программисту.»

Сергей Михайлов, дизайнер:

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

Илья Кузнецов, специалист по социальным сетям:

«Проходил курсы на HTML Academy в 2014 году. Потратил примерно 10 часов — изучил только то, что помогает в работе.

Настройка ретаргетинга из соцсетей всегда завязана на коде. Соцсети отдают небольшие куски кода, которые нужно установить на страницу. Я понимаю устройство страницы, поэтому могу объяснить разработчикам, куда установить код. Знание вёрстки помогает освоить более сложные вещи — править пиксели и писать пользовательские события для ретаргетинга.»

Резюме

Знание основ HTML и CSS полезно нетехнологам, которые работают с сайтами.

Самый простой способ познакомиться с версткой — поиграть с кодом через браузер.

Следующий уровень — работа через блокнот. Откройте блокнот, введите код и сохраните файл, как some.html. Откройте в браузере и посмотрите, как выглядит страница. Поменяйте код и снова посмотрите.

Если попробовали и понравилось, пройдите онлайн-курс Codeacademy или HTML Academy. На Codeacademy курсы по основам HTML и CSS занимают примерно 15 часов, на HTML Academy — 20–30 часов.



Подпишитесь, чтобы не пропустить свежие статьи

Новые статьи из Академии и открытые вакансии каждые две недели:

Мы используем ваши cookie-файлы, IP-адрес и местоположение. Продолжая пользоваться сайтом, вы принимаете соглашение о передаче данных.