De unde înveți cel mai bine HTML și CSS? Cursuri de Front End & Web Design

Azi discutăm despre baza, despre esența Front End Development-ului și a Web Design-ului: limbajele HTML și CSS. Trecem prin cele mai bune tutoriale, cursuri și resurse COMPLET GRATUITE de unde poți învăța HTML și CSS la un nivel care să te facă angajabil/ă. Ți-am stârnit interesul? Hai să nu mai pierdem vremea atunci…

În caz că vrei să treci prin conținutul de mai jos în format video, iată video-ul meu pe tema asta:

La începutul Internetului, englezul care avea să devină Sir Tim Berners Lee avea nevoie de un limbaj ușor de scris prin care să formateze informația care apoi să fie accesată și folosită de oricine din lume, și așa s-a născut HTML-ul. Ca să îi dea o formă vizuală plăcută, norvegianul Håkon Wium Lie a introdus CSS-ul lumii. HTML-ul există din 1993, respectiv CSS-ul din 1994. Au trecut peste 28 de ani de atunci. Din anumite puncte de vedere e foarte puțin – prin comparație, Fortran-ul are peste 64 de ani și C-ul are aproape 50. Din alte puncte de vedere, însă, e foarte mult – Angular-ul celor de la Google are doar 5 ani.

Vom discuta despre istorie mai pe larg în alt articol și video. Am menționat vârsta limbajelor doar ca să îți dai seama că au trecut testul timpului, s-au maturizat și astăzi sunt mult mai bune și mai robuste decât au fost vreodată. Asta-nseamnă că ASTĂZI e cea mai bună zi în care poți să te apuci să-nveți HTML și CSS din toate câte au existat până acum! Asta da motivație!

De ce ai nevoie ca să înveți Front End Development?

Astăzi, deci, vreau să îți arăt exact care sunt cele mai bune surse de informații din care să înveți HTML și CSS – și atenție: COMPLET GRATUIT (cu foarte puține excepții, spre exemplu anumite cărți). Pentru că îți garantez că nu ai nevoie de cine știe ce tutoriale de zeci de euro, cursuri de sute de euro, mentorate sau bootcamp-uri de mii de euro ca să înveți bazele front end development-ului și ulterior să-ți găsești și un job în domeniu, sau chiar să faci freelancing. Lista de resurse pe care ți-o voi recomanda în acest articol presupune doar:

• să știi engleză la un nivel cel puțin mediu (fiindcă 99% din materialele cu adevârat bune sunt în engleză),
• să ai răbdare cu tine și cu momentele în care te vei bloca (fiindcă e inevitabil), și
• să ai voință și perseverență ca să treci prin toate materialele pe care ți le voi recomanda.

Ai nevoie de mai mult ajutor (în Limba Română)?

Dacă nu reușești, mi-am propus ca în curând să mă apuc și eu de un tutorial de front end development. Varianta în limba română va fi complet gratuită, și am să o pun aici, pe YouTube, pentru absolut oricine vrea să se apuce de învățat.

Lista de materiale despre care vom vorbi a fost creată și completată constant de câțiva ani încoace, de când am participat la un proiect de formare a unor front end developeri în cadrul unui fost loc de muncă. I-am luat de la zero și pot să spun cu oarecare mândrie că oamenii pe care i-am format atunci sunt web developeri cu acte în regulă și astăzi, au devenit specialiști adevărați în domeniu, unii din ei chiar lideri de echipă.

Gata cu introducerea, hai să trecem la cum să înveți front end development pas cu pas:

0. Unelte de care ai nevoie

Nu putem începe discuția despre a învăța front end development și web design fără să avem niște unelte care să ne ajute să creăm fișiere HTML, CSS și JavaScript, plus imagini și layout-uri.

Editorul de texte (IDE-ul)

În primul rând, datorită faptului că fișierele astea HTML, CSS și JS sunt în format text, ai nevoie de un editor de text. Și Notepad funcționează, dar ideal ar fi să ai un editor dedicat muncii de front end development, și cel mai bun editor de pe piață la ora actuală este Visual Studio Code de la Microsoft (care are variante și pentru Mac și pentru Linux). VSCode, cum mai e denumit, mi se pare cel mai ușor de folosit IDE (Integrated Development Environment), și mai e și COMPLET GRATUIT! E irezistibil. Există și alternative, cum e Sublime, dar recomand să-ncepi cu VSCode fiindcă șansele sunt să nu mai ai niciodată nevoie de alt editor.

Pe lângă abilitatea de a edita fișierele local, la tine pe calculator, mai ai nevoie uneori să testezi ceva, să faci un demo pentru cineva, să analizezi cum funcționează ceva fără să faci efectiv deploy unui site. Pentru asta, te ajută pseudo IDE-urile bazate pe browser, pe care le găsești aici.

Unealta care te ajută să uploadezi fișiere pe un server (Clientul de FTP)

În momentul în care vei finaliza o variantă a unui site și vei vrea să o pui live undeva ca toată lumea să o poată vedea, vei avea nevoie de un client de FTP. Eu recomand fie FileZilla (care e un pic mai intuitiv dar ceva mai greoi ca folosire de resurse) fie CoreFTP (care e foarte light și e și open source din câte știu). Instalează-l pe oricare și dacă ai probleme, poți schimba ulterior.

