Рассказывает
Всеволод Устинов,
сооснователь агентства
Знание основ HTML и CSS полезно маркетологам, менеджерам, дизайнерам и другим нетехнологам. Входит в план обучения джедаев.»
Чем полезно
Реже нужно привлекать технолога → проще вносить изменения → меньше преград для улучшения проектов:
- внести мелкие исправления в контент;
- поиграть с размерами шрифтов и стилями элементов прямо в браузере;
- проверить корректность размещения счетчиков и отправки событий;
- сделать качественную постановку задачи на верстку;
-
запустить простой
сплит-тест .
Как начать
Начните без специальных инструментов, откройте любую страницу:
Видим длинный заголовок, попробуем перенести больше текста на вторую строку. Кликните на заголовок правой кнопкой мыши и выберите «Просмотреть код» или «Inspect» (если вы в гугл хроме):

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

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

Добавьте между «рекламой» и «и» тег «br»:
Смотрим, что получилось:
Стало лучше, делаем принтскрин и показываем дизайнеру.
Так же меняем размеры, цвет текста и прочее: выделяем элемент и меняем его код в списке стилей справа. Увеличим размер с 36 пикселей до 48:
Ищите
Браузер меняет страницу только для вас, другие посетители этого не видят. Удобно визуально протестировать гипотезу.
Следующий шаг
Если хочется углубиться в вёрстку, выполните упражнение от Артёма Поликарпова:
- Откройте блокнот на компьютере.
-
Вставьте туда код:
<style> .angry { color: red; } </style> <p class="angry">Красный текст.</p>
- Нажмите «Файл → Сохранить как», назовите файл «some.html», сохраните.
-
Откройте файл через браузер:
-
Вернитесь в блокнот, red замените на blue, после точки с запятой поставьте
пробел и добавьте
font-size : 100px. Нажмите «Файл → Сохранить» и обновите вкладку в браузере:
Примечание: чтобы сохранить файл как html должны быть включены расширения или введите код и сохраните файл через Notepad++.
Что дальше
Дальше можно пройти
- Codeacademy на английском;
- HTML Academy на русском.
Курсы простые, пройти их может каждый.
Что об этом думают сотрудники
Резюме
Знание основ HTML и CSS полезно нетехнологам, которые работают с сайтами.
Самый простой способ познакомиться с версткой — поиграть с кодом через браузер.
Следующий уровень — работа через блокнот. Откройте блокнот, введите код и сохраните файл, как some.html. Откройте в браузере и посмотрите, как выглядит страница. Поменяйте код и снова посмотрите.
Если попробовали и понравилось, пройдите