Cursul Advanced CSS

Cursul reprezintă o îmbunătăţire a materiei în domeniul HTML şi CSS. Tot ceea ce s-a învăţat în cursurile anterioare, în cursurile generale de HTML şi CSS, acum este recapitulat şi sunt introduşi termeni şi concepte noi, utilizate cu scopul construirii unor pagini web competitive şi moderne.

Cunoştinţele elementare sunt îmbunătăţite cu tehnologii şi concepte specifice, cum ar fi designul personalizat, aşa-numitul „Responsive design“, elementele HTML avansate (tagurile audio şi video, tagurile input noi), precum şi administrarea CSS-ului avansat, care include selectori avansaţi, transformări şi animaţii şi tehnologiile LESS şi SASS.

Cunoaşterea regulilor CSS de bază este îmbogăţită cu reguli noi, specifice, cum ar fi lucrul cu cadrele rotunjite şi manipularea avansată a umbrelor. Se studiază tipografia, folosind fonturi încorporate sau externe, stilizarea acestora şi diverse efecte asupra textului.

Sunt explicate conceptele de personalizare a paginilor HTML cu diferite formate, pe diferite dispozitive. De ce paginile HTML nu funcţionează pe toate dispozitivele în acelaşi mod şi în ce mod interogările media pot ajuta la rezolvarea acestei probleme? Ce este HTML şi cu ce browsere se poate lucra în HTML? O parte din curs se ocupă cu preprocesoarele şi cu utilizarea lor în dezvoltarea web modernă. Este explicat conceptul de preprocesor şi importanţa acestuia în construirea designului, prezentând cu această ocazie cei mai actuali reprezentanţi din acest domeniu: SASS, LESS, HAML. Pe lângă prezentarea acestor tehnologii, se explică în detaliu şi modul în care acestea sunt utilizate.

Descrierea şi scopul cursului Advanced CSS

Acest curs va asigura cursanţilor îmbunătăţirea cunoştinţelor existente în domeniul creării prezentărilor pentru site-urile statice. La finalizarea cursului Advanced CSS, cursanţii vor fi pregătiţi să rezolve toate problemele legate de elementele statice ale prezentării. De asemenea, toţi cei care frecventează acest curs, vor putea să răspundă cu succes la majoritatea provocărilor reprezentate de cerinţele moderne de design web.

Întregul curs de Advanced CSS este împărţit în trei module, pentru o urmărire mai uşoară şi o învăţare mai eficientă. La începutul cursului vă aşteaptă modulul care se va ocupa cu CSS-ul avansat. La aceste cursuri veţi învăţa ce sunt cadrele şi umbrele, dar şi ce sunt fonturile şi efectele textuale. Primul modul se încheie cu lecţia bazată pe interogările media (media queries).

Al doilea modul se va ocupa cu designul web personalizat şi în această parte a cursului veţi avea ocazia să vă familiarizați cu selectorii CSS avansaţi, precum şi cu designul single page. Acest tip de prezentare a conţinutului este foarte populară în prezent, deoarece permite utilizatorilor să obţină toate datele dorite pe o singură pagină, fără o încărcare suplimentară a conţinutului. În plus, veţi afla ce este bootstrap-ul şi modul în care acesta este utilizat în procesul de creare a site-urilor.

La sfârşitul cursului veţi frecventa modulul care se axează pe optimizarea şi preprocesarea conţinutului. Aceste cursuri se vor ocupa cu toate conceptele şi cu utilizarea preprocesoarelor HTML şi CSS. În plus, veţi avea ocazia să vă familiarizaţi cu termeni precum SASS, LESS şi HAML. Printre altele, la acest curs veţi învăța şi ce este designul web personalizat (adaptabil) şi de ce acesta este foarte important atunci când creaţi site-uri. Toţi începătorii care se întâlnesc cu programarea pentru prima dată, trebuie să ştie că pentru frecventarea acestui curs nu sunt necesare cunoştinţe anterioare în operarea cu JavaScript. Pe de altă parte, la cursul Advanced CSS veţi dobândi exact acele competenţe care vă vor permite să continuaţi studiul mult mai simplu şi care vă vor deschide porţile spre cariera unui programator Frontend JavaScript.

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

1. Ce este designul web personalizat?

Când a apărut, HTML era conceput în aşa fel încât lucrurile să fie afişate relativ pe o pagină. La început, conţinuturile erau simple, aşadar, afişarea relativă nu era dificil de realizat. În favoarea acesteia era şi faptul că toate conţinuturile au fost afişate în mare parte doar pe ecranul calculatorului, utilizând browserul web.

De-a lungul timpului, conţinuturile au devenit din ce în ce mai complexe, iar numărul de platforme diferite pe care au apărut a fost în creştere, aşadar, a fost din ce în ce mai dificilă afişarea conţinuturilor, astfel încât acestea să fie acceptabile în fiecare format pentru utilizator. Designul personalizat (responsive design) este un concept în HTML care implică adaptabilitatea conţinutului la cât mai multe platforme posibile, folosind modificări mici în aspectul său sub formă de extinderi, îngustări, mutări pe pagină şi altele.

2. Ce este single page design?

De la primele pagini HTML până în prezent, tendinţele estetice în domeniul designului web s-au schimbat şi îmbunătăţit. De asemenea, mult timp modelul tehnologic, estetic şi conceptual al aplicaţiilor web a presupus descărcarea întregului conţinut de fiecare dată, pentru fiecare modificare efectuată pe pagină.