Uneltele care te ajută să faci artefacte vizuale, design-uri și layout-uri

Pentru partea vizuală există două unelte gratuite care te ajută enorm: Canva e specializat pe imagini de orice fel, de la CV-uri vizuale la bannere, de la imagini de share pentru social media la elemente vizuale pentru site-ul tău. Iar Figma te ajută literalmente să desenezi interfețe de site-uri și aplicații complet gratuit, într-o interfață web similară cu Adobe XD sau Photoshop/Illustrator dacă vrei. A avea conturi pe Canva și Figma te vor salva de multe bătăi de cap vizuale. Ca alternativă la Figma, există și Sketch, dar eu prefer Figma.

Acum că avem ce ne trebuie, hai să intrăm în pâine:

1. Cum funcționează Internetul?

N-ar avea sens să înveți să pilotezi un avion real fără să știi cum funcționează aerodinamica și pe ce principiu zboară, nu-i așa? Așa și cu front end development-ul: ca să înțelegi cum să faci site-uri, ai nevoie să înțelegi ce e un site, cum funcționează Internetul pe care găsești site-uri și chiar care e motivul pentru care există site-urile și Internetul în general. Asta dacă nu vrei să-nveți „după ureche” și vrei să ai niște fundamente solide. Cine nu știe istoria unui domeniu e condamnat să repete greșelile făcute de alții în trecut.

Așadar, hai să-ncepem cu o introducere fix pentru începători de la The Odin Project. Învață cum funcționează Internetul, apoi ce este de fapt Internetul. Aprofundează funcționarea lui prin acest video, apoi urmărește povestea unui pachet de date de aici, apoi urmărește cursul ăsta gratuit de la Harvard despre protocolul HTTP de pe YouTube. În continuare, urmărește povestea asta ilustrată despre HTTPS ca să aprofundezi. Neapărat, apoi urmărește video-ul ăsta despre cum funcționează un browser. Ca să abordăm situația și într-un mod mai tehnic, parcurge și prezentarea asta schematică: partea întâi și partea a 2-a.

Nu în ultimul rând, pentru a înțelege de ce tehnologiile de bază din Front End sunt cele mai importante de învățat, pentru că pe ele se bazează tot, recomand călduros și scurta carte a lui Jeremy Keith: Resilient Web Design, care e complet gratuită și disponibilă în multiple formate.

În final, ia în calcul să parcurgi prima parte din tutorialul celor de la The Odin Project de aici.

2. Bazele arhitecturii informaționale

Meseria de librar pare super boring, nu? Ce-ați face dacă v-aș zice că o fracțiune din job-ul vostru de front end developeri izvorăște fix din preocuparea principală a librarilor: catalogarea și organizarea informației? Pornind de acolo, au apărut forme distilate și adaptate de cărți și resurse care să explice oamenilor cum se organizează informația în era digitală. Disciplina asta se numește Arhitectură Informațională, și în stadiul ăsta, tot ce trebuie să faci ca să fii un front end developer bun e să ai habar „cu ce se mănâncă”, eventual să citești măcar o carte în domeniu.

Recomand, așadar, să cumperi cartea Information Architecture de Rosenfeld și s-o ai în bibliotecă fiindcă o vei mai răsfoi pe parcursul carierei tale. Dacă o și citești, dobândești un background teoretic excelent care-ți va permite să organizezi informația în site-uri și aplicații la modul optim. Înainte s-o citești, însă, parcurge prezentarea asta ca să îți dea măcar o idee legată de ce vei găsi în carte. Eventual citește și articolul ăsta și primer-ul ăsta.

3. (opțional) Cum să tastezi mai repede?

Nu știu dacă știi asta deja, dar a lucra în domeniul ăsta necesită foarte multă obișnuință cu folosirea tastaturii. Vei ajunge natural să tastezi foarte repede și precis orice, dar cu cât dobândești skill-ul ăsta mai devreme, cu atât vei progresa mai repede și vei munci mai repede și mai eficient. Da, viteza cu care tastezi îmbunătățește productivitatea, în special dacă ai mult text de scris. Front end development-ul presupune destul de mult text scris.

Dacă te îndeletnicești cu o viteză respectabilă de tastare, e ca și cum ai tasta cu viteza gândului. Viteza asta – culmea – te face mult mai creativ fiindcă te poți exprima în scris mult mai repede. Asta te ajută și în job și în orice altceva vei face pe calculator.

Câteva video-uri care să te îndrepte în direcția bună sunt: video-ul despre postură și tips generice de la Business Insider, video-ul cu sfaturi de la Ali Abdaal și video-ul de la unui din cei mai rapizi (la tastat) oameni din lume.

Bun, și de unde-nvăț să tastez mai repede exact?

Locurile de unde poți învăța să tastezi sunt: Typing.com și TypingClub.com. Apoi, încearcă să exersezi zilnic câte 10 minute cu una din platformele de typing speed disponibile: 10 fast fingers, TypeRacer, NitroType sau MonkeyType. Scopul e să ajungi în câteva luni la peste 60-70 cuvinte pe minut. Idealul e să depășești 100 cuvinte pe minut, dar asta ia ani de zile, deci nu te descuraja dacă ești mult mai jos de atât la început.

