15 ошибок верстки сайта, которые отделяют новичка от профессионала.


Содержание материала:

7 наиболее распространенных ошибок верстки сайтов

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

Все ошибки верстальщика можно разделить на ошибки по невнимательности (чаще всего) и ошибки по незнанию.

Из собственного опыта и из писем читателей я собрал семь наиболее частых ошибок верстки сайтов.

1. Вложенность тэгов

Чаще всего ошибки с вложенностью тэгов возникают из-за незнания основ блочной верстки. Верстка сайта очень похожа на конструктор, где из кубиков (блоков) собирается сайт. Но основная суть такой конструкции — не собрать в кучу массу кубиков как попало, а уложить их по принципу «меньшее в большем».

То есть, у каждого блока есть начало (открывающий тэг) и конец (закрывающий тэг). И если, например, нам нужно уложить шапку сайта в общий контейнер, то мы пишем это в коде таким образом:

Видно, что блок шапки находится внутри контейнера. Но! Если записать так:

то получится, что шапка лежит вне контейнера.

То же самое касается не блочных, а строчных элементов. Чтобы, например, выделить в тексте абзаца ссылку, необходимо соблюсти следующую вложенность:

Образно говоря, должно соблюдаться правило abba, но не abab. На деле же часто случается так, что вложенность просто не соблюдается, либо верстальщики забывают записать какой-то из закрывающих тэгов.

Особенно часто это случается при верстке шаблонов для какой-либо CMS вроде WordPress. Там части страницы, такие как шапка, подвал или сайдбар, разнесены по разным файлам, и потеря закрывающего

2. Имена файлов на кириллице

Да, некоторые браузеры понимают такие имена, но далеко не все и не во всех случаях. Наиболее частой ошибкой является задание для картинок в качестве имен русских слов, да еще и с пробелами, точко-запятыми и прочими значками. Например:

Степа Питерский.jpg // ошибка, пробел между словами
Степа;Питерский.jpg // ошибка, точка с запятой между словами
Stepa Pitersky . jpg // ошибка, лишние пробелы
и т.п.

Чтобы не заморачиваться в будущем, пишите всегда имена на латинице, мелкими буквами и лучше покороче:

3. Не отображается фон в IE

Довольно странная и не очевидная ошибка. Возникает она потому, что браузер IE очень привередлив по части адресации в файле CSS. Если мы там задаем в качестве фона какую-либо картинку без повторов, то обязательно должны поставить пробел после адреса рисунка:

background: url(images/bg.gif) no-repeat; — правильно

background: url(images/bg.gif)no-repeat; — неправильно

Обратите внимание: после закрывающей скобки обязательно должен быть пробел!

4. Потеря фигурных скобок и других знаков

В файле CSS, как известно, каждый набор правил взят в фигурные скобки. Часто эти скобки теряют. Особенно, если пишут код не самостоятельно, а выдирают кусками из чужих листов стилей.

То же самое можно сказать и в отношении двоеточий, «решетки», точки и точки-с-запятой. В некоторых браузерах такая потеря порой не заметна, а в других все рушится.

5. Массовые DIV

В отличие от других ошибок, эта напасть практически не отражается на внешнем виде страницы. Однако является типичной ошибкой вебмастера, увлеченного дивами.

Дивы — это не восточные красавицы в шелковых трико и топлесс. DIV — это функциональный блок. Им может быть, например, контейнер со всем сайтом сразу, блок шапки, блок подвала и т.п.

Нет смысла оформлять этим тэгом все подряд: все абзацы текста, каждую картинку, каждый список наконец. Это все равно, что стрелять из пушки по комарам.

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

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

То есть, очередной излишний div, когда совершенно очевидно, что идентификатор можно смело задать самому тэгу списка — ul:

Тем самым избавляемся от лишнего «дива».

6. Единицы измерения

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

width: 100;
font-size: 12;

width: 100px;
font-size: 12px;

7. Путаница классов и идентификаторов

Речь идет о том, что зачастую в файле CSS для блока пишут правила как для класса, например .header, а в коде страницы его прописывают как для #header.

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

Есть и еще довольно распространенная ошибка, когда в коде страницы прописывают несколько блоков с одинаковыми идентификаторами:

Запомните хорошенько! В коде одной страницы НЕ МОЖЕТ БЫТЬ ОДИНАКОВЫХ ИДЕНТИФИКАТОРОВ!

И неважно, что некоторые браузеры явно халтурят и пропускают такие перлы. Это ошибка.

Если нужно задать одинаковые правила для нескольких блоков, то применяют классы — class. А id — это указатель на уникальный, единственный в своем роде блок.

Удачи вам! И не бойтесь ошибок, они случаются у всех, даже у гуру.

suhorukov.com

Число людей, предлагающих «сверстать сайт» за «смешные деньги», растет в геометрической прогрессии. Беда в том, что выдаваемый ими результат часто оказывается далеким от совершенства. И иногда кажется, что проще самому начать верстать, чем найти если не профессионала, то просто кого-то стоящего.

А почему бы и нет? Возможно, именно этот ваш порыв станет началом прекрасной карьеры в сфере веб-разработки? Как же стать настоящим профессионалом в области верстки сайтов? И главное: где этому учат? Беседуем с нашим экспертом — преподавателем курса Дмитрием Наседкиным .

Дмитрий, мы уже общались c вами о том, как вы пришли в PHP, расскажите, как вы стали заниматься версткой?

Ровно так же, как и PHP. Я устроился в компанию, в которой веб-разработчик совмещал в себе обязанности верстальщика, фронт-энд разработчика и бек-энд разработчика. Там я и начал себя реализовывать как верстальщик.

Давайте определимся с предметом: что такое современная верстка веб-страниц? Для многих это все еще связано с « таблицами » , « фреймами » и подобными терминами.

Изначально верстка была связана с этими понятиями. Непосредственно с ними связан и термин «табличная верстка», в рамках которой элементы располагались на странице с помощью таблиц. Была одна глобальная таблица, и все ее ячейки содержали какие-то элементы дизайна. С фреймами была примерно та же история: в ячейки таблицы вставляли фреймы, которые содержали определенный контент. Сейчас такой подход тоже существует, но с появлением и широким распространением технологий CSS постепенно теряет свою популярность. Сегодня веб-страницы верстают так называемыми «слоями» или div-ами — и это самый современный подход. Кроме того, если говорить о терминах, то одним из самых актуальных является «адаптивная верстка», т.е. сейчас верстают не только для десктопных браузеров, но и для браузеров мобильных устройств. Это предполагает учет разницы в разрешении экрана, чтобы сверстанная страница корректно и красиво выглядела на любом устройстве. Резюмируя, современная верстка — это искусство позиционирования этих самых слоев таким образом, чтобы пользователю было удобно и приятно смотреть на страницу.

Сейчас многие веб-агентства и самостоятельные верстальщики с гордостью рассказывают, что владеют навыками верстки на HTML5, CSS3. Неужели это настолько разные понятия с « обычными » HTML и CSS?

Я бы не сказал. Это просто новый стандарт языка для веб-разработки. Он включает в себя все то же самое, что было и раньше в HTML4, но в то же время добавляет ряд нововведений: дополнительных тэгов и свойств, которые несут новый функционал. Опять же, в чистом виде все эти новшества не всегда удается использовать, так как есть достаточно много браузеров, которые их просто не поддерживают. А верстальщик должен гарантировать, что сверстанная им страница будет одинаково выглядеть у различных пользователей, поэтому часто он не может применить эти технологии в работе.

Скажите, если говорить о технологиях в основе современной верстки, что нужно изучить в первую очередь? Многие новички просто теряются в « кроссбраузерности » , « кроссплатформенности » , « mobile first » .

Во-первых, не нужно бояться никаких слов. Здесь, как и в любом обучении, все идет от азов, от простого к сложному. На первом этапе кроссбраузерность и кроссплатформенность можно отложить в сторону. Во-вторых, сначала необходимо изучить основы HTML и CSS и научиться верстать хотя бы для одного браузера. Затем уже вникать в особенности и различия интерпретации HTML-кода и CSS-правил различными браузерами, учиться адаптировать верстку для различных девайсов.

