Съдържание на курса

Урок 1 — Твоят компютър и работният цикъл

От Dorian Chávez · основател на Hábil и архитект на интеграции ·

Време: 90 минути (или 2 × 45)

Какво изграждаш: работната среда —папка, редактор, локален сървър, инструменти на браузъра и Git— и първия index.html на revisor, отворен от твоя собствен сървър.

Какво научаваш: редактор, терминал и папки; локален сървър от първия ден; инструментите на браузъра; първи запис в Git.

Страниците на този урок. Всички са в programas/01-entorno-ciclo-trabajo/ на хранилището на курса. Тук ще ги пишеш ти, стъпка по стъпка; папката служи да сравниш своето копие с правилното, когато нещо не съвпада.

След урока ще можеш да

  • Движиш се по папките от терминала (pwd, ls, cd, mkdir) и създаваш папката на проекта в личната си директория.
  • Пишеш index.html в редактора, запазваш го и го виждаш в браузъра от локален сървър, който пускаш с python3 -m http.server.
  • Обясняваш защо JavaScript модул не се зарежда от file:// и разпознаваш съобщението на браузъра, когато това се случи.
  • Използваш Инспектора, Конзолата и раздела „Мрежа“, за да видиш какво е получил браузърът, какви грешки е имало и какви заявки е записал твоят сървър.
  • Отличаваш „Преглед на изходния код“ от Инспектора и обясняваш защо могат да показват различни неща.
  • Запазваш първия си запис в Git и го четеш с git status, git diff и git log --oneline.

Защо, преди как

Ще повтаряш един и същи жест стотици пъти по време на курса: променяш един ред, запазваш, отиваш в браузъра, презареждаш, гледаш какво се е случило. Този цикъл —пишеш, запазваш, презареждаш, инспектираш— е истинският ритъм на този, който прави уеб страници, и от него зависи колко научаваш за час. Ако всеки оборот струва десет секунди излишно триене или ако резултатът, който виждаш, не съвпада с този, който ще види всеки друг, умората идва преди разбирането. Добре подредената среда е това, което ти позволява да грешиш бързо и да разбираш защо.

И има още една, по-конкретна причина, която Урок 0 остави поставена: една страница не е едно и също нещо, когато я отвориш с двойно щракване върху файла и когато я сервира сървър. Документът, който отваряш с двойно щракване, пристига през file://, без HTTP разговор, без кодове на състоянието и без използваем произход: браузърът му придава „непрозрачен“, който не съвпада с никой друг, и скоро ще видиш какви последствия има. Същият документ, сервиран от http://localhost:8000, пристига така, както ще пристига в деня, в който го публикуваш. Ако разработваш по първия начин, ще виждаш да „работят“ неща, които ще се счупят при публикуване, и —по-лошо— ще виждаш да се чупят неща, за които кодът ти не е виновен. Затова този курс вдига локален сървър от първия ден: не за да се хвалим, а за да е това, което виждаш на екрана си, онова, което ще види светът.

Онова, което наистина струва, е първият час, и затова е добре да го направиш подредено. Урокът има три блока. Първо работилницата: терминалът, папките и редакторът, които са мястото, където ще прекарваш времето си. После цикълът на гледане: локалният сървър и инструментите на браузъра, които ти казват какво се случва. Накрая точката на връщане: Git, който запазва състоянието на работата ти, така че грешката да не е сериозна. В края ще имаш папка revisor с първа страница, която работи от твоя сървър, със запазен първи запис.

Една бележка за системата. Курсът предполага Linux Mint, а на 7 октомври 2026 г. версията, която сайтът му предлага като текуща, е 22.3 („Zena“), в трите ѝ издания: Cinnamon, Xfce и MATE. Всичко в този урок е еднакво в трите; единственото, което се променя, е видът на менюто. Версия 22 на Mint е построена върху Ubuntu 24.04 и затова носи Python 3.12 и версия на Git от серията 2.43; ако твоята се различава леко, няма значение, нищо от ползваното не е ново.

Понятията

Те са три и ще ги ползваш в този ред във всяка работна сесия на курса.

1.1 Работилницата: терминал, папки и редактор

Терминалът: да пишеш онова, което преди правеше с мишката

Терминалът е прозорец, в който вместо да щракаш, пишеш команди. Може да изглежда като крачка назад; обратното е. Написаната команда може да се повтори, да се постави в съобщение, да се запише във файл и да се автоматизира, неща, които щракването не позволява. Освен това почти всичко, което ще научиш в програмистката си кариера —сървъри, Git, инструменти— се управлява оттам. За да го отвориш в Mint, натисни Ctrl+Alt+T или го потърси като „Terminal“ в менюто.

Ще видиш ред, подобен на този:

ana@mint:~$

Чете се така: ana е твоят потребител, mint — името на компютъра ти, : разделя, ~ е къде се намираш (по-долу ще разбереш какво означава), а $ значи „готов съм да пишеш“. $ никога не се пише. В примерите на този курс ред, който започва с $ , е команда, която ти пишеш (без този символ), а редовете след нея са онова, с което терминалът отговаря. Всяка команда завършва с натискане на Enter. (Урок 0 вече ти предвари тази конвенция; тук я виждаш с твоя собствен терминал пред себе си.)

