Первые строки кода, наброски для заготовки будущей статьи или просто рисунок одна из сложнейших задач на начальном этапе в работе любого специалиста. Страх допустить ошибку, написать безвкусную отсебятину тормозит дух творчества, губит на корню страстное начало.
Чтобы развеять панику на корабле, следует взять бразды правление под личное командование и приступить к первым шагам.
Верстка сайта с нуля, привет HTML
Образно представим, что нам предстоит сверстать продающий лэндинг с лаконичной шапкой из разряда стандартной темы GetBootstrap, пример платного шаблона Front – Multipurpose Responsive Template:
Допустим нам дали шрифты, точные размеры, картинки и лого, всё на руках. Такой расклад облегчает дело, однако не снижает общего градуса напряжения при реализации начальных строк кода.
Первые шаги: структура кода
Воспользуемся одним из популярных редакторов кода, будь то Visual Studio Code, Sublime Text или типичный блокнот Notepad++ нам в помощь.
Цикл написания кода по факту повторяется, особенно если в работе была похожая тема. Но что делать с новой шапкой? Ответ простой, начнем с построения привычного DOCTYPE документа с head и body, составим приблизительную структуру.
Вся работа проходит в документе index.html.
Создадим в корне проекта 3 папки с названием:
- images (графика - картинки, логотип);
- styles (стили - ваши авторские, встроенные normalize.css для сброса);
- javascript (скрипты по мере необходимости).
После минутных усилий наш чистый лист дополнился стандартными тегами. В тело (body) внесем несколько блоков <div> или сразу семантических тегов (header) если дело касается шапки.
Пример:
- вариант №1 <div class="header"></div>
- вариант №2 <header class="header"></header>
Если наши нейронные связи безмолвствуют, то мы может пойти по проторённой дорожке, используя браузер и просмотр чужого кода:
При просмотре внутреннего кода методом нажатия клавиши CTRL + Schift + I или правой кнопкой мыши в любом браузере мы можем навести на любой блок шаблона.
В комментариях верстальщики обозначили важные пометки: шапка, поиск, навигация, логотип, а также начало и окончания блока (HEADER, Search, End Search, Topbar, End Topbar, Nav, Logo).
Вся структура как на ладони если использовать метод копирования чужого кода. Не стоит забывать и про огрехи других разработчиков, можно собрать кучу ошибок, лишних строк.
К примеру в коде шаблона Front – Multipurpose Responsive Template мы часто видим идентификаторы (<header id="header">), нужны они или нет решать вам.
В сообществе верстальщиков принято использовать классы + взять за практику применение БЭМ (блок элемент модификатор).
Первые стили CSS вашего черновика
Со стилями аналогичная ситуация как и с html. Вначале вы организуете общую структуру макета при помощи отдельной заготовки, насыщаете оболочку проекта семантическими html-тегами и новыми классами, попутно прописывая CSS.
Подключение стилей происходит в файле index.html между тегами <head> и закрывающим </head> таким образом:
<link rel="stylesheet" href="styles/style.css">
Обычно в макете уже указан цвет текста, фон отдельных блоков, расположение и прочее. Но вы можете посмотреть у соседа что творится в его доме стилей.
Индивидуальность при написании текста, составлении первых строк кода формируется у каждого по разному. Однако существуют отдельные правила, стандарты, которым следует придерживаться при преодолении чистого листа.
Что думаете Вы по этому поводу? Возможно ваш опыт пригодится и другим специалистам творческих профессий.