Насколько сложно всему этому обучиться? Нужна ли какая-то специфическая подготовка?

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

Какие навыки могут пригодиться будущему верстальщику, помимо знания HTML и CSS? Часто от верстальщика требуют знания графических пакетов.

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

Кроме того, верстальщик, естественно, должен уметь работать с программами, нужными ему непосредственно для верстки: браузеры, инспекторы в браузере (они показывают состояние верстки, где находится тот или иной элемент, какие к нему применены свойства и тому подобное), текстовые редакторы. Далее, на более высоком уровне, будут подключаться всевозможные инструменты типа LESS , SASS , Bootstrap .

Эти инструменты позволяют облегчить и ускорить разработку, а то и вовсе ее автоматизировать. Например, Bootstrap — это фреймфорк, который предоставляет какие-то готовые к использованию элементы, которые можно комбинировать в нужном вам порядке и строить свой дизайн.

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

По-хорошему, верстальщик после получения макета дизайна производит верстку HTML-страниц, затем проверяет корректность их отображения в различных браузерах и на различных устройствах. Готовые страницы он передает веб-разработчикам, которые уже работают с ними дальше: добавляют динамики или какой-то функционал. Это можно назвать нормальным ходом работ, workflow, так сказать. Но подобная ситуация характерна для крупных компаний. В более мелких организациях функции верстальщика намного шире. Дизайнером верстальщик может и не быть, но вот в качестве фронт-энд разработчика вполне может работать: сверстал макет, прикрутил различные скрипты и модули, а то и на сервер залил. Чем меньше компания, тем шире может быть круг обязанностей.

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

Начать с базы HTML+CSS, а дальше различные технологии, касаемые верстки: над-языки (LESS, SASS) и фреймворки (Bootstrap), которые позволят быстрее работать. Есть технологии типа BEM (Block, Element, Modifier) , которые выделяют все элементы страницы в отдельные блоки. В процессе работы описываются внешние свойства такого блока, и собственно, дизайн сайта из таких блоков и состоит. Преимущества такой верстки в независимости блоков: верстку можно легко перестраивать. Если и другие не менее интересные и полезные инструменты. Освоив их, специалист при желании может перейти во front-end разработку, то есть стать не просто верстальщиком, но еще и разработчиком. Что вполне логично, чистых верстальщиков весьма немного.

Можно задать провокационный вопрос: когда верстальщик имеет право называть себя не начинающим, а профи? И что такое грамотно сверстанный сайт?

С моей точки зрения, профессионализм имеет два критерия оценки.

Первый критерий: сверстанный профессионалом сайт легко поддерживается и изменяется. Сверстать можно хорошо, везде все корректно отображается, аккуратно и замечательно, но если «внутри» качество верстки невысокое, то каким бы красивым ни был «фасад», это все равно будет видно. Под невысоким качеством верстки я имею в виду использование всевозможных костылей, которые усложняют дальнейшие изменения. Верстка должно быть легко поддерживаемой и легко изменяемой. Не может быть такого, что при внесении правок в какое-либо свойство, поплыл весь дизайн.

Второй критерий касается, скорее, не столько верстки, сколько всей IT-сферы. Когда верстальщику дают какую-то задачу, он должен знать, как именно ее решить, еще и понимать, сколько времени у него займет эта работа, учитывать связанные с ней риски. Он должен давать корректные оценки по времени выполнения и придерживаться их. Когда внешние заказчики видят, что верстальщик не только хорошо верстает, но еще и укладывается в срок, они говорят: «Вот это профессионал!»

Дмитрий, в IT-Академии вы ведете Курс верстки сайтов. Какие навыки и знания получат его слушатели? Что будут способны делать по окончании?

Начнем мы с базиса, о котором я говорил: посмотрим, что такое HTML, как он используется. Далее подключим CSS и посмотрим, как их комбинация позволяет создавать сайты. Будет очень много практики. На выходе студент получит все необходимые начинающему верстальщику навыки.

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

Сейчас в интернете можно найти огромное число конструкторов-сайтов, где поигравшись с « pag-and-play » , можно создать весьма красивый сайт. Не сочтены ли дни верстальщиков?

У меня вообще нет таких мыслей. Возможно, какая-то маленькая компания или отдельный человек и воспользуются таким ресурсом, но большие компании хотят уникальности, решения специализированных задач. Получить же все это на подобном конструкторе невозможно. Поэтому такая компания все равно обратится к стороннему разработчику, верстальщику.

От себя нам остается только напомнить, что Курс верстки сайтов стартует 25 июля ! Торопитесь начать свою карьеру под руководством настоящих профессионалов своего дела, ведь для того, чтобы сверстать настоящий сайт, не надо обладать какими-то особыми навыками или умениями. Нужно всего лишь начать!

Как стать начинающим верстальщиком

В этой статье я расскажу как стать начинающим верстальщиком. Т.е. после выполнения всех рекомендаций в можете претендовать на данную позицию. Статья создана специально для учеников glivera-team, но может помочь всем, кто решил освоить данную специальность.

Учим HTML/CSS

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

После прохождения уроков вы должны понимать:

  • что такое html-теги и как они работают
  • блочную модель(border, margin, padding)
  • как работает float, inline-block и flexbox
  • позиционирование(абсолютное, относительное, фиксированное, z-index)

Вы должны уметь:

  • вставить на страницу текст, картинки, ссылки, элементы форм
  • стилизовать элементы страницы(изменение размеров, цветов, теней и т.д)
  • создавать таблицы

Работаем с фотошопом

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

  • работа со слоями(скрытие, отображение, просмотр эффектов)
  • замер размеров элементов
  • вырезание картинок(обычных и паттернов)
  • копирование текста из макета в html

Начальные инструменты

Для быстрого старта вам понадобится редактор и браузер. Вы можете выбрать любые, но я посоветую Sublime Text в качестве редактора и Chrome в качестве браузера. Из операционных систем сделайте выбор между Windows и Mac. Остальные системы будут тормозить ваше обучение.

Топ-пост этого месяца:  Экспоненциальное представление объекта Number в TypeScript с помощью метода toExponential

Верстка первого сайта

На этом этапе скорее всего вы ощутите ступор. Вы вроде знаете html/css(на самом деле нет) и фотошоп. Но вы совершенно не понимаете как из макета сделать сайт. В данном случае вы можете пройти небольшой курс по верстке сайта, коих много на ютубе. На данном этапе вам нужно сверстать первый сайт. Не обращайте внимание на такие понятия как резина, адаптивность. И еще, не используйте css-фреймворки(bootstrap, foundation).

Понимание семантики, валидность

Итак, вы сверстали первый сайт, что дальше? Вам нужно понять как правильно расставлять теги в html-коде, а также научиться проводить валидацию. С валидацией все просто — машина анализирует код, говорит что не так, вы правите и понимаете. С семантикой посложнее, поскольку область довольно холиварная и во многих моментах разработчики не имеют единого мнения. Но все же общие стандарты есть. После того, как изучите — попробуйте сверстать новый макет семантично. Теперь на каждом этапе вам нужно получить обзор вашего кода от опытного специалиста/наставника.

Javascript и jQuery

На этом этапе вы должны понять, что такое Javascript и зачем он нужен. Далее познакомиться с библиотекой jQuery и попробовать сверстать сайт с интерактивными элементами(слайдеры, всплывающие окна, табы).

Изучите методологию БЭМ. Вам нужно понимать, как верстать независимыми блоками, как привнести модульность в вашу верстку. В интернете очень много информации по этому поводу. Не нужно изучать фул-стек БЕМ, просто важно понять методологию для CSS. Верстаете новый макет с применением методологий.

