GitBook: [master] 36 pages modified

Author: Poppy22

sem-1-css/lectia-10.md

@@ -192,7 +192,7 @@ Total: 10 pct \(2 pct din oficiu\)
 
 Durată: 25' \| Metodă: prelegere \| Materiale: videoproiector
 
-`Flexbox Layout`, o specificație CSS modernă din 2017, are scopul de aranja, alinia și distribui spațiul elementelor dintr-un container, atunci când dimensiunile lor sunt necunoscute sau dinamice \(conținut adăugat folosind JavaScript, de exemplu\). Ideea care stă la baza flexbox este de a da abilitatea unui container de a altera înălțimea, lățimea și ordinea copiilor săi în mod flexibil \(de unde și numele\) pentru a ocupa spațiul de pe ecranul respectiv cât mai eficient. Vom încerca să descriem un set minimal de proprietăți, suficient pentru a crea diferite layouts, utile aplicațiilor voastre viitoare. Pentru un tutorial complex și complet despre flexbox, verificați [acest link](https://css-tricks.com/snippets/css/a-guide-to-flexbox/).
+`Flexbox Layout`, o specificație CSS modernă din 2017, are scopul de aranja, alinia și distribui spațiul elementelor dintr-un container, atunci când dimensiunile lor sunt necunoscute sau dinamice \(conținut adăugat folosind JavaScript, de exemplu\). Ideea care stă la baza flexbox este de a da abilitatea unui container de a altera înălțimea, lățimea și ordinea copiilor săi în mod flexibil \(de unde și numele\) pentru a ocupa spațiul de pe ecranul respectiv cât mai eficient. Vom încerca să descriem un set minimal de proprietăți, suficient pentru a crea diferite layouts, utile aplicațiilor voastre viitoare. Pentru un tutorial complex și complet despre flexbox, accesați [acest link](https://css-tricks.com/snippets/css/a-guide-to-flexbox/).
 
 ### Exemplu de bază
 
@@ -397,7 +397,7 @@ Când părintele este mai mare pe axa secundară \(direcția perpendiculară dir
 
 Durată: 5' \| Metodă: prelegere \| Materiale: videoproiector
 
-Media queries sunt o tehnică CSS care permite să definim CSS care va fi aplicat doar în cazul în care anumite proprietăți ale ecranului sunt aplicabile. Folosind media queries bazate pe lățimea ecranului stă la baza designului responsive prin care puteți crea un layout pentru desktop și unul pentru mobile \(sau oricâte layouturi intermediare\).
+Media queries sunt o tehnică CSS care permite să definim CSS care va fi aplicat doar în cazul în care anumite proprietăți ale ecranului sunt aplicabile. Folosirea dea media queries stă la baza designului responsive prin care puteți crea un layout pentru desktop și unul pentru mobile \(sau oricâte layouturi intermediare\).
 
 Pentru a exemplifica utilizarea lor, vom utiliza acelasi markup ca la activitatea trecută, alături de CSS-ul de mai jos.
 

sem-1-css/lectia-7.md

@@ -55,7 +55,7 @@ Există trei modalități de a adăuga CSS în proiectele noastre.
 </html>
 ```
 
-## Activitatea 2 - Selectori si sintaxa CSS
+## Activitatea 2 - Selectori și sintaxa CSS
 
 Durată: 20' \| Metodă: prelegere \| Materiale: videoproiector
 
@@ -78,13 +78,13 @@ selector {
 
 ### Ce este un selector?
 
-Putem identifica elemente HTML prin mai multe metode în CSS, dintre care două sunt atribute specifice HTML: `id` și `class`.
+Un selector este o parte din eticheta HTML \(un atribut\) care identifică în mod unic un element sau arată apartenența acelui element în cadrul unei clasei comune. Putem identifica elemente HTML prin mai multe metode în CSS, dintre care două sunt atribute specifice HTML: `id` și `class`.
 
 Aceste două atribute HTML pot identifica orice element HTML din body \(inclusiv eticheta body\) și, deși pot fi folosite interschimbabil, există câteva reguli generale folosite în industrie:
 
 * un `id` identifică unic un element, o clasă identifică mai multe elemente
 * un element ar trebui să aibă maximum un singur id, dar poate avea mai multe clase
-* practica majoritar acceptată este ca, în JS, să manipulăm elemente pentru silizare și animații folosind clase, și pentru a implementa funcționalitate folosind id-uri
+* practica majoritar acceptată este ca, în JS, să manipulăm elemente pentru stilizare și animații folosind clase, și pentru a implementa funcționalitate folosind id-uri
 
 ### Exemple de selectori
 
@@ -290,9 +290,9 @@ Puteți observa că, deși primul paragraf din div nu este stilizat direct, este
 
 Pentru CSS, există câteva proprietăți foarte importante care definesc limbajul pe care le vom menționa mai jos:
 
-* **cascading**: în cei mai simpli temreni, ordinea contează: dacă există două reguli cu selectori identici dar declarații pentru aceleași proprietăți dar valori diferite, cele din blocul care apare mai târziu vor fi aplicate
-* **specificitate**: dacă două reguli diferite se referă la acelaăi elemente, regula cu selectorul mai specific va fi aplicată
-* **moștenire**: majoritatea proprietăților, dacă nu sunt setate, vor moșteni valorile setate pe elementele părinte, până la body. Există și proprietăți care sunt excepții de la regula aceasta. De asemenea, fiecare broser aplică setul său propriu de proprietăți asupra elementelor generale \(cum ar fi etichete ca `div`, `body` și `input`, în special `body`\), și, dacă nu sunt resetate în mod specific, sunt moștenite.
+* **cascading**: în cei mai simpli termeni, ordinea contează: dacă există reguli cu selectori identici ce conțin aceleași proprietăți, dar valori diferite, cele din blocul care apare mai târziu vor fi aplicate
+* **specificitate**: dacă două reguli diferite se referă la aceleași elemente, regula cu selectorul mai specific va fi aplicată
+* **moștenire**: majoritatea proprietăților, dacă nu sunt setate, vor moșteni valorile setate pe elementele părinte, până la body. Există și proprietăți care sunt excepții de la regula aceasta. De asemenea, fiecare browser aplică setul său propriu de proprietăți asupra elementelor generale \(cum ar fi etichete ca `div`, `body` și `input`, în special `body`\), și, dacă nu sunt resetate în mod specific, sunt moștenite.
 
 ![](../.gitbook/assets/copy-of-logo-techtor-05.png)
 

sem-1-css/untitled.md

@@ -110,7 +110,7 @@ Rezultatul va fi:
 
 ![](../.gitbook/assets/screenshot-from-2020-03-23-19-35-14.png)
 
-Înainte de a descrie noua stilizare, putem remarca că unele valori sunt de forma `1em`, această unitate de măsură \(**em**\) este relativă la mărimea textului \(**font-size**, dacă este setată\). Spre exemplu, `2em` înseamnă de două ori mai mare decât mărimea textului. De asemenea, există o valoarea `vw`\(viewport width\), care, împreună cu `vh`\(ciewport height\), sunt `viewport units` \(unități de măsură relative la mărimea ecranului\).  Spre exemplu, **10vw** este egal cu 10% din lățimea ecranului, iar **20vh** este egal cu 20% din înălțimea ecranului.
+Înainte de a descrie noua stilizare, putem remarca că unele valori sunt de forma `1em`, această unitate de măsură \(**em**\) este relativă la mărimea textului \(**font-size**, dacă este setată\). Spre exemplu, `2em` înseamnă de două ori mai mare decât mărimea textului. De asemenea, există o valoarea `vw`\(viewport width\), care, împreună cu `vh`\(viewport height\), sunt `viewport units` \(unități de măsură relative la mărimea ecranului\).  Spre exemplu, **10vw** este egal cu 10% din lățimea ecranului, iar **20vh** este egal cu 20% din înălțimea ecranului.
 
 Proprietățile folosite în exemplu sunt:
 

sem-1-html/lectia-2.md

@@ -98,7 +98,7 @@ Nu putem ști pe dinafară toate combinațiile și ce culori o să iasă. Astfel
 
 ### Format hexazecimal
 
-Culorile pot fi reprezentate și în format **hexazecimal**, adică alcătuite din restul împărțirii la 16 \(cifrele 0-9 și literele a-b\). Restul 10 este reprezentat de litera ‘`a`’, restul 11 de ‘`b`’, …, restul 15 de ‘`f`’. Culorile în hexazecimal încep cu semnul `#` urmat de 6 caractere, primele două pentru roșu, următoarele două pentru verde și ultimele două pentru albastru. 
+Culorile pot fi reprezentate și în format **hexazecimal**, adică alcătuite din restul împărțirii la 16 \(cifrele 0-9 și literele a-f\). Restul 10 este reprezentat de litera `a`, restul 11 de `b`, …, restul 15 de `f`. Culorile în hexazecimal încep cu semnul `#` urmat de 6 caractere, primele două pentru roșu, următoarele două pentru verde și ultimele două pentru albastru. 
 
 Am menționat anterior că aceste trei culori sunt folosite pentru a format orice alte culori și sunt combinate, folosind valori de la 0 la 255. Transformat în format hexazecimal, 0 este 00, iar 255 este ff. Numerele pot fi transformate în format hexazecimal prin împărțirea la 16 și salvarea restului, întocmai ca la conversia binară.
 

sem-1-html/lectia-3.md

@@ -106,7 +106,7 @@ Forma standard pentru a adăuga un atribut este astfel:
 
 ### Celule care se întind pe mai multe coloane
 
-Dacă dorim ca o celulă sa ocupe spațiul mai multor coloane consecutive, atunci folosim atributul `colspan`. Acesta este utilizat în cadrul etichetelor <td> și primește ca valoare un număr între ghilimele, arătând lungimea celulei.
+Dacă dorim ca o celulă sa ocupe spațiul mai multor coloane consecutive, atunci folosim atributul `colspan`. Acesta este utilizat în cadrul etichetelor <td> și primește ca valoare un număr între ghilimele, arătând lungimea noii celulei în raport cu celelalte \(numărul de coloane pe care se întinde celula\).
 
 ```markup
 <table>
@@ -146,7 +146,7 @@ Ce credeți că se întâmplă dacă mai adăugăm o celulă pe rândul cu numel
 
 ### Celule care se întind pe mai multe rânduri
 
-Dacă dorim ca o celulă sa ocupe spațiul mai multor rânduri consecutive, atunci folosim atributul `rowspan`. Acesta este utilizat în cadrul etichetelor &lt;td&gt; și primește ca valoare un număr între ghilimele, arătând lungimea celulei.
+Dacă dorim ca o celulă sa ocupe spațiul mai multor rânduri consecutive, atunci folosim atributul `rowspan`. Acesta este utilizat în cadrul etichetelor &lt;td&gt; sau &lt;th&gt; și primește ca valoare un număr între ghilimele, arătând numărul de rânduri pe care se întinde celula.
 
 ```markup
 <table>

sem-1-html/lectia-7.md

@@ -37,7 +37,7 @@ Durată: 20' \| Metodă: demonstrație, conversație, exercițiu \| Materiale: v
 
 ### Elemente semantice
 
-În HTML, există elemente semantice, al căror nume "are sens". Prin definirea acestor elemente, oricine poate înțelege cu ușurință despre ce este vorba în conținut. De exemplu: `<form>, <table>, <img>`. 
+În HTML, există elemente semantice al căror nume "are sens", este intuitiv și explicativ. Prin definirea acestor elemente, oricine poate înțelege cu ușurință despre ce este vorba în conținut. De exemplu: `<form>, <table>, <img>`. 
 
 Sigur cunoașteți elementele semantice menționate anterior. În continuare vom discuta despre elemente noi.
 

sem-1-html/untitled.md

@@ -116,7 +116,7 @@ Durată: 15' \| Metode: demonstrație, conversație, exercițiu, dezbatere \| Ma
 
 ### Eticheta de paragraf
 
-Cea mai utilizată etichetă este cea de paragraf. Aceasta e marcată prin `<p>` și se închide cu `</p>`. În cadrul acestei etichete se poate introduce text-ul \(conținutul paginii web\). 
+Cea mai utilizată etichetă este cea de paragraf. Aceasta e marcată prin `<p>` și se închide cu `</p>`. În cadrul acestei etichete se poate introduce textul \(conținutul paginii web\). 
 
 {% hint style="info" %}
 Proprietatea acestei etichete este că adaugă un rând nou după ce a fost închisă, astfel, două paragrafe alăturate sunt despărțite.

sem-1-proiect/lectia-12.md

@@ -52,7 +52,7 @@ Până acum, pagina web arată astfel, doar titlul din browser și un header în
 
 ![Structura paginii web](../.gitbook/assets/group-6.png)
 
-Fiecare supererou este adăugat într-un div numit **hero**. Acesta e împărțit în două div-uri, **hero--left** și **hero--right**. Hero--left conține **hero--image-container,** unde se află imaginea de profil a supereroului. Hero--right conține **hero--right-inner,** unde sunt incluse informații despre superero \(nume, descriere etc\) și **hero-details**, unde sunt include detalii cum ar fi abilitățile, aliații și inamicii. Hero--details conține alte două div-uri, **hero--details-left** și **hero--details-right**, pentru a poziționa informațiile pe două coloane, ca în imagine.
+Fiecare supererou este adăugat într-un div numit **hero**. Acesta e împărțit în două div-uri, **hero--left** și **hero--right**. Hero--left conține **hero--image-container,** unde se află imaginea de profil a supereroului. Hero--right conține **hero--right-inner,** unde sunt incluse informații despre supererou \(nume, descriere etc\) și **hero-details**, unde sunt include detalii cum ar fi abilitățile, aliații și inamicii. Hero--details conține alte două div-uri, **hero--details-left** și **hero--details-right**, pentru a poziționa informațiile pe două coloane, ca în imagine.
 
 Această structură este propusă și va fi folosită în cadrul lecțiilor, însă voi puteți sa alegeți alta sau să încludeți alte elemente.
 

sem-2-angular/lectia-10.md

@@ -61,7 +61,7 @@ De unde apare acest text? Deschideți hero.component.html și veți vedea paragr
 Ați observat că în hero.component.html am scris direct eticheta `<p></p>`, fără să scriem structura cu care eram obișnuiți, cu head și body. În interiorul componentelor \(app component și cele create de noi - momentan doar hero component\) vom scrie conținutul componentei direct, deci nu avem nevoie să introducem head și body.
 {% endhint %}
 
-Dacă vă uitați în meniul din partea stângă, veți vedea mai jos fișierul `index.html`, car conține o structură obișnuită de pagină html, cu etichetele `html, head și body`.
+Dacă vă uitați în meniul din partea stângă, veți vedea mai jos fișierul `index.html`, care conține o structură obișnuită de pagină html, cu etichetele `html, head și body`.
 
 ![](../.gitbook/assets/screenshot-2020-03-19-at-19.06.06.png)
 

sem-2-js/lectia-2.md

@@ -249,7 +249,7 @@ culori.forEach(function(elem) {
 ```
 
 {% hint style="warning" %}
-Funcția sort ordonează crescător alfanumeric, adică dacă vrem să sortăm numerele de la 0 la 10, vom avea output-ul: \[0, 10, 1, 2, 3, 4, 5, 6, 7, 8, 9\] deoarece primul caracter luat în considerare pentru 10 este 1, care este mai mic decât 2. Pentru a sorta numerele corect, va trebui să definim propriul comparator despre care vom vorbi într-o altă lecție.
+Funcția sort ordonează crescător alfanumeric, adică dacă vrem să sortăm numerele de la 0 la 10, vom avea output-ul: \[0, 1, 10, 2, 3, 4, 5, 6, 7, 8, 9\] deoarece primul caracter luat în considerare pentru 10 este 1, care este mai mic decât 2. Pentru a sorta numerele corect, va trebui să definim propriul comparator despre care vom vorbi într-o altă lecție.
 {% endhint %}
 
 {% hint style="warning" %}

sem-2-js/lectia-3.md

@@ -52,7 +52,7 @@ false === 0 // false
 true === 1 // false
 "" === 0 // false
 "" === false // false
-"Hello" == "Hello" // true
+"Hello" === "Hello" // true
 5 === 5 // true
 "5" === 5 // false
 ```