Как познакомиться с HTML и CSS
Читать 10 минут
Знание основ 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++.
Что дальше
Дальше можно пройти один из онлайн-курсов:
- Codeacademy на английском;
- HTML Academy на русском.
Курсы простые, пройти их может каждый.
Что об этом думают сотрудники
«HTML знаю неплохо, а CSS совсем базово. Изучал на HTML Academy и Codecademy. Базовые знания HTML необходимы для SEO. Иногда неплохо через инструменты разработчика в браузере посмотреть, тот ли цвет подобрали элементу. Плюс если курируешь разработку сайта или лендинга, хорошо понимать что такое bootstrap, на чём он основан и в чём прелести».
Ведущий менеджер
«Отдельный курс не проходил → был предмет в универе плюс работал вебмастером. Знание основ HTML и CSS — мастхев для джедая: добавить что-то на сайт клиента, сверстать рассылку, найти в коде сайта счётчик или элементы разметки. Дополнительно знания CSS позволяют «ковырять» верстку в firebug: менять расположение и оформление блоков, размер и цвет текста. Можно самостоятельно прикинуть улучшения и обсудить с дизайнером».
Управляющий партнёр
«В школе верстал сайт, а фрилансером проверял баги и работал с разработчиками. Также проходил курс на Codeacademy, поэтому понимаю логику вёрстки. Если вижу баг в аналитике сайта — сразу проверяю, правильно ли установлен код. Смотрю в код, когда хочу узнать, какой установлен код аналитики или какие сервисы есть на сайте. Могу потестировать дизайн в браузере через инструменты для разработчиков. Такие мелочи ускоряют работу».
Павел Алимов
Менеджер
«Год работал вместе с верстальщиком и понимаю, как можно верстать. Если мне говорят, например, что нельзя переводить человека на гугл карты в мобильной версии сайта, я рассказываю, как уже делал подобное. Иногда верстальщик знает один способ решить задачу, а я знаю, что можно пойти другими путями. Понимание особенностей вёрстки помогает, когда продумываешь функционал лендинга и отдаешь его в вёрстку».
Сергей Михайлов
Дизайнер
«Проходил курсы на HTML Academy в 2014 году. Потратил примерно 10 часов — изучил только то, что помогает в работе.Настройка ретаргетинга из соцсетей всегда завязана на коде. Соцсети отдают небольшие куски кода, которые нужно установить на страницу. Я понимаю устройство страницы, поэтому могу объяснить разработчикам, куда установить код. Знание вёрстки помогает освоить более сложные вещи — править пиксели и писать пользовательские события для ретаргетинга».
Илья Кузнецов
Ведущий джедай
«Я проходила курс около месяца по полчаса-час в день. Сейчас мне эти знания каждый день не нужны, но могу уверенно посмотреть в коде где что настроено, могу сама GTM настроить на любые элементы. Ну и когда хоть немного знаешь код, чувствуешь себя увереннее, когда ставишь таск программисту».
Джедай
Резюме
Знание основ HTML и CSS полезно нетехнологам, которые работают с сайтами.
Самый простой способ познакомиться с версткой — поиграть с кодом через браузер.
Следующий уровень — работа через блокнот. Откройте блокнот, введите код и сохраните файл, как some.html. Откройте в браузере и посмотрите, как выглядит страница. Поменяйте код и снова посмотрите.
Если попробовали и понравилось, пройдите онлайн-курс Codeacademy или HTML Academy. На Codeacademy курсы по основам HTML и CSS занимают примерно 15 часов, на HTML Academy — 20–30 часов.
Обсудим задачу
Мы свяжемся с вами в течение двух часов, чтобы
задать
вопросы
и обсудить, какую пользу можем
принести
Роман Игошин
коммерческий директор, управляющий партнёр