Для ускорения и удобства написания стилей придумали препроцессоры. Наш выбор — Sass(.scss). Вам необходимо изучить препроцессор и сверстать с ним новый макет. Понять нужно:

  • переменные
  • разница между миксинами и тихими классами(placeholder)
  • как работает ‘&’
  • как разделить стили на несколько .scss файлов

На данном этапе scss в css компилируйте с помощью prepros

Также для ускорения верстки и поддержки верстальщики используют шаблонизаторы html. Наш выбор — pug. После изучения вы должны понимать:

  • как делать миксины
  • как работает extends
  • циклы и переменные
  • работа с массивами

Верстаете сайт с применением шаблонизатора.

Адаптивность

Теперь вы можете начать верстать адаптивные сайты, которые подстраиваются под ширину окна браузера. Можете взять макет, где различные разрешения указаны дизайнером, а можете сами придумать, как будет перестраиваться сайт. С этого момента все сайты верстайте адаптивно.

IDE PHPStorm

Чем раньше вы пересядете с редактора на PHPStorm — тем лучше. Эта IDE позволяет значительно ускорить разработку. Скачать бесплатную(early access) PHPStrom можно на официальном сайте, если не хотите платить — скачиваете её раз в месяц. В остальном бесплатная версия такая же, как и платная.

Любой разработчик должен уметь работать с системами контроля версий, и верстальщик — не исключение. Мы, как и большинство выбрали Git. Вы должны уметь следующее:

  • работать с интерфейсом github
  • уметь клонировать репозитории на компьютер
  • делать commit, push, merge
  • делать pull request

Практика

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

Блог Vaden Pro

Полтора часа жизни ушли на то, чтобы вывести фоновое изображение. Казалось бы, простая задача и решаемая всего в одну строчку, но ведь не работает. Причина оказалась банальной, опечатка в имени файла. Чтобы вы не повторяли мои ошибки, решил написать эту статью.

В этой публикации собраны 6 самых банальных ошибок при верстке сайтов, которые очень легко допустить, но не так-то просто их найти. Причем главная проблема с выявлением данных ошибок в том, что чем более опытным верстальщиком себя считаешь, тем меньше ожидаешь такого глупого промаха.

1. Опечатки в коде

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


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

2. Ошибки в именах файлов

Эта проблема характерна для подключения фоновых и обычных изображений, а также для указания ссылок. Важно помнить, что браузеры не любят и воспринимают некорректно:
• кириллицу;
• пробелы;
• знаки пунктуации или специальные символы.
Чтобы вы не оказались в той ситуации, в которой я был, перед тем как заняться этой статьей, советую всегда придерживаться следующих принципов. Все имена файлов прописывать только латинскими буквами, можно использовать транслит. Если в названии файла два или больше слов, то разбивайте их не пробелами, а дефисами или подчеркиваниями. Кстати поисковики тоже любят именно такой формат. Ну а чтобы угодить еще и поисковому роботу, то название файла должно соответствовать его сути, а не представлять собой абракадабру из букв и цифр. При добавлении имени файла в код, задайте его переименование, скопируйте точное название, и затем вставьте в нужное место. Такая примитивная хитрость может существенно упростить вам жизнь.

3. Лишние div

Часто в погоне за блочной версткой может наблюдаться картина клонирования совершенно не нужных div. В них оборачивают списки, параграфы, картинки и ссылки, при этом такие действия в большинстве случаев не оправданы. Чтобы задать строчному элементу качества блочного, достаточно прописать это в css файле, также классы и идентификаторы могут быть присвоены любым другим элементам, кроме div.

Данная ошибка по факту не ошибка. Она усложняет чтение кода, наполняет его ненужными блоками и усложняет работу с css, но к фатальным последствиям не приводит. Но учтите, что каждый не нужный тег, это шаг к совершению глупой и грубой ошибки, о которой мы поговорим в следующем пункте.

4. Нарушение принципа блочной верстки

Появление блочной или как еще принято говорить div-ной верстки, существенно облегчило всем жизнь и расширило возможности, в сравнение с предыдущими таблицами. Главный ее принцип в том, что в больший контейнер укладывается меньший, такая себе матрешка. Но на практике в одном блоке может находиться несколько вложенных блочных или линейных контейнеров, из-за чего может возникнуть путаница. Классическая формула «abba», на практике часто превращается в «abbbba» и более сложные формы типа «abccbbccbppa». Чем сложнее данная структура, тем больше вероятность нарушить принцип вложенности и как результат поедет вся архитектура.

Хорошо, что есть современные средства разработки и не нужно больше писать код в блокноте, в них в виде подсказок отображены блоки, и проследить структуру можно. Также если вы ведете разработку непосредственно в интернет на тестовом домене, то на такую ошибку очень быстро укажет валидатор, с точностью до номера строки кода в которой ошибка. А если работаете на виртуальной машине, то просто скопируйте код и вставьте в тот же валидатор, так тоже можно.

5. Единицы измерения

В большинстве случаев, задавая размеры блоков или шрифтов в css файле, мы используем пиксели (px), просто это наиболее удобная единица измерения. Но браузер знает и другие единицы, такие как %, em и ex и как браузер интерпретирует это числовое значение без точно проставленной размерности неизвестно. Такая ошибка опасна еще и тем, что один браузер поймет вас правильно, и при проверке проект будет выглядеть как надо, а вот программа заказчика сделает все по-своему, и у него сайт поплывет. А ведь лишних проблем можно было избежать, просто поставив нужную размерность.

6. Ошибки классов и идентификаторов

Очень простая, но не всегда легко находимая ошибка, т.к. надо поднимать файлы html и сравнивать их с css. Мы знаем, что для блоков с общими свойствами задаются классы (class), а для уникальных контейнеров присваивается уникальный идентификатор (id). Все очень просто, но в html эти блоки мы помечаем соответствующими словами class/id, а в css используем обозначение для класса «.» и «#» для id. Все тоже максимально просто, вот только перепутать два знака не составляет труда. Если будет нестыковка между файлами html и css, то браузер просто не поймет что нужно делать и мы не получим ожидаемого результата.

Совет вместо выводов

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

ТОП-10 ошибок начинающих верстальщиков

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

    Верстка сайта таблицами.Нет, ну ведь уже 2020 год..таблицами давным-давно не принято верстать. Можно еще сделать какую-то часть таблицы (особенно если в макете это и есть таблица), но весь сайт — совсем неверно.

используется на странице ОДИН раз.
Очень часто вижу, как тег

используется 2-3 раза на странице. Но это семантически неверно. Для этого и придумали теги h1,h2,h3,h4 — чтоб использовать их иерархически.
Нельзя называть классы и идентификаторы, начиная с цифр, или же называть их русскими буквами.
Называть классы можно только латиницей, и только по смыслу! Ни в коем случае нельзя писать >Это был небольшой, но важный список ошибок начинающего верстальщика. Никогда не допускайте таких ошибок, ибо это весьма критично.

Спасибо всем за внимание, пишите свое мнение об ошибках! До скорых встреч!

Автор данного блога. Веб-разработчик. Фрилансер. Создаю крутые адаптивные сайты. Портфолио на https://maxgraph.ru/

Добавляйтесь в друзья Вконтакте! Каждому добавившемуся и написавшему в личку «хочу полезность» — подарю набор крутых ссылок для верстальщика 🙂

9 ошибок в верстке статьи, из-за которых вы теряете читателей

Время чтения: 7 минут Нет времени читать? Нет времени?

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

Выравнивание правого края

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

Проблема ручного выравнивания в размере мониторов: на разных устройствах текст будет отображаться по-разному, и все переносы «поедут». Выравнивание текста по ширине тоже не решает проблему. Этот способ выравнивает правый край за счет разной длины пробелов между словами. В итоге текст выглядит уродливо, усложняет чтение и выдает некачественную верстку.

В блоге медиахаба «Rockin’Robin» делают правый край текста ровным с помощью автоматического выравнивания по ширине. Из-за этого между словами образуются дыры:

Если отключить выравнивание по ширине, то пробелы между словами будут одинаковыми, и станет заметно лучше:

Цвет текста не контрастен к фону

