Exerciții
Lecțiile și tutorialale de programare sunt un bun prim pas pentru a învăța, dar noi credem că mai important este să codezi și să primești feedback la rezolvările tale. Ăsta a fost procesul fiecăruia dintre noi la începutul carierei, când am avut un mentor în cadrul echipei ce ne-a ajutat cu sfaturi și code-review.
De aceea, pentru fiecare lecție am adăugat câteva exerciții pe care te încurajăm să le rezolvi. Apoi, trimite-ne rezolvările chiar aici pe platformă, iar noi îți vom oferi feedback pentru fiecare.
PS: dacă ești curios să afli mai multe despre noi și de ce facem asta, aruncă un ochi aici
htmlDespre HTML
Fix Markdown Typos
Pentru primul exercițiu din modulul de HTML hai să rezolvăm 'bugurile' din codul de mai jos. Nu e nevoie să fi lucrat cu HTML înainte, doar aruncă un ochi pe lecția introductivă cu atenție sporită la sintaxa HTML.
PS: pentru a te asigura că ai rezolvat cu bine exercițiul, validează-l folosind https://validator.w3.org/
Relații de rudenie
Pornind de la codul HTML de mai jos, rezolvă următoarele cerințe:
a) Adaugă o imagine ca și copil al elementului <body>.
b) Adaugă un paragraf ca și frate/soră pentru imaginea adăugată anterior.
c) Adaugă înăuntrul paragrafului anterior conținut de tip text.
d) Grupează elementele anterioare într-un container de tip div care va fi copil pentru <body> si părinte pentru imagine și paragraf.
e) Adaugă un element de tip <head> ca și frate/soră pentru <body> și poziționează-l înainte de acesta.
f) Adaugă un element de tip <title> ca și copil pentru elementul anterior. Înăuntrul său pune conținut text.
g) Adaugă un element de tip <html> ca și părinte pentru <head> cât și <body>.
h) În final, adaugă elementul <!DOCTYPE html> ca și frate/soră cu <html>.
i) Asigură-te că codul e valid folosind https://validator.w3.org.
htmlValidarea paginilor HTML
Validează pagina de mai jos
Pentru acest exercițiu va trebui să modifici codul de mai jos astfel încât el să treacă de validările de aici https://validator.w3.org/.
htmlTexte
Blockquote
Pe lângă exersarea conceptelor prezentate în lecție, ne dorim să afli și din tainele codului de pe platforma noastră :D.
Așa că ne-ar plăcea să realizezi structura pentru secțiunea următoare.
Hint: textul în engleză este un citat.
Titluri și paragrafe
Scrie structura pentru secțiunea de mai jos:
Ne interesează să folosești elementele potrivite prezentate în cadrul lecției.
Hint: pentru date va trebui să folosești un element de care nu am discutat încă în lecții și anume time-element.
htmlLink-uri și butoane
Button versus link
Pentru că de multe ori se folosesc butoane în loc de link-uri sau invers, ne-am gândit la un exercițiu care să te ajute să înțelegi când îl folosim pe fiecare și de ce. Un caz ar putea fi atunci când realizăm un shop online.
Hint : URL-ul link-ului este 👉 shopping-cart
Jump links
Ne-ar plăcea să construiești ceva ce există chiar în cadrul lecției și anume acele jump links. De ce ne dorim asta? Pentru că în practică va trebui să folosești astfel de link-uri. Pentru pasul ăsta nu îți fă griji dacă nu vei obține acel efect de “smooth scrolling”, o să vorbim de el la partea de CSS. Concentrează-te doar pe conceptele prezentate până aici, nu mai mult.
Hint 1: Cum ai văzut și în VIDEO DEMO 👉 smooth-scrolling-jump-links, când dăm click pe un link din meniu, trebuie să ne ducă la secțiunea aferentă acestuia. Ca să vezi că funcționează, va trebui să mai adaugi tu mai multe paragrafe în pagină, poti da copy-paste de aici lorem-ipsum. Dar codul pe care ni-l trimiți să fie fără textul generat de tine.
Hint 2: dacă nu ai mai adăugat paragrafe în paginile Web de până acum, citește lecția despre texte.
Link-uri către email sau către numere de telefon
Sunt situații în care vrem să oferim unui user posibilitatea de a deschide email-ul precompletat către o adresă sau să apeleze un număr de telefon. (cel mai frecvent de pe dispozitivele mobile).
Hint : URL-ul ultimului link este 👉 google-maps
Hai să exersăm aceste cazuri și să scriem structura HTML pentru exemplul de mai sus.
Card component
Scrie structura HTML pentru următorul card. Acest element este și el des întâlnit în realizarea paginilor web, așa că te va ajuta foarte mult să afli cum să îl faci. Va trebui să ai în vedere și lucrurile învățate în lecțiile anterioare (de exemplu lecția despre texte.).
Nu trebuie să stilizezi nimic, încă nu am ajuns la partea de CSS.
Hint 1: pentru date va trebui să folosești un element de care nu am discutat încă în lecții și anume time-element.
Hint 2: calea link-ului pentru titlu e link-title.
Hint 3: link-ul care duce către autorul articolului, se va deschide într-un nou tab, iar calea e 👉 link-autor.
Hint 4: calea link-ului pentru workshops e 👉 link-workshops.
Hint 5: calea link-ului pentru UX audits e 👉 link-audits.
Hint 6: calea link-ului pentru podcast e 👉 link-podcast.
Hint 7: calea link-ului pentru Read more e 👉 link-read-more.
htmlListe
Liste ordonate
De data aceasta exercițiul pe care vrem să îl faci vine chiar de pe platforma noastră :D
Scrie HTML-ul pentru secțiunea de mai sus. Pe lângă exersarea listelor vei afla și ce se întâmplă “în spatele” interfeței pe care o vezi în browser.
Hint: aceste articole trebuie să fie parcurse în ordine ;)
Liste neordonate
Scrie codul HTML pentru structura paginii de mai jos.
Ne interesează să folosești elementele potrivite și bunele practici prezentate aici pe platformă. Happy coding!
PS: poți personaliza cele 3 obiective cu ce-ți propui tu pentru acest an
Nested lists
Sunt situații în care vom avea liste în interiorul altor liste, cum ar fi meniul de mai jos din GitHub:
Hai să exersăm aceste cazuri și să scriem structura HTML pentru exemplul de mai sus.
Hint 1: logo-ul din stânga sus îl găsești aici
Hint 2: dacă nu ai mai adăugat imagini în paginile Web de până acum, citește lecția despre imagini
htmlContainere
Stack Overflow Layout
Pentru acest exercițiu am luat pagina de întrebări de pe Stack Overflow și am simplificat-o pentru a ne concentra pe layout și containere.
Scrie codul HTML pentru pagina de mai jos.
hint: nu trebuie să stilizezi nimic, încă nu am ajuns la partea de CSS. Concentrează-te pe structura HTML și folosirea elementelor învățate până acum.
hint: sunt și câteva elemente ce țin de formulare aici. Merită să arunci un ochi și pe lecția cu formulare.
htmlImagini
Responsive image
În acest exercițiu avem o simplă pagină Web cu o imagine de fundal și un text în centru:
Totuși, imaginea are o rezoluție foarte mare (6000x4000px) și o dimensiune pe măsură: 2.3MB. Hai să ne folosim de tehnica imaginilor responsive și să optimizăm transferul pe rețea.
Mai exact, redimensionează de 3 ori imaginea, și încarcă aceste variante în funcție de dimensiunea ecranului.
Lazy loading
Mai jos vei găsi codul HTML și CSS pentru o galerie de imagini. Aceasta are câteva probleme pe care le vom rezolva în acest exercițiu:
#1 HTML-ul nu este valid. Hai să folosim tool-ul acesta pentru a le valida și rezolva problemele.
#2 Imaginile sunt foarte mari. Hai să adăugăm atributul width sau height pe fiecare imagine pentru a le araja frumos în pagină.
#3 Browserul încarcă toate imaginile imediat ce intrăm pe pagină. Hai să optimizăm experiența folosindu-ne de tehnica lazy loading.
Card component
Pentru primul exercițiu de la această lecție, hai să realizăm structura pentru următorul card:
Acest element este foarte folosit în paginile web, deci e bine să te obișnuiești cu el.
Nu trebuie să stilizezi nimic, încă nu am ajuns la partea de CSS. Concentrează-te pe structura HTML și folosirea elementelor învățate până acum.
htmlFormulare
Login Form
Implementează formularul de login de mai jos:
PS: dacă ești curios să-l vezi în "real life", intră pe https://www.smashingmagazine.com/auth/
Hint: nu trebuie să stilizezi nimic, încă nu am ajuns la partea de CSS. Concentrează-te pe structura HTML și folosirea elementelor învățate până acum.
Register Form
Implementează formularul de înregistrare de mai jos:
Hint: nu trebuie să stilizezi nimic, încă nu am ajuns la partea de CSS. Concentrează-te pe structura HTML și folosirea elementelor învățate până acum.