Dacă vrei, îți poți testa tastatura să n-aibă mai mult de 2-3 taste înregistrate simultan la viteza ta de tastare pe tool-ul lui Gad Zikowski. Și mai interesant, există o unealtă de typing mai puțin comună care folosește machine learning să înțeleagă combinațiile de taste pe care le greșești în mod uzual și să ți le dea să le exersezi mai des ca să poți să îți corectezi problemele în timp. E mai frustrant, dar chiar merită încercat KeyBR-ul.

Ce pot face odată ce tastez mai repede?

Ca rezultat final, poți să te apuci de cursul despre cum poți folosi linia de comandă mai eficient, dar abia după ce treci prin toate resursele următoare. Îți dau acum link-ul către curs, totuși: Command Line Power User. Orice developer profesionist știe să folosească linia de comandă eficient, și tu ar trebui să înveți să faci asta la un moment dat.

Și acum că știi să tastezi, să trecem la bucățile esențiale de informație pe care voiam să ți le transmit:

4. În sfârșit, HTML!

Dar stai, nu te grăbi! Înainte să te apuci de practică, tot pentru context, e bine să treci prin articolul ăsta scurt despre istoria HTML-ului. Opțional, poți afla întreaga istorie a Internetului în detaliu de pe TheHistoryOfTheWeb. E nevoie să ai habar de noțiunile astea ca să înțelegi importanța subiectelor pe care ți le propun aici. Dacă nu înțelegi istoria HTML-ului, riști să fii superficial/ă și să ai lacune care te vor costa la interviu.

Acum, abia acum ești pregătit cu adevărat să-nveți HTML și CSS la capacitate maximă. Secretul este să repeți cât mai mult. Să faci, deci, cât mai multe tutoriale (preferabil pe toate, ca să vezi mai multe abordări și puncte de vedere).

Tutoriale de HTML

Dacă tot i-am dat exemplu mai sus, cei de la The Odin Project au făcut o treabă destul de bună, așa că poți să te reapuci de tutorialul lor de front end reluându-l de unde l-ai lăsat inițial și oprindu-te înainte de JavaScript. Apoi, Mozilla a făcut o treabă excelentă creând un curs de Front End destul de bine închegat. Dacă n-ai înțeles foarte bine ce s-a întâmplat cu materialele anterioare, recomand să parcurgi cursul lor basic, de la zero. Dacă te-ai prins care e treaba cu Internetul și cum funcționează, începe mai degrabă direct de aici: cursul lor de Front End Web Development.

Recomand să te oprești înainte de JavaScript momentan – ba chiar să faci întâi doar partea de HTML fără să intri încă în CSS, fiindcă avem un capitol întreg despre CSS de care vorbim imediat. La fel și cu acest curs de la FreeCodeCamp, parcurge doar partea de HTML/HTML5. Idem și în privința cursului lui Shay Howe, a cursului de pe Pluralsight, a cursului de la Universitatea din Washington, a cursului de HTML și CSS de la CS50 și a cursului de la Khan Academy. Recomand să parcurgi doar partea de HTML pentru că în felul ăsta vei aprofunda maxim zona practică în HTML și vei reține mai bine / mai multe pe termen mai lung. Și nu-ți face griji, facem și CSS-ul din aceleași cursuri imediat.

Cărți și referințe de HTML

Apoi, există o carte foarte pragmatică în care se explică principiile HTML5-ului și cum diferă el față de versiunile anterioare. Dacă tot ai făcut niște practică deja, sugerez s-o parcurgi acum. Și dacă tot suntem la capitolul principii, cartea HTML5 for Web Designers (recomandată și în video-ul meu despre cărți de front end) îți va completa frumos cunoștințele despre HTML.

Nu în ultimul rând, ca să ai o referință completă a elementelor HTML disponibile pentru tine, îți recomand să folosești exclusiv MDN-ul (Mozilla Developer Network) celor de la Firefox pentru că e cea mai bine documentată și updatată resursă în domeniu (altele, cum este W3Schools, au fost o perioadă lungă de timp greșite și prost documentate – acum poate sunt mai OK, dar tot nu le recomand).

Neapărat, după ce scrii orice fel de HTML pe care îl consideri „varianta finală”, validează-l cu unealta oficială de validare de HTML și repară toate greșelile întâlnite. Exercițiul ăsta te va învăța, probabil, mai multe despre semantică și formatare decât ai putea învăța din orice tutorial.

5. Acum, niște CSS

Motivul pentru care CSS-ul se predă simultan cu HTML-ul este pentru că HTML-ul singur structurează informația dar n-o face plăcută vederii și ușor de folosit. CSS-ul e singura variantă prin care poți face un site sau o aplicație să arate bine, și acum e momentul să parcurgi din nou toate tutorialele de mai devreme, dar partea lor de CSS. Apoi, urmărește video-ul ăsta care explică felul cum randează browser-ul pagina folosind informațiile din CSS, și video-ul ăsta despre ce poți face ca randarea să fie mai rapidă.

Tutoriale de CSS