Чем меньше соотношение цвета текста и фона, тем сложнее его читать. Если мы напишем белым цветом на белом фоне, то соотношение цветов будет 1:1. Такой текст невозможно прочитать. Светло-серый текст на белом фоне будет иметь соотношение 1:6.

Текст различим, но читабельность все еще низкая. Чтобы текст хорошо читался, соотношение цветов должно быть 5:1 или больше.

Чтобы прочитать эти четыре слова, напрягаться не нужно. Но если в таком же соотношении набрать целую статью, читабельность ухудшится:

Поэтому для статей нужно выбирать более контрастный цвет шрифта. Проверить соотношение контрастности цвета шрифта и фона можно с помощью специального инструмента. Самая большая контрастность между черным и белым. Поэтому черный текст на белом фоне — самый читабельный.

Незаметный подзаголовок

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

В блоге «Madcats» подзаголовки выделяют только крупным кеглем, жирность и цвет не используют. Поэтому при сканировании мимо них легко проскочить:

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

Неправильное соотношение верхнего и нижнего отступа в подзаголовке

Еще одна ошибка в оформлении подзаголовков — неправильная величина отступов. Величина отступа сверху подзаголовка должна быть больше, чем величина отступа снизу. Так мы визуально показываем, что подзаголовок относится к нижнему абзацу, а не к верхнему.

В блоге «GetGoodRank» подзаголовки оформлены невнятно, поэтому их можно спутать с врезками.

Сделаем отступ сверху больше, чем снизу, и иерархия станет понятной:

Сложная структура

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

Если подзаголовок включает в себя еще один подзаголовок — структура получается с трехуровневой вложенностью:

  • Заголовок (Первый уровень)
    • Подзаголовок (Второй уровень)
      • Подзаголовок (Третий уровень)
      • Подзаголовок (Третий уровень)
    • Подзаголовок (Второй уровень)
    • Подзаголовок (Второй уровень)

Такая структура воспринимается нормально, но если добавить еще один уровень, то читатель может потеряться в статье:

  • Заголовок (Первый уровень)
    • Подзаголовок (Второй уровень)
      • Подзаголовок (Третий уровень)
        • Подзаголовок (Четвертый уровень)
        • Подзаголовок (Четвертый уровень)
      • Подзаголовок (Третий уровень)
    • Подзаголовок (Второй уровень)
    • Подзаголовок (Второй уровень)

Многоуровневая структура хорошо подходит для справочников: с ее помощью легко находить информацию. Но читать статью с такой структурой сложно. Читателю приходится запоминать, в каком разделе он находится, что приводит к лишнему напряжению и путанице. Поэтому в статьях лучше использовать простую структуру:

Неподходящий размер интерлиньяжа

Интерлиньяж — это расстояние между строками. Размер интерлиньяжа зависит от размера кегля и от ширины строки. Чем шире строка и крупнее кегль, тем больше должен быть интерлиньяж. Чтобы строки не получились слишком слипшимися, нужно ориентироваться на расстояние между словами: оно должно быть заметно меньше, чем интерлиньяж.

Слишком широкое текстовое поле

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

Сделаем наборную строку чуть уже, и читать станет легче:

Мелкий размер кегля

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

Увеличим кегль до 16 px, и текст можно спокойно читать:

Отсутствие абзацев

Абзацы — это один из показателей хорошей структуры текста. Абзацы делают текст читабельнее и привлекательнее. Длинные полотна текста не хочется читать, кажется, что там написано о чем-то сложном.

Вступление на путь верстальщика

Итак, ты прочел название и заинтересовался. Сейчас я немного сумбурно, но все же введу тебя в курс дела, если ты совсем в «в этом вашем вебе» не понимаешь.

Что же такое верстка?

Если вкратце, то это процесс создания страницы сайта. Заметьте, статичной страницы, без каких либо скриптов. Верстальщик использует языки разметки, в данном случае подразумевается HTML5/CSS3, с помощью которых размечает страницу. Создает ее с самого зеро, то есть с пустого документа.

HTML – используется исключительно для разметки. CSS или каскадные таблицы стилей – для управления потоком документа, придания элементам, заранее созданным в разметке определенной формы, размещения их в том или ином порядке, манипуляций с текстом, размерами etc. Они идут в связке.

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

По сути, если собрался становиться именно верстальщиком, то необходимо не слишком большое количество скиллов.

Однако верстальщики сейчас на рынке не так востребованы. Намного чаще требуются именно фронтендеры. Фронт-енд – клиентская сторона создания сайта. То есть работа на стороне браузера. Если сильно обобщить, то она включает в себя как верстку, так и работу со скриптами.

Есть еще бэкенд. Бэкенд – серверная сторона, отвечает за взаимодействие с сервером, непосредственно работу сайта, оперирование данными от пользователей и т.д. В этой пасте бэкенду почти ничего не посвящено. Материалов у нас очень мало, ткак не то направление. Если кто поделится, будем рады пополнить свои закрома.

Так вот, фронтендер, даже самый начинающий должен знать сильно больше верстальщика. Тут лучше продублирую ОП-пост:

На данный момент фронтендеру новичку нужно учить больше, чем просто HTML/CSS. В частности необходимы продвинутые инструменты разработки, автоматизаторы, работа со скриптами, сам Js и Jquery, в перспективе что-то из Js фреймворков, MVC и прочего дерьма.

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

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

Топ-пост этого месяца:  Запуск скрипта один раз в день

И это отмечу, далеко не предел, даже на начальном этапе расти есть куда. Вариантов масса. От псевдотрехмерных техник создания сайтов на параллаксе, до запила крутых приложений на JS, с перспективой перехода на мобильные платформы. Да что там говорить, даже игры умудряются пилить, и довольно удачно.

По поводу работы. Она есть. И места есть, и заказы есть, и конкуренция есть. Последняя причем есть везде. Если ты ноешь, что работы нет, значит плохо искал, либо живешь в глухом селе хуй знает где. Тогда сочувствую бро, тебе только в переезд или во фриланс.

Основные направления: фриланс или конторки.

О фрилансе ты наверняка слышал хоть немного. Есть местные или зарубежные биржи, где люди выкладывают свои заказы разных уровней. От «поправь шрифт на сайте для мобильных версий» до «запили мне рабочий аналог фейсбука за 30 долларов» (утрировано). Из зарубежных самый популярный – Upwork. Кстати в воркаче есть постоянно живущий тред по апворку, где можно узнать больше информации, советую читнуть тамошний фак.

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

Конторки – местные кружки веб-макак локального или глобального уровня. Пилят от мелких сайтов торгашам с рынка, до довольно крупных продаваемых приложений (если тебе повезло в такую попасть со старта). Основная задача местных анонов – пробиться в одну из них. Собственно, материалы в треде как раз и предназначены для того, чтобы выбить ентри левел. Через несколько месяцев пребывания там, ты, если не конченый дебил, уже и сам будешь знать, что тебя ждет, что дальше делать и куда двигаться.

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

МАТЕРИАЛЫ, ПОЛЕЗНЫЕ ССЫЛКИ И СОВЕТЫ ПО ОБУЧЕНИЮ.

Сначала вкратце по процессу обучения: если совсем нихуя не знаешь, то лучше начинай учить именно HTML/CSS. Сверстаешь свой первый макет – учись верстать адаптивно. Почитывай материалы в инете, разные статейки, смотри интересные примеры, практикуйся, спрашивай непонятное в треде, читай литературу представленную здесь и ищи что-то сам. Постепенно придет понимание всех этих процессов, и че это вообще за хуйня. Как почувствуешь уверенность в верстке – перекатывайся на JS (мастхев, если хочешь развиваться). Можешь параллельно прикручивать готовые скрипты к своим сайтикам, смотреть что как работает. Ну а дальше работы не паханое поле. Двигайся, куда тебе захочется.

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

1. Первичные материалы в хаотичном порядке. Они часто дублируют друг друга. Можно проходить что-то одно по одному из направлений. Личные предпочтения выскажу ниже.

