#HTML

Am ajuns la a ZECEA lecție din cursul de #FrontEnd #Development în limba #Română - codăm #HTML în #VSCode și discutăm de elemente #block level vs #inline și ancore / link-uri și titluri și semantică de text. ⬇️⬇️⬇️ Detalii și informații 🔥 mai jos!
DETALII
▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀
Al treilea video din Modulul 2 al Cursului de Front End e în sfârșit aici - e cel mai lung video din cursul ăsta, are aproape o oră, dar eu zic c-a meritat așteptarea. Mi-a luat mai mult decât speram, dar am reușit în sfârșit să-l editez.
De acum încolo vom continua să codăm, și trecem prin 6 module de cod (3 de HTML, CSS și JS pentru începători, și 3 de HTML, CSS și JS pentru avansați, plus niște bonusuri la final) - așa că spor la vizionat și stai pe-aproape!
CUPRINS
▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀
00:00 Introducere
00:29 Detalii despre curs, sumarul video-ului
01:08 Fluxul de informații în HTML: block level vs inline level
08:37 Tag-uri generice: div și span
15:48 Titluri în HTML: de la h1 până la h6
19:25 Spațierea în elementele block-level cu tag-ul br
21:00 Link-urile și elementul „ancoră”: cel mai important din HTML
26:39 Link-uri absolute vs link-uri relative vs link-uri interne
31:20 Inspectarea codului HTML din browser (pe scurt)
33:05 Atributul de titlu pe Call to Action-uri
36:28 Formatarea semantică a textului în HTML
37:13 Tag-ul: strong
37:30 Tag-ul: em
38:07 Intercalarea tag-urilor - o greșeală ușor de rezolvat
38:57 Tag-ul: b
42:16 Tag-ul: mark
43:02 Tag-ul: i
44:46 Tag-ul: s
45:14 Tag-urile: del și ins
46:15 Tag-ul: u
47:25 Tag-ul: small
48:47 Tag-urile: sub și sup
49:39 Felicitări și temă pentru acasă
50:39 Despre seria actuală de video-uri și rugămintea mea
TEMĂ PENTRU ACASĂ
▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀
1️⃣ Folosind structura HTML (și chiar și fișierul HTML din tema precedentă) discutată video-ul anterior și o parte din tag-urile analizate astăzi, creează o listă de 5 poezii preferate - în aceeași pagină - asigurându-te că există o modalitate de a ajunge de la o poezie la alta folosind ancore puse și la începutul paginii (un fel de sumar care să aibă link-uri către toate poeziile) și între poezii (cu link către poezia precedentă și poezia următoare).
2️⃣ Apoi, dacă stăpânești GIT-ul bine, adaugă sau updatează acest fișier HTML în repository-ul tău de GitHub și dă-mi în comentarii numele repository-ului folosind regula discutată în video-ul trecut: fără protocol și domeniu, adică fără github.com/ (KZbin n-o să te lase să pui link-ul integral în comentarii).
RESURSE
▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀
Link-uri (în engleză) din video:
✅ MDN = developer.mozilla.org/
✅ Unealta de evaluare a ordinii corecte a titlurilor = defaced.dev/tools/logical-con...
✅ Definiția Entităților HTML = developer.mozilla.org/en-US/d...
✅ Lista de Entități HTML = html.spec.whatwg.org/multipag...
✔️ Playlist-ul în care vei găsi toate cursurile de Front End Development în Română (inclusiv video-ul curent): bit.ly/vio-curs
⭐ Alte video-uri de-ale mele despre Front End Development: bit.ly/vio-fed
🚨 Lista completă de resurse strânse de mine de-a lungul timpului care să te ajute să înveți Front End Development și nu numai: bit.ly/vio-digital
🎦 Înscrie-te la canalul meu » kzbin.info... « NU UITA să dai click și pe clopoțel: 🔔
💬 Aștept comentarii, întrebări și sugestii: www.viorelmocanu.ro/blog/
🗳️ VOTEAZĂ subiectele tale preferate pe care ai vrea să mai fac video-uri: fdm33xvhgdz.typeform.com/to/g...
LINK-URILE MELE
▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀
🤵 Profil LinkedIn: / viorelmocanu
👨‍🏫 Profil Twitter: / viorelmocanu
🆕 Grup Facebook: / carierait
🆕 Discord: / discord
📰 Blog: www.viorelmocanu.ro/blog/
📰 Newsletter: viorelmocanu.ck.page/newsletter
💸 Susține-mă: / viorelmocanu
💳 GitHub Sponsor: github.com/sponsors/ViorelMocanu
☕ Buy me a coffee: www.buymeacoffee.com/viorel
#CursFrontEnd #CursHTML #CursCSS #CursJS #Romania #România #ViorelMocanu #gratuit #Mentorat #programare #webdevelopment #web #development #html5 #h1 #anchor #div #span

