img

5 ошибок начинающего веб-разработчика

21 ноября
20:00
Бесплатный вебинар
Введение в Docker
Ведущий — Филипп Игнатенко.
Руководитель центра разработки
Записаться
img
img

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

Ошибка №1: пробел в имени файла 

Вы можете сохранить ваш HTML-файл под именем "my cool page.html", но пробелы между словами — это ошибка.

Веб-адреса (или URL) не могут содержать пробелы.

Если вы загрузите этот файл в браузер, вы увидите "my%20cool%20page.html" в адресной строке браузера. Пробелы должны быть закодированы, так как они не разрешены в URL.

Если вы хотите сохранить разделение между словами в именах файлов, используйте подчеркивание (my_cool_page.html) или дефис (my-cool-page.html).

Как новичок, вы, возможно, не слишком переживаете по поводу оптимизации для поисковых систем (SEO), но Google отмечает, что предпочитает дефисы в именах файлов, а не подчеркивания.

Ошибка №2: разный регистр букв 

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

Предположим, вы создали папку CSS с именем "Css" и файл внутри нее с именем "Main.css". Но в вашем коде вы ссылаетесь на него следующим образом:

<link rel="stylesheet" href="css/main.css">

Пока вы работаете над проектом, проблем нет.

Но когда вы загружаете ваш проект на веб-сервер... Бум! CSS не применяется.

Многие веб-серверы работают на какой-то версии Linux или Unix, а не Windows. Вы, возможно, слышали о LAMP-стеке. Linux — это L в LAMP.

Эти системы чувствительны к регистру.

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

Ошибка №3: путаница в пути к файлам 

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

Не долго после начала изучения HTML вы начнете изучать, как связываться с другими HTML и CSS-файлами.

Это достаточно просто, когда файлы находятся в одном каталоге. Даже в приведенном выше примере мы просто смотрели в каталог CSS для файла main.css.

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

В приведенном ниже примере мы устанавливаем фоновое изображение для веб-страницы в нашем файле main.css. Файл main.css находится в каталоге CSS. Мы ссылаемся на изображение в каталоге img.

body { background-image: url("../img/moon.png"); }

Оба этих каталога (или папки) находятся в корневом каталоге. Поэтому нам нужно подняться из каталога CSS и затем спуститься в каталог img.

Мы поднимаемся на один уровень с помощью двух точек: ".."

Оттуда мы спускаемся в каталог img, чтобы связаться с файлом moon.png.

Если бы нам нужно было подняться на два уровня, путь к файлу начинался бы так: "../../"

Помните, одна точка указывает на каталог, в котором вы находитесь. Две точки указывают на каталог выше того, в котором вы находитесь.

Ошибка №4: в названии страницы нет «Index»

Назначение вашей страницы по умолчанию другого имени, кроме «index», является ошибкой. Веб-серверы ищут файл с именем index.

Когда вы работаете с HTML, у вас должен быть файл index.html. Этот файл загружается по умолчанию, не показывая имя файла в конце URL.

Вот почему вы можете зайти на любимый сайт и не увидеть "/index.html" после ".com". Файл index загружается по умолчанию.

Хотя ваш любимый сайт может использовать не только HTML, но этот принцип распространяется и на другие технологии, такие как PHP (index.php), React (index.js) и другие.

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

Ошибка №:5 работа без перерывов! 

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

Это случается со всеми.

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

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

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

В итоге 

По мере накопления опыта вы быстро преодолеете эти распространенные ошибки.

То, что когда-то было трудно понять, станет ясным.

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

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

Ссылка
скопирована
Получите бесплатные уроки на наших курсах
Все курсы
Программирование
Скидка 25%
Python Advanced. Продвинутый курс
Освойте асинхронное и метапрограммирование, изучите аннотацию типов и напишите собственное приложение на FastAPI. Улучшите свои навыки Python, чтобы совершить быстрый рост вашего грейда до уровня middle.
Получи бесплатный
вводный урок!
Пожалуйста, укажите корректный e-mail
отправили вводный урок на твой e-mail!
Получи все материалы в telegram и ускорь обучение!
img
Еще по теме:
img
Гипервизор - это программное обеспечение для виртуализации, используемое для создания и запуска виртуальных машин (ВМ). Гипервиз
img
Виртуализация серверов позволяет запускать несколько виртуальных машин на одном физическом сервере. Запуск виртуальных машин (ВМ
img
Сегодня мы рассмотрим, как настроить и использовать PHP в проекте. Но прежде чем начать, нужно понять, что такое PHP. Что такое
img
Как разработчик, вы знаете, что HTML расшифровывается как HyperText Markup Language (язык разметки гипертекста). HTML — это язык
img
Бесконечные споры вокруг искусственного интеллекта приводят к путанице. Существует много терминов, которые кажутся похожими, но
img
SVG расшифровывается как масштабируемая векторная графика. Это веб-дружелюбный векторный формат файлов, используемый для отображ
21 ноября
20:00
Бесплатный вебинар
Введение в Docker