http://htmlacademy.ru/ — ультрагоднота, советую начинать изучение HTML/CSS отсюда. У них же есть интенсивы (обучающие видеоуроки, для лучшего понимания предмета, тоже мастхев) ссылки чуть ниже.

http://learn.javascript.ru/ — по JS на русском лютая годнота. Годнее только Флэнаган. Лучше начинать учить язык отсюда, потом уже книги.

http://codeschool.com/ — тут платно, но есть бесплатные курсы, годные вещи про jquery и git

http://htmlbook.ru/ Справочник. Каждый верстальщик пользуется им. Все непонятное смотрим там.

http://teamtreehouse.com — тут все платно, но первые две недели бесплатно, можно успеть пройти пару курсов, объясняют хорошо.

Интенсивы от академии:

Базовый интенсив HTMLacademy за 2015 год:

Продвинутый интенсив HTMLacademy за 2015 год:

Лично я бы советовал сначала браться за http://htmlacademy.ru/ . В идеале пройди базовые курсы у них на сайте, затем купи/скачай с торрента интенсивы, пройди их.

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

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

Дальше можешь выкачивать макеты с простор интернета и верстать уже их. Наращивание сложности приветствуется. Где не прописана адаптивность, тоже запили сам. Старайся в каждом новом проекте улучшать код. Черпай инфу из инета и литературы. Узнавай полезные приемы.

Не лишним будет ознакомиться с сетками на flexbox и прочими новыми фишками. Вот здесь уже можно проплатить, если есть желание, продвинутые курсы в академии. Месяц там стоит 300 рублей, и за это время ты вполне успеешь пройти все даже дважды. Это не то чтобы мастхев, но понимание работы ксс-анимаций, хороших практик верстки, различных продвинутых элементов в новой спецификации и т.д. там дается. Хотя я буду лукавить, если скажу что всю эту инфу нельзя найти в инете и в разрозненном виде.

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

Тут надо выбирать индивидуально. Если по HTML/CSS, то желательно, чтобы книга была не старше 2012 года, ну или хотя бы переиздана. Читай все что интересно. В любом случае это будет полезно.

http://www.ozon.ru/context/detail/id/20279391/ — «Создаем динамические веб-сайты с помощью PHP, MySQL, JavaScript и CSS» Весьма неплохая книга, бегло позволит ориентироваться в основах веб-технологий и понять, как же все это говно вместе работает.


http://habrahabr.ru/post/240219/ — «Выразительный Джаваскрипт» Хавербек Марейн. Вводна книга по JS и программингу в целом. Для новичков может быть сложноватой.

http://frontendbookshelf.ru/ — список полезных книг. Большинство актуальны, можно выбрать по языку, технологии и конкретному уровню знаний. Первооочередную литературу желательно брать оттуда.

http://scanlibs.com/ что-то типа хранилища айти книг. Скачать книги можно бесплатно. Там есть дохуя всего. Если в свободном доступе не найдете, попробуйте поискать там.

Учебное задания УЛЬТРА ХАРДКОР ЛЕВЕЛ. Если считаешь, что тебе мало учебной хуйни. Сделай это и положи к себе в портфолио. Будет что показать на собеседовании. На данный момент устарели, но попрактиковаться все-таки можно:

Появились новые тренировочные задания с ТЗ:

ПРИМЕРЫ ВЕРСТКИ ДЛЯ САМЫХ МАЛЕНЬКИХ:

Внизу видеокурс о том, как верстать PSD шаблон. Просто пример, чтобы посмотрели как выглядит работа и как верстают С НУЛЯ.

Лично я все же посоветую черпать инфу по базовой верстке из интенсивов, ссылки чуть ниже. Там ребята показывают весь процесс и делают это качественно. Никаких ошибок, минимум стилизации и отсебятины.

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

Как стать начинающим верстальщиком

В этой статье я расскажу как стать начинающим верстальщиком. Т.е. после выполнения всех рекомендаций в можете претендовать на данную позицию. Статья создана специально для учеников glivera-team, но может помочь всем, кто решил освоить данную специальность.

Учим HTML/CSS

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

После прохождения уроков вы должны понимать:

  • что такое html-теги и как они работают
  • блочную модель(border, margin, padding)
  • как работает float, inline-block и flexbox
  • позиционирование(абсолютное, относительное, фиксированное, z-index)

Вы должны уметь:

  • вставить на страницу текст, картинки, ссылки, элементы форм
  • стилизовать элементы страницы(изменение размеров, цветов, теней и т.д)
  • создавать таблицы

Работаем с фотошопом

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

  • работа со слоями(скрытие, отображение, просмотр эффектов)
  • замер размеров элементов
  • вырезание картинок(обычных и паттернов)
  • копирование текста из макета в html

Начальные инструменты

Для быстрого старта вам понадобится редактор и браузер. Вы можете выбрать любые, но я посоветую Sublime Text в качестве редактора и Chrome в качестве браузера. Из операционных систем сделайте выбор между Windows и Mac. Остальные системы будут тормозить ваше обучение.

Верстка первого сайта

На этом этапе скорее всего вы ощутите ступор. Вы вроде знаете html/css(на самом деле нет) и фотошоп. Но вы совершенно не понимаете как из макета сделать сайт. В данном случае вы можете пройти небольшой курс по верстке сайта, коих много на ютубе. На данном этапе вам нужно сверстать первый сайт. Не обращайте внимание на такие понятия как резина, адаптивность. И еще, не используйте css-фреймворки(bootstrap, foundation).

Понимание семантики, валидность

Итак, вы сверстали первый сайт, что дальше? Вам нужно понять как правильно расставлять теги в html-коде, а также научиться проводить валидацию. С валидацией все просто — машина анализирует код, говорит что не так, вы правите и понимаете. С семантикой посложнее, поскольку область довольно холиварная и во многих моментах разработчики не имеют единого мнения. Но все же общие стандарты есть. После того, как изучите — попробуйте сверстать новый макет семантично. Теперь на каждом этапе вам нужно получить обзор вашего кода от опытного специалиста/наставника.

Javascript и jQuery

На этом этапе вы должны понять, что такое Javascript и зачем он нужен. Далее познакомиться с библиотекой jQuery и попробовать сверстать сайт с интерактивными элементами(слайдеры, всплывающие окна, табы).

Изучите методологию БЭМ. Вам нужно понимать, как верстать независимыми блоками, как привнести модульность в вашу верстку. В интернете очень много информации по этому поводу. Не нужно изучать фул-стек БЕМ, просто важно понять методологию для CSS. Верстаете новый макет с применением методологий.

Для ускорения и удобства написания стилей придумали препроцессоры. Наш выбор — Sass(.scss). Вам необходимо изучить препроцессор и сверстать с ним новый макет. Понять нужно:

  • переменные
  • разница между миксинами и тихими классами(placeholder)
  • как работает ‘&’
  • как разделить стили на несколько .scss файлов

На данном этапе scss в css компилируйте с помощью prepros

Также для ускорения верстки и поддержки верстальщики используют шаблонизаторы html. Наш выбор — pug. После изучения вы должны понимать:

  • как делать миксины
  • как работает extends
  • циклы и переменные
  • работа с массивами

Верстаете сайт с применением шаблонизатора.

Адаптивность

Теперь вы можете начать верстать адаптивные сайты, которые подстраиваются под ширину окна браузера. Можете взять макет, где различные разрешения указаны дизайнером, а можете сами придумать, как будет перестраиваться сайт. С этого момента все сайты верстайте адаптивно.

IDE PHPStorm

Чем раньше вы пересядете с редактора на PHPStorm — тем лучше. Эта IDE позволяет значительно ускорить разработку. Скачать бесплатную(early access) PHPStrom можно на официальном сайте, если не хотите платить — скачиваете её раз в месяц. В остальном бесплатная версия такая же, как и платная.

