Cursul Modern CSS Layout

Cursul Modern CSS Layout este o continuare logică a cursului Adobe Dreamweaver CC prin intermediul căruia vă veți completa și aprofunda cunoștințele. Acest curs prezintă noțiuni referitoare la tehnicile avansate ale HTML-ului și CSS-ului modern. 

În lecțiile acestui curs veți învăța tehnici care completează principiile de bază și vă permit să gestionați conținutul într-un mod mai avansat și mai ușor. Ca să frecventați cursul Modern CSS Layout, trebuie să aveți cunoștințe de bază de HTML și CSS. Primul modul al cursului ne introduce în secțiunile limbajului CSS, care se folosesc pentru a „ținti” mai precis și mai ușor anumite elemente din structura HTML. În plus, veți avea ocazia să cunoașteți și alte pseudoclase, mai avansate, precum și pseudoelementele folosite pe webul modern. 

Apoi, urmează modulul care se va ocupa de tehnicile layout avansate, mai exact de aranjarea elementelor. În această parte a cursului veți învăța gridurile CSS flex și native, precum și tehnici care se folosesc doar de câțiva ani, dar care ușurează foarte mult lucrul dacă sunt setate și folosite corect. Următorul modul, și ultimul, al acestui curs, va aborda cele mai importante părți ale designului web modern, respectiv se designul responsive (sau adaptabil). 

Descrierea și obiectivul cursului Modern CSS Layout

Obiectivul acestui curs este să ofere un răspuns la întrebarea cu privire la deosebirea dintre webul modern și limbajele sale HTML și CSS și exemplele lor precedente. De asemenea, veți afla cum puteți folosi cele mai noi tehnici prin versiunile actuale ale limbajelor HTML și CSS. Cert este faptul că această abordare a designului web nu este o revoluție, ci o evoluție a celui existent, dar care pune o lumină complet nouă pe dezvoltarea proiectelor, deoarece necesită adaptarea la telefoanele mobile, tablete, pe lângă calculatoarele clasice. 

În lecțiile acestui curs veți învăța și tehnicile de distribuire a conținutului prin flexbox și CSS grid, precum și multe alte elemente care formează HTML-ul și CSS-ul de astăzi. Simplu spus, veți învăța concepte moderne de design web și asimila cunoștințe suplimentare cu care vă veți extinde posibilitățile dobândite la cursurile precedente. După finalizarea cursului, veți fi pregătiți să aplicați singuri tehnicile HTML și CSS moderne, precum și să decideți corect cu privire la abordările și modalitățile de a crea site-uri pentru clienți. 

Cursul Modern CSS Layout va răspunde la următoarele întrebări:

1. Ce este flexbox?

Flexbox este una dintre cele mai noi tehnici CSS, de fapt, este un modul CSS care vă permite să editați layoutul elementelor pe pagini și/sau, într-o anumită măsură, este un layout popular. Flexbox a apărut ca răspuns la nepracticabilitatea și rigiditatea tehnicilor folosite anterior, precum elementele flotante etc.

Pe de altă parte, flex nu este un subtituent al acestor tehnici, ci doar o altă opțiune pe care o putem folosi. Înainte, flex nu era practic din cauza lipsei de suport în browsere. Din fericire, astăzi, flex este susținut de toate browserele populare și nu mai există niciun motiv să nu-l folosim. La fel ca Native CSS Grid, flex este un aspect foarte important al CSS-ului modern. 

2. Este gridul așa de important?

CSS oferă multe opțiuni de aranjare a elementelor. Din anii '90, atunci când am început să învățăm HTML și CSS, am folosit și folosim în continuare, diferite tehnici. Am început cu tabelele, care au fost de mult abandonate ca tehnică de layout, am continuat cu proprietățile float și clear, overflow și clearfix, iar astăzi putem să folosim flex, precum și cel mai modern add-on – Native CSS Grid, cu care aranjăm elementele într-un mod foarte transparent și rapid, fie acestea taguri div, secțiuni semantice sau altceva. Toate aceste tehnici avansează și se schimbă de-a lungul anilor, iar noi trebuie să fim mereu la curent cu toate aceste schimbările, dacă vrem să facem proiecte bune.

3. De ce flexbox și grid nu sunt același lucru: dacă îl știu pe unul, de ce am nevoie și de al doilea?

