Курс „Основи на уеба“ — от нулата до табло, което всеки може да използва

За кого е: за този, който никога не е писал уеб страница, и за този, който копира работещи фрагменти, без да знае защо работят. Не се предполага предишен опит с никакъв език: всяко понятие се обяснява, когато се появи, и се обяснява защо съществува, а не само как се пише.

Какво ще умееш накрая: да изградиш цяла страница, да разбираш какво си написал и да можеш да го обясниш на някой друг. И да запазиш усета да четеш документацията на платформата сам.

Накъде продължава: този курс е стъпалото преди нашия курс по TypeScript, който преправя същото това табло с типове и с React.

Какво ти трябва, преди да започнеш: компютър с Linux Mint и умение да отвориш терминал. Урок 1 инсталира всичко от нулата.

Проектът, който ще изградиш

revisor: табло, което показва състоянието на списък от услуги —име, състояние и време за отговор— с неговото обобщение, филтрите и формата му. С чист HTML, CSS и JavaScript, без нито една библиотека, като чете данните си от JSON файл на самия проект.

Започва в урок 2 и расте във всеки урок. Това е същата задача като в нашите курсове по Go, Rust и TypeScript: когато стигнеш до TypeScript, ще преправиш това табло и от сравняването на двете версии се учи повече, отколкото от започването на друг проект.

Дванайсетте урока

Урок		Какво изграждаш	Какво научаваш
0	Как работи уебът	още нищо (четене)	URL, DNS, HTTP, заявка и отговор; какво прави браузърът и какво сървърът; разделът „Мрежа“
1	Твоят компютър и работният цикъл	средата и първият index.html	редактор, терминал и папки; локален сървър от първия ден; инструментите на браузъра; първи запис в Git
2	HTML със смисъл	скелетът на таблото	избор на елемент според значението му; заглавия, таблици, бутони и етикети; таблото, написано на ръка
3	CSS: каскада, специфичност и кутия	четливото табло	откъде идва всеки стил и кой печели; моделът на кутията и box-sizing; променливи за цвят и типография
4	Подреждане с Flexbox и Grid	таблото, подредено на широк екран	едно измерение с Flexbox и две с Grid; двете оси, gap, flex и flex-wrap; колони с fr и repeat()
5	Страница, която става за всеки екран	таблото, което става за телефон	тагът viewport; minmax() и auto-fit преди @media; таблицата, която се превърта в кутията си; @container; от 320 до 1440 px
6	JavaScript и моделът на данните	данните на таблото и сметките му	стойности, обекти, масиви и функции; да решаваш, да повтаряш и да съобщаваш за грешка; модули; колко услуги работят и средното време за отговор
7	DOM, събитията и състоянието	таблицата, която се чертае от данните	чертане от данни; слушане на събития; разделяне на състоянието от чертането; textContent като навик и XSS, който той предотвратява
8	Извличане на данни: promise, fetch и async/await	таблото, което иска данните си от JSON файл	какво е promise (обещание); fetch в две стъпки; response.ok; async/await
9	Когато нещо се провали: времеви лимити, състояния, CORS и няколко заявки	таблото, което винаги казва какво се случва	времеви лимит; трите състояния: зареждане, грешка и празно; грешката CORS; няколко заявки с Promise.allSettled
10	Форми и валидация	добавяне и филтриране на услуги	валидацията, която браузърът вече носи; :user-invalid; как да кажеш грешката, така че екранният четец да я обяви
11	Завършеното табло	публикуваният revisor	преговор с клавиатурата; CSP като заглавна част на сървъра; тегло и производителност; публикуване на статичен сайт

В края на всеки урок има упражнения с техните решения. А дневникът е твой: записвай там това, което ти е струвало усилие.

Два критерия, които минават през целия курс

Достъпността и сигурността не са уроци, а навици. Няма завършващ модул за достъпност: има роден HTML в урок 2, клавиатура в 3, 4 и 5, textContent в 7, родна валидация в 10 и преговор в 11. Тема, оставена за накрая, е тема, която не се научава.

Учи се само това, което вече работи във всички браузъри. Онова, което още не работи, се появява в рамка „какво предстои“ и се казва да не се използва в производствена среда. Курс, който учи на току-що излязлото, остарява за шест месеца.

Как разбираш, че си приключил

Курсът не свършва, когато си прочел урок 11, а когато таблото ти изпълнява тези пет неща. Никоя програма не ги проверява вместо теб: проверяваш ги ти, с инструментите на браузъра, а разделът „Как разбирам, че съм успял“ във всеки урок ти казва как:

1. Цялото табло се обхожда с клавиатурата, без да ползваш мишката.
2. Няма нито една грешка в конзолата на браузъра.
3. Работи при ширина 320 px без хоризонтално преливане.
4. Показва трите състояния: зареждане, грешка и празно. Не само случая, в който всичко върви добре.
5. Текстът, който идва отвън, се чертае с textContent, никога с innerHTML.