Любой разработчик должен уметь работать с системами контроля версий, и верстальщик — не исключение. Мы, как и большинство выбрали Git. Вы должны уметь следующее:

  • работать с интерфейсом github
  • уметь клонировать репозитории на компьютер
  • делать commit, push, merge
  • делать pull request

Практика

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

Интерактивные онлайн-курсы HTML Academy

Научитесь создавать и программировать современные веб-интерфейсы, начните карьеру в IT, оттачивайте своё мастерство.

Подробнейшие курсы
по HTML, CSS и JavaScript

Мы выбрали одно направление — фронтенд — и сделали самые подробные интерактивные курсы о веб-технологиях. Одну тысячу четыреста заданий в среднем проходят за три месяца.

28 глав — бесплатно

Четыреста девяносто интерактивных заданий — бесплатные. После их прохождения вы сможете создать свой сайт.

Обучение на практике

С самого начала мы учим работать с живым кодом и самостоятельно решать задачи, приближённые к реальным. Также вас ждут испытания, принцип которых — «сверстай, как показано в образце».

От новичка до профессионала

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

Учиться весело

Интересные, наглядные и затягивающие курсы, интерактивные интерфейсы, достижения — всё для обучения с удовольствием. И конечно же, Инструктор Кекс. Заскучать не получится.

1 414 Заданий и испытаний

714 392 Пользователя

68 245 309 Заданий выполнено

Всё начинается с сущей шалости. «Я только попробую», — говоришь ты. А утром обнаруживаешь себя за компьютером и не можешь ответить, как долго просидел за ним, проходя онлайн‑курсы один за другим. Именно в этот момент всё выходит из-под контроля: базовый интенсив, продвинутый, JavaScript. И вот ты уже меняешь свою работу, жизнь и мечтаешь теперь об одном: стать ниндзя веб-разработки, в арсенале которого HTML, CSS, SVG и JavaScript. Ребятам из HTML Academy удалось невозможное: увлечь за собой многих «скучающих и сомневающихся» и занять их сложным, современным и очень классным делом. Ирина Смирнова, фронтенд-разработчик в Bookmate

Обучаясь в Академии, вы сэкономите огромное количество времени и научитесь правильно писать код, работать с реальными проектами и очень легко сможете продолжить свою карьеру фронтенд-разработчика самостоятельно. А также работа с наставником даёт большой опыт работы с кодом, потому что он всегда готов помочь в трудную минуту. Богдан Васкан, веб-разработчик в Synergic Software

Курсы Академии мне порекомендовали. Всегда скептически относился к вебинарам, но обучение в Академии изменило это представление. Учиться действительно интересно, занимательно, и, самое главное, не скучно. Интенсив Академии просто «вбивает» в голову нужные и современные навыки и знания, которые пригодятся вам в любимом деле. Павел Цыганов, преподаватель

Для меня знакомство с миром вёрстки началось с книжек и скринкастов на YouTube. Это было интересно, но непросто. И вызывало больше вопросов, чем ответов. В процессе появилось понимание, что без структуры и обратной связи от опытных практиков обучение может растянуться до бесконечности. В какой-то момент я наткнулся на сайт Академии. Это было что-то принципиально новое, интересное и увлекательное. Я стал проходить курсы по HTML и CSS. Это напоминало увлекательную игру, в которой хочется пройти на новый уровень. Сразу вспомнилась моя любимая игра World of Warcraft. Выполнил задание — получил достижение. В какой-то момент захотелось большего, и естественным продолжением стал интенсив. Месяц бессонных ночей, взорванный мозг, и вот, я смотрю на мой первый сайт. Потом на второй. И этот загадочный мир вёрстки начинает становиться понятным и уже родным. Для меня Академия стала прекрасным стартом, и я уверен, что будет отличным продолжением! Сергей Фоменко, ученик Академии

Если бы в школьную программу добавили обучение по таким интерактивным курсам, думаю, дети быстрей поняли, что им нравится, и лучше усваивали. Регулярно захожу на сайт, чтобы отдохнуть и вдобавок вспомнить, что давно не использовал в вёрстке. Советую всем тем, кто хочет держать себя в тонусе, и тем, кто учится. Поверьте такой подход обучения покажет свой результат, а если вы добавите ещё видео и книги, то пойдёт как по маслу. Поехали! Владислав Ридвановский, младший фронтенд-разработчик

HTML Academy — это новый уровень в онлайн-обучении. Я даже представить не мог, что такой уровень подачи материала может быть в онлайн. Академия учит тебя думать как профессионал, делать как профессионал. Плюс ко всему Академия — это семья и сообщество в одном лице, где каждый найдёт себе собеседника, ответ на волнующий его вопрос. Ни разу не пожалел, что год тому назад решил попробовать их курсы! Дмитрий Руднев, фронтенд-разработчик в Greensight

Обучение в HTML Academy позволяет быстро погрузиться и качественно прокачаться в сфере фронтенда. Круто стать частью огромного волшебного мира и так скоро уже оказаться одним из лучших среди новых коллег. Артемий Альтигин, системный администратор

Как правильно и быстро верстать сайты

Всем привет, друзья. Сегодня мы затронем очень важную тему — быстрая и правильная HTML верстка макетов. Углубимся в проблему, разберем все возможные способы ускорения верстки без потери в качестве на всех этапах. Данный вопрос интересует очень многих веб-разработчиков, интересовал и меня, когда я уже углублялся более серьезно в веб-разработку. Теперь, я с радостью поделюсь накопленными знаниями, хитростями и фишками скоростной верстки, чтобы вы, дорогие мои друзья, смогли заработать больше денег за единицу времени. Ведь именно скорость верстки влияет на то, какую колбасу вы будете кушать на завтрак. Обычно медленные веб-дизайнеры кушают на завтрак колбасу за 80 рублей из эмульсии шкурок, в то время, как более прозорливые и быстрые — хорошую докторскую за 900 рублей/кг. Конечно, есть много веб-дизайнеров, которые скажут — «Я выполняю работу вдумчиво и качественно, соответственно, медленно». Я не буду долго углубляться в психологический анализ, но это отговорки и самооправдание. Можно верстать очень быстро и качественно, это не картину маслом малевать.

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

1. Анализ макетов и подготовка к верстке

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

Топ-пост этого месяца:  Как сделать в html5 меню горизонтальное и вертикальное

1.1 Визуально разбейте макет на повторяющиеся части, определите сетку

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

Вообще, очень важную роль в скорости работы играет использование CSS фреймворков. Не зависимо от того, стилизуете ли вы все элементы CSS фреймворка, например, Bootstrap или используете только сетку — вы ускоряетесь до скорости света при позиционировании элементов на странице и решении вопроса с адаптивностью сайта. Чаще всего, в наше нелегкое время, требуется именно адаптивная верстка. Если вы — веб-стдия, хотите выполнять проекты быстрее и порадовать ваших верстальщиков (если у вас такая система распределения обязанностей), научите веб-дизайнеров пользоваться сеткой. Недовольные возгласы о стандартизации веб-дизайна и ограничениях можно проигнорировать, мы не картины на Невском рисуем, а значит нужно использовать эффективные и быстрые инструменты для максимальной стандартизации. Не в ущерб качеству, конечно. Сетка будет не лишней точно и даст крепкую основу для верстки.

Если вы — самобытный верстальщик 80lvl и считаете, что сами сможете сделать сетку проекта лучше Bootstrap — разработайте вашу собственную сетку, протестируйте и подключите к вашему проекту. Проект без сетки — геморрой на долгие года, благоприятная и теплая среда для размножения HTML костылей в будущем.

1.2 Определите параметры проекта

