Lecția 1, Checklist-ul de polish

• Favicon personalizat (fără cel implicit).

• og:image personalizat pentru partajarea pe social.

• Stare de loading pentru pagină (fără flash alb).

• Pagina 404 și ea designată.

• Culoare de selecție personalizată (::selection).

• Scrollbar stilizat (subtil, în culoarea brandului).

• Efect de cursor DOAR dacă adaugă personalitate, niciodată implicit.

• Scroll fluid între secțiuni.

• Respectă reduced motion.

• Text alt pentru fiecare imagine.

• Toate butoanele au stări :hover, :focus-visible, :active.

• Câmpurile de formular au inele de :focus (accesibilitate).

• Link de skip-to-content sus, pentru utilizatorii de tastatură.

• Formular de contact funcțional (testează-l).

• Viteză, Lighthouse 90+ pe desktop, 80+ pe mobil.

• Testat pe iPhone, Android, Mac, Windows, în 5 browsere.

• Tot textul verificat ortografic, în 2 tool-uri diferite.

• Toate link-urile funcționează.

• Footer-ul are, sitemap, contact, social, copyright, an.

• Politică de confidențialitate și termeni (șablon gratuit, link în footer).

Lecția 2, Micro-detalii care se citesc ca „scump”

• Numere aliniate tabular (font-feature-settings 'tnum'). Pare gândit.

• Ghilimele inteligente („rotunjite”) în loc de ghilimele drepte ('drepte').

• Liniuțe em (, ) unde e potrivit, dar în stilul acestui curs folosește virgule în schimb.

• Text eyebrow cu majuscule și letter-spacing.

• Umbre care se potrivesc brandului (fără #00000033, folosește HSL cu alpha corect).

• Colțuri rotunjite la imagini de 8 sau 12 px, niciodată 4 (pare demodat).

• Folosește :nth-child pentru a alterna nuanțe subtile de fundal în tabele.

• Sublinieri care nu ating tocmai coada literelor (text-underline-offset 4px).

Lecția 3, Polish pentru imagini

• Toate imaginile comprimate (AVIF preferat, WebP ca fallback).

• Toate imaginile au atribute width și height (previne CLS).

• Imaginea hero preîncărcată.

• Imaginile de sub fold cu loading='lazy'.

• Vignetă subtilă sau overlay cu gradient pe imaginile hero, face textul lizibil.

• Dacă folosești stock, nu folosi niciodată pozele evidente. Plătește 50 EUR pentru un Unsplash+ mai puțin folosit sau fotografiază singur.

Lecția 4, Polish pentru detaliile tipografice

• Hyphens auto pentru text justificat sau lat.

• Control al „văduvelor” la fonturile de display (folosește balance API sau break-after în CSS).

• Elimină cuvintele „orfane” de pe titluri (text-wrap: balance).

• Numere aliniate tabular în contexte financiare.

• Cursive care chiar arată cursiv, nu roman-înclinat.

Lecția 5, Trecerea finală din ziua lansării

• Parcurge site-ul așa cum ar face-o un cumpărător, pe telefon, în pat, somnoros.

• Printează fiecare pagină în PDF, privește-o într-un context diferit.

• Rulează Lighthouse încă o dată.

• Deschide în incognito, browser curat, fără cache.

• Trimite URL-ul de staging la 3 prieteni, întreabă „ce arată ciudat?”.

• Repară ce au observat.

• Apoi lansează.

Mai jos e o listă cu paginile și componentele de pe site-ul meu. Generează un checklist de QA pentru polish adaptat acestui site, care să acopere, favicon, og:image, 404, stare de loading, stil de selecție, scrollbar, stări hover/focus/active, reduced motion, compresie de imagini, text alt, link-uri stricate, corectură a textului, completitudinea footer-ului, Lighthouse, cross-browser. Pentru fiecare, dă-mi, 1) verificarea specifică, 2) cum o testez (1 rând), 3) prioritatea (mare/medie/mică). Dă-mi rezultatul ca un checklist markdown prietenos cu Notion. Pagini, <lipește lista>.