CSS-ul e ceva mai subtil și mai greu de stăpânit decât HTML-ul, fiindcă e ceva mai complex. Din cauza asta, ar fi ideal să parcurgi și câteva resurse adiționale care să te ajute să îl înțelegi la adevărata sa capacitate și valoare. Începe cu un curs de la Universitatea Washington, apoi un curs de la creatorul CSS-ului însuși și continuă cu ghidurile de CSS de la HTMLdog: cel pentru începători, apoi cel pentru intermediari și apoi cel pentru avansați. Continuă făcând cursul lui Kevin Powell, supranumit „the king of CSS” pe YouTube.

Apoi aprofundează una din cele mai dificile aspecte ale CSS-ului: zona de layout, trecând prin tutorialul LearnLayout, citind articolul ăsta despre grid vs flexbox, apoi ghidul complet de HTML Grid de pe CSS Tricks. Finalizează studiul grid-urilor cu acest curs gratuit de la Wes Bos și studiul Flexbox-ului cu acest curs gratuit, tot de la Wes Bos. Învață și ce să faci pe browsere mai vechi care n-au suport de CSS Grid. Și zi mersi că nu trăiești în era Netscape Navigator sau Internet Exploder 6.

Unelte pentru CSS

Ca să știi CSS bine trebuie să înveți să calculezi specificitatea selectorilor. Articolul ăsta te poate ajuta să-ți explice conceptul mai bine, și calculatorul ăsta îți arată numeric exact care e specificitatea oricărui selector. În plus, e bine să știi și despre funcțiile CSS din resursa asta excelentă. O altă unealtă bună e generatorul vizual de gradienți CSS.

CSS Zen Garden a fost, istoric vorbind, un site foarte important pentru că demonstra oamenilor care lucrau pe web de ce HTML-ul și CSS-ul trebuiesc separate și câte lucruri mișto poți face dacă le separi. Da, la început, nu era tot timpul așa – și în ziua de azi există recidive care implică stiluri CSS în JavaScript și alte lucruri pe care eu personal le consider aberații.

Interaction design, animații și efecte folosind CSS

Când vine vorba de CSS și interaction design, trebuie să înveți cum să creezi animații spectaculoase și eficiente din punct de vedere al folosirii resurselor disponibile. Începe cu a înțelege cum funcționează tranzițiile, cum funcționează transformările 3D, și articolul ăsta despre animații + articolul ăsta despre optimizarea lor. O galerie impresionantă de efecte și animații poți găsi pe Codrops, pe CodePen, pe GitHub, pe h5bp și pe Magic Animations.

Cărți și referințe de CSS

CSS Tricks e un site excelent unde găsești informații pe o groază de tematici legate de CSS. Există și un blog care tratează probleme de CSS la care recomand să te uiți dacă ești curios/curioasă: Modern CSS Solutions for old CSS problems. Ca și în secțiunea despre HTML, există nu una, ci două cărți foarte utile pe care ar trebui să le ai în bibliotecă dacă vrei să îți rotunjești cunoștințele de CSS: CSS3 for Web Designers de Dan Cederholm și The New CSS Layout de Rachel Andrew.

Există două referințe web de CSS în care am încredere. MDN-ul e resursa clasică, tehnică, corectă, însă și băieții de la CSS Tricks au făcut o treabă foarte bună cu Almanahul lor de CSS.

La fel ca HTML-ul, și CSS-ul poate fi validat, și-ți recomand să folosești validatorul oficial pentru asta, ca să înveți cum e bine și cum nu e bine să scrii CSS.

6. Standarde și validare

Am atins foarte puțin ideea de validare a codului mai devreme, însă acum vom aprofunda puțin conceptele de standarde web și validitate. Standardele sunt importante, chiar dacă o pagină sau un site „merge” și fără ele. Standardele aduc extensibilitate, ușurință la debugging și eliminarea naturală a bug-urilor din cod. E unul din cele mai importante concepte de înțeles în stadiul ăsta al învățării.

Așadar, parcurge materialele (ușor învechite, dar memorabile) promovate de WebStandards.org, citește mini-cursul de standarde și acccesibilitate de la Washington University, citește cartea lui Jeffrey Zeldman: Designing with Web Standards (dacă o găsești), citește abordarea asta mai modernă asupra standardelor web, vezi cum se face quality control pe cod și ar trebui să ai o imagine destul de clară.

Nu uita și de validatoarele de HTML și CSS de care am menționat mai devreme. Pe lângă validatoarele astea, există multe alte resurse utile pentru a-ți testa site-ul odată ce l-ai făcut, însă plănuiesc să scriu și un articol și să fac și un video dedicat auditării site-urilor în curând, deci discutăm despre asta puțin mai târziu.

7. Semantică și SEO

Dacă vrei ca Google sau orice alt „robot” (inclusiv uneltele folosite de persoanele cu dizabilități) să aibă o șansă mai bună de a-ți înțelege sensul exact al conținutului pe care l-ai creat și l-ai structurat în site-ul făcut de tine, ai nevoie să înțelegi principii de semantică. O parte din tutorialele făcute până acum au atins deja subiectul ăsta, însă vreau să-l explorăm mai atent.