[@ViorelMocanu]

Ți s-a părut ușor de urmărit cursul de azi? Ai avut probleme în înțelegerea unor concepte? Scrie-mi mai jos dacă ai orice fel de întrebări!

[@cosminmunteanu7860]

Iti multumesc in numele tuturor celor care suntem la inceput de drum in acest domeniu. Nu iti poti imagina cat de mult ne ajuta ceea ce faci tu aici. Esti cu 100 clase peste cei care fac cursuri si cer bani pe ele. Jos palaria si tot respectul pentru ca il meriti cu varf si indesat.

[@ViorelMocanu]

Mulțumesc, Cosmin! Sunt multe cursuri de calitate pe platforme cum e FrontEnd Masters sau Scrimba, singurul avantaj al cursului meu e că îmi permit să-l lungesc oricât de mult simt nevoia ca să distilez și informații utile trecute prin filtrul unei cariere de zeci de ani în industrie (plus că e-n Română). Din nefericire, însă, va dura mult până acopăr tot ce-mi propun să acopăr cu video-urile din cursul meu, și dacă vrei să accelerezi învățarea îți recomand să iei la mână toate link-urile din primele pagini ale documentului ăstuia: bit.ly/vio-digital - o să meargă mult mai repede.

[@user-jj5ox6ys6w]

Esti the best !!!!! Iti multumesc tare pentru toate tutorialele!

[@ViorelMocanu]

Cu multă plăcere! Urmează să mai public câteva zilele următoare...

[@pavelalexandru-valentin7855]

Mă fascinează felul tău, modul în care explici lucrurile, faci totul să pară simplu dar în același timp frumos/atractiv. Ești plin de carismă și dai impresia că ai făcut 22 de ani de pedagogie nu doar de site-uri. Probabil că și o mâncare de spanac, dac-o descrii, o faci să pară delicioasă 😂. Cred că persoanele cu care interacționezi zilnic (familie, prieteni, colegi) sunt foarte norocoase că ești printre ei fizic. Urmăresc acest curs din plăcere … și culmea este că … nici nu plătesc bilet ca la cinema. Felicitări!!

[@ViorelMocanu]

Îți mulțumesc mult pentru toate cuvintele și gândurile frumoase pe care cu siguranță nu le merit. Începând de la faptul că tot ce știu despre pedagogie știu de la soție care are master în didactică, și aproape la fiecare video mă ajută cu păreri și sugestii, ca să nu mai vorbesc de prezența fizică compromisă uneori de faptul că-mi asum des mai multe lucruri de făcut decât am timp liber. Dar mă bucur că rezultatul video e pe măsura așteptărilor și mă bucur să pot ajuta pe alții cu ce-am dobândit și eu de-a lungul vremii din comunitate și experiența personală! :) Merci din nou și dacă ai sugestii sau idei de video-uri pe care ai vrea să le vezi în afara acestui curs, le aștept cu interes!

[@ralub4898]

👏 multumesc pt continut! esti de un real ajutor celor aflati la inceput de drum!

[@ViorelMocanu]

Mă bucur mult, Ralu! :) Succes și spor la studiat!

[@danielraducu9073]

Incredibile informatii, util de incepatori dar si pentru avansati care au nevoie de un quick refresh, sunt super recunoscator

[@ViorelMocanu]

Excelent, mă bucur mult c-am făcut video-ul suficient de captivant și pentru oamenii care au deja ceva experiență! :)

[@mental_outlaw_ro]

Cursurile tale m-au captivat.Multumim ca existi bro

[@ViorelMocanu]

Mă bucur mult, spor în tot ce-ți propui să faci!

[@ishootlazerslol]

literalmente acolo sunt, la lectia asta. merci.

[@ViorelMocanu]

Cu multă plăcere, spor la treabă! :)

[@constantincrintea8219]

Da , a fost usor de urmarit , pe intelesul tuturor. Bravo ! Te asteptam in continuare

[@ViorelMocanu]

Merci mult pentru review, revin în cel mai scurt timp posibil!

[@cristinarusavon]

multumim! tema mea CristinaR18/poezie

[@ViorelMocanu]