Cu timpul, limitările tehnice ale aplicaţiilor web au devenit mai mici şi s-au creat condiţii pentru concepte mai eficiente, care nu necesită încărcarea conţinutului complet pentru fiecare modificare, ceea ce a îmbunătăţit şi componenta estetică şi experienţa de utilizator. Acest lucru a rezultat o modalitate deosebit de populară de prezentare a conţinutului, în care toate datele se află pe o singură pagină şi prin ale cărei zonă utilizatorul poate naviga fără reîncărcări. Acest mod de prezentare a conţinutului este denumit în mod obişnuit ca sigle page design (design pe o singură pagină).

3. La ce se foloseşte biblioteca bootstrap?

Proiectarea aplicaţiilor web este foarte interesantă. Dar, într-un anumit moment, etapele pe care le parcurgem încep să se repete, aşadar, mai degrabă le-am fi evitat pentru a ajunge la câteva etape mai interesante. De obicei, în astfel de situaţii, salvăm părţile bine proiectate ale proiectului, astfel încât să le putem folosi mai târziu într-un alt proiect, evitând astfel munca suplimentară sau rezolvând problemele pe care le-am rezolvat deja.

Bootstrap este un model în care diferite probleme estetice şi tehnice ale aplicaţiei web sunt deja rezolvate şi care pot fi folosite ca punct iniţial în crearea unei aplicaţii, cu scopul minimizării muncii la unele sarcini mai puţin interesante şi pentru a ne concentra pe cele mai interesante.

4. Ce este experienţa de utilizator şi de ce este importantă?

Experienţa de utilizator este „carisma aplicaţiei”. Modul în care a experimentat-o utilizatorul şi cât de plăcut a fost să o utilizeze. Experienţa de utilizator nu poate fi reprezentată prin design, performanţă sau conţinut, ci depinde, pur şi simplu, de diverşi factori care pot fi controlaţi mai mult sau mai puţin în procesul de creare a unei aplicaţii, dar care doar împreună furnizează rezultatul final.

Nu putem doar să încorporăm experienţa de utilizator ca o funcţionalitate. Aceasta nu se poate realiza printr-un design mai bun. Dar, cu siguranţă o putem îmbunătăţi prin îmbunătăţirea celor menţionate mai sus, dar şi prin diverse alte părţi ale aplicaţiei.

5. Ce sunt preprocesoarele şi la ce se folosesc în designul web?

Preprocesoarele sunt programe care compilează un limbaj de programare în altul sau un tip de date în altul. Cel mai des, se folosesc pentru scurtarea scrierii unui cod repetitiv sau pentru facilitarea scrierii unor părţi complicate ale codului.

În designul web, preprocesoarele sunt populare, deoarece permit evitarea repetării codului, dar şi pentru că oferă cele mai bune soluţii posibile printr-o sintaxa simplă.

În prezent, preprocesoarele sunt utilizate în proiectarea şi programarea web pentru generarea codului HTML, CSS şi JavaScript.

6. Trebuie să cunoaştem JavaScript pentru a crea o pagină web?

Pentru crearea unei pagini web, nu sunt necesare cunoştinţe din domeniul JavaScript. Orice conţinut textual va deveni un site dacă îl plasăm pe un server web şi îl înregistrăm în formatul corespunzător.

Pentru ca pagina să fie mai estetică, folosim limbajele HTML şi CSS. Aceste două limbaje asigură ca orice conţinut să fie îmbunătăţit printr-un stil şi o grafică, dar nu îl fac funcţional. Dacă, de exemplu, dorim ca un utilizator să aibă o interacţiune mai bogată cu pagina noastră, acest lucru nu se poate realiza folosind aceste două limbaje. Pe lângă aceste două limbaje, avem nevoie şi de JavaScript.

7. Ce sunt interogările media?

Este aproape imposibil să proiectaţi o pagină, astfel încât aceasta să arate la fel pe fiecare dispozitiv. Pentru ca această problemă să fie depăşită, anumite părţi ale paginii se creează în aşa fel încât să fie cât mai flexibile, iar conţinutul să poată fi prezentat în mod corespunzător pe fiecare platformă.

Atunci când conţinutul nu poate fi atât de flexibil încât să poată fi folosit pe diferite platforme, cu ajutorul interogărilor media putem stabili reguli complet diferite pentru diferite dispozitive sau formate.

Planul și programa cursului:

1. Selectori CSS avansați 

• Selectorii atributului
• Pseudoclase
• Pseudoelemente

2. Transformările, tranzițiile și animația CSS

• Transformările CSS
• Tranzițiile și animația CSS

3. Stilizarea avansată a culorilor și a textului 

• Lucrul avansat cu culoarea (gradienți, umbre, filtre)
• Stilizarea avansată a textului (text wrapping, breaking, writing modes, truncate, ellipsis)

4. Responsive Web Design

• Unitățile Viewport
• Media Queries

5. Flexbox Layout

• Introducere și implementare
• Containere flex (flex-direction, justify-content, align-items, flex-wrap, align-content, flex-flow)
• Elemente flex (order, flex-basis, flex-grow, flex-shrink, flex, align-self)

6. Grid

• Introducere în Grid și caracteristicile containerului 
• Caracteristicile elementelor în cadrul lui Grid 

7. Preprocesoarele CSS

• SASS
• LESS