Tutorial HTML pentru începători | Tutorial Web Development de la 0
ฝัง
- เผยแพร่เมื่อ 19 เม.ย. 2024
- Dacă vrei să devii web developer în viitor, sau ești interesat de web development în general, ce trebuie să știi este că HTML reprezintă unul din pilonii de bază când vine vorba de web development. Dacă ești începător și vrei să înveți cum să-ți faci propriul website, în acest curs vei învăța tot ceea ce ai nevoie să știi legat de HTML pentru a deveni un web developer și a-ți crea singur propriile website-uri.
Acesta este primul episod dintr-un tutorial de web development de la 0.
🧑💻 /* Învață programare GRATIS */ 👇
💻 Web Development - bit.ly/3C10LSR
💻 Tutorial C# începători - bit.ly/3UvfpbU
💻Tutorial Java începători - bit.ly/3xHxxFW
💻Coding Challenges - bit.ly/3R2Lmp9
-----------------------------------------------------------------------------------
🔥🔥/* CURSURI DE PROGRAMARE RECOMANDATE */🧑💻🧑💻
📌 Web Development - bit.ly/3J5p0Dj
📌 Curs Complet Reactjs - bit.ly/3HplC4F
📌 Curs Complet Nodejs - bit.ly/3QYN3Wa
📌 Java Masterclass - bit.ly/3J5XZQ7
📌 Game Development cu Unity - bit.ly/3kwmjAh
📌 C# Masterclass - bit.ly/3Hrq7fp
📌 Curs Complet Python - bit.ly/3j3GRQb
📌 Curs Complet C++ - bit.ly/3iWh78z
-----------------------------------------------------------------------------------
📘 /* CĂRȚI RECOMANDATE */ 👇
📖 Clean Code - Robert C Martin - bit.ly/3DQy2Bc
📖 Clean Architecture - Robert C Martin - bit.ly/3Tsug5Z
📖 Head First Design Patterns - Elisabeth Freeman - bit.ly/3qU4lHW
📖 The Art of Unit Testing - Roy Osherove - bit.ly/3fYJot1
📖 Oracle Certified Associate Java SE 8 Programmer - bit.ly/3BvWghD
📖 Head First JavaScript - Eric Freeman - bit.ly/3jz9xku
📖 Head First Java - Kathy Sierra - bit.ly/3I0iKMg
-----------------------------------------------------------------------------------
🤝 /* DONAȚII */
✅ paypal.me/devfactory
✅ www.buymeacoffee.com/devfactory
✅ revolut.me/bogdanzefj
-----------------------------------------------------------------------------------
🔗 /* LINK-URI UTILE */
▶ developmentfactory.ro
▶ GitHub - github.com/devfact
▶ Facebook - / devfact
▶ Instagram / developmentfactory
▶ Discord / discord
▶ Descarcă Auto Price din Play Store - bit.ly/2GCUVJK
▶ Contact - contact@developmentfactory.ro
00:00 - Introducere
06:20 - Ce tool-uri ai nevoie pentru a urma cursul
7:11 - Instalare tool-uri
11:49 - Crearea fișierelor HTML
13:06 - Devtools
14:40 - Structura unei pagini web
19:00 - Titluri
20:57 - Paragrafe
21:33 - Emmet Abbreviations
23:56 - Extensia Prettier
25:10 - Comentarii
26:33 - Font Weights
27:48 - Liste
29:13 - Spatii și linii de separare
31:14 - Atribute
35:14 - Butoane
37:24 - Input
41:25 - Textarea
42:58 - Div
43:53 - Span
45:40 - Tabele
48:50 - LiveServer
51:30 - Tipuri de input
52:56 - Header și nav
54:58 - Footer
56:25 - Embed
58:02 - Iframe
1:00:23 - meta tag-uri
1:03:07 - Adăugare fișiere Javascript în HTML
1:04:52 - Adăugare fișiere CSS în HTML\
1:06:00 - CSS direct în HTML
1:07:11 - Javascript direct în HTML
1:08:13 - Generare HTML automat
1:09:17 - Legături între pagini
1:14:14 - Încheiere
Un tutorial mai bun decat un curs HTML cumparat!! Respect
M-ai ajutat sa invat html la 13 ani, singurul tutorial bun.
un tutorial care l-am urmarit pana la sfarsit,perfect,sper sa urmeze si urmatoarele cat mai curand---Succes!
Desigur, se lucrează la urmatoarele :)
Un tutorial mai bun decat un curs HTML cumparat!!
In sfârșit am înțeles si eu ceva din html, Multumesc frumos pentru videoclip,
In sfarsit am gasit un tutorial care ma ajutat enorm!!! Va multumesc mult🙏❤️🙏
Am rămas plăcut surprinsă de efortul depus de dumneavoastră. M-ați ajutat enorm vă mulțumesc.
Multumesc frumos pentru acest curs bine structurat, care e si gratuit de asemenea! Am urmarit si alte tutoriale pe youtube, dar ca acesta nu-i niciunul. Felicitari, pentru tot ceea ce faceti!
Un tutorial foarte foarte bine explicat! Foarte de folos. Multumesc!
Multumesc frumos pentru curs și pentru informația gratis, de valoare, pe care ne-o oferi! 🤝
Foarte reusit tutorialul! E foarte util chiar si pentru cei care stiu cate ceva despre web depelopment.Spor in continuare!
Foarte bun. Fara repetitii inutile, direct la subiect și cu oprire acolo unde trebuie. Mulțumesc.
More than words… top informațiile și clare . Mulțumesc frumos 🖤🔥
Multumesc frumos pentru un tutorial explicit de calitate !!!
Mulțumesc pentru ajutorul oferit!!!
Bogdan, mersi. Am înțeles mult mai bine acum decât de pe cursuri cumpărate! ! Mersi!
Mă bucur că ți-a fost de ajutor! 🤝
Foarte bun tutorialul, bine explicat. Bravo!
Extrem de bun, multumesc tare si multa bafta!
Foarte explicit materialul!
Am inteles si eu cate ceva care lucrez in domeniul acoperisului!
Superba prezentare! Thanks:)
Am învãțat cred cã mai mult decât dacã faceam cursuri...binenteles ca pan la sfarsitul videoului nu am mai retinut decât semne,dot si slash-uri...dar per total cel mai educativ video!Felicitari pt toata munca depusa în folosul nostru!👏🤝
Foarte util si bine explicat! Multumim!
Un tutorial urmărit cu drag , mulțumesc pentru munca depusă 🤗
Extrem de util! Multumim mult!! ❤
Mulțumesc pentru aces video! Super fain și clar. Acum ma bag la CSS 🙂
Spor la treaba! 🙂
Foarte bine explicat! Nici nu stiu cand a trecut o ora!
GENIAL! Felicitări!
Esti genial! Iti multumesc din suflet pentru ce faci! 🤗
Foarte tare! Am înțeles perfect!
Super ,chiar e de ajutor👍
Esti genial!🥳
Îți mulțumim mult pentru explicații.
Îți urez succes, canalul tău chiar merită mai mulți urmăritori
Mulțumesc, apreciez!
Mulțumesc mult pentru ajutor ,apreciez ❤❤
Mai ajutat SA invat html ,css si JavaScript la 11 Ani, MULTUMESC!
Mulțumesc pentru videoclip :)
Mersi pentru tutorial ! :D
Multumesc mult!❤
Super bun tutorialul, am urmărit ceva asemănătoare in engleză la cineva, doar ca lucra cu notepad, la tine e deja un alt nivel cu programele pe care le folosești!
Mă bucur că ți-a fost de ajutor! 🤝
Un tutorial foarte bun, urmariti dupa el si tutorialul CSS, exersati o saptamana pe ambele tutoriale, urmariti si un tutorial pt si mai exersati inca o saptamana si apoi sunteti pregatiti pt tutorialul JS.
Multumim!
Ce e ?
@@slavuncik90 th-cam.com/video/Y6DwspK_wnM/w-d-xo.html
cel mai bun tutorial pe care l am vazut
Mersi!
Foarte frumos explicat, ai castigat un nou subscriber ! Multumesc pentru munca depusa !
esti prea tare omule
am invatat multe de aici
Foarte frumos!
Super!Felicitări!
Magnific.Respect pentru ceea ce faci🙏
Mersi mult, Ionuț! 🙏
Mulțumesc pentru prezentarea făcuta , pentru cat de bine este structurata si prezentată informația dar si pentru profesionalismul de care ai dat dovada in punctarea elementelor subsidiare .O treaba excelenta, si de bun augur si iti doresc cat mai multe tutoriale in romana despre formarea profesionala in programare.Bravo tie si bafta in continuare.Nu vei duce lisa de urmaritori, pentru ca , peste tot, caliatea se cauta si se apreciaza.
Mersi mult și eu, Remus, apreciez!
Foarte bun tutorialul!
Mulțumim!
Multumesc!
@Development Factory în primul rând mă bucur să văd încercări destul de serioase de a educa oamenii în limba română. În cel de al doilea rând aș vrea să își atrag atenția asupra unui aspect destul de supărător pentru urechile mele:
Pe viitor dacă vrei să mai creezi asemenea conținut încearcă să folosești cât mai puțin "romgleza" spre exemplu în loc de cuvântul "tag" eu aș fi folosit "eticheta", bineînțeles cu explicațiile de rigoare, spre exemplu că în limba Engleză se traduce în "tag" și nu în "label".
Îmi cer scuze dacă te-am supărat cu acest comentariu dar cred că este important să primești o recenzie corectă și realistă. Deci încă odată nu zic nimic de calitatea informației (drept dovadă am apăsat butonul "Apreciez") ci doar despre limbajul folosit.
Numai bine!
Salut, nu am cum să mă supăr când primesc feedback constructiv, îți mulțumesc pentru asta. Încerc constant să traduc pe cât posibil unii termeni pe care îi folosesc, dar nu întotdeauna îmi iese. Terminologia de software development are o bază foarte solidă în limba engleză și de multe ori simt că traducerea unor termeni în limba română nu mă duc cu gândul la ceea ce ar trebui, parcă devin desprinși din context și expresiile își pierd sensul. Sunt conștient de asta și încerc să reformulez constant. Merci încă o dată pentru feedback, chiar apreciez!
foarte fain explicat
Bro deci te iubeeeeesc cel mai taree🎉🎉🎉❤❤❤❤❤❤❤
Ești super tare ❤️
Un tutorial foarte bun 😊
Esti cel mai bun!
Bravo! Bine explicat, mi-a placut.
Mai puteau fi date niste detalii relevante pe la: poze, tabele, span, div etc.
Niciun curs nu e perfect dar e un pas mare inainte.
M-am abonat.
Mersi de feedback!
Salut, am parcurs foarte putin din tutorial si deja imi mai doresc sa vad altele! chiar simt ca ma ajuta ceea ce prezinti si sper sa mai faci alte tutoriale, mersi!
Genial 👍
Multumim pt curs
Cu plăcere, sper că ți-a fost de ajutor.
Aproape l-am terminat foarte scurt si concis, exact ce cautam.
Multumesc pentru acest curs. As dori sa te intreb cum devin click-abile About, Home, Contact ? Cu stima, CMG
You are the best! Good job
Mersi!
super tare video-ul!
sper sa faci si cu javascript cat de curand
Cu siguranță.
me too
super tutorial!!
Mulțumesc Bogdane
Cu plăcere! 🙂
Mersi mult...
De fapt, html il stiu... css la fel,
Am vrut sa incep cu java script si deodata ne-ai sugerat sa privim html si css mai intai...
Asta si am inceput sa fac, insa dupa 30 minute cam am inceput sa inchid ochii putin.
Sper sa privesc pana la urma, iar apoi sa trec la css, ca prin urmare sa incep a face cunostinta si cu java script.
Vreau sa-ti multumesc enorm pentru munca depusa! Esti foarte bravo! Iti urez succes pe viitor si sa mai lansezi noi tutoriale...
Mersi mult, spor la treabă dacă ești pus pe învățat!
@@DevelopmentFactory mersi... nu's prea pus, dar o sa incerc, poate cumva o sa incep...
Multumesc enorm pentru tot, chiar am inteles in proportie de 100% tot ceea ce ai prezentat :)
Mă bucur că ți-a fost de folos și că ai reușit să înveți!
Salut! Multumim pentru tutorial. Foarte ok explicat si foarte bine structurat. O mica problema am, la care nu gasesc o solutie: prettier tot adauga / la tagurile care nu au nevoie. :D
salut, ești sigur că e de la prettier?
@@DevelopmentFactory aparent da. Am citit ca prettier face asta si am lasat formatarea standard de la vscode.
#Cool bro!!
Foarte bine explicat. Aprecieri ! As vrea să știu care ar fi diferența dintre tag-ul și tag-ul dacă ea există. Mulțumesc.
Desi ambele apar ca bold in rezultatul randat de browser, strong are o alta conotatie. Il folosesti atunci cand vrei sa scoti ceva in evidenta, o expresie sau un cuvant care are o anume importanta. Asta va avea un impact asupra modului in care o aplicatie de interpretare a site-ului folosita de oamenii orbi de exemplu, va citi o expresie care contine . are doar efect vizual de bold asupra textului, nimic mai mult.
gracias! :)
Felicitări! Foarte tare tutorialul! Am o întrebare totuși...ca sa editezi un site care nu e al tau iti trebuie permisiune sau ceva....sau poti pur si simplu sa te apuci dai la developer tools si sa îl editezi?
Poti sa editezi linistit orice site vrei. Nu vei edita decat o copie pe care o ai in momentul ala, nu site-ul in sine. Adica daca dai refresh, modificarile tale vor disparea.
E destul de neplacut totusi sa faci asta in conditiile in care majoritatea site-urilor sau aplicatiilor web au codul obfuscat.
Salut Bogdan! Minutul 25:10 unde intervine Prettier in VSC, e posibil sa intervina Prettier si in pagina web sau putem modifica textul (cum se vede) in pagina web doar cu CSS? Multumesc anticipat! Keep up the good work, you're doing it really great!
Salut. Prettier e doar să-ți formateze codul, nu să facă styling-ul paginilor, asta poți face doar cu CSS.
Un tutorial foarte bun pentru incepatori si foarte bine explicat. Ai mai castigat un subscriber. Ce tooluri folosesti pentru editarea video si a suntetului? Mersi mult!
Mersi mult, apreciez și mă bucur că ți-a fost de folos. Folosesc Davinci Resolve pentru edit.
Am învãțat cred cã mai mult decât dacã faceam cursuri...binenteles ca pan la sfarsitul videoului nu am mai retinut decât semne,dot si slash-uri...dar per total cel mai educativ video!Felicitari pt toata munca depusa in folosul nostru!👏👏🤝
top
Mulțumesc mult!
Am umplut 20 de pagini cu ce ai explicat tu aici!
Ești minunat!
Urmează să-mi cumpăr desktop sau laptop pentru proba practică!
Ce crezi că ar fi mai indicat?
Depinde mai mult ce preferi tu. Formatul nu e asa important. Mai ales daca vrei sa faci web development, chiar si laptopurile mai ieftine pot duce cu usurinta tool-urile necesare.
Vreau un video despre extensiile vs code, E foarte profesional, compact, merită să-l învăț.
Despre extensiile pe care le-am folosit în tutorial? Sau ce extensii?
th-cam.com/video/LdF2RcelRg0/w-d-xo.html&ab_channel=TraversyMedia
Well done
Mersi Mihai!
Ai printre cele mai bune tutoriale in limba romana despre html, css și JavaScript. Le-am vizionat pe toate trei, cu toate ca nu sunt la început dar sunt cea ce trebuie pentru un începător. Dacă se poate si ceva mai avansat ?
Mersi mult, apreciez. Dacă o să existe cerere pe viitor o să facem și mai avansate.
👍👍👍🔝🆙↔️Css↔️javascript🔥
Cum pot schimba adresa pentru a putea acesa websiteul si altii
salutari, nu reusesc sa deschid un folder....ma poti ajuta te rog?
dar mai am o intrebare daca nu sti limba engleza este posibil sa ajungi programator ?
Buna seara !
Am tot vazut pe TH-cam ca se pot face cursuri pentru a devenii I.T.
Eu stiam ca daca doreste cineva sa devina I.T. trebuie sa faca facultatea de specialitate.
Insa intrebarea este ,cursurile acelea de 5 luni sunt pe bune sunt recunoacute ,ajuta la ceva ?
Salut. Nu ai nevoie de facultate în domeniu. Sigur că ajută cursurile, dar 90% depinde de tine.
salut daca se poate sa imi raspunzi cand ai scris atunci ,cum celalat ul cu hastag s a dus in jos,imi trebuie rezolvare sau poate sunt eu prea pampalau.Multumesc!
html folosește tag-uri, hashtag e ăsta: #. Nu s-a dus în jos de la sine, am apăsat eu enter. Scrii "ul", apeși tab pentru autocomplete, apoi apeși enter.
@@DevelopmentFactory ok mulțumesc mult
salutare, foarte bun tutorialul, incerc sa invat cate ceva, crezi ca la 46 de ani mai sunt sanse de invatat si un loc in sfera development? Sa inteleg ca trebuie tinut minte toate tag-urile adica tot dictionarul html?
am incercat sa reproduc ce se face in video adica sa scriu codurile fara a viziona si nu prea imi iese, de asta intreb daca trebuie html invatat pe de rost?
Salut, nu trebuie să înveți nimic pe din afară, o să-ți vină natural după o vreme de lucrat cu ele. Renunță să mai încerci să memorezi orice ține de cod și programare.
Loc este, e un deficit enorm de oameni pe piață care pare că se înrăutățește de la an la an. Depinde doar de tine cum îți faci "șansele". Succes!
@@DevelopmentFactory Multumesc pentru incurajare. Voi continua sa exersez practic, gen sa imi structurez o tema pa care sa o rezolv prin cod. Pentru structurarea temei/proiect ar trebui sa invat si arhitectura informationala?
nu, învață să scrii cod întâi, arhitectura e un subiect de care o să ai nevoie la un nivel de senioritate mai ridicat, nu la nivel de entry level. Acum depinde la ce te referi prin asta, pentru că și la nivel de entry level trebuie sa poți face totuși diferența între backend și frontend de exemplu.
@@DevelopmentFactory ok, voi invata sa scriu cod intai.
Stii un site de unde pot invata exercitii/teme usoare adica as vrea ca eu sa le refac de 3, 4 ori pana aprofundez cum trebuie folosit codul , unde si cum il scriu? adica sa fac mai multa practica.
MULTUMESC si pentru faptul ca aloci timp si pentru mine sa-mi raspunzi, multa sanatate si succes iti doresc.
Salut! Știu că nu postez unde trebuie sau că întreb prea devreme. Pt Javascript este nevoie să știu algoritmică,daca da,de unde pot învăța,nu am fost mate-info in liceu?
Ti-am raspuns in celalalt comment. Nu are importanta ce background ai, atata timp cat esti capabil sa deprinzi skill-urile tehnice.
sau aici ai doar baza si cu baza asta poti doar sa te ridici ?
foarte bun si folositor , ce tema folosesti la visual code ? imi place :D
Este github theme dark dimmed :)
😂
33:24
Cum ai copiat iconita în folder?
P.s imi place cum explici, subscribed ✅
Poți să-i dai fie copy paste direct în folderul proiectului în windows exporer, fie faci drag and drop în VSCode.
@@DevelopmentFactory mulțumesc! 😊
Salut,am o nelamurire.Cum ai facut sa intrii in paralel pe google sa vezi schimbarile site ului in timp real?Multumesc!
Huh? Pe Google? Daca te referi la faptul ca schimbările apar instantaneu in Chrome e datorat lui live server, o extensie de vs code despre care zic exact la inceput ca ai nevoie de ea.
Salut, vreau sa incep cu HTML si CSS si m am gandit ca o perioada de o saptamana/2 sa practic foarte mult basic urile ca apoi sa trec la mini projects. Crezi ca e ok ceea ce vreau sa fac? , sau imi poti oferi un sfat mai bun :) ?
Da, e exact abordarea corectă, spor la treabă! 👍
salut, pe ce tastatura ai facut assets ? mersi
Folosesc Logitech MX Keys.
Dupa ce am terminat de vizionat acest tutorial ar trebui sa ma duc sa ma uit la cel de CSS s-au ar trebui să mai știu ceva(acest video fiind doar o introducere)? Mulțumesc!
Daca esti confortabil cu lucrurile explicate in video-ul asta, poti trece mai departe la CSS.
Buna. Nu stiu de ce nu merge sa inserez o imagine in Visual Studio Code. Nu imi apare in pagine 🥺
Probabil nu ai pus path-ul corect în atributul "src".
nu imi merge cand ii dau alt+shift+f, imi apare ca un semn
Salut!Foarte bine făcut tutoriatul dar eu tot nu am înțeles ceva…cum pot CENTRA o poza pe site?
Pentru asta trebuie sa adaugi ceva styling. Vezi in cursul de CSS :)
@@DevelopmentFactory mulțumesc mult!!!
Salutare. am dat save la clip youtube am pus chiar tutorialul asta, apare dar la apasarea butonului play da eroare. ce fac gresit? la fel si cu style.css nu apare dupa salvare in browser, in dev tools...nici aici nu stiu ce fac gresit?
Salut! Nu stiu ce să-ți zic in legatura cu problema clipului de pe youtube. Mai incearca si de pe alt browser eventual. Daca style.css nu iti apate in pagina, verifica daca l-ai referentiat in fisierul html.
Foarte straniu, eu in genere de pe TV privesc si e totul ok.
salut, am si eu o intrebare, se merita sa ma apuc de programare daca nu am diploma de bacalaureat? ma angajeaza cineva ? si daca da in ce domeniu in it ar fi mai bine sa ma angajez?
Salut. Măi nu știu să-ți răspund sigur la întrebarea asta, dar tot apare din când în când așa că o să mă ocup să obțin niște informații. Personal cred că ți-ar fi foarte greu dacă nu ai experiență anterioară reală, dar o să întreb oameni de prin recrutare și fac un video pe tema asta.
Nu integ ceva la 11.51 cum si de unde s-a luat HTML_tutorial? Că mie mi se deschide la un folder din laptop si nustiu ce aleg . Mersi
am zis înainte să dai click pe "Open Folder", butonul verde din stânga și să selectezi un oricare folder gol de la tine de pe pc. Locația sau numele lui nu contează. Toate fișierele pe care le vei creea și modifica prin VS Code vor fi în folderul pe care l-ai selectat la pasul ăsta.