Iartă-mă pentru răspunsul foarte tardiv, Cristina, abia acum am avut timp să mă uit pe temele voastre. Proiectul arată bine și link-urile de navigație sunt corecte. L-am și validat cu validator.w3.org/nu/ și nu are nicio greșeală de HTML, felicitări! Următorul pas pentru proiect ar fi să înveți să-l deployezi în GitHub Pages ca să fie accesibil public ca pagină web, ai documentația aici: pages.github.com/ Well done și spor în continuare!

[@florinpana67]

Salut! Multa informatie pe care am urmarit-o la ora tarzie in noapte dar sper sa retin cat mai multe notiuni din cele prezentate de tine. Acum ma apuc de tema! :)

[@ViorelMocanu]

Spor la treabă!

[@florinpana67]

Abia astept urmatorul episod din cursul livrat de tine!

[@ViorelMocanu]

Și eu abia aștept să-l postez, lucrez la el chiar acum, revin cu el cât pot de repede!

[@raulmarinescu7756]

Foarte usor de urmarit si bine explicat. Faci sa para totul mult mai simplu si de asta mi-as dori sa faci si cursuri de chestii mai complicate cum ar fi Angular, Spring. Hope to see one soon!!!

[@ViorelMocanu]

Intrăm și în așa ceva, dar cel mai probabil în live-uri mai repede decât într-un curs propriu-zis. Stai pe-aproape și merci de gândul bun! :)

[@techgirl6755]

Thanks

[@ViorelMocanu]

Mulțumesc mult!

[@adrianmanea413]

15 ani in industrie si doar acum am aflat ca div vine de la divider haha.

[@ViorelMocanu]

Merci mult de comment, Adrian! Mă bucur s-aud că ai aflat măcar o informație nouă! :)

[@maniakgames3153]

Salut! Detin cunostinte generale de front-end(HTML, CSS, SCSS,LESS, JS, BOOTSTRAP, TAILWIND CSS, WORDPRESS etc) - ce path recomanzi sa urmez pentru inceput ca sa obtin un job remote in 5-6 luni? PHP - Laravel sau React JS, Vue JS? E saturata piata pe react/vue? Personal ma tenteaza gandul sa obtin certificarea de la META pentru front-end developer unde se invata react js si front-end, poate imi va oferi un plus pe langa portofoliul de proiecte.. Dar nici PHP, Laravel nu suna rau pentru ca e mai putin de aprofundat si ar fi cerere destula pe piata, doar ca nu am posibilitatea sa obtin o certificare si rolul e mai slabut din punct de vedere salarial. Multumesc anticipat!

[@ViorelMocanu]

Salut! Certificarea META nu cred că e necesară, dar ia-o dacă simți că e o adiție bună în CV. Apropo de PHP/Laravel vs React vs Vue, poți începe de oriunde te simți tu confortabil (în loc să te mulezi pe trend-urile pieței). Pentru că vei învăța mai repede și îți va fi mult mai ușor să progresezi și să-ți faci un portofoliu bun. Deci dacă-ți place back end-ul, mergi pe Laravel. Dacă-ți place front end-ul, mergi pe React/Next și/sau Vue/Nuxt. Dacă-ți plac ambele, alege una din direcții și apropie-te de cealaltă după ce ai câteva proiecte serioase făcute în primul stack. Mult succes în orice-ți propui!

[@Petrut.09]

Salut, cu ce caracteristica din css putem schimba culoarea unui link deja vizitat odata sau a unuia pe care inca nu l-am vizitat?

[@ViorelMocanu]

Sunt pseudo-clase pe care le pui pe ancore, spre exemplu poți testa următorul cod CSS: codepen.io/ViorelMocanu/pen/GRYJdwZ și poți afla detalii adiționale de aici: www.sitepoint.com/pseudo-classes-the-basics/ și de aici: developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes și de aici: developer.mozilla.org/en-US/docs/Web/CSS/:link

[@user-ig3wt2db8u]

Salut, Viorel! Multumesc pentru inca un video foarte clar care imi prinde foarte bine! O intrebare: cand ai vorbit despre taguri "parinte" si "copii", cum stiu care sunt tag-urile "parinte" si care sunt tag-urile "copil" ca sa nu le intercalez la un moment dat? Exista o lista a tag-urilor sau pur si simplu ar trebui sa imi dau seama din context si din felul in care imi scriu pagina cum se clasifica tag-urile? Multumesc!

[@ViorelMocanu]

Când creezi o pagină web, e ca și cum ai creea arborele genealogic al întregii umanități de la Adam și Eva încoace. Doar că Adam și Eva sunt și . :)) Pe scurt, deci, fiecare element poate avea copii (deci poate deveni părinte) dacă în interiorul lui apar alte elemente, care devin copiii acestuia. La fel, orice element în afară de are un părinte, care e tag-ul sau elementul în interiorul căruia a fost creat respectivul element (fie el sau orice alt tag din ). Elementele care nu pot avea copii sunt cele care sunt self-closing, adică spre exemplu.

