Introducere în Web Development

Treaba unui programator este să îi spună calculatorului ce să facă în viitor atunci când utilizatorul vede și interacționează cu aplicațiile făcute de el. De exemplu, pentru o pagină web, îi spunem calculatorului ce să afișeze: text, link-uri, imagini, dar și cum arată acele elemente.

Pentru a vorbi cu un calculator, trebuie să folosim un limbaj pe care să îl înțeleagă. Deocamdată încă trebuie să scriem acest limbaj, și trebuie să fim atenți la punctuație. Calculatoarele cu care vorbești și te înțeleg chiar dacă nu vorbești corect există, dar sunt mult mai primitive decât în filme.

Un site sau aplicație web folosește 3 limbaje.

HTML

Prin limbajul HTML, îi spunem browser-ului ce elemente apar pe pagină. Text, link-uri, butoane, imagini și altele. Voi face o introducere scurtă acum, dar voi intra în detalii la curs.

Fiecare element este reprezentat în text prin tag-uri, marcate cu < și >. Unele elemente au un singur tag, de obicei în forma <nume />, dar cele mai multe au câte două. Au nevoie de asta pentru că pot avea conținut, uneori format din text, alteori format chiar și din alte elemente.

Uneori, elementele pot avea diferite atribute, care vor fi scrise în primul tag al elementului. De exemplu, pentru o imagine avem nevoie de un atribut care să spună URL-ul de unde browserul trebuie să o descarce. Fiecare atribut are un nume și o valoare.

                    <p>
  Acesta este un paragraf.
  Și în continuare avem o imagine:
  <img src="https://picsum.photos/seed/scoalaweb/200/300" />
</p>
                

Pe lângă elementele vizibile, punem și altele care ajută în diferite scopuri. Avem elemente pentru a introduce CSS și JavaScript. Avem elemente care dau informații suplimentare atunci când motoare de căutare precum Google ne citesc pagina. Acestea nu văd ce vede un om, ci efectiv citesc codul HTML.

Provocarea la HTML este să îți amintești ce elemente există pentru ceea ce ai tu nevoie. Cele folosite mai des îți vor intra în reflex. Pentru celelalte e posibil să fie nevoie să te uiți la o documentație precum cea oferită de MDN.

CSS

Prin limbajul CSS, îi spunem browserului cum arată elementele introduse în pagină prin HTML. Pentru orice element avem nevoie, putem da o sumedenie de proprietăți. Proprietățile textului, culorile, dimensiunile elementelor, chiar și anumite forme pot fi făcute prin CSS. Unele proprietăți au denumiri logice, iar pe altele le vei reține lucrând des cu ele.

Putem da aceste proprietăți fie în atributul style al elementului HTML, fie separat într-un fișier sau în conținutul elementului <style>. Dacă dăm separat, trebuie cumva să spunem cărui element i se aplică proprietățile. Pentru un set de proprietăți, putem să selectăm mai multe elemente. Va trebui să înveți cum se formează acei selectori. Sunt doar câțiva foarte folosiți, iar de ceilalți e suficient să știi că există ca să îi cauți în documentație când ai nevoie să îi folosești.

                    a {
  color: blue;
  font-weight: bold;
}

.active {
  color: red;
  background-color: yellow;
  font-weight: bold;
}
                

Pe lângă proprietățile la care poate te gândești, va trebui să înveți sisteme care aranjează elemente pe ecran: Grid și Flexbox.

Dacă vrei ca paginile tale web să arate bine pe diferite dispozitive (telefoane mobile, tablete, calculatoare, imprimantă), va trebui să scrii CSS care se aplică diferit în funcție de dispozitiv. Aici ne ajută foarte mult Media-Query-urile.

Tot din CSS, putem să facem fel-de-fel de animații, pentru pagini mai interesante.

JavaScript

JavaScript este cu totul altceva decât HTML sau CSS. Pentru a lucra cu JavaScript, trebuie să accesezi un mod diferit de a gândi. Trebuie să faci programare în adevăratul sens.

JavaScript ne permite să facem aplicații web. Poate vrei ca atunci când utilizatorul apasă pe un buton, să se deschidă un pop-up, sau să se încarce date de la server fără să se reîncarce pagina. Datorită JavaScript, se pot face jocuri interactive care funcționează direct în browser, fără să fie nevoie să le descarci.

Dacă vrei să faci ceva mai complex decât un site de prezentare, va trebui să faci cu JavaScript.

                    document
  .querySelector(".target")
  .addEventListener("click", () => {
    this.classList.toggle("active");
  });
                

În acest curs, nu vom intra în JavaScript, dar îți recomand să îl ai în vizor după.

Dacă ai auzit de alte limbaje sau concepte (React, PHP, WordPress, ș.a.), acestea probabil există pentru a genera în final cod în HTML, CSS, și JavaScript.