HTML & CSS Intermediate

Cursul abordează concepte legate de tehnicile mai avansate ale HTML-ului și CSS-ului modern. Participanții se familiarizează cu tehnici care completează principiile de bază și le permit să gestioneze conținutul într-un mod mai avansat și mai ușor. Se presupune că participanții au cunoștințe de bază despre HTML și CSS.

Descrierea și scopul cursului HTML & CSS Intermediate

În primul modul, cu care începe cursul, aflăm mai multe despre tipografie și elemente vizuale pe paginile HTML. Apoi, în cel de-al doilea modul, vorbim despre selectori avansați de limbaj CSS cu care putem mai precis, dar și mai ușor, „ghici” câteva dintre elementele din structura HTML. De asemenea, ne familiarizăm și cu alte pseudo-clase și pseudo-elemente mai avansate, pe care le folosim pe web-ul modern. În cel de-al treilea modul, continuăm cu tehnicile de layout mai avansate de astăzi, adică aranjarea elementelor.

După float, position și proprietăți similare din cursurile anterioare, studiem flex și full width layout, tehnici care au fost în uz real doar cu câțiva ani în urmă, dar astăzi permit lucrul mult mai ușor dacă sunt utilizate și configurate corect. Din setul de operații complexe care se pot aplica asupra elementelor folosind CSS fac parte transformările, tranzițiile și animațiile. La cursul „HTML & CSS Intermediate” se acordă o atenție deosebită acestor concepte, astfel participanții vor învăța să folosească animațiile, tranzițiile și transformările, care fac fiecare site mai interesant și mai modern în zilele noastre.

În cadrul cursului „HTML și CSS Intermediate”, participanții vor învăța cum să proiecteze și să creeze site-uri web. Aceasta este o continuare logică a cursului „HTML și CSS Fundamentals”, dar poate fi văzută și ca o unitate independentă. Sunt explicate concepte de design web modern, cu accent deosebit pe noile tehnologii aduse de HTML5 și CSS3, și anume flexbox, full width layout, tranziții, animații etc.

Scopul programului este de a pregăti participanții să creeze în mod independent site-uri web atractive, de la ideea inițială până la un proiect funcțional HTML și CSS. La finalizarea cursului, utilizatorul va fi capabil să aplice în mod independent tehnici HTML și CSS avansate, dar și să decidă corect abordarea și metoda de creare a site-urilor web pentru situații specifice.

Cursul vă va răspunde la următoarele întrebări:

Ce este Flexbox?

Flexbox-ul este una dintre tehnicile CSS mai noi și, de fapt, un modul CSS care permite aranjarea elementelor pe pagină și/sau într-o parte a acesteia într-un mod mai avansat, adică layout popular. Flexbox-ul a fost creat ca un răspuns la impracticabilitatea și rigiditatea tehnicilor utilizate anterior, cum ar fi procedeul de floating la elemente etc. Pe de altă parte, flex nu este un substitut pentru aceste tehnici, ci doar una dintre opțiunile pe care le putem folosi.

Anterior, flexul nu era practic din cauza suportului pentru browser, adică din cauza absenței unui astfel de suport. Din fericire, astăzi flex este acceptat de toate browserele populare și nu există niciun motiv să nu-l folosim. La fel ca Native CSS Grid, flex este un aspect foarte important al CSS-ului modern.

Ce sunt atributele HTML?

Toate elementele HTML pot avea atribute. Atributele sunt folosite pentru a descrie sau configura elementele HTML. De exemplu, crearea elementului img este însoțită de definirea a două atribute HTML: src și alt. Limbajul HTML cunoaște un număr mare de atribute diferite. De fapt, fiecare element HTML poate avea atribute. Unele dintre aceste atribute sunt universale, ceea ce înseamnă că pot fi găsite pe orice element HTML, în timp ce există și atribute care sunt specifice, deci pot fi folosite doar pe unele elemente. Proprietățile de bază ale atributelor HTML pe care trebuie să le cunoașteți sunt următoarele:

• atributele HTML sunt întotdeauna plasate pe tagul de deschidere sau de auto-închidere, niciodată pe tagul de închidere;
• atributele HTML sunt definite ca perechi cheie-valoare;
• toate elementele HTML pot avea atribute;
• există atribute care pot fi găsite pe toate elementele HTML și sunt numite globale.

Ce sunt pseudo-clasele?