[@florinpana67]

Am remarcat acum ca exista un tag si respectiv un parametru "title". Ce diferenta exista intre ele si cand il folosim pe unul cand pe celalalt?

[@ViorelMocanu]

- ... e un meta tag pe care-l folosești exact o dată, exclusiv în interiorul ... pentru a pune meta titlul paginii, care apare atât în browser (titlul tab-ului, apare complet la hover) cât și în Google sau Bing sau alte motoare de căutare (partea albastră și mare a link-urilor) - e important să nu fie mai lung de 55-60 caractere dar să includă tilul contextual relevant al paginii, și să fie diferit de la o pagină la alta - proprietatea title="..." se poate folosi pe orice element din HTML, însă în mod tradițional e bine să fie folosită pe elementele interactive de genul butoanelor și link-urilor să întărească intenția pentru utilizator - adică să confirme că butonul sau link-ul face ce pare că face, pentru ca utilizatorul să aibă certitudinea că dacă dă click are setările așteptate pentru rezultatul final al click-ului :) Sper că te-am lămurit!

[@cosmincraciun3769]

Salutare Viorel. Ce parere ai de AI? Crezi ca se vor reduce locurile de munca din zona web development, web design in urmatorii 5-10 ani? Mai merita sa inveti in directia asta?

[@ViorelMocanu]

100% merită pentru că automatizarea poate merge doar până la un punct. Probabil în orice aspect al comunicării online, de la strateg la copywriter, de la marketer la designer, de la front la back end developer, cu toții vor avea modalități să-și facă munca mai ușoară sau mai eficientă folosind AI-ul, dar numărul de job-uri nu cred că va fi influențat de asta. Doar de situația economică, situație care acum e instabilă (datorită panicii investitorilor, a războiului, a crizei imobiliare și a transporturilor, etc) dar o să-și revină așa cum și-a revenit și de multe ori în trecut.

[@cosmincraciun3769]

@@ViorelMocanu Multumesc, cred ca sunt multe persoane care probabil se intreaba acelasi lucru. Un video pe acest topic care sa ii ajute si pe ceilalti, ar fi perfect.

[@ViorelMocanu]

@@cosmincraciun3769 dap, intenționez să fac un video pe tema asta cu siguranță. Vreau doar să documentez puțin mai atent subiectul ca să fie mai valoros acel video, nu doar un video „de opinie”. :)

[@lauralauraas7583]

Când apar și celeilalte lectiii?

[@ViorelMocanu]

Fac tot posibilul să public următorul video din serie în câteva zile...

[@florinpana67]

Am 2 intrebari. In exemplele tale ai pus id in (sau , ...). Pot si este corect sa folosesc id-urile si in tag-uri de tip ? Intrebarea a doua este legata de maniera in care ar fi mai usor sa-ti adresez intrebari. Cum e de preferat, sa o fac aici pe KZbin sau pe alte medii de chat? Multumesc mult de tot pentru tot ce ne oferi si pentru maniera in care o faci!

[@ViorelMocanu]

1. Poți folosi ID-uri pe orice element din DOM, dar nu e recomandat să le folosești decât pentru hook-uri rapide de JavaScript (cu document.getElementById) și alte edge case-uri mai speciale. Dacă vrei doar pentru styling în CSS, folosește exclusiv clase. Și ai grijă că nu poți folosi același id="abc" pe 2 elemente dintr-o pagină, doar pe unul singur (dacă vrei să respecți standardele). 2. E OK pe KZbin, dar sunt ceva mai activ pe Discord: discord.com/invite/UpnAutz (unde ai canale dedicate pentru fiecare tip de întrebare pe care o ai - spre exemplu #1 ar intra în canalul #💻-development ) sau pe email.

[@petricarotaru8210]

Multumesc mult /PetricaRegele/poeziipreferate

[@ViorelMocanu]

Excelent, Petrică! Am doar două sugestii: în primul rând, pune un spațiu înainte de autorul poeziilor ca să nu apară „legat” fraza „deMihai Eminescu” (deci un spațiu în plus înainte de strong), iar pe viitor validează-ți HTML-ul scris pe validator.w3.org/nu/#file (uploadând direct fișierul HTML acolo). În cazul acestui fișier n-ai nicio eroare, felicitări! :)

[@lauralauraas7583]

lLa mine merge sa pun iconitele pt fiecae poezie.De unte se copiaza codul pt svg?

[@ViorelMocanu]

Sper c-ai reușit să rezolvi între timp... :)

