Lista de materiale de mai jos a fost inspirată din cursul meu de Web Development ținut în cadrul companiei EveryMatrix prin 2005, prin care, împreună cu câțiva colegi cu experiență, am format 5 oameni să devină Front End Developers mulați exact pe niște job openings entry level pe care le aveam disponibile la vremea aia. De atunci încoace, am extins și împrospătat lista cu alte materiale gratuite despre development, design și marketing, și plănuiesc să adaug aici resurse utile încontinuu, așa că dacă vrei să fii la curent, pune pagina la Bookmarks și înscrie-te la newsletter, unde o să anunț modificările făcute listei de resurse de IT de aici. Materialele către care dau link sunt doar curatoriate de mine, nu sunt autorul lor decât daă se menționează brand-ul EveryMatrix sau numele meu pe undeva.

Cursul de mai jos e structurat pe pași logici care, în mod intensiv (8 ore pe zi, 5 zile pe săptămână) e structurat în module care țin o săptămână, și care abordează fiecare câte un aspect important din activitatea în domeniul digital, nu doar de front end developer, ci și de designer, specialist SEO și așa mai departe. Asta nu înseamnă că și tu ar trebui să-l parcurgi în același ritm – găsește-ți propria viteză cu care să parcurgi materialele astea, mai ales dacă ai deja un job și nu ai foarte mult timp liber. Sfatul meu însă e să-ți setezi un deadline când ai vrea să finalizezi documentarea, ca să te motivezi să faci asta măcar 20 minute pe zi, în fiecare zi. Perseverența și ideea să nu „rupi lanțul” zilelor în care te-ai documentat și ai făcut tutoriale e importantă, așa cum o să vezi pe parcurs.

Încă un aspect important: toate materialele de mai jos sunt în engleză. Ai nevoie de un nivel mediu pentru a înțelege și a te familiariza cu termenii necesari parcurgerii cursurilor, așa că dacă încă nu te descurci cu engleza, îți recomand aplicații ca Duolingo, prin care poți face primii pași în a învăța engleza pe telefon. Și așa cum am zis și pe blog, engleza și răbdarea sunt cele mai importante lucruri pe care trebuie să le stăpânești ca să începi o carieră în industria IT în general sau Web în particular.

Mult succes, și mă poți contacta dacă ai întrebări, probleme, nelămuriri sau dificultăți în a parcurge cursurile, sau dacă nu mai merge vreun link.

Capitolul #1: Introducere în Web și în limbajul HTML

(săptămâna 1)

Introducere în Front End Development

Cum funcționează Internetul: HTTP, pachete, browsere, unelte de dezvoltare, etc.

Ce este o pagină web? Cum funcționează browser-ul? Cum pot să văd informații despre orice pagină de pe Internet?

Bazele arhitecturii informaționale (Information Architecture)

Vei avea nevoie să înțelegi lucrurile esențiale dintr-un domeniu care există de când există cărți, de pe vremea lui Gutenberg, deci cu mult înainte să se fi inventat calculatoarele sau Internetul, dar care servește ca bază pentru felul cum scriem astăzi HTML și cum navigăm și căutăm online. E un domeniu complex, înrădăcinat în meseria vechilor librari care aveau nevoie să găsească modalități deștepte de a descrie și organiza informație și cărți. Nu te speria, nu trebuie să devii expert în așa ceva, doar trebuie să răsfoiești câteva capitole pentru a înțelege ce presupune să descrii, organizezi, aranjezi și facilitezi accesul la informație în general.

Introducere în HTML

O scurtă istorie a HTML-ului

Faptul că știi cum a apărut și evoluat HTML-ul îți va demonstra cât de mult s-a evoluat de la începuturi și până astăzi, păstrând totuși principiile de bază intacte.

HTML pas cu pas

Există câteva tutoriale online foarte bune pentru a învăța bazele HTML-ului (obligatoriu, măcar 1-2 tutoriale de mai jos – doar partea de HTML):

Majoritatea tutorialelor gratuite de mai sus au și o componentă de CSS. Poți să încerci să o faci acum, ca să-ți fie mai ușor în următoarea săptămână, dar pentru moment recomand călduros să te concentrezi pe partea de HTML. Asta îți va permite să termini tutorialele la timp și să înțelegi bazele HTML-ului săptămâna asta. Vei avea nevoie de ele! Vei mai avea nevoie și de:

Referința completă pentru limbajul HTML

  • Mozilla Developer Network: HTML reference (obligatoriu – nu s-o citiți pe toată, dar să vă uitați pe cum e structurată, să vedeți câte tipuri de tag-uri există și să o păstrați la îndemână în Bookmarks). Site-ul ăsta e extrem de valoros pentru oricine vrea să învețe bazele web development-ului! Evitați cu orice preț resurse ca W3Schools sau alte porcării similare, care au uneori informații eronate!

Capitolul #2: CSS și efecte speciale

(săptămâna 2)

Introducere în CSS

Tutoriale de HTML și CSS

Sunt exact aceleași din Capitolul #1 (obligatoriu, cel puțin 2, atât HTML cât și CSS).

Tutoriale de CSS și Layout

Articole, unelte și informații legate de CSS

Referința completă de CSS (și HTML, și Accesibilitate, și așa mai departe)

Un exemplu de standard de (S)CSS

  • Un document făcut pentru EveryMatrix și gândit să definească felul cum scriem în mod standard toate CSS-urile noastre: SASS Standards (obligatoriu). Dacă v-am luat prea repede cu SASS / SCSS, nu vă speriați, avem mai jos materiale de învățat preprocesoare de CSS! 🙂

Efecte speciale folosind CSS3 și font-uri