Не зависимо от того, используете ли вы какой-либо CSS фреймворк, обязательно используйте CSS препроцессор. Это очень важно, так как позволит вам сэкономить время на написании CSS. Открывая любой свой выполненный проект я с ужасом наблюдаю, как много времени было потрачено на написание CSS, можно сказать, что 60-70% работы на этапе верстки — это написание CSS. И было бы логично данный этап автоматизировать. Я рекомендую использовать препроцессор Sass, но здесь вы можете выбрать любой препроцессор, который вам нравится. Если вам понравился Sass синтаксис, рекомендую ознакомиться с руководством Sass для самых маленьких, где я рассказываю о преимуществах использования препроцессора и привожу примеры, которые демонстрируют эффективность верстки с использованием Sass. Довольно трудно объяснить новичку преимущества использования препроцессора, но ребята, которые, как говорится, «уже хлебнули», понимают, на сколько это эффективный инструмент. Думаю, после выполения верстки 10-15 макетов к вам придет это понимание, а пока просто поверьте мне на слово — верстать с CSS препроцессором быстрее.

Создайте файл _typography.html, подключите к нему все необходимые стили и библиотеки. Это будет ваш базовый плацдарм с типовыми элементами. Исходя из данных открытого в графическом редакторе макета, определите такие параметры проекта, как:

  1. Базовый шрифт. Определяется для селектора body. Это размер и шрифт текста на текстовых макетах сайта, например, на странице «Статья» или размер и шрифт текста наиболее часто повторяющихся текстовых блоков на макете Landing Page. Если не смогли определить размер, так как, например, все элементы одностраничника разные, напишите font-size: 16px, это среднее значение по больнице. Отобразите базовую верстку в _typography.html;
  2. В файле _vars.sass определите переменную акцентного цвета и остальных явных цветов макета. Здесь и далее я буду приводить в пример и менно Sass, но вы можете без труда спроецировать информацию на ваш препроцессор. Постарайтесь задавать интуитивно понятные названия переменным и комментировать переменные, чтобы в дальнейшем не запутаться;
  3. Пройдитесь по всем страницам проекта и определите заголовки от h1 до h6 (Размеры, капс/некапс, шрифт, цвет). Сделав это заранее, вы сэкономите около 10 минут вашего времени или 1 часа, с учетом времени на прокрастинацию. Также определите инверс для заголовков и цвета текта. Добавьте родительский класс .dark-section ко всем заголовкам и тегам типографики p, blockquote, ol, ul, если в вашем макете есть секции «светлым по черному». Отобразите базовую верстку типографики в _typography.html;
  4. Также было бы полезно сразу определить типографику вашего проекта. Для тега body определите такой параметр, как line-height, обычно это 1.4 — 1.7 без указания единиц измерения. Расстояние между строк базового текста должно быть ориентировочно такое-же, как на макете в графическом редакторе. Здесь очень важную роль играет ваш глазомер, он очень сильно влияет на скорость вашей работы. Вам не придется измерять линейкой всё и вся, если ваш глазомер работает как надо. Данный скилл, к сожалению, развивается только с опытом и я не могу представить себе упражнения лучше, чем верстка, сам рабочий процесс.
  5. Определите кнопки. В вашем макете, наверняка есть кнопки. Определите параметры самой большой кнопки и используйте CSS модификатор для получения кнопок другого размера. Не определяйте заранее отношение элементов к «внешнему миру», такие как float, только внешний вид. Единственное, опытным путем было выявлено, что чаще всего кнопки наиболее универсальны по отношении к внешним элементам, если определены, как display: inline-block по-умолчанию. Отобразите базовую верстку кнопок в _typography.html;
  6. На ваше усмотрение, определите другие специфичные конкретно для вашего проекта параметры и повторяющиеся блоки заранее. Если вам кажется, что можете что-то забыть — комментируйте.

1.3 Ускоряем экспорт данных из макета

Раньше было такое понятие, как «Нарезка изображений» или «Нарезка макета». Сейчас такое определение не совсем корректно и более подойдет Экспорт данных из макета. Экспорт данных заключается в экспорте изображений и определении параметров для CSS.

Если вы пользователь Photoshop, вы можете использовать плагины для определения CSS свойств, такие, как CSS Hat. Отличная альтернатива подобным плагинам и инструментам — развитый глазомер. Когда у вас будет достаточный опыт, вы естественным образом откажетесь от подобных инструментов. Обратите внимание, что копируя абсолютно все CSS свойства из CSS Hat, вы будете верстать несколько быстрее, но потеряете в качестве и возможностях кастомизации. Дело в том, что CSS Hat не всегда правильно определяет отношение элементов к другим. Там где нужен padding, он определяет margin, там где нужна резиновая ширина или значение в процентах, он определяет фиксированные значения. Поэтому развивайте глазомер и храните базовые параметры в переменных.

Для быстрого экспорта картинок достаточно пользоваться новым Adobe Photoshop или Adobe Experience Design. У первого достаточно кликнуть на слое правой кнопкой мыши и вырать пункт Quick Export As PNG. В Adobe XD процесс экспорта изображений также прост и даже есть возможность экспорта нарисованных иконок в формат SVG. На данном этапе не слишком заморачивайтесь оптимизацией изображений, так как это задача для таск-менеджера. Об этом чуть позже.

Что касается иконок:

  1. Если это сложные иконки или иконки-изображения, которые предположительно должны меняться контент-менеджером через админку сайта — экспортируйте их как png и подключайте в тег img, как обычные картинки;
  2. Если это «фиксированные» иконки, которые ни под каким предлогом не будут изменены на сайте и контент-менеджеру их менять незачем (например, иконки телефонов, почты, карты и т.д.), можете объединить их в спрайт и использовать через CSS, задавая одной картинке разные координаты background-position. Данную операцию можно автоматизировать с помощью Gulp плагина css-sprite. Хотя можете сделать сами, если иконок немного, просто разбив направляющими поле на матрицу из квадратов заданной ширины и высоты. К Gulp вернемся чуть позже и подробнее рассмотрим важность таск менеджера в быстрой верстке. Только предварительно убедитесь, что дизайнер не использовал какой-либо шрифтовой айконпак. Если это так то достаточно будет подключить соответствующий айконпак к проекту;
  3. Если это одноцветные простые иконки, также убедитесь, что дизайнер не использовал шрифтовой айконпак. Если это так то подключите соответствующий айконпак к проекту. Чаще всего используется шрифтовой айконпак Font Awesome. Если иконки самобытные — переведите их в вектор и создайте свой шрифтовой айконпак. У нас есть урок на эту тему: Создание шрифтового Icon Pack с использованием сервиса Fontello.

2. Скорость печати

После того, как вы подготовили все материалы, экспортировали картинки, сделали шрифтовой Icon Pack проекта, подготовили все иконки, настроили проект, можно приступать к верстке. Думаю, очевидно, что если вы хорошо знаете теги и CSS свойства, узким местом в скорости может быть только скорость набора символов на клавиатуре в процессе HTML верстки и написания CSS свойств. Для прокачки данного скилла более, чем достаточно освоить какой-либо метод быстрого набора символов на клавиатуре. Методов много и эта информация легко гуглится. Занимайтесь, практикуйтесь и все получится. Здесь также немаловажную роль играет практика именно верстки.

Мне как-то написал начинающий веб-разработчик, который сетовал на то, что его мечты о легком заработке не оправдались и за верстку макета Landing Page на биржах фриланса ему предлагают 2000 руб. Он отправил мне примерный макет. Я спросил, сколько бы он взял за этот макет денег, на что бедолага ответил мне — 10-12 т.р. Если бы мне предлагали на верстку LP за 2000, когда у меня была небольшая пригоршня опыта, как у этого парня, я искренне был бы рад таким возможностям. Конечно, сейчас верстка в моем исполнении стоит несколько дороже этой цифры, но если бы я брал такие проекты за 2т.р, с текущей скорость работы я без проблем поднимал бы 4-5 т.р в день без потери в качестве, работая по 7 часов в день. Не густо, но уже не плохо. Вообще, признаюсь вам, друзья, меня подбешивают нытики, у которых все плохо, у таких всегда будет куча отговорок и бублик в кармане. Поэтому оставим эту историю и двигаемся дальше к нашей цели верстать быстро и качественно.

3. Используйте Emmet и/или Jade

Я люблю Emmet. Благодаря этой полезной штуке, моя работа в 10 раз быстрее, чем без нее. Без лишних слов, просто посмотрите урок: на YouTube.

