Этот сайт использует файлы cookies. Оставаясь на сайте, Вы соглашаетесь с использованием файлов cookies и принимаете Соглашение об использовании сайта.

верстка сайтов для начинающих

С чего начинается верстка?

667
667

Данная статья не призвана ознакомить читателя с супер новой технологией или с мало кому известными магическими инструментами разработки. Нет. Я поделюсь скромным опытом с теми, кто еще находится в нерешительности и не знает, с какой стороны подойти к изучению одной из составляющих web-разработки — вёрстке страниц.


Мой путь в мир верстки начался два года назад. Что-то мне давалась легко — лежало на поверхности. До чего-то приходилось доходить некоторое время. Что-то подсказывали.

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

Про HTML, CSS и обучение

Первым делом за информацией я обратилась к всезнающему Google, на что он выдал этот сайт, который расширился до webref.ru. На подобных ресурсах можно буквально с нуля начать выстраивать отношения с HTML и CSS☺. И таких ресурсов много (см. подборку обучающих материалов).

Итак, с помощью HTML задается разметка странички, а с помощью классов, айдишников и CSS она превращается в настоящую красоту:

пример html странички
Пример странички, созданной с помощью HTML и CSS.

Разметка строится из <b>тегов</b>, каждый из которых предназначен для определенного контента: навигации, заголовка страницы, заголовка в тексте, картинки, текста и еще много-много для чего (аж более 100 штук!). Стили же представляют из себя набор свойств для элементов странички: цвет, размер, способ отображения и т. д.

Сами по себе элементы страницы в зависимости от браузера и своей специфики могут обладать «родными» свойствами.

Этой информации пока хватит не только для того, чтобы сложилось представление о том, из каких кирпичиков строится web-страничка, но и для того, чтобы пойти с этими знаниями в бой и попробовать себя в создании странички «Hello, Word!» или еще чего покруче!☺

Когда я проштудировала весь htmlbook (а это заняло не больше недели), у меня уже были и мигающие квадратики и передвигающиеся кружки. Самое захватывающее в этом знакомстве — мгновенное получение результата, возможность в эту же секунду оценить разницу между «было» и «стало».

Про инструменты разработки

Поговорим о боевых инструментах.

Сначала я работала исключительно в блокноте. Да, структуру разметки страницы я знала наизусть! Свойства и их значения печатались на автомате. Но скорость и стиль написания оставляли желать лучшего. Пока в один прекрасный день меня не познакомили с Sublime, а потом я встретила Brackets, ну, а когда я уже пошла на работу, мы стали жить душа в душу с Atom ☺.

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

Всех их объединяет один огромный плюс — они определенно лучше блокнота!

Преимущества редакторов

Современные редакторы позволяют (в зависимости от вида деятельности) подключать необходимые пакеты. Самые первым делом устанавливаемые — Emmet и различные autocomplete.

Пример установки пакета Emmet в Atom'е:

пакет emmet
Установка пакета Emmet в Atom.

Autocomplete-css устанавливается вместе с редактором в случае с Atom'ом. Из названия ясно, autocomplete-css допечатывает/подсказывает слова при работе с CSS. Ну, а как работает Emmet лучше просто посмотреть, и для большего эффекта сравнить с блокнотом.

Верстка в Atom'е:

верста в атоме

Верcтка в блокноте:

верста в блокноте

Достоинства редакторов заключаются в подключаемых пакетах. Сейчас их очень много и описать здесь все просто невозможно. В интернете можно найти достаточно информации про любой из пакетов.

P. S. Никакие пакеты и редакторы не спасут, когда coding style отсутствует. Писать надо красиво и понятно:

А в конце работы над каждой страничкой замечательно будет проверить ее на правильность здесь.

Про обучающие курсы

Еще немного об информационных ресурсах.

В интернете существует множество обучающих курсов, которые дают материал, можно сказать, в игровой форме: дается челлендж по определенной теме, к нему прилагается обучающее видео и задания. После их выполнения вы получаете баллы, галочки и т. п. Достойная вариация представления информации и обучения.

Можете попробовать себя здесь и здесь, например. Лично я прошла не один курс по последней ссылке.☺

Про браузеры

Как я уже говорила, у браузеров уже есть «родные» стили для элементов, но не во всех случаях они идентичны друг другу. Чтобы это не влияло на отображение верстки в различных браузерах, необходимо познакомиться с такими файлами, как reset.css и normalize.css, и, конечно, применять их на практике.

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

Чтобы проверить поддерживается тот или иной тэг/свойство, рекомендую этот сайт.

Браузеры могут быть не только отстающими, но и передовиками. Поясню на примере Chrome, что это значит.

W3C — консорциум, занимающийся разработкой стандартов для Интернет. Это они сделали html5 и все его предыдущие версии, и аналогично для CSS. На их сайте можно найти информацию о развитии этих направлений: что находится в разработке, что обновлено и т. п. Некоторые нововведения можно попробовать в деле. Чтобы поэкспериментировать с ними в Chrome, необходимо зайти на chrome: //flags/ и включить необходимые экспериментальные функции.

подключение эксперимент функций
Подключение экспериментальных функций.

После этого, перезапускаем браузер и пробуем, пробуем, пробуем.

Про пост и препроцессоры

Когда мне приходится писать на чистом CSS, я уже ощущаю дискомфорт, для меня странно делать столько лишних движений. Это как двигаться до конечной точки пешком, а не ехать на машине. Так что этот пункт я считаю одним из самых важных.

И пост и препроцессоры дают нам возможность писать код более понятно, удобно и быстро:

  • Вложенные правила.
  • Переменные.
  • Mixin.
  • Функции и операции со свойствами.
  • Условные операторы.
  • Шаблонные селекторы.

И много других плюшек можно попробовать, используя less, sass, stylus, postcss и др.

Препроцессоры отличаются от постпроцессоров тем, что первые работают со своими файлами, а на выходе уже отдают CSS. Постпроцессоры же работают напрямую с CSS файлами.

Про постпроцессоры можно почитать еще одну статью в нашем блоге.

Про статью

В этой статье я разместила долю той информации, которой мне не хватало несколько лет назад именно в таком формате. Каждая тема здесь — ниточка от огромного клубка, но ее хватит, чтобы начать разматывать его до самого конца.

Дерзайте, творите, верстайте!