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

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

Ошибки на этапе обучения

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

Ошибка 1: Учиться без плана

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

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

  • 1-2 недели изучаете HTML – теорию применения, часто используемые теги, примеры их применения в реальной верстке. Помимо изучения теории нужно научится делать максимально простые HTML-страницы без стилей. Это позволит окончательно закрепить знание необходимых тегов в дальнейшей работе.
  • 2-3 недели осваиваете основы CSS и учитесь применять их к HTML-верстке. Здесь вам требуется понять, за что отвечает тот или иной стиль, как его подключить, какие свойства он может принимать.
  • 3-6 неделя научитесь верстать уже более-менее полноценные страницы. Например, смотрите туториалы на YouTube и пытаетесь повторить. Также попытайтесь сверстать несколько страниц самостоятельно, без туториалов. Здесь важно “набить руку”.
  • 6-8 неделя изучаете различные функциональные дополнения: анимацию, работу с формами и так далее.

Ошибка 2: Посвящать слишком много времени обучению

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

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

Ошибка 3: Недооценивать теорию

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

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

Ошибка 4: Излишний перфекционизм

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

Ошибки в работе

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

Ошибка 1: Игнорирование других браузеров

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

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

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

Таблица префиксов для популярных браузеров

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

Ошибка 2: Неадаптивные страницы

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

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

Ошибка 3: Подключать слишком много библиотек

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

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

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

  1. Дата выхода последнего обновления. Если она давно не обновлялась, то это может означать, что библиотека больше не поддерживается разработчиком, что грозит нестабильностью в работе разрабатываемого сайта.
  2. Репутацию библиотеки среди других разработчиков. На GitHub, например, есть система рейтинга и отзывов. Изучите их перед подключением.
  3. Перечень ограничений, которые накладывает использование данной библиотеки в разработке. Некоторые подключаемые к сайту сторонние компоненты могут накладывать ограничение на использование других сторонних сервисов. Если вы подключаете сразу несколько библиотек, то посмотрите, чтобы они не конфликтовали друг с другом.

Ошибка 4: Не оптимизировать изображения

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

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

Ошибка 5: Отказ следовать веб-стандартам

Веб-стандарты были введены для того, чтобы сайты и приложения были удобны для пользователя и их было легче поддерживать разработчикам. Обычно они касаются элементов интерфейс. Так, например, в верхней части должно располагаться меню, а в центральной части основной контент, а сама страница должна пролистываться сверху вниз. Есть также общепринятые стандарты для разработчиков, с которыми пользователю взаимодействовать не приходится. Например, каждый блок на странице должен выделяться тэгом <div>.

Подробно с современным веб-станадртами можно ознакомиться здесь.

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

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

Ошибка 6: Применение CSS и JS в HTML-файлах

CSS и JavaScript нужно писать в отдельных файлах, подключаемых к основному. Исключение можно сделать только для небольших JS-скриптов на одностраничных сайтах. Нежелательность написания CSS-стилей и JS-скриптов в одном файле с HTML-разметкой обусловлена неудобством – код слишком разрастается, его становится сложнее поддерживать, плюс, в нем сложнее ориентироваться. Это также чревато проблемами с безопасностью сайта.

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

Пример распределения CSS в отдельные файлы

Ошибка 7: Пренебрегать форматированием кода и комментариями

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

Вот такие рекомендации можно выделить для улучшения читаемости кода:

  • разделяйте смысловые блоки пустой строкой;
  • внутри блока или секции в HTML старайтесь делать вложенную структуру с помощью расставления пробелов;

Пример хорошей структуры в HTML-разметке

  • пишите осмысленные комментарии к блокам с кодом.

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

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

Ошибка 8: Использовать Vanilla CSS

То есть стандартный CSS без каких-либо надстроек. Сейчас уже практически все сайты, крупнее одной страницы, делаются с подключением сторонних препроцессоров – Sass, Less, Stylus. Они дают целый ряд преимуществ по сравнению с обычным CSS, например, позволяют создавать больше стилей, писать меньше кода, поддерживать структуру, дают удобные инструменты для работы с переменными и анимацией. С помощью, например, Sass также можно настроить Bootstrap, так как он тоже написан на Sass. Возможность задания переменных обеспечивает удобную и быструю смену стилей при необходимости.

Правда, для использования препроцессоров придется потратить время на их освоение, плюс, подключение к проекту. Подробно тема препроцессоров в CSS разбиралась в этой статье.

Заключение

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