Также, вы можете использовать Jade или любой другой HTML препроцессор. Штука тоже удобная и классная, но для моих задач хватает Emmet с головой. Вангую много недовольных поклонников Jade, но несмотря на все преимущества и фишки, include для меня не многим проще вставки шапки Ctrl+V, а репит миксина не легче того-же Ctrl+Shift+D. Теоритически, если подумать, изменив шаблон миксина, можно не заморачиваться с переверсткой однотипных накопированных элементов, но таких ошибок я не допускаю, да и крупные проекты не по моей части, поэтому, надобности в ускорении подобных моментов нет. Пробуйте, друзья, экспериментируйте, может вам понравится такой инструмент 🙂

4. Используйте ваши наработки

Используйте Github Gist для сохранения ваших наработок, кусов кода, блоков и даже целых секций. Всего того, что вам может оперативно пригодиться в процессе верстки. У нас есть урок по настройке Github Gist в редакторе Sublime Text для быстрого доступа и поиска нужного гиста: урок на YouTube с таймкодом на подключении Gist и отдельный урок по Gist.

5. Используйте таск-менеджер

Использование таск менеджера, например, Gulp — важнейший элемент быстрой работы над версткой. С помощью таск-менеджера вы сможете автоматизировать такие моменты, как: создание рабочего веб-сервера с автообновлением страницы при сохранении в редакторе кода; удобное использование препроцессоров; автоматизация рутиных задач, таких, как оптимизация изображений, сжатие CSS, JS, если нужно, то и HTML и многие другие задачи.

Вы можете также использовать инструменты типа Prepros, но Prepros — это не Gulp. Для Gulp существует тысячи полезных плагинов — от работы с файловой системой, создания спрайтов, до генерации шрифтовых иконок и многое другое. Очень часто меня спрашивают, в чем разница между Gulp и Prepros, вот вам и ответ. За один раз вы сможете настроить целый комбайн, построить нейросеть задач и пустить по трубам горячую воду, все будет автоматически работать и экономить ваше время при работе над более или менее сложными проектами.

Более подробно изучить Gulp вы можете в уроке Gulp для самых маленьких — подробное руководство.

6. Изучайте jQuery

Если бы данное руководство было написано для Front-End разработчиков, все сводилось бы к изучению JavaScript и его фреймворков, таких, как Angular. Но я не силен во Front-End, как и в программировании в целом, моя стихия — веб-дизайн, поэтому пусть настоящий глубокий фронтенд остается на закуску акулам прграммирования. Чаще в процессе верстки приходится решать несколько другие задачи. А именно: анимация каких-либо блоков, настройка сортинга в таблицах, создание табов и аккордеонов, подключение библиотек, определения фоллбека для SVG файлов, определение параметров документа для несложных операций и прочие мелкие скриптовые работы. Для этих целей нет лучше библиотеки, чем любимой всеми верстальщиками jQuery. Она проста, элегантна и обрасла огромным количеством плагинов, которые решают практически все необходимые задачи маленьких и средних проектов.

Практикуйтесь в решении каких-либо задач с использованием jQuery, изучите базу (благо, там немного) и разминайте мозг, создавая интересные динамические элементы и jQuery плагины.

jQuery не просто так был вынесен в отдельный пункт. Чаще всего узким местом верстки по времени являются многочасовые затупы над скриптами проекта и чем лучше вы разбираетесь в jQuery, тем быстрее выполняете проекты без изнурительного поиска решений на Stack Overflow.

Для решения типовых задач (карусели, галереи, попап окна, валидация форм и т.д.) используйте jQuery плагины, не стоит писать свои велосипеды — это долго, нестабильно и неэффективно в большинстве случаев.

Гайд для веб-дизайнеров по подготовке макетов для быстрой верстки

В принципе, многое описано в статье «Как стать крутым веб-дизайнером», но здесь я приведу основные пункты именно по подготовке макетов к верстке и правильной организации работы, которые, соответственно, ускорят работу в целом:

  1. Не увеличивайте фотографию больше ее оригинального размера — в верстке такое фото будет некачественным;
  2. Не масштабируйте графику непропорционально — такой дефект версткой точно не исправить ;-);
  3. Не применяйте режимы наложения слоев, отличные от обычного (Normal) — в верстке НЕВОЗМОЖНО воспроизвести какие-либо режимы наложения, как в графическом редакторе;
  4. Старайтесь не применять фильтры на изображения, которые должны иметь несколько состояний (обычно и при наведении, например). Все наложения, изменения — только посредством наложения нового слоя. Всё должно быть легко воспроизведено в HTML верстке. К ретуши и подготовке фото это не относится;
  5. Не масштабируйте фотографию до конвертации в смарт объект — верстальщик сам определит размер изображения в Responsive верстке, сохраняйте оригинал смарт-объекте;
  6. Обрезайте фотографию только посредством обтравочной маски для фигуры, оригинал фотографии, как и в предыдущем пункте, должен быть сохранен в смарт объект — не забывайте: «Каждый раз, загружая изображение для сайта и скругляя его вручную в фотошопе, где-то в мире плачет один котенок. «;
  7. Если вы рисуете иконки в Photoshop, не растрируйте их в уменьшенном размере. Не забывайте, что макету еще предстоит этап верстки и все иконки необходимо будет векторизовать. Оригинальные смарт объекты с иконками должны быть достаточно крупными для качественной трассировки;
  8. В идеале, у вас должны быть все плоские иконки и графика в формате SVG, в отдельной папке. Если вы ленивый дизайнер — предусмотрите возможнсть качественной конвертации или экспорта иконок в SVG;
  9. Всегда создавайте отдельную папку со всеми используемыми шрифтами в формате TTF или OTF. Иконочные шрифты также должны быть размещены в этой папке;
  10. Создавайте макеты 1 в 1 (72 пикс. на дюйм). При 100% отображении макеты должны быть в таком же масштабе, в котором предполагается результат HTML верстки;
  11. Обязательно используйте в работе какую-либо систему сеток. Можно разработать самому, но я рекомендую использовать систему сеток Bootstrap. Ширину контента можно кастомиировать от оригинальной ширины Bootstrap сетки, для этого можно использовать плагины для создания сеток в случае, если вы пользователь Photoshop;

Сразу отвечу на самые ожидаемые и каверзные вопросы по верстке:

1. Adobe Muse и подобные инструменты? — да, можно использовать и это будет быстро. Если только ваш проект не крупнее односложного одностраничника, который не нуждается в развитии, продвижении и системе управления.

2. Как быть с Perfect Pixel? — я искренне уверен, что Responsive Design и Perfect Pixel понятия разные и даже не совместимые. Я, как веб-дизайнер, конечно, обладаю некоторыми чертами перфекциониста, но если идея хороша, она будет блистать и в Responsive верстке, если идея, простите за выражение, говно, то хоть сколько ее не полируй и подгоняй по пикселам, она так и останется неработающим высером. Поэтому включите ваш дар убеждения, запаситесь аргументами и проведите беседу с вашим клиентом относительно бесполезности такого излишнего перфекционизма.

3. Почему бы все картинки не сделать спрайтами, ведь тогда будет всего один запрос к серверу? — есть изображения, которые должны загружаться контент-менеджером. Вряд ли контент-менеджер сможет быстро и безболезненно вычислить координаты новой добавленной в спрайт картинки. Не забывате о тех, кто будет обслуживать и наполнять сайт.

4. Где кончается грань верстки и начинается Front-End, это разве не одно и то же? — все просто, если стоит задача разработать сложный интерактивный интерфейс какого-либо сервиса или веб-приложения, где нужна тесная работа с базой данных — это Front-End. Такие уникальные проекты выходят за рамки области компетенции и бюджета одного фрилансера, чаще всего подобные задачи ставятся команде разработчиков и подходы к таким проектам совершенно другие.

Премиум уроки от WebDesign Master

Создание контентного сайта на Jekyll от А до Я

Добавить комментарий