[@alinadriananicai9395]

Salut. Am si eu o intrebare. Cat de realist este ca o firma sa te angajeze doar pe baza cursurilor facute in timpul liber, fara studii superioare in domeniul IT?

[@ViorelMocanu]

E foarte realist, dacă ai un portofoliu făcut în parametrii descriși de mine aici: kzbin.info/www/bejne/d2OceYh5q6eYa7M - despre oportunități din astea e întreg canalul meu, cumva. :) Și îți spun din experiență, că peste jumătate din oamenii pe care i-am angajat de-a lungul vremii eu personal nu au avut studii de specialitate, doar portofoliu și dorință maximă de a învăța, cu atitudine pozitivă și deschidere spre tehnologiile momentului. Ce-i drept, acum în timpul acestei crize despre care nu vorbește mai nimeni există ceva mai puține job-uri entry level (am vorbit despre asta chiar în ultimul live de pe canal), dar asta nu-nseamnă că e imposibil, doar mai greu. Iar perioada asta de „secetă” va trece prin iarnă, estimez eu, în funcție și de cum merge războiul și piața financiară...

[@alinadriananicai9395]

@@ViorelMocanu mai pun o intrebare: Exista posibilitatea de job full remote in zona entry level? Ma refer, eu sunt din Resita si gasesc o pozitie deschisa in Iasi. Se poate doar remote sau pentru cei la inceput de cariera sau angajatorii prefera programul hybrid?

[@ViorelMocanu]

@@alinadriananicai9395 Problema cu full remote entry level e că nu ai pe cineva în cameră cu tine de experiența căruia să profiți când te blochezi pe undeva (și la început te blochezi des, de mai multe ori pe zi uneori). Sigur, o companie care vrea să țină angajații full remote poate institui un buddy system prin care să ai tot timpul pe cineva gata să te ajute pe Slack sau Teams (prin chat sau call-uri scurte cu share screen și pair programming) dar nu e tocmai același lucru. E mai greu să te integrezi în echipă și înveți mai încet așa. Companiile sunt conștiente de asta și din cauza asta, job-urile full remote pentru începători sunt mult mai puține decât job-urile full remote pentru oameni cu mai multă experiență, care pot fi parțial sau integral independenți în timpul productiv de coding. Hybrid e un compromis bun pentru că-ți dă ocazia să ai majoritatea zilelor remote și o parte din zile să profiți de beneficiile de care-am zis mai sus în care ești în aceeași cameră cu echipa și codați împreună. Și hybrid sunt ceva mai multe job-uri entry level. Dar proporția e clar înclinată spre entry level la birou, procentual vorbind.

[@alinadriananicai9395]

@@ViorelMocanu iti multumesc pentru raspunsuri. Ar trebui sa pui undeva mesajele astea pinned, pentru ca sunt de mare ajutor. Inca o data, multumesc!

[@ViorelMocanu]

@@alinadriananicai9395 cu multă plăcere! :) Dacă mai ai nevoie de ajutor când ajungi la partea concretă de codat, te aștept și pe Discord, unde nu sunt doar eu care să-ți răspundă la întrebări, ci o întreagă comunitate. :) discord.com/invite/UpnAutz

[@hpq1239]

Exista și explicația 😮

[@ViorelMocanu]

La ce aplicație te referi exact? :)

[@ionnutz028]

Link catre noul repository pentru tema: IonutRicardo/home-work-3

[@ViorelMocanu]

Ți-a ieșit, bravo!

[@florinpana67]

Aici am incercat sa rezolv si tema, intr-o maniera ce mi s-a parut logica dar cine stie! Poate dupa ce aruncati si voi un ochi pe ea (daca aveti timp :)) imi spuneti cum era mai bine sa procedez. Tema poate fi descarcata de pe: DerzelasFlo/html-lectia-02.git

[@ViorelMocanu]

Arată foarte bine fișierul pentru doar a doua ta încercare de a face pagini în HTML! Bravo! Mi-a plăcut atenția la detalii cu italicul pe link-urile de „salt” și săgețile. Ce-ai greșit: nu ai închis prima ancoră (de aici: github.com/DerzelasFlo/html-lectia-02/blob/main/index.html#L8 ), ai pus simbolul „>” direct la navigarea de sus (ideal ar fi fost să pui un spațiu și un » spre exemplu), și n-ai închis H2-ul de aici: github.com/DerzelasFlo/html-lectia-02/blob/main/index.html#L116 - repară-le și o să fie bine! :)

[@Rafa-ko4jl]

Salut am facut si eu tema : rafaant30/rafa1312.git