Dacă te-apuci să gătești, gustul e absolut esențial pentru ca omul care mănâncă din mâncarea ta să aprecieze mâncarea respectivă. E printre cele mai de impact unelte pe care le ai la dispoziție. Sigur, dacă vrei să hrănești pe cineva și atât, nutrienții respectivi pot fi „livrați” și sub formă de pastă incoloră, inodoră și insipidă. În felul ăsta, mâncarea ta, deși hrănitoare și bună pentru organism, nu trezește niciun fel de plăcere și amintiri frumoase în mintea gurmandului.

Așa și cu site-urile: poți livra informația folosind exclusiv div-uri peste tot, și chiar dacă arată corect și frumos, crawlerele care consumă informația or să înțeleagă cu greu despre ce e vorba exact. Semantica e gustul web development-ului, pentru motoarele de căutare și pentru accesibilitate.

Tutoriale și articole despre semantică și SEO

Sunt mulți oameni care vorbesc despre semantică, și ar trebui să-i citești pe toți: HTML5Doctor, Jeremy Keith, Cambridge Semantics, Paul Boag și Bruce Lawson. Fiecare are perspective unice și foarte utile de parcurs și procesat interior. Până la urmă tu decizi cum procedezi pentru fiecare proiect în parte.

E musai să înțelegi faptul că în căutările pe Google, o parte substanțială de SEO (Search Engine Optimization, adică abilitatea unui site de a fi cât mai aproape de prima poziție pe o căutare anume) este semantică. Pentru puțin context, citește articolul ăsta de pe Ahrefs (care, apropo, e o resursă genială dacă vrei să aprofundezi partea de SEO pe blogul lor), apoi parcurge cu atenție introducerea în datele structurate de la Google, vezi galeria de date structurate și rezultatele generate în SERP (Search Engine Results Page) și învață mai multe despre SEO aici și aici.

Și ca să finalizăm zona asta, una din referințele de bază pentru date structurate și semantică este Schema.org. Ideal ar fi ca fiecare site pe care-l construiești să aibă maximul de date structurate din inventarul de pe Schema.org pentru a ajuta motoarele de căutare să înțeleagă și să catalogheze mai bine conținutul respectiv.

8. Accesibilitate

Știai că un miliard de oameni au dizabilități? Da, 15% din populația globului suferă într-un fel sau altul de vreo formă de dizabilitate. Iar accesibilitatea este disciplina care s-a dezvoltat să-i ajute pe oamenii ăștia să poată folosi Internetul așa cum a visat Tim Berners Lee: liber, fără bariere, chiar dacă însăși condiția oamenilor ăstora este una care e plină de tot felul de bariere.

Ca să faci un site accesibil pentru persoanele cu dizabilități e nevoie de ceva muncă în plus, dar partea excelentă e că această muncă ajută și în SEO și în rezolvarea unor probleme de validitate și standarde web. Așa că ai tot interesul să te documentezi pe tema asta și să înveți exact ce e de făcut.

Documentație și cursuri pe teme de Accesibilitate Web

Documentația legată de accesibilitate e destul de stufoasă, de la cea disponibilă pe Web Standards Project la cea disponibilă pe site-ul World Wide Web Consortium (inclusiv standardele noi din 2018), de la informațiile despre ARIA de pe WebAIM până la cele disponibile pe MDN. Există și variante mai bune, cum ar fi cursul de 13 zile despre accesibilitate de la Sparkbox.

Dar eu te sfătuiesc să parcurgi cursul lui Derek Featherstone de accesibilitate pentru web designeri care mi se pare cel mai bine închegat dintre toate. Îl poți parcurge cu o lună de trial gratuit fără probleme, și chiar prețul de 89 de lei e super mic față de ce valoare livrează. Eu am cont premium pe LinkedIn și am acces la tutorialul ăsta gratuit. Dacă vrei mai multe informații despre LinkedIn și cum te poate ajuta să obții un job mai repede, citește articolul sau uită-te la seria de video-uri aici.

Cele mai frecvente probleme de accesibilitate

Formularele sunt cele mai frecvente zone în care se încalcă regulile de accesibilitate, și în întâmpinarea acestei probleme vin sfaturile de aici (pe 3 niveluri de complexitate) și informațiile mai recente de la Google de aici – plus un proiect practic pe care poți învăța să faci formulare accesibile.

Există multe checklist-uri care te ajută să treci prin toate specificațiile tehnice de accesibilitate și să validezi faptul că ești OK și le respecți: la W3C, la A11yProject sau la IBM. Unii își fac chiar framework-urile în așa fel încât să facă mai puține greșeli de accesibilitate. Alții învață să-și optimizeze setup-ul tastelor așa încât toate funcționalitățile site-ului să fie accesibile prin tastatură.

Cel mai simplu, însă, mi se pare să înveți despre accesibilitate rezolvând chiar problemele proiectul tău. Există o serie întreagă de unelte care te ajută în sensul ăsta, dar cel mai frecvent am folosit eu personal tool-ul WAVE de la WebAIM care arată vizual exact unde sunt problemele de accesibilitate pe orice site vrei să testezi. Folosește-l ca un validator de HTML sau CSS și validează-ți site-ul înainte să fie livrat sau publicat, pagină cu pagină. În plus, cartea Accessibility for Everyone de Laura Kalbag adaugă un strat narativ și motivațional întregii povești despre accesibilitate.