O întrebare care se pune frecvent este: Dacă deja există flex și știm cum să-l folosim, de ce mai avem nevoie și de grid? Deși poate părea că au același scop sau că se suprapun într-o mare parte, de fapt, nu este deloc așa. Flex este menit în primul rând să afișeze elementele, toate elementele pe un singur rând, ceea ce este adesea obiectivul și este suficient.

Pe de altă parte, dacă avem nevoie de un control mai mare, ne trebuie grid. Și flex poate distribui pe mai multe rânduri, dar după cum am menționat deja, grid ne oferă mai multe posibilități și un control mai mare. Merită menționat și faptul că grid a apărut după logica lui flex și că respectă reguli similare, iar multă lume îl consideră o îmbunătățire a lui flex.

4. Dacă știu să folosesc Bootstrap, de ce mai am nevoie de grid?

De fapt, Bootstrap, sau cum era cunoscut înainte Twitter Boostrap, este un sistem foarte bun care ne oferă multe când dezvoltăm un site, de la propriul sistem grid până la JS plugin. Vom învăța cum să-l folosim în acest curs, dar vom învăța și mai noul Native CSS Grid care a introdus suport CSS direct, vanilla pentru grid și acest tip de aranjare a elementelor.

Deși Bootstrap conține gridul cu care se aranjează elementele într-un mod foarte armonios, utilizarea directă a gridului oferă posibilitatea de a întrerupe dependența proiectelor noastre de resurse externe precum Bootstrap. Cu alte cuvinte, pentru un proiect mai mic în care este importantă viteza și simplitatea, renunțând la Bootstrap putem câștiga viteză și simplitate.

5. Ce înseamnă responsive?

Până acum câțiva ani, lumea webului era mult mai simplă. Puteam vorbi despre o uniformitate condițională a webului, deoarece toată lumea accesa site-urile de pe calculator. Dar a avut loc o schimbare de paradigmă. Nu ne mai putem gândi doar la site-uri pentru calculatoare, ci la site-uri pentru toate dispozitivele, la site-urile care pot să se adapteze și să reacționeze imediat (engleză, respond – responsive) la mediului în care sunt afișate.

Dacă utilizatorul trece de la calculator la tabletă, site-ul trebuie să se adapteze și să-și rearanjeze elementele, dar și să-și schimbe funcționalitatea necesară (de exemplu, meniul derulant devine varianta on-click din cauza lipsei mouse-ului). Această abordare elimină nevoia de a crea mai multe site-uri separate pentru fiecare nou dispozitiv care apare. Și, desigur, astăzi este un standard general acceptat.

6. Trebuie să-mi optimizez site-ul pentru telefoanele mobile?

Da, cel mai probabil ar trebui. Conform statisticilor, astăzi, mai mult de jumătate din utilizatori accesează webul de pe telefonul mobil, tabletă sau alte dispozitive similare. Dacă mai luăm în considerare și faptul că primele dispozitive iPhone și Android au apărut în 2007, respectiv 2008, această informație nu este de neglijat. În câțiva ani, probabil că procentul va crește în beneficiul dispozitivelor portabile.

De aceea, trebuie să ne adaptăm site-urile astfel încât să ofere o experiență adecvată pe toate platformele și dispozitivele. Interesant, astăzi încă mai întâlnim (din păcate) multe site-uri care, ca să folosim un eufemism, se descompun pe dispozitivele mobile, ceea ce nu ar trebui să se întâmple dacă vrem să oferim utilizatorilor o experiență plăcută.

7. Trebuie să cunosc toate aceste lucruri „avansate”?

HTML, CSS, dar și toate celelalte tehnici de pe web, sunt într-o permanentă schimbare și dezvoltare, unele mai rapid, altele mai lent, dar schimbările sunt constante și inevitabile. Până acum câțiva ani, noțiunea de web mobil nici nu exista, iar astăzi reprezintă standardul.

În acest curs nu ne ocupăm doar de cele mai noi tehnici, ci învățăm și ce este necesar pentru a lucra într-un mediu modern. De exemplu, una dintre teme va fi cum să aranjăm elementele folosind tehnicile flex și grid. Se prea poate ca cineva să spună că putem și fără astea și că vechiul float „face treaba”, dar este ca și cum am spune că Windows 10 este bun, dar și că Windows XP merge etc. 

Planul și programa cursului:

1. Selectori CSS complecși

• Selectori avansați 
• Pseudoclase
• Pseudoelemente

2. Flexbox și Grid

• Flexbox
• Introducere în Grid – Bootstrap
• Native CSS grid

3. Responsive web design

• Noțiunea de responsive design
• Media Queries
• Responsive images