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?
- Începe aici: Cartea online „Resilient Web Design” (obligatoriu) și How does the Web work?
- Don’t fear the Internet: the basics
- How does the Internet work: Naked Science Scrapbook
- A packet’s tale: World Science Festival
- HTTP basics – parte din cursul gratuit de la Harvard de Computer Science pe care-l găsești în întregime aici
- Don’t fear the Internet: browser
- How the Web works for developers: Part 1 – Overview & Front End (obligatoriu)
- How the Web works for developers: Part 2 – Servers & Scaling (obligatoriu)
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.
- Understanding Information Architecture (obligatoriu)
- Dacă le găsești, măcar una din cărțile astea: Information Architecture for the World Wide Web – capitolele 1–9 și/sau A practical guide to Information Architecture – toată cartea. Ar fi bine să răsfoiești măcar una din astea două.
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.
- Cartea HTML5 for Web Designers, Capitolul 1, sau A brief history of markup de pe A List Apart
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):
- Learn HTML/CSS: Shay Howe
- CodeSchool Web Path
- Khan Academy Web Programming
- Washington.edu course on 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
- Washington.edu course on CSS
- Learn Layout (obligatoriu)
- De la HTMLDog: Beginner CSS tutorial, Intermediate CSS tutorial, Advanced CSS tutorial
Articole, unelte și informații legate de CSS
- Calculating CSS Specificity și Specificity calculator (obligatoriu)
- The CSS “homepage”
- CSS: Designing for the Web
- Dev.to – explain CSS selectors in plain English
- CSS Zen Garden (obligatoriu)
- Rezolvă majoritatea problemelor Internet Exploder-ului
- An introduction to browser rendering (obligatoriu) Recomand browser-ul Chrome Canary ca să te joci cu resursa asta.
- Mozilla Developer Network CSS Info
Referința completă de CSS (și HTML, și Accesibilitate, și așa mai departe)
- Mozilla Developer Network: CSS reference (obligatoriu)
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
- Codrops (recomand să te înscrii la updat-euriloe lor, sunt o resursă excelentă pentru efecte de CSS și JS)
- CSS-Tricks CSS Snippets
- Magic animations / Hover effects / Hovers / Effekts / Box
- CSS3 features you can now use (datorită adopției rapide în browsere noi)
- CanIUse – Folosește unealta asta ca să verifici dacă poți folosi unele features, spre exemplu CSS Grid
- CSS3 gradient generator – Folosește unealta asta să generezi gradienți CSS
Icon fonts (recomand SVG, dar și astea sunt OK)
- Why IconFonts are great – deși în 2020, SVG-urile au mai multe avantaje
- Iconfont generator: IcoMoon
- Iconfont kit: FontAwesome
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
- Visual Studio Code
- WebStorm (plătit)
- Sublime
- Brackets
- Editoare de cod online (doar pentru testare)
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.
- Washington Edu lesson in Standards
- What are web standards and why should I use them? (obligatoriu)
- Cartea: Designing with web standards, toată.
- W3C HTML Validator / W3C CSS Validator (obligatoriu)
- Cursurile Washington.edu: Web Standards and Accessible Design + Quality Control
Semantică
- Let’s talk about semantics / Pursuing semantic value (obligatoriu)
- Introduction to the semantic web / Semantic code: What? Why? How?
- HTML5 semantics from Smashing Magazine
- Diving into HTML5
- Microformats primer – Sitepoint (obligatoriu)
- Google Structured Data Intro (obligatoriu)
- Google Structured Data Examples (obligatoriu)
- Get started with Microformats & Microformats v2
Mobile-first Responsive design (TOTUL este obligatoriu)
- Cartea: Responsive web design, toată.
- Articolele lui Ethan Marcotte pe A List Apart. În special acesta!
- Cartea: Mobile first, toată.
- Prezentările interesante ale lui Luke Wroblewski. Majoritatea sunt foarte bune…
- Scaling User Interfaces
- Creating a mobile-first responsive web design
- Responsive Design is…
- RWD Tutorials
- Building a better responsive website
- O listă completă de dispozitive și rezoluțiile lor
- Device agnostic breakpoints
- State of the Web
- Natural responsive web design breakpoints
- Re-thinking breakpoints in responsive design
- I have no idea what the hell I am doing
Capitolul #4: Probleme din lumea reală
(examen mid-term + săptămânile 5-7)
Accesibilitate
- Accessibility link list from WASP
E o listă destul de lungă, deci vă puteți concentra pe subiectele astea: - W3C Accessibility Standards
- Accessible forms (toate nivelurile)
- Easy checks: a fast review of web accessibility (obligatoriu)
- Website accessibility report generator
- Just Ask: Integrating Accessibility Throughout Design (mandatory)
- Other accessibility tools
- How a CSS framework can enforce accessibility
- Derek Featherstone Web Accessibility primer
- 13 days of Accessibility by Sparkbox
- Official Web Content Accessibility Guidelines documentation
- Noile principii guvernamentale din SUA legate de Sisteme de Design Digital care include principii de accesibilitate.
Usability (cunoscut colocvial și ca Bun Simț Avansat)
- Cartea: Don’t make me think, toată. (obligatoriu)
- Jacob Nielsen’s Usability 101 (obligatoriu)
- Jacob Nielsen’s 10 Rules of Thumb for Usability (obligatoriu)
- Dacă ai timp, explorează mai multe articole excelente scrise de NNGroup, sunt o autoritate în domeniu.
- Usability basics from Usability.org
- Making the web more inclusive and usable from Usability.com.ua
- Principles of website usability
- 25 point usability checklist
- Yet another checklist
- Unul din cele mai ușor de înțeles indecși de studii de Usability: gov.co.uk și Principile lor de Design sunt grozave.
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.
- PSD to HTML tutorial (obligatoriu)
- PSD to HTML seria de video-uri partea 0, partea 1, partea 2, partea 3, partea 4, partea 5, partea 6, partea 7 (obligatoriu)
- PSD to HTML Video de la Tuts+
- PSD to HTML Text de la Tuts+
- PSD to HTML: Code a clean business website design
- PSD to HTML: Build a sleek portfolio site from scratch
- Bonus: Photoshop Shortcuts Cheat sheet
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.
- Official SASS guide (obligatoriu)
- Learn SASS in 20 min (obligatoriu)
- Getting started with SASS
- A List Apart: Getting started with SASS (obligatoriu)
- The beginner’s guide to SASS» SASS CodeSchool tutorial
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ă.
- Handlebars (JS)
- Mustache (JS)
- Angular Templating + Tutorial + Another tutorial (JS)
- Smarty (PHP)
- Getting started in WordPress templating (PHP)
- http://www.hongkiat.com/blog/angularjs-tutorials-screencast/ (AngularJS)
- A comprehensive list of most web templating engines (comparație între mai multe sisteme de templating)
Exemple de standarde de workflow
- GIT Guidelines
- HTML Guidelines
- CSS / SCSS Standards
- JavaScript / ES6 Style Guides
- React / JSX Style Guides
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ă!
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)
Salutare, link-ul de la Cursul de la Harvard pe Computer Science nu mai functioneaza.
L-am schimbat, merci pentru comment! 🙂