9. Usability și UX (User eXperience)

Te-ai preocupat până acum de tot felul de lucruri, dar încă n-am ajuns la partea vizuală. Și nici n-o să trecem direct la ea până nu clarificăm faptul că design-ul web și de interfață trebuie în primul rând să fie funcțional, să rezolve o problemă. Un site sau o aplicație web facilitează accesul userului la o funcționalitate sau o bucată de informație, și cel mai important aspect al design-ului acelui site, oricare ar fi el, e să transforme experiența acelui utilizator într-una foarte facilă, rapidă și fără blocaje de orice fel.

Jakob Nielsen și Don Norman sunt fondatorii Nielsen Norman Group și printre cei mai redutabili oameni de UX din lume la ora actuală. Ambii au scris mult pe tema asta și nu sunt singurii. Voi menționa aici câteva articole și materiale care mie mi se par absolut esențiale pentru oricine vrea să înțeleagă UX-ul și vrea să devină un front end developer și web designer bun: introducerea în Usability, cele 10 metode euristice (universal valabile) de a rezolva probleme de design de interfață, un checklist de uzabilitate, un alt checklist de uzabilitate care e ceva mai larg și intră și-n zona de business, principiile de design guvernamental ale celor din Marea Britanie, principiile de UX pe care unii le numesc chiar „legi” și lista absolut excelentă (complet vizuală) de principii de UX făcută de Krisztina Szerovay.

Cărți, cursuri și referințe de UX

La capitolul cărți de UX, recomand călduros cartea digitală How to make sense of any mess de Abby Covert, The design of everyday things de Don Norman și Don’t make me think de Steve Krug. Toate trei sunt foarte puternice și ușor de citit, și-ți vor da o grămadă de informații esențiale pentru viitoarea ta carieră.

Există și niște cursuri destul de interesante în domeniul UX-ului, spre exemplu: fundamentele UX-ului de pe Gymnasium, unul gratuit oferit chiar de Google prin Coursera, altul de la Georgia Tech tot pe Coursera, unul de pe LinkedIn, și chiar unul foarte scurt de pe DesignForGeeks. Cel mai tare însă mi s-a părut cel de la Figma care e și gratuit și foarte bun în a le învăța platforma. Și e și mai… vizual. Și dacă te-a prins Figma, parcurge și tutorialul ăsta de pe FreeCodeCamp pentru Figma.

10. Mobile-First Responsive Web Design

Totul a pornit de la articolul ăsta scris de Ethan Marcotte pe A List Apart (unul din cele mai de calitate site-uri cu informații pentru profesioniștii în domeniul web development-ului). De fapt nu doar de-acolo: totul a pornit de când s-a lansat iPhone-ul, care avea un browser real „la purtător”. Brusc, site-urile nu mai aveau rezoluții fixe pe care trebuiau să fie afișate ca să arate bine, ci trebuiau să arate bine pe orice dispozitiv, pe orice rezoluție. A început democratizarea accesului la internet raportat la device-uri. Înainte, smartphone-urile aveau browsere WAP care nu randau aproape deloc CSS și făceau o pagină uzuală aproape inutilizabilă (funcționau practic doar link-urile, nimic altceva în termeni de funcționalitate, efecte sau structură vizuală). Iar iPhone-ul a schimbat asta pe 29 iunie 2007.

De atunci încoace, a existat o revoluție continuă și un proces de învățare despre cum se face un design responsive bun. Și idealul este să începi să înveți cum să faci un site mobile-first și responsive. Există mai multe informații la-ndemână despre cum să faci asta, dar recomand să începi cu cartea lui Luke Wroblewski: Mobile First, apoi tutorialul excelent al lui Kevin Powell de pe YouTube, cursul celor de la Google de pe Udacity și dacă simți în continuare nevoia, cursul complet (și pe bani) de Responsive Web Design de pe Scrimba (tot al lui Kevin Powell). Apoi parcurge tutorialele menționate aici, apoi tutorialul ăsta de pe Gymnasium, citește articolele lui Jeffrey Zeldman, Patrick Grady, Brad Frost, Pete LePage și Rachel Andrew, Jeremy Girard, Thierry Koblentz și Brad Frost (din nou).

Cărți și referințe legate de mobile-first responsive web design

Ca materiale ajutătoare, recomand o altă carte de-a lui Luke Wroblewski: Mobile & Multi-Device Design și prezentările lui video / PDF plus cursul de responsive și accessible websites de la Gymnasium. Apoi, aprofundează citind despre scalarea interfețelor de la Nielsen Norman Group, urmărește publicația ResponsiveDesign.IS și în general exersează mult până îți intră în sânge să începi mobile-first și să adaptezi interfețele tale fluide la orice rezoluție ar fi randate, de la 200px la 3840px lățime. Din nou, ca un bonus de knowledge, recomand cărțile Responsive Web Design de Ethan Marcotte și Smashing Book #5 – Real-life Responsive Web Design de la Smashing Books.

Încă ceva: citește neapărat și despre Responsive Images pe MDN și învață să le aplici corect în layout-urile tale pentru a optimiza cât poți de mult site-urile pe care le faci la nivel de performanță.

11. De ce ai nevoie de SCSS?