Три прекия пътя, които ти спестяват половината писане, от днес: клавишът Tab допълва имената (напиши първите букви на една папка и натисни Tab); стрелките нагоре и надолу обхождат командите, които вече си писал; а Ctrl+C прекъсва онова, което се изпълнява, и ще го ползваш, за да спреш сървъра си. И четвърти, Ctrl+L, който изчиства екрана, без да трие нищо.

Къде си: папките и пътищата

Терминалът винаги е „застанал“ в някоя папка и командите действат върху нея, освен ако не им кажеш друго. За да разбереш в коя си, има pwd (print working directory, отпечатай работната директория):

$ pwd
/home/ana

Това е твоята лична папка, или home: мястото, където живеят файловете ти, и онова, което терминалът отваря по подразбиране. Съкращава се със символа ~, затова в подканата по-горе пишеше ~. Забележи, че пътят ползва същите наклонени черти като URL адресите от Урок 0 и работи по същия принцип: път, който върви от корена навътре. И, както при URL, има абсолютни пътища (започват от корена, с /, или от личната ти папка, с ~) и относителни пътища (тръгват от мястото, където си, без начална черта). Две специални имена допълват речника: . значи „тази папка“, а .. значи „папката отгоре“.

С четири команди вече се движиш из цялата система:

Команда Какво прави Пример
pwd казва в коя папка си pwd
ls изброява какво има в текущата папка ls · ls -a показва и скритото
cd сменя папката cd Documentos · cd .. качва едно ниво · cd сам, връща те у дома
mkdir създава папка mkdir revisor

Файл или папка, чието име започва с точка (.git, .gitignore), е скрит: ls не го показва, освен ако не поискаш ls -a. Графичните файлови мениджъри също ги крият; в този на Mint (Nemo) се показват или скриват с Ctrl+H. Ще ти трябва, за да видиш папката на Git.

Linux прави разлика между главни и малки букви: Revisor и revisor са различни папки. Помни правилото, родено в Урок 0: малки букви, без интервали и без ударения във всичко, което създаваш. Ако някой ден ти потрябва интервал, терминалът ще те принуди да пишеш кавички или обратни наклонени черти и това е добро предупреждение, че това име ще създаде проблеми.

Създай още сега папката на проекта и влез в нея:

$ cd ~
$ mkdir revisor
$ cd revisor
$ pwd
/home/ana/revisor
$ ls

Последното ls не отпечатва нищо, защото папката е празна, и това е правилното. Ако вместо това терминалът ти отговори mkdir: no se puede crear el directorio «revisor»: El archivo ya existe (не може да се създаде директорията „revisor“: файлът вече съществува), значи вече си създал папка с това име; влез с cd revisor и продължи. (Между другото, в този курс не съществува команда, която да трие неща: когато нещо се изтрие от терминала, няма кошче и да започваш оттам е лоша идея. Ако някой ден поискаш да триеш, направи го от файловия мениджър, който има кошче.)

Редакторът

Една уеб страница е файл с чист текст: букви, цифри и символи, без форматиране. Това значи, че не се пише в текстообработваща програма (като LibreOffice Writer), която запазва и шрифтове, полета и стилове, които браузърът не разбира. Пише се в редактор на код, който запазва само текста и освен това ти помага: оцветява според езика, сам прави отстъпите, предупреждава за незатворени скоби.

Linux Mint носи един прост, Xed, който върши работа. В този курс ще ползваме Visual Studio Code (VS Code), безплатен и много разпространен редактор, защото показва дървото на папките на проекта, носи вграден терминал и се ползва еднакво във всяка система, така че онова, което научиш тук, го използваш навсякъде. Ако предпочиташ друг редактор, ще работи: единственото, което курсът изисква, е да запазва чист текст, в UTF-8 и с преходи на ред на Linux.

За да инсталираш VS Code в Mint, официалната документация на редактора указва да изтеглиш пакета .deb от сайта му, в раздела за изтегляния за Linux (избери опцията .deb за 64 бита), и после да го инсталираш от терминала. Ако си го изтеглил с Firefox, файлът е останал в папката ти за изтегляния (в система на испански, ~/Descargas):

$ cd ~/Descargas
$ sudo apt install ./code_*.deb

Две нови неща в този ред. apt е мениджърът на пакети на Mint: програмата, която инсталира, обновява и премахва софтуер, като сама решава зависимостите. А sudo е думата, която значи „направи го с администраторски права“: инсталирането на програми за цялата система ги изисква и затова sudo те пита за твоята парола. Когато я пишеш, няма да видиш нищо на екрана, дори звездички: не е, че не работи, а мярка, за да не я прочете никой през рамото ти. Напиши я цялата и натисни Enter. Едно правило за хигиена, което е добре да имаш от първия ден: не поставяй в терминала команда със sudo, която не разбираш; с нея машината прави каквото ѝ кажеш, без да пита сигурен ли си. (Този пакет, между другото, настройва хранилище, така че редакторът да се обновява заедно с останалата система, както описва самата документация на VS Code.)

