Front-end: файли проєкту, шляхи та структура

Модуль 1 · Урок 2

Структура проєкту, файли й шляхи

Browser не вгадує, де лежить ресурс. Надійний workspace має передбачуваний root, видимі extensions, стабільні lowercase names і paths, які читаються від правильного base.

Project rootExtensionskebab-caseRelative paths

Мінімальна структура

bookflow-landing/
  index.html
  styles/styles.css
  scripts/main.js
  images/

`index.html` є entry document цієї лабораторії. Папки описують responsibility, а не випадковий тип завантаження.

Як читається path

Reference	Base	Що означає
`styles/styles.css`	folder поточного document	Зайти у child folder
`../images/cover.webp`	folder поточного file	Піднятися на один level
`/assets/app.css`	origin root	Root-relative URL на server
`https://example.com/app.css`	не потрібен	Absolute URL із scheme/host

Найчастіші збої

Case mismatchLogo.svg і logo.svg можуть бути різними файлами на server.

Hidden extensionindex.html.txt не стає HTML через icon.

Wrong base../ читається від file, що містить reference.

SpacesURL отримує percent-encoding і стає крихкішим.

External dependencyВіддалений resource має owner, availability, privacy і license risk.

Wrong rootLocal server з іншого folder повертає 404 або directory listing.

Практика

Заповніть `workspace-checklist.csv`.
Для кожного reference у `resource-map.csv` назвіть owner file і expected URL.
Навмисно змініть case у CSS path, зафіксуйте 404, потім виправте source.
Не додавайте secrets, PII або матеріали без дозволу.

Офіційне джерело

MDN: Dealing with files

Файли проєкту, шляхи та структура