SCSS-ul sau SASS-ul sunt tehnologii complementare CSS-ului care practic îi dau niște super-puteri. Cea mai relevantă din punctul meu de vedere este super-puterea să scrii toate media queries în interiorul elementului pe care-l descrii în CSS, în felul ăsta încapsulând absolut tot ce se întâmplă cu acel element în toate circumstanțele posibile.

Dacă vei combina principiul ăsta și cu ideea de mobile-first responsive web design și vei folosi drept CSS de bază stilurile pentru rezoluția minimă suportată și apoi vei scrie progresiv media queries cu min-width-uri din ce în ce mai mari pe măsură ce crește rezoluția și cresc capabilitățile browser-ului, vei putea respecta și cascada de CSS naturală în procesul ăsta și vei scrie poate cel mai elegant CSS posibil, folosind standardul SASS/SCSS. Preprocesorul de CSS știe să facă mult mai multe decât atât, dar asta e funcția fără de care mie-mi vine foarte greu să scriu CSS în ziua de azi.

Dacă te-am băgat puțin în ceață, nu-i nimic. Întâi documentează-te și revino asupra frazei de mai sus ca să înțelegi exact ce vreau să zic. Garantez că merită! 🙂

Cărți, referințe și bune practici în folosirea SASS/SCSS

Așadar, de unde înveți SASS? Din resursele următoare: o postare de la Torque care pretinde că te învață SASS în 20min, tutorialul de SASS de la Scotch, articolul lui David Demaree din A List Apart, articolul despre SASS de pe WebDesignerDepot, dar cel mai bine ar fi să-ncepi de la sursă: site-ul limbajului și documentația oficială.

În plus, sugerez să te uiți și pe regulile astea (făcute de mine pentru compania la care lucram împreună cu alți aproape 30 de front end developeri și pentru care am făcut standardele de față) care îți vor ușura viața dacă te decizi să folosești SASS/SCSS în proiectul tău. Și un alt punct de vedere legat de felul cum ar trebui să scrii SASS aici.

12. De la design la HTML: idei de proiecte

Acum că stăpânești majoritatea lucurilor de bază, te poți apuca de construirea unui portofoliu (dacă n-ai făcut-o deja prin intermediul tutorialelor pe care le-ai parcurs până acum). Trebuie să fii atent/ă la faptul că un portofoliu adevărat e compus din proiecte cu un grad de complexitate ceva mai mare decât vor fi cele cu care te-ai jucat până acum, și chiar de acum încolo. Și în caz ideal, implică și un strop de originalitate în găsirea ideilor și în execuția lor (fie vizuală, dacă vrei să mergi pe latura asta, fie funcțională, dacă vrei mai degrabă să progresezi în zona de programare).

Așadar, încearcă să parcurgi și să faci cât mai multe din proiectele următoare, alegând eventual proiectele pe placul tău sau chiar deviind puțin de la script-ul original și construind lucruri fie mai complexe fie diferite față de ce e prezentat inițial. Poți alege din o listă de 40+ proiecte pe care le poți construi cu HTML, CSS și JavaScript și atât, sau poți alege să faci câteva proiecte din setul de pe Frontend Mentor, poți alege una din cele peste 3500 de idei de startup din lista de aici sau cele 21 de direcții prezentate aici (sau, de ce nu, poți să-ți imaginezi că ești tu antreprenor și-ți construiești o idee de afacere pentru tine) sau poți să alegi câteva din cele 16 proiecte (cu design-uri) din lista asta.

Idei alternative pentru proiecte personale

Pe lângă varianta originală în care-ți dezvolți propriul business, o altă idee ar fi să te gândești la un site folosit de tine (și de mulți alții) recent care nu ți-a plăcut deloc și pe care întâi îl poți re-design-ui în Figma și apoi îl poți construi funcțional (chiar dacă doar static) în HTML și CSS. Ar fi o adiție foarte valoroasă la portofoliul tău, și ajută mult să fie un site foarte cunoscut și/sau foarte prost (din orice punct de vedere: design, funcționalitate, usability, etc).

Dacă te ajută, poți participa și la bootcamp-uri gratis de coding, cum e cel al Aniei Kubów sau cel de pe FrontEnd Masters, cel al lui DesignCourse sau cel al lui Florin Pop. Dar ia abordările oamenilor ăstora ca niște variante, nu ca adevărul absolut. În curând, o să fac și eu un tutorial similar și chiar un curs complet de front end în care să mai prezint o viziune alternativă, în română, complet gratuit. Sper să-ți fie de folos.

13. GIT și Workflow-uri

Am ajuns în punctul în care nu mai discutăm doar despre cum faci lucrurile de bază, ci și despre de ce le faci, sau ce procese folosești, ce workflow-uri sunt optime pentru genul tău de proiect și așa mai departe. Orice proiect de front end ai face, vei avea nevoie să înveți puțin despre GIT, care e un sistem de source control care-ți permite să salvezi munca ta progresiv, pe măsură ce o faci, într-un server care acționează ca un backup și care stochează simultan toate variantele de proiect la care lucrează toți colegii tăi, cu posibilitatea să poată uni munca voastră într-un singur branch care se poate pune pe un server.