С инсталирания редактор го отвори върху папката на проекта, не върху отделен файл. От терминала, вече вътре в ~/revisor, напиши:

$ code .

Точката е текущата папка: току-що отвори редактора „застанал“ в revisor. Отляво ще видиш файловия изследовател с папката (празна), а в долната лента — информация за файла. При първото отваряне VS Code ще те попита дали се доверяваш на авторите на папката: тя е твоя, кажи да. После включи автоматичното запазване, за да не се налага да помниш да запазваш: в менюто File (Файл) отметни Auto Save (Автоматично запазване). Ще видиш, че си остава полезно да натискаш Ctrl+S по навик; автоматичното запазване е мрежа за безопасност, не заместител. Ако редакторът ти предлага да допълва цели блокове код вместо теб, изключи го, докато учиш: да пишеш всеки ред със собствените си ръце е част от ученето.

Вътре в редактора, с комбинацията Ctrl плюс клавиша с обратния апостроф, отваряш вграден терминал, който вече е застанал в папката на проекта. Това е най-ползваното удобство и ще ти трябва, когато сървърът заеме един терминал, а ти искаш друг: с бутона + на този панел отваряш втори.

1.2 Цикълът на гледане: локален сървър и инструменти на браузъра

Първата страница

Създай първия файл на проекта: в изследователя на VS Code, с бутона „Нов файл“ (или Ctrl+N и после запазване), наречи го index.html. Напиши това:

<!-- fig01_01.html -->
<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Revisor de servicios</title>
</head>
<body>
  <main>
    <h1>Revisor de servicios</h1>
    <p>Aquí vivirá el estado de tus servicios.</p>
  </main>
</body>
</html>
Revisor de servicios
Aquí vivirá el estado de tus servicios.

(Първият ред, коментарът <!-- fig01_01.html -->, е начинът, по който хранилището на курса идентифицира този пример; можеш да го копираш или не, това е коментар, който браузърът не показва. Вторият блок е онова, което ще видиш в прозореца.)

Не те моля да разбереш всеки таг днес; Урок 2 е посветен на това. За да не е файлът непрозрачен текст, ето минимума: <!DOCTYPE html> казва на браузъра да чете страницата по съвременните правила; lang="es" обявява езика, което има значение за екранните четци; <meta charset="utf-8"> обявява кодирането (то е онова, което кара „á“ и „ñ“ да се виждат правилно; трябва да е близо до началото); тагът с viewport кара страницата да се нагажда към ширината на телефон и ще го ползваме много в Урок 5; <title> е текстът на раздела. Всичко вътре в <body> е онова, което се вижда в прозореца: заглавие (<h1>) и абзац (<p>) в основната област (<main>).

Запази с Ctrl+S. Има два начина да го видиш в браузъра. Първият е този, който всички пробват: двойно щракване върху файла във файловия мениджър. Опитай го. Работи и в адресната лента ще видиш нещо като file:///home/ana/revisor/index.html. Забележи схемата: file, не http. Тук няма сървър, нито разговор; браузърът е прочел файла от диска, такъв, какъвто е.

За страница от един файл това стига. За проект с повече от един файл, които се зареждат един друг, вече не. Да видим защо с малък тест, направен нарочно.

Модул, който не се зарежда

По-нататък в курса ще разделиш JavaScript на таблото на малки файлове, които се импортират един друг. Това се нарича модули и се зареждат с <script type="module">. Виж как изглежда с минимален пример: една страница и един JavaScript файл, който променя нейния текст. (Още не е нужно да разбираш JavaScript —идва в Урок 6—; достатъчно е да знаеш, че този единствен ред търси абзаца, чийто идентификатор е status, и му променя текста.)

Замени съдържанието на index.html с тази версия и създай до него, в същата папка, файл main.js с програмата. Забележи атрибута src="main.js": това е относителен URL (Урок 0), който значи „файлът main.js, който е до тази страница“.

<!-- fig01_02.html -->
<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Revisor de servicios</title>
  <script type="module" src="main.js"></script>
</head>
<body>
  <main>
    <h1>Revisor de servicios</h1>
    <p id="status">Esperando al módulo.</p>
  </main>
</body>
</html>
// main.js
document.querySelector("#status").textContent = "El módulo cargó.";
Revisor de servicios
El módulo cargó.

(В хранилището на курса тази страница се казва fig01_02.html, а програмата ѝ main.js, един до друг; в твоята папка страницата се казва index.html. Двата блока се копират такива, каквито са. Третият блок е онова, което трябва да видиш, когато всичко работи.)

Сега я отвори с двойно щракване, както преди. Ще видиш текста „Esperando al módulo.“ (чака се модулът) и не „El módulo cargó.“ (модулът се зареди): програмата не се е изпълнила. И никой не те е предупредил в прозореца. Това е една от най-объркващите тихи повреди и се обяснява в раздела „Грешката, която ще видиш“: предупреждението е в Конзолата на браузъра, която ще се научиш да отваряш след няколко минути.