Ca regulă generală, de acum încolo ar trebui să încerci să explorezi fiecare site pe care intri, dând click dreapta și Inspect în elementele sale, uitându-te la cum e scris CSS-ul, folosind inspectorul browser-ului preferat (Page Inspector pentru Firefox și Dev Tools pentru Chrome). Unele site-uri sunt făcute corect, unele nu, dar scopul tău e să aflii exact ce au în spate, să vezi cum sunt făcute, să ai o „atitudine de hacker” ca să poți fura părțile interesante. Trebuie să înveți să deconstruiești design-ul altor oameni și să afli cum să funcționează.

Efecte și tutoriale

Icon fonts (recomand SVG, dar și astea sunt OK)

Capitolul #3: Primul tău proiect – un chestionar

(săptămânile 3-4)

Uneltele meseriei: IDE, GIT, FTP

Până acum, am explorat domeniul front end development-ului în preponderență în aplicații bazate pe browser. Acum e timpul pentru folosire mai apropiată de realitatea unui job în domeniu. Trebuie să înveți cum funcționează GIT (de aici sau poate de aici) și va trebui să îți faci un cont de GIT (pe GitHub spre exemplu) pentru a putea folosi controlul surselor într-un mod realist. Va trebui să alegi și un IDE (ideal WebStorm, dar e pe bani – alternativ, Visual Studio Code care e free și foarte bun) și să te acomodezi cu lucrul în IDE-ul ales.

Clienți și servicii de Version Control

Cum să folosești Version Control-ul

IDE-uri

Clienți de FTP

Semantică, standarde și validare pentru HTML și CSS

Standarde și validare

Standardele sunt foarte importante, chiar dacă o pagină poate să funcționeze și fără ele. Adevărul este că nu funcționează în felul cum ar trebui: extensibilă, ușor de făcut debugging pe ea, cu mult mai puține bug-uri posibile decât o variantă nestandard. Citește prin toate materialele cu atenție, pentru că asta e printre cele mai importante lucruri pe care ar trebui să le înveți în stadiul ăsta.

Semantică

Mobile-first Responsive design (TOTUL este obligatoriu)

Capitolul #4: Probleme din lumea reală

(examen mid-term + săptămânile 5-7)

Accesibilitate

Usability (cunoscut colocvial și ca Bun Simț Avansat)

Am un design. Ce fac acum? (Photoshop 101)

Vei învăța cum să transformi un design vizual de interfață, făcut spre exemplu în Photoshop, într-un layout HTML. Asta înseamnă și că va trebui să stăpânești bazele Photoshop-ului și a uneltelor sale pentru selecție, măsurare și proprietăți, care să te ajute ulterior să-ți structurezi HTML-ul și să-ți definești stilurile CSS.

Ia în calcul că vei găsi greșeli în tutorialele de mai jos. Și le vei observa dacă ai fost atent/ă la cursurile și articolele despre standarde, semantică, uzabilitate și accesibilitate prezentate până acum. Când dai peste greșeli, corectează-le așa cum crezi de cuviință, sau întreabă-mă dacă ceva e corect sau nu.

Notă: există, mai nou, multe alternative la Photoshop care merită menționate, și o voi face într-un update viitor.

Capitolul #5: Proiectul tău final

(săptămânile 8-10 + examen final)

Magie cu SASS

CSS e puternic, dar nu e dinamic. Pentru a-l face dinamic, ai nevoie de SASS.

Lucruri de bază despre templating

Până acum, te-ai jucat cu HTML și CSS static, și proiecte care nu foloseau elemente dinamice, lucru care se întâmplă rar în realitate. Acum vom merge la următorul nivel și vom explora cum să transformăm o structură statică într-una dinamică și cum să facem ca un site să refolosească și să genereze HTML în funcție de date stocate în altă parte, spre exemplu în baze de date. Vom aborda și iterarea, căutarea și navigarea pe site cu structuri dinamice.

Ce vezi mai jos sunt engine-uri sau limbaje care folosesc templating. Niciunul nu e obligatoriu, fiindcă se folosesc în funcție de contextul tehnologic al fiecărui proiect. Alege 1-2 și studiază-le, restul vor fi similare, și vei deduce cum funcționează principiile de bază.

Exemple de standarde de workflow

Site-uri întregi construite de la zero folosind HTML, CSS și JS

Va urma: Resurse adiționale de design, marketing și management

Din lipsă de timp, mă voi opri aici cu lista de materiale și promit să revin curând cu completările necesare.

Până atunci, găsiți lista originală de materiale inclusiv o parte din acele resurse adiționale în Google Doc-ul făcut acum 5 ani.

Te-ai blocat undeva?

Te așteptăm pe comunitatea de Facebook cu sfaturi de carieră și suport pentru materialele de mai sus: Cariera în IT.

Dacă vrei sfaturi în format video, tocmai ce-am început un canal de YouTube menit să te ghideze cu idei și sfaturi în domeniu, la care te sfătuiesc să te înscrii. Momentan nu are prea multe clipuri, dar urmează câte 4-5 pe lună.

Succes în carieră!

Comments

  • Apreciez ideile pe care le promovezi pe canalul tau de YT. Mi-as dori sa iau legatura cu tine sa imi dai cateva directii cu privire la dezvoltarea mea in domeniul programarii. Am invatat python si momentan invat js ! Am luat de la 0 (HTML CSS)

    Răspunde

Lasă un răspuns

Adresa ta de email nu va fi publicată. Câmpurile obligatorii sunt marcate cu *

Acest site folosește Akismet pentru a reduce spamul. Află cum sunt procesate datele comentariilor tale.