O variantă foarte populară de server de GIT care e și gratuit pentru oricine este GitHub, pe care-ți recomand călduros să-ți faci un cont. Folosind GitHub poți deploya proiectele tale live (fie folosind GitHub Pages fie Netlify) – sau, dacă vrei să folosești un hosting tradițional (pentru un site în WordPress spre exemplu), poți opta pentru unul ca SiteGround pe care-l recomand – dar despre procesul de cumpărare de domeniu și cel de deploy voi vorbi într-un articol și video separat.

Tutoriale, cărți și resurse care te-nvață GIT

Poți învăța cum să folosești GIT urmărind video-urile următoare: cel de la Codeholic sau cel de la Mosh. O alternativă este și articolul de pe FreeCodeCamp, iar alta este tutorialul de GIT de la Gymnasium. Dacă preferi să-nveți dintr-o carte, recomand GIT for humans de David Demaree.

După ce cunoști bazele GIT-ului și te descurci – fie în linie de comandă, fie folosind un tool adițional cum e SourceTree sau GitHub Desktop – ar trebui să te apuci de studiat un workflow standard pe GIT, mai exact GitHub Flow (care e cel mai popular). Asta te va ajuta în momentul în care vei lucra într-o echipă (care va folosi standarde similare sau ușor diferite, dar îți va fi mai ușor să te adaptezi dacă știi deja despre ce e vorba). Ai aici și o variantă animată și interactivă de GitHub Flow pe care o poți controla singur/ă ca să înțelegi exact cum decurg pașii unui proiect realistic. Și dacă-ți place abordarea, există și un joc foarte tare în care poți învăța despre GIT Branching.

14. Progressive Enhancement + Performance

Munca unui Front End Developer nu se oprește la a face ceva să arate bine, să funcționeze corect și să fie valid. Ar trebui să-ți pese foarte mult și despre cât de repede se-ncarcă site-ul sau aplicația ta, cât de rapid se mișcă în orice browser și cât de bine distribui resursele în așa fel încât să nu aglomerezi device-uri foarte slabe cu toate librăriile și resursele tale, și cu toate astea aplicația sau site-ul să fie în continuare funcționale.

Ca să înțelegi ce e nevoie să faci exact ca să-ți optimizezi site-ul, recomand să-ncepi cu cartea gratuită (în format digital) a Larei Callender Hogan: Designing for performance. Cartea acoperă majoritatea ariilor esențiale pe care trebuie să le ai în vedere. Pentru a te asigura că aplicația ta se folosește eficient de progressive enhancement, recomand și cartea gratuită Adaptive Web Design de Aaron Gustafson.

Unelte de testare și îmbunătățire a performanței site-urilor

Progressive enhancement-ul ține uneori și de ce variantă de browser vrei să targetezi (și dacă e nevoie să asiguri o funcționalitate într-un fel mai bun pe browsere mai puternice). Orice ai vrea să faci și orice facilitate a browserului vrei să folosești, poți testa cât de bine e suportată în toate browserele folosind CanIUse.

Ca să-ți testezi munca, folosește cu încredere uneltele: Google PageSpeed Insights sau chiar Lighthouse direct din Chrome, WebPageTest și YellowLab Tools. Voi vorbi despre (și voi folosi) mult mai multe unelte similare care dau puncte de vedere diferite în curând, când plănuiesc să scriu un articol și să fac un video despre felul cum auditez eu site-urile de obicei.

15. Unde să îți continui educația?

Dacă ai ajuns până aici, ești un erou sau o eroină! 🙂 Felicitări!

Dar n-ai terminat. Front End Development-ul e „easy to learn, difficult to master”, așa că va trebui să-ți continui antrenamentul și să înveți și alte lucruri. O parte din ele vor fi acoperite într-un articol și video viitor, dar dacă deja ești curios sau curioasă, poți să consulți roadmap-urile de învățare pe care le-au construit și prezentat diverși oameni după viziunea proprie: WebDevSimplified vede astfel partea de front end (și partea de back end, dacă sunteți curioși), cei de la LearnCode.academy văd așa lucrurile, Brad Traversy consideră că asta e varianta optimă, cei de la Front End Masters prezintă schița următoare ca fiind ideală și creatorii Roadmap.sh au făcut câte un roadmap pentru mai multe specializări, printre care Frontend, Backend, DevOps, React, etc.

Ce urmează după ce parcurgi materialele de mai sus?

Așadar, după cum ziceam, pe lângă tutorialele și resursele deja menționate, ca să fii un front end developer bun ai nevoie să înveți și partea de JavaScript. Și fix despre asta voi face următorul articol, așa că abonează-te la noutăți înscriindu-te în formularul din dreapta!

Plănuiesc să fac și un live pe YouTube (probabil recurent) în care vă voi evalua portofoliile și munca, în orice stadiu ați fi cu progresul în carieră și în orice domeniu digital, inclusiv front end, back end, design, marketing și așa mai departe. Dacă vrei să-mi trimiți portofoliul tău, aștept unul sau mai multe link-uri pe salut@viorelmocanu.ro plus câteva cuvinte în care să-mi explici unde te afli momentan în carieră și pentru ce job ai vrea să aplici la un moment dat, ca să știu cum îți evaluez proiectele.