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

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

Чем полезно

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

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

Как начать

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

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

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

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

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

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

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

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

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

Ищите 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 полезно нетехнологам, которые работают с сайтами.

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

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

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