Pseudo-clasele în CSS sunt adăugate la selectori, astfel încât să putem stiliza anumite stări speciale în care pot fi găsite elemente HTML. Aceste stări nu depind adesea de arborele documentului HTML, ci de situația în care se află elementul și/sau de comportamentul utilizatorului. Pseudo-clasele pot fi recunoscute prin adăugarea semnului două puncte (engl. colon). Pseudo-clasele pot fi împărțite aproximativ în două categorii: pseudo-clase de stare  și pseudo-clase structurale. Pseudo-clasele de stare includ următoarele: :link, :visited, :hover, :active, :focus, :enabled, :disabled, :checked. Folosind pseudo-clase în raport cu poziția elementelor, putem viza primul și ultimul element din succesiune sau fiecare secundă, fiecare treime și așa mai departe.

Ce sunt pseudo-elementele?

Pe lângă pseudo-clase, apar și pseudo-elementele  (engl. pseudo-elements), care nu se referă la stări speciale, ci la părți ale elementelor în sine. Astfel, acele părți nu apar nici în arborele documentului. De exemplu, cu un pseudo-element putem evidenția și stiliza în mod special doar prima literă a unui anumit paragraf. Deși un paragraf este un element unic în arborele HTML, putem folosi un pseudo-element pentru a evidenția doar o parte a acestuia, care nu este recunoscută ca element de același arbore HTML.

Dacă vorbim doar de scrierea codului, spre deosebire de pseudo-clase, care pot apărea oriunde în selector și se pot combina între ele, pseudo-elementele apar întotdeauna la sfârșitul selectorului lor. Pseudo-clasa și pseudo-elementul se pot combina, dar pseudo-elementul trebuie să fie la sfârșitul selectorului.

Ce reprezintă conceptul de full-width layout?

Responsive design este o tendință în designul site-urilor web, dar este posibil ca această abordare să nu funcționeze pentru fiecare site web. Fiecare site web necesită un design și un stil diferit, în funcție de o serie de factori. Dacă creați un site web pentru companie sau pentru uz personal, este important să alegeți cu atenție designul care vi se va potrivi cel mai bine. În cursul „HTML & CSS Intermediate” ne vom ocupa de termenul full-width layout, care folosește întregul spațiu de pe pagină pentru a afișa conținutul site-ului web, mergând literalmente de la o margine la altă margine a ecranului. Acest lucru asigură utilizarea eficientă și cea mai bună a spațiului disponibil, deoarece programatorii pot plasa imagini și conținut oriunde pe pagina web, asigurându-se în același timp că rămâne suficient spațiu de la marginile paginii pentru a evita problemele de lizibilitate.

Ce reprezintă animația pe site?

Detaliile animate de pe site-uri pot contribui la o impresie mai bună a site-ului, pot îmbunătăți navigarea, pot ajuta site-ul să arate mai bine sau pur și simplu să înfrumusețeze afișajul. Când vorbim despre animație, putem vorbi și despre punctele cheie între care este creată animația. Aceste puncte le putem numi și puncte de referință (engl. reference points). Cel mai simplu exemplu este atunci când avem un punct de pornire (start) și un punct de referință final (end). Un obiect începe într-o formă și se termină într-o alta. Între ele este animație. Așadar, animația de pe site reprezintă un element care pleacă de la o stare și poziție, se modifică într-un anumit timp și se termină în starea și poziția finală, în timp ce browserul însuși creează o tranziție treptată cu instrucțiunile noastre.

Ce sunt transformările?

Transformările fac posibilă transformarea elementelor HTML, iar acest lucru se realizează prin influențarea caracteristicilor lor vizuale. În acest fel, elementele se deplasează de la o stare la alta, iar procesul de trecere de la o stare la alta se numește transformare. CSS acceptă transformări bidimensionale și tridimensionale. Transformarea elementelor HTML folosind CSS se realizează prin utilizarea proprietății transform. Proprietatea CSS transform poate accepta diferite valori exprimate de funcțiile CSS. De fapt, fiecare dintre transformări are propriul set de funcții cu parametri de scopuri diferite, care definesc proprietățile transformării. În acest curs, în cadrul capitolului despre transformări, vom învăța funcții precum: translate, scale, skew și rotate.

Planul și programa cursului

Modulul 1 – Tipografie și elemente vizuale

1. Tipografie
2. Formatarea textului
3. Editarea conținutului 

Modulul 2 – Selectori CSS complecși

1. Selectorii atributului
2. Pseudo-clase
3. Pseudo-elemente

Modulul 3 – Layout și animații

1. Flexbox
2. Full width
3. Tranziții
4. Animații și transformări