Основната причина я постави Урок 0. Модулите се изтеглят със заявка, която браузърът прави „в режим на кръстосан произход“ (механизмът, наречен CORS), тоест подчинена на политиката за същия произход. Страница, отворена от file://, има непрозрачен произход и браузърът не ѝ позволява да направи това изтегляне. Решението не е трик в кода: то е да предадеш проекта по HTTP, както ще го прави реалният свят.

Локалният сървър: python3 -m http.server

Трябва уеб сървър, и то не тежък: минимален, който чете файлове от папката и ги предава по HTTP. Компютърът ти вече носи такъв, включен в Python. Вече си в папката на проекта; от терминала напиши:

$ python3 -m http.server 8000 --bind 127.0.0.1
Serving HTTP on 127.0.0.1 port 8000 (http://127.0.0.1:8000/) ...

Разгледай всяка част от този ред, защото всяка отговаря на нещо от Урок 0:

  • python3 -m http.server изпълнява (-m, „модул“) уеб сървъра, който идва в стандартната библиотека на Python. Не трябва да инсталираш нищо; това е единственото от Python, което този курс използва.
  • 8000 е портът: „вратата“, на която слуша. Произволно число над 1024; 8000 е навик. Ако твоята папка използва друг, пишеш го по същия начин в URL.
  • --bind 127.0.0.1 ограничава сървъра до твоята собствена машина. Предпазна мярка, която има значение: по подразбиране този сървър слуша на всички мрежови интерфейси, а документацията на Python предупреждава, че не е предвиден за производствена среда. С --bind 127.0.0.1 слушаш само себе си.
  • Редът, който отпечатва, казва на кой адрес сервира текущата папка.

Терминалът остана „зает“: не ти връща подканата $, защото сървърът продължава да работи и да пише там каквото се случва. Остави го така и отвори друг (във VS Code, бутонът + на панела с терминала; или нов прозорец). За да го спреш, някой ден, се връщаш в този терминал и натискаш Ctrl+C.

Сега отвори браузъра и напиши http://localhost:8000/ (localhost е име, резервирано за твоята собствена машина). Както видя в Урок 0, това име съответства на два адреса, 127.0.0.1 и този на IPv6, ::1; сървърът слуша само на първия, а браузърът, ако не му отговорят на единия, опитва другия (проверих го с Chrome, Firefox и curl). Ако някой ден localhost не ти отвори страницата, напиши адреса, който е отпечатал сървърът, http://127.0.0.1:8000/. Страницата, която виждаш, е същата, но сега текстът казва „El módulo cargó.“: програмата се е изпълнила. Разликата е точно схемата: преди file://, сега http://.

Виж какво е написал терминалът на сървъра междувременно, което е разговорът от Урок 0 в съкратен вид:

127.0.0.1 - - [07/Oct/2026 10:55:10] "GET / HTTP/1.1" 200 -
127.0.0.1 - - [07/Oct/2026 10:55:10] "GET /main.js HTTP/1.1" 200 -
127.0.0.1 - - [07/Oct/2026 10:55:10] code 404, message File not found
127.0.0.1 - - [07/Oct/2026 10:55:10] "GET /favicon.ico HTTP/1.1" 404 -

Всеки ред е заявка, която е пристигнала. Чете се: кой я е направил (127.0.0.1, ти), кога, редът на заявката в кавички (метод, път и версия) и кодът на състоянието. Три неща за забелязване. Първо: един-единствен достъп до страницата е породил три заявки, не една: HTML, програмата, която HTML иска, и нещо, което ти не си поискал. Това е механизмът от Урок 0, в малък мащаб. Второ: HTML е поискан с GET /, пътя, който си написал, който е папка, а не файл; сървърът е отговорил с index.html на тази папка, конвенцията, която видя в Урок 0. Журналът записва онова, което е поискано, не файла, който е предаден. Трето: 404 за /favicon.ico не е твоя грешка. Favicon е малката иконка на раздела; браузърите я искат по своя инициатива, на този път, без да си го казал никъде. Тъй като няма нито една, сървърът отговаря „не е намерено“. Безобидно е и те учи на нещо важно: браузърът прави заявки, които страницата ти не е искала. В Упражнение 2 ще го заглушиш.

Можеш да видиш и какво отговаря сървърът на ниво заглавни части, с curl (инсталирай го, ако го нямаш, със sudo apt install curl; официалното му ръководство учи на останалите му опции):

$ curl -i http://127.0.0.1:8000/main.js
HTTP/1.0 200 OK
Server: SimpleHTTP/0.6 Python/3.12.12
Date: Wed, 07 Oct 2026 19:17:38 GMT
Content-type: text/javascript
Content-Length: 81
Last-Modified: Wed, 07 Oct 2026 19:17:38 GMT

// main.js
document.querySelector("#status").textContent = "El módulo cargó.";

(Този изход го измерих на друг компютър, с Python 3.12.12; в Linux Mint 22 редът Server ще казва версията, която носи системата, Python/3.12.3 към момента на писане. Датите ще са други, а Content-Length ще съвпадне само ако си копирал файла такъв, какъвто е, с коментара му.) Разпознаваш всичко: реда на състоянието с HTTP/1.0 —този учебен сървър ползва тази версия по подразбиране—, Content-type, изчислен по разширението на файла (.js → text/javascript; MDN документира цялата заглавна част в Content-Type), размера на тялото, датата на промяна. Това е твоят собствен сървър, който говори езика на Урок 0.

Две наблюдения за всекидневната употреба. Ако забравиш в коя папка си го пуснал, помни, че сървърът публикува папката, от която го изпълняваш: ако го пуснеш в личната си папка, би публикувал, за всеки, който може да достигне сървъра, всичко, което има там (затова --bind 127.0.0.1 и затова винаги първо cd revisor). И ако промениш файл и презаредиш, сървърът предава новата версия, без да се рестартира; не е нужно да го спираш всеки път, а само когато смениш проекта.

Инструментите на браузъра

Браузърът ти има вградена работилница, за да погледнеш отвътре онова, което е заредено: инструментите за разработчици. Отварят се с F12 (или Ctrl+Shift+I) и се делят на раздели. Ще ползваме Firefox, който идва с Mint; в браузърите на базата на Chromium има същите, с почти идентични имена. За този урок три раздела стигат:

Инспектор. Показва документа така, както браузърът го разбира: дърво от елементи. Щракни с десния бутон върху абзаца на страницата и избери Инспектиране (Inspect): отваря се Инспекторът, с осветения елемент. Можеш да разгъваш и свиваш дървото и дори да редактираш текст с двойно щракване, за да видиш ефекта (трае само до презареждане: експеримент е, не променя файла ти). Тук ще видиш „El módulo cargó.“.

И ето една от най-ценните идеи на урока. С отворената страница натисни Ctrl+U, което отваря Преглед на изходния код (View Source). Там ще видиш HTML такъв, какъвто е пристигнал от сървъра, с „Esperando al módulo.“ в абзаца. Изходният код е онова, което сървърът е изпратил; Инспекторът е онова, което браузърът има сега, след като е изпълнил JavaScript. Могат да са различни и в таблото почти винаги ще са, защото JavaScript ще го изчертава. Когато нещо „не се появява“ на екрана, да погледнеш и двете ти казва дали сървърът не го е изпратил, или програмата ти не го е начертала. Без това разграничение е лесно да загубиш един следобед.

Конзола. Там браузърът пише своите предупреждения и грешките на твоя JavaScript, всяка с файла и реда, които са я причинили. Отвори я и я дръж видима, докато работиш. Едно правило, което ще приемем като изходен критерий на курса: Конзолата трябва да е празна (нито грешки, нито предупреждения). Със сервираната страница твоята ще бъде такава, с едно изключение, което е добре да знаеш: Chrome записва в Конзолата 404 за favicon.ico, за което говорихме по-горе (измерих го; в други браузъри може да не се появи), и изчезва щом направиш Упражнение 2. Със страницата, отворена през file://, ще има грешката с модула, която видяхме по-горе.

Мрежа. Познаваше я от Урок 0. Сега, с твоя сървър, е много по-показателна: отвори раздела, презареди с F5 и ще видиш три реда: документа, main.js и favicon.ico, със състояния 200, 200 и 404. Това са същите три реда, които е написал твоят сървър, видени от другата страна. Щракни върху този на main.js и погледни заглавните части: Content-type: text/javascript отгоре, със своя сървър. Там отметни Деактивиране на кеша (квадратче в лентата на раздела или в менюто му с настройки, според версията ти): докато инструментите са отворени, браузърът няма да използва повторно стари копия. Решава проблема „редактирах и не се вижда промяната“, преди да се е появил. При затворени инструменти кешът пак действа; ако се съмняваш, Ctrl+Shift+R налага презареждане, което го игнорира.

Цикълът вече е пълен. Всеки път, когато промениш нещо, рутината е винаги една и съща: редактираш, запазваш, презареждаш, гледаш Конзолата и раздела „Мрежа“. Ако нещо не се появява, първото, което се гледа, е Конзолата.

1.3 Точката на връщане: Git

Какъв проблем решава

Рано или късно ще промениш нещо, което работеше, и то ще спре да работи, а ти няма да помниш точно какво си пипнал. Без запис изходът е на ръка да отмениш онова, което мислиш, че си променил. Git е система за контрол на версиите: програма, която по твоя заповед запазва снимки на състоянието на папката ти, всяка със съобщение, което казва какво е променено и защо. С тях можеш да видиш какво е било променено, да сравняваш с всяка предишна точка и да се връщаш назад. Това е най-ползваният инструмент в света за тази цел и ще го видиш във всеки екип; курсът Missing Semester на MIT му посвещава цяла лекция, ако искаш да разбереш как пази историята отвътре.

Не го бъркай с GitHub или GitLab: Git работи само на твоята машина, без интернет. Услуги като GitHub са места, където можеш да споделяш хранилище на Git; тук още не ни трябват. За този урок Git е твоята лична история.

Има един мисловен модел, който го прави разбираем, и това са три зони. Файловете ти живеят в работната папка, където ги редактираш. Когато нещо е готово за запазване, го прехвърляш в зоната за подготовка (stage): чакалня, където решаваш точно какво ще влезе в следващата снимка. И самата снимка, която се нарича commit (потвърждение), се запазва в хранилището. Три стъпки, три команди: git add премества в чакалнята, git commit прави снимката.

Подготовка на Git, веднъж

Първо му кажи кой си: всеки commit носи автор. Прави се само веднъж в твоя акаунт на компютъра, с истинските ти данни (имейлът е само етикет; не се изпраща никъде):

$ git config --global user.name "Ana Pérez"
$ git config --global user.email "ana@example.com"

Ако Git не е инсталиран (git --version ти го казва), инсталира се със sudo apt install git.

Първият запис

В папката на проекта създай хранилището с git init. Опцията -b main дава на основния клон името main, което е сегашният обичай:

$ git init -b main
Inicializado repositorio Git vacío en /home/ana/revisor/.git/

Git създаде скрита папка, .git, в която живее цялата история. Не я пипай на ръка; ако я изтриеш, губиш историята. Попитай го как вижда проекта:

$ git status
En la rama main

No hay commits todavía

Archivos sin seguimiento:
  (usa "git add <archivo>..." para incluirlo a lo que será confirmado)
	index.html
	main.js

no hay nada agregado al commit pero hay archivos sin seguimiento presentes (usa "git add" para hacerles seguimiento)

git status е командата, която ще изпълняваш най-много: казва къде е всяко нещо. Тук те информира, че index.html и main.js са без проследяване: съществуват в работната папка, но Git още не ги познава. Прехвърли и двата в чакалнята (git add приема няколко имена) и питай отново:

$ git add index.html main.js
$ git status
En la rama main

No hay commits todavía

Cambios a ser confirmados:
  (usa "git rm --cached <archivo>..." para sacar del área de stage)
	nuevos archivos: index.html
	nuevos archivos: main.js

Сега и двата фигурират под „Cambios a ser confirmados“ (промени за потвърждение): в чакалнята са. Направи снимката със съобщение:

$ git commit -m "Primer index.html del revisor"
[main (commit-raíz) ff110e5] Primer index.html del revisor
 2 files changed, 18 insertions(+)
 create mode 100644 index.html
 create mode 100644 main.js

Което казва: запазен е един commit в клона main, идентифициран с кода ff110e5 (първите знаци от неговия отпечатък; твоят ще е друг), с два файла, които са се променили, и добавените редове (числото зависи от това колко реда имат файловете ти). Този обобщаващ ред излиза на английски, дори системата ти да е на испански: Git не го превежда. За да го видиш в списъка на историята:

$ git log --oneline
ff110e5 Primer index.html del revisor

По един commit на ред, най-новият отгоре. Вече имаш първата си точка на връщане.

Цикълът с Git

Шаблонът е винаги един и същ и е кратък: променяш, гледаш какво е променено, подготвяш, запазваш. Редактирай index.html (например промени текста на абзаца) и попитай какво е променено с git diff, който показва ред по ред какво се е променило спрямо последния commit (редовете с - са премахнати; редовете с + са добавени):

$ git diff
diff --git a/index.html b/index.html
index 05c31c2..9de2d09 100644
--- a/index.html
+++ b/index.html
@@ -10,7 +10,7 @@
 <body>
   <main>
     <h1>Revisor de servicios</h1>
-    <p id="status">Esperando al módulo.</p>
+    <p id="status">Cargando el módulo.</p>
   </main>
 </body>
 </html>

(В този пример е променен текстът на абзаца: редът с - е този от преди, а този с + — от сега; Git показва още три реда контекст отгоре и отдолу. Числата в реда index зависят от точното съдържание на файла ти, така че твоите може да са други.) Да го видиш, преди да запазиш, е най-добрият навик с Git: улавя грешки, като промяна, която не си възнамерявал. После пак git add и git commit.

Няколко правила за употреба, които спестяват главоболия. Съобщенията казват какво и защо, в кратко изречение: „Agrega la tabla de servicios“ (добавя таблицата с услугите) върши работа; „cambios“ (промени) и „asdf“ не вършат, защото след месец няма да ти кажат нищо. Един commit за една идея: не смесвай в един поправка и нова функция. И навикът на курса: в края на всеки урок — един commit със състоянието, в което е останало таблото. Така, ако Урок 8 ти развали нещо, 7 си остава непокътнат и възстановим. Една последна бележка: Git не следи празни папки, само файлове; затова css/, js/ или data/ няма да се появят в git status, докато нямат нещо вътре.

Грешката, която ще видиш

Има три почти неизбежни грешки в този урок. Възпроизведи ги нарочно: да ги видиш тук, с причината под ръка, е много по-евтино, отколкото да се натъкнеш на тях сам.

Модулът, блокиран от CORS

Отвори index.html (версията с модула, fig01_02) с двойно щракване, така че лентата да казва file:///…. Отвори Конзолата с F12. В Chrome съобщението, измерено на 7 октомври 2026 г. (с пътя, приспособен към Linux, останалото дословно), е:

Access to script at 'file:///home/ana/revisor/main.js' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: chrome, chrome-experimental-site-token-provider, chrome-extension, chrome-untrusted, data, http, https, isolated-app.

Във Firefox съобщението има друга формулировка и споменава причина, която документацията на Mozilla описва така: „Reason: CORS request not HTTP“, тоест че заявката от кръстосан произход не е HTTP; във Firefox на испански тази част ще се появи преведена. Макар формулировката да се променя, информацията е същата.

Какво означава: страницата има origin 'null' —непрозрачния произход на локалните файлове— и е поискала модул; заявка от този вид може да се направи само по HTTP или HTTPS, а твоята беше през file://. Затова програмата не се изпълни. Как се оправя: като сервираш папката с python3 -m http.server, както направи. Няма какво да се поправя в кода.

Address already in use

Ако пуснеш сървъра и там вече е имало друг —защото си го оставил да работи в друг терминал—, Python отговаря с дълга грешка, чийто последен ред е важният. В Linux е:

OSError: [Errno 98] Address already in use

(В други системи числото се променя; фразата е същата. 98 е стойността на EADDRINUSE, „адресът се използва“, в Linux.) Какво означава: друга програма вече слуша на порт 8000; само една може да го прави едновременно. Как се оправя: ако е твоят собствен забравен сървър, иди в неговия терминал и го спри с Ctrl+C; или използвай друга врата: python3 -m http.server 8001 --bind 127.0.0.1 (и тогава URL е http://localhost:8001).

Самоличността на Git

Ако забравиш стъпката с git config и системата ти не може да изведе разумен имейл, първият git commit отказва със съобщение, което започва с Identidad del autor desconocido и завършва с fatal: no es posible auto-detectar la dirección de correo (ако системата ти е на английски: Author identity unknown и fatal: unable to auto-detect email address). Понякога Git извежда име и имейл въз основа на потребителя ти и името на машината и прави commit, като ти показва предупреждение да провериш дали са правилни. Какво означава: Git отказва да запази запис, без да знае от чие име е. Как се оправя: изпълни двете команди git config --global от по-горе (и, ако commit-ът вече е излязъл с автоматичната самоличност, git commit --amend --reset-author я заменя).

Какво се прави погрешно

Да разработваш, като отваряш файла с двойно щракване. Работи до деня, в който спираш да виждаш нещо, което би трябвало да работи: модули, fetch, шрифтове. Цена: часове, в които приписваш на кода си повреда на произхода. Поправка: винаги локалният сървър, от първия ред.

Да пуснеш сървъра в грешната папка. Един python3 -m http.server, пуснат в личната ти папка, без --bind, публикува всичко, което има там, към цялата локална мрежа. В нова инсталация на Mint защитната стена обикновено идва изключена, така че нищо не би го спряло. Цена: документите ти изложени в мрежата на едно кафене. Поправка: cd revisor преди пускане и винаги --bind 127.0.0.1.

Да пишеш в текстообработваща програма. Един .docx, преименуван на .html, не е HTML. Цена: страница, пълна със символи. Поправка: редактор на код, чист текст, UTF-8.

Да слагаш интервали, ударения или главни букви в имената. Mi Página.html изглежда добре днес и се чупи утре, в терминала и в URL (Урок 0 обясни защо). Поправка: mi-pagina.html.

Да презареждаш, без да гледаш Конзолата. Грешката е написана, с файл и ред, и никой не я чете. Цена: дебъгване на сляпо. Поправка: Конзолата винаги отворена.

Commit, който казва „cambios“ (промени). Върши работа в деня, в който го пишеш, и никога повече. Поправка: изречение, което казва какво и защо.

Да поставяш команди със sudo, без да ги четеш. Със sudo машината се подчинява, без да пита. Поправка: преди да натиснеш Enter, знай какво прави всяка дума.

Упражнения

Упражнение 1 — Структурата на проекта

Вътре в ~/revisor създай три папки: css, js и data, с една-единствена команда (подсказка: mkdir приема няколко имена). Провери с ls. После попитай Git с git status: изброява ли ги като промени? Защо?

Упражнение 2 — Заглушаване на favicon

При работещ сървър и отворен раздел „Мрежа“ презареди страницата и запиши състоянието на favicon.ico. Добави вътре в <head> на страницата <link rel="icon" href="data:,">, запази, презареди с Ctrl+Shift+R и погледни отново. Какво се промени в раздела „Мрежа“ и в журнала на сървъра? Проучи какво означава схема data: (подсказка: Урок 0 учеше частите на един URL).

Упражнение 3 — Изходен код срещу Инспектор и втори commit

Сервирай версията на страницата с модула (тази на fig01_02). Отвори „Преглед на изходния код“ (Ctrl+U) и Инспектора. Запиши какво казва абзацът във всеки и обясни разликата. После промени текста на заглавието, виж промяната с git diff и я запази с втори commit. Как изглежда сега git log --oneline?

Упражнение 4 — Предизвикай и прочети един 404

При работещ сървър преименувай файла main.js на principal.js от файловия мениджър (без да пипаш HTML) и презареди. Запиши, в този ред: какво вижда човекът на страницата, какво казва Конзолата, състоянието, което показва разделът „Мрежа“, и реда, който е написал сървърът. После го поправи и провери, че Конзолата е останала празна.

Решения

Упражнение 1 — Структурата на проекта

$ mkdir css js data
$ ls
css  data  index.html  js  main.js
$ git status
En la rama main
nada para hacer commit, el árbol de trabajo está limpio

Git не ги изброява, защото следи само файлове, не папки; празна папка няма какво да регистрира. Ще се появят в git status щом съдържат файл. (Ако вече си променил index.html, без да запазиш commit, git status ще ти го покаже като променен; това е друг въпрос.)

Упражнение 2 — Заглушаване на favicon

Страницата остава така:

<!-- fig01_03.html -->
<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Revisor de servicios</title>
  <link rel="icon" href="data:,">
</head>
<body>
  <main>
    <h1>Revisor de servicios</h1>
    <p>Aquí vivirá el estado de tus servicios.</p>
  </main>
</body>
</html>
Revisor de servicios
Aquí vivirá el estado de tus servicios.

Преди: ред с favicon.ico и състояние 404, а в сървъра code 404, message File not found. След: вече няма заявка към favicon.ico, защото самият HTML обявява иконката. Схемата data: е URL, който носи съдържанието вътре в себе си, вместо да сочи място, откъдето да се поиска; този, който написахме, data:,, съдържа празно съдържание, тоест невидима иконка, и затова браузърът не трябва да иска нищо. (Примерната страница example.com от Урок 0 прави точно същото.) По-нататък ще сложим истинска иконка.

Упражнение 3 — Изходен код срещу Инспектор и втори commit

„Преглед на изходния код“ показва Esperando al módulo.; Инспекторът показва El módulo cargó.. Разликата е, че изходният код е онова, което сървърът е изпратил, преди изпълнението на JavaScript, а Инспекторът е текущото състояние на документа, след като main.js е променил текста.

$ git diff
…
-    <h1>Revisor de servicios</h1>
+    <h1>Revisor de servicios web</h1>
$ git add index.html
$ git commit -m "Aclara el titulo del revisor"
$ git log --oneline
3a91c0e Aclara el titulo del revisor
ff110e5 Primer index.html del revisor

Два commit-а, най-новият отгоре; кодовете отляво ще са други на твоята машина.

Упражнение 4 — Предизвикай и прочети един 404

Което вижда човекът: страницата с „Esperando al módulo.“, без никакво предупреждение в прозореца. В сървъра се появяват тези редове (измерено на 7 октомври 2026 г.):

127.0.0.1 - - [07/Oct/2026 10:56:09] code 404, message File not found
127.0.0.1 - - [07/Oct/2026 10:56:09] "GET /main.js HTTP/1.1" 404 -

Разделът „Мрежа“ показва реда на main.js със състояние 404. Конзолата показва грешка при зареждане на модула; формулировката ѝ зависи от браузъра и обикновено споменава състоянието 404 или че сървърът е отговорил с тип съдържание, който не е JavaScript —страницата за грешка на сървъра е HTML—, и това е заглавната част Content-Type от Урок 0 в действие. Поправката е да върнеш името на файла (main.js). Урокът е същият като в Урок 0: страницата без програма не е мистерия, а второстепенна заявка, която е пропаднала, и се вижда на три места едновременно.

Как разбирам, че съм успял

  • pwd вътре в папката на проекта отпечатва /home/<твоят потребител>/revisor.
  • python3 -m http.server 8000 --bind 127.0.0.1 отпечатва Serving HTTP on 127.0.0.1 port 8000 (http://127.0.0.1:8000/) ... и http://localhost:8000/ показва страницата.
  • Със сервираната страница (и заглушения favicon от Упражнение 2) Конзолата е празна, а разделът „Мрежа“ показва документа със състояние 200.
  • Когато същата страница е отворена с двойно щракване (file://), Конзолата показва грешката с модула и знаеш да обясниш защо.
  • git log --oneline отпечатва поне един commit със съобщение, което обяснява какво си запазил, а git status казва nada para hacer commit, el árbol de trabajo está limpio (няма какво да се комитва, работното дърво е чисто).
  • Без да поглеждаш урока, можеш да отговориш: какво показва „Преглед на изходния код“, което Инспекторът не показва, и обратното?

Ако всичко е наред, средата ти вече е тази на всеки професионалист в уеба и останалата част от курса се прави върху нея. Запиши в дневника онова, което ти е струвало усилие. В Урок 2 ще напишеш скелета на таблото с HTML, който казва какво означава. А ако искаш да видиш отсега докъде стига пътят, нашият курс по TypeScript преправя същото това табло с типове и с React.

За допълнително четене

Да обсъдим вашия проект

Предпочитате имейл? Пишете ни на hola@habil.mx