🔴LIVE - Workshop 1 - Mini-tutorial HTML+CSS - Construim de la zero o pagină web pentru tine
ฝัง
- เผยแพร่เมื่อ 15 มิ.ย. 2024
- Al treilea live stream pe care-l organizez pentru voi este un workshop în care scoatem IDE-ul de la naftalină. Luăm de la zero procesul de creare a unei pagini, de la brainstorming la design, apoi la HTML și CSS (având grijă să folosim elemente de accesibilitate și SEO) și ajungând la deploy-ul undeva live ca s-o vadă toată lumea. Pas cu pas, facem o pagină web de la zero. ⬇️⬇️⬇️ Vezi detalii și informații 🔥 importante mai jos!
----------
Salutare și bine ai venit! Vrei să ai o carieră în IT 💻, sau să ți-o îmbunătățești? Ai ajuns unde trebuie. Live-ul de azi e un workshop introductiv și foarte succint în arta Web Design-ului și a Front End Development-ului.
----------
Navighează mai simplu în video:
0:00 Introducere
4:33 Despre ce vorbim astăzi 3h? De ce ai nevoie ca să faci și tu?
15:35 Structura HTML de bază
19:07 Tag-urile importante din HEAD (o parte din ele)
40:27 Tag-urile de structură din BODY
1:25:02 Cum scriem CSS-ul acestui site?
2:11:57 Mobile First Responsive Web Design în CSS
2:37:31 Cum deployem pagina noastră live folosind GitHub Pages?
2:50:57 (mai multe) întrebări și răspunsuri
----------
MATERIALE
==========
Găsești proiectul la care am lucrat în acest live la:
⭐ link-in-bio-umber.vercel.app/ - varianta deployată
⭐ github.com/ViorelMocanu/LinkI... - sursele
⭐⭐⭐⭐⭐
O listă completă (video) de resurse de care ai nevoie ca să te apuci să înveți HTML și CSS la nivel profesional: • HTML și CSS: de unde î...
⭐⭐⭐⭐⭐
💾 Codul proietului construit live este pe GitHub: github.com/ViorelMocanu/LinkI...
🎯 Articolul în care am listat TOATE LINK-URILE din acest video: bit.ly/vio-html-css
💡 Video-ul despre cărți de Design Grafic: • 15 cărți pe care TREBU...
💡 Video-ul despre cărți de UX: • 15 cărți pe care TREBU...
💡 Video-ul despre cărți de Front End Development: • 15 cărți pe care TREBU...
🧑🤝🧑 Grupul de Facebook nou creat pe care putem discuta despre domeniu și unde poți găsi răspunsuri la întrebări - nicio întrebare nu e greșită (în Română): / carierait
🔺 Cursul gratuit de Web Development (în Română, materiale în Engleză): bit.ly/vio-digital
==========
Mi-am făcut acest canal pentru că vreau să fac mediul digital mai bun. Cred că pot să fac asta ghidând oamenii cu mai puțină experiență să descopere secretele industriei, iar pe cei care lucrează deja în IT să devină profesioniști mai buni. În plus, vreau să dezbat cu voi orice subiect legat de Internet, mediul digital, tehnologiile și oamenii din spate.
Dacă vrei să discutăm despre ce presupune să fii profesionist digital, adică: web designer, graphic designer, interface designer, user experience designer, front end developer, back end developer, full stack developer, digital marketer, performance marketer, SEO specialist, QA, AQA, growth hacker, team leader, manager și așa mai departe - și s-o faci bine - dă-mi de știre!
==========
🎦 Înscrie-te la canalul meu pentru a primi toate filmele viitoare, care te pot ajuta să-ți găsești drumul în IT » th-cam.com/users/ViorelMocan... « NU UITA să dai click și pe clopoțel: 🔔🔔🔔
🛑 Ce conținut vrei să mai vezi de la mine? Scrie-mi exact aici: fdm33xvhgdz.typeform.com/to/g...
💬 Aștept comentarii, întrebări și sugestii fie aici pe TH-cam, fie pe site-ul meu: www.viorelmocanu.ro/blog/
💲 Dacă te-a ajutat conținutul meu, îmi poți „cumpăra o cafea” virtuală aici: www.buymeacoff.ee/viorel
-------------
Mă găsești și pe:
» Profil LinkedIn: / viorelmocanu
» Profil Twitter: / viorelmocanu
» 🧑🏻🤝🧑🏽 Comunitate Facebook: / carierait
» 🧑🏻🤝🧑🏽 Comunitate Discord: / discord (🆕)
» 📰 Newsletter pentru noutăți și articole de blog: viorelmocanu.ck.page/newsletter
#CarieraInIT #Workshop #CursDeFrontEnd #github #proiect #project #linkinbio #frontenddevelopment #frontend #tutorial #live #curs #html #css #incepatori #programare #viorelmocanu #Romania #romana #România
![What's stopping you from working in IT? [and how to break through the barriers]](http://i.ytimg.com/vi/9i4vYj9kh0k/mqdefault.jpg)
![บุกร้านไอศกรีม VJ วุ้นเส้น !!!! [ดูคลิปเต็มหน้าช่อง] #Short | PANG ORNHIRA](http://i.ytimg.com/vi/g549nEhKZdc/mqdefault.jpg)
Cum ți s-a părut acest prim live cu workshop de coding?
super tare video-ul . Multumim pentru ceea ce faceti. Eu unul chiar as vrea sa invat programare. Chiar as dori sa mai dezvaluiti din tainele programarii.
@@0741048867 Video-ul pe care-l voi publica diseară sau mâine e primul din seria „programării” și va prezenta o listă de cărți de care ai nevoie ca să devii un programator bun, plus niște sfaturi în afara cărților. Apoi voi mai face câteva pe teme conexe. :) Mulțumesc pentru comentariu!
Super util!
@@ClaudiuOvidiuStoica Mul'umesc frumos! Ce altceva ai vrea să vezi de la mine?
Asadar - se intelege foarte bine, totul este foarte clar si ai talent pentru asta (dictie buna, timbru placut, rabdare - sunt cadru didactic, stiu ce zic). Trei ore in care am invatat mai multe de aici, decat in cateva saptamani de la tot felul de ciudati (piata educationala in romaneste din domeniu e... "bizara", ca sa nu spun mai multe). Am lucrat in acelasi timp cu video-ul si bineinteles am mai schimbat pe alocuri, sa vad cum arata, cum se modifica etc. Canalul tau m-a facut sa iau o decizie, si anume mi-am dat seama ca imi plac lucrurile astea pe care tu le faci / prezinti si ca as vrea sa urmez si eu calea (eram intre doua directii - stiu statistica, ceva matematica in general, programare imperativa, ma gandeam la ceva inspre data science/analysis/ML etc, mi se parea ca am skill-uri si cunostinte pe care le "pierd" daca nu merg in directia aia, care de fapt, daca e sa-mi recunosc mie, nu prea imi place). Am din pacate o varsta si din fericire un job stabil, sper sa ajung intr-o zi sa fac freelance / remote, ar fi visul meu sa traiesc la un moment dat din asta...
Cred ca esti singurul pe care il pot asculta. Pacat ca nu am prins live momentul, dar ma bucur ca il pot vedea acum. Abea astept toate cursurile tale pe youtube!
Mă bucur s-aud că e un content ușor de urmărit pentru tine. :) Cursurile vin ASAP.
Stati aproape de Viorel stie ce vorbeste si vorbeste bine de tot. Nice job.
Mulțumesc frumos! :)
Cel mai bun material de urmarit pe TH-cam in domeniu, usor de inteles si cu foarte multa informatie, bineinteles gratuita (noul IGDLCC of IT). Respect and keep it up
Mulțumesc frumos! Ce fel de conținut ai vrea să mai vezi de la mine?
Felicitari si multumim!
Cu multă plăcere! :)
Foarte bun😀
Mulțumesc mult, apreciez! Ce alte video-uri ai vrea să mai vezi de la mine?
Cred ca un video referitor la care ar fi ordinea corecta de invatare pentru cei ce vor sa devina full stack dev, un fel de career path ca sa zic asa.
Eu de ex. sunt la inceput si consider video-uri ca al tau foarte instructiv.
Sunt atat de multe infos pe net incat este foarte greu sa le alegi pe cele corecte si complete, cautarea surselor devine mai obositoare decat invatarea in sine😀
@@tinotino1288 Absolut, sunt conștient de ce zici. Dacă începi de aici th-cam.com/video/v2a1Klvl10E/w-d-xo.html și le parcurgi pe toate, apoi continui cu partea de JavaScript (urmează un video cât de curând) și apoi îți alegi un limbaj server side (poate chiar JS pentru NodeJS, dar ideal ar fi să faci și altceva - PHP cu Laravel sau C# cu .NET spre exemplu) și în felul ăsta să-ți finalizezi „turul” prin tehnologiile care sunt baza unui Full Stack.
@@ViorelMocanu Foarte util link-ul,
Multumesc frumos.
@@tinotino1288 My pleasure! :)
Buna din Atena!! as vrea foarte mult dacă poți face un video despre React js
Salut! Despre React propriu-zis n-o să vorbesc foarte curând, însă voi face un live în curând în care compar mai multe framework-uri de JS, dacă ești curios/curioasă.
Felicitari pentru tutoriale de super calitate!!! Cand faci si ceva legat de wordpress, optimizare web core, SEO, modificare theme? Bafta in continuare!
Wordpress? Interesant, n-am nimic pe listă legat de Wordpress, dar o să pun. Legat de optimizare, am deja niște idei în partea a 2-a și a 3-a de Workshop live pe care le găsești la mine pe canal. La fel și cu SEO, deși SEO merită niște video-uri mai lungi. Merci mult și stai pe-aproape, că urmează lucruri interesante! :)
Multumim din suflet pentru ceea ce faci! Imi place foarte mult modul interactiv prin care explici si cel mai important informatiile valoroase acumulate din toata experinta de programator!
Zic si in numele celor care citesc acest mesaj! Multumim pentru tot!! YOU ARE THE BEST
Mă bucur mult că te-am sau v-am putut ajuta, Robert! :) Promit să mă țin de treabă în continuare!
P.S.
Îmi cer scuze c-am uitat să schimb burtiera (textul de sus pe fundal negru), e de live-ul precedent... :(
Aia e ultima problema :)
@@kovereduard637 eh, așa ziceam și eu, dar tot mi-e ciudă că n-am deschis Streamlabs-ul mai devreme, să mă prind.
salut si multumim pentru efort. ca o idee personala,spun ca e destul de greu de urmarit pasii prin care faci ceea ce faci,iar informatiile cu adevarat utile se pierd daca te opresti din ideea expusa la fiecare 5 secunde pentru a raspunde unuia cat va castiga el ca junior,etc,adica raspunzi unor intrebari care nu isi au locul in tema video-ului
De acord cu tine, ritmul suferă datorită răspunsurilor constante pentru chat, însă am mai învățat din asta și în ultimele live-uri m-am mai corectat (practic, am început să răspund în batch-uri, între perioade de „lucru”). Cu toate astea, video-urile curente sunt mai degrabă pentru community building și împărtășirea unui mod de gândire, nu sunt tutoriale sau cursuri propriu-zise. De cursuri m-am apucat într-o altă serie de video-uri recent, sper să fie mai bună abordarea acolo pentru învățare.
Super tare! Informatii de milioane ptr juniori si nu numai. Pe cand si un pair prog?
Merci mult! Interesantă idee cu pair programming. Cum te gândeai exact să se desfășoare?
@@ViorelMocanu Pai in primul rand se poate face un Vote Poll astfel incat urmaritorii tai pot avea de unde alege un topic ( sau de ce nu, probleme de algoritmi de pe la interviuri ?).
VS Code stiu ca are o extensie super tare de live session sau ceva de genu'. Cred ca ar aduce plus valoare si persoanei care face asta cu tine si celor care te urmaresc. Just an idea here :) . Vazusem 2 tipe care au facut un demo de pair programming live pe YT. Daca le mai gasesc iti las linkul aici sau pe LinkedIn.
Spor in toate!
@@oancealex Sună interesant. O să caut soluții. Eu fac pair programming cu colegii mei de la Pentest-Tools.com pe Around, care e o soluție de videoconferințe în care poți face „take over” pe ecranul celui care prezintă, și am citit și de plugin-ul de VSCode de care zici. O să mă gândesc la ceva interesant în liniile astea și vedem ce iese. Merci de idee!
Super fain ceea ce faci! As avea o intrebare...Pentru a afla dimensiunile unui psd, trebuie sa import psd ul in photoshop sau sunt si alte modalitati mai usoare?
Cel mai simplu e să deschizi în Photoshop și să apeși Ctrl + Shift + Alt + S (Save for Web) și să te uiți la dimensiuni. Sau în meniul Image la Image Size. Dacă nu ai Photoshop sau nu vrei să-l folosești, poți descărca gratuit (din câte știu) Adobe Extract și ai aici niște instrucțiuni de folosire: www.credera.com/insights/open-psd-without-photoshop sau poți deschide cu image viewere care „citesc” PSD-uri cum e IrfanView. Dar repet, cel mai simplu e să deschizi în Photoshop... :)
@@ViorelMocanu Mulțumesc
@@claudiuhusaru427 Cu multă plăcere!
Revin cu un mare comment si poate o intrebare.
Am urmarit cu drag tutorialul. Este destul de usor de urmarit, si chiar am invatat una alta. Nu ma asteptam. De cand te-am gasit pe youtube, ma tot interesez de front end, si acum sunt pus pe treaba.
Am facut o mica pagina cum ai facut si tu aici, bineinteles urmad liniile de cod, dar am inteles cam 75% ce fac fiecare, si am putut sa schimb una alta. Ma ajuta foarte mult ca intri in Inspect element, si as vrea daca se poate la tutoriale de genul, sa explici putin mai mult in el. Din cat ai explicat tu, am inceput si eu sa il folosesc si chiar ma ajuta la una alta.
Intrebarea mea acum, exista o solutie simpla sa lipesc titlul mare in dreapta si de mijlocul avatarului si sa se scaleze mereu in functie de marimea paginii ? Am incercat sa caut una alta dar nu ma pricep inca.
As platii bucuros sa vin la un curs in persoana. Vad ca, chiar iti place ceea ce faci, si de la tine sunt multe de invatat. Multumesc de tutorial! Abea astept sa invat mai mult.
Mă bucur mult s-aud că ai reușit să urmărești informațiile din video! Sugerez să încerci să urmărești și seria asta care sper eu că e ceva mai completă în explicații: th-cam.com/play/PLfTqvIG4roBo_EnTnnreeOp-3ySDn7e_l.html
Oricum, am reținut sugestia și pe viitor când mai facem proiecte tehnice o să încerc să fiu cât mai explicit și să explic (pe cât posibil) linie cu linie ce face fiecare.
Merci de gândul bun și spor în tot ce-ți propui!
salutare! este primul clip de acest gen la mn...cum fac sa imi apara si mie cand scriu in visual code, ecranul alb din dreapta ....? in care se ruleaza efectiv...
Deschizi browser-ul cu fișierul HTML deschis în el și apeși tasta Windows + săgeată dreapta, și în stânga selectezi VSCode-ul din ferestrele deschise. Varianta „avansată” e să ai un Live Server deschis, poți instala plugin-ul de VSCode de aici: marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer și să apeși în stânga jos pe Go Live i.imgur.com/fC3DM3y.jpg sau să dai click dreapta pe fișier și Open with Live Server i.imgur.com/wKB7oXq.jpg
Salutare! Crezi ca ai putea uploada undeva melodiile de fundal din videoclipuri, pe cele facute de tine si sa avem acces la ele (link)? Mi se par destul de placute si inspirationale :) Ms!
Merci, le găsești aici: soundcloud.com/viorelmocanu
Salut Viorel! Este ok daca in css folosesc in mare parte valorile in pixeli, cum ar fi margin, padding, line-height, font-size....? Am vazut ca folosesti valoari in em, rem si alte 'unitati de masura' ,nu stiu daca m am exprimat corect.
Ar trebui sa "jonglez" cu aceste valori, sa folosesc mai mult em, rem in loc de pixeli, sau exista un tipar anume, unde si cand trebuie folosite?
Multumesc. O zi productiva!
La început e OK să folosești pixeli fiindcă-s mai ușor de înțeles. O să fac o lecție specială în cursul meu de Front End th-cam.com/play/PLfTqvIG4roBq8YHdt3k6xX89xXkhSY95b.html apropo de unități de măsură și când să le folosești pe fiecare, dar în principiu în proiecte mari, production-ready, e mult mai OK să folosești REM sau EM pentru că dacă schimbi font-size-ul de pe body sau html se schimbă toate font size-urile și dimensiunile elementelor proporțional. Dar pentru proiecte mici fără specificații de usability sau accessibility foarte stricte, e OK și pixeli, deci nu-ți face griji.
@@ViorelMocanu Mulțumesc pentru răspuns 😃
@@claudiuhusaru427 Cu multă plăcere! :)
Buna ziua, ce extensie trebuie instalata in Visual Studio Code pentru a avea HTML? Sau ce alta modalitate exista? Multumesc!
HTML-ul se poate edita din prima în VSCode, n-ai nevoie de nicio extensie. Uite aici un ghid de ce software ai nevoie ca să poți să te apuci de treabă rapid: th-cam.com/video/fX7tt2j8u-o/w-d-xo.html
@@ViorelMocanu multumesc frumos!
😏
Buna, Viorel. Sunt chiar junioara in domeniu si am urmarit un video in care recomanzi o serie de carti. Am reusit sa gasesc: 1.Learning PTP, MYSOL,JS,CSS&HTML5 2.Code complete(2) 3.Clean code 4.JS.The good parts. Care ar fi ordinea corecta de abordat pentru cineva la inceput ? Multumec ! :)
Dacă-mi scrii pe Discord, voi încerca să-ți mai trimit niște cărți în format PDF dacă te interesează mai multe.
Dintre cele menționate de tine, le-aș parcurge fix în ordinea menționată de tine (poate aș pune 4 pe locul 2), însă sfatul meu e să nu te bazezi doar pe cărți. Combină cititul din cărți și practica de acolo cu tutoriale video și scrise pe care le găsești gratis online, spre exemplu aici: bit.ly/vio-digital
Mult spor!
Cum pot sa ma distantez fara sa trec la alta coloana numerotata? Practic, sa prelungesc coloana 7, de exemplu
Salut! Explică-mi exact ce vrei să faci mai în detaliu, te rog. Eventual pune codul într-un CodePen dacă ai cum. Sau scrie-mi pe Discord și arată-mi o imagine.
Salut! Spune-mi te rog de ce imi returneaza in Chrome ceea ce vezi tu la min. 1:10:50 doar in culoarea albastra (inclusiv iconitele colorate)? Mentionez ca pana la aceasta etapa am scris codul identic. Multumesc si multe aprecieri pentru ceea ce faci.
P.S. Daca deschid in Firefox imi arata corect. Dar prefer sa lucrez cu Chrome
Salut, Ciprian! Nu-mi dau seama de ce arată diferit la tine, e datorită Chrome-ului (mai prevalent pe Win11 decât pe Win10). Eu aveam Windows 10 pe vremea când înregistram video-ul ăsta, acum am Windows 11 (la fel ca tine, probabil) și uite cum arată emoji-urile în Chrome: i.imgur.com/DqejakM.jpg - există un workaround dacă vrei neapărat să rezolvi problema: dev.to/inhuofficial/chrome-changed-emojis-in-headings-a-workaround-if-you-want-normal-emojis-again-4n4o dar ei zic că e un bug care se va rezolva în curând și vor reveni emoji-urile la normal.
@@ViorelMocanu Salut! Mulțumesc pentru promptitudine. Este curios ptr că eu am tot W 10. Dar m-am liniștit cu explicația pe care mi-ai dat-o. Am crezut că îmi scapă mie ceva și nu îmi dădeam seama ce. O zi faina sa ai și un an nou așa cum îți dorești!
Și ție la fel, Ciprian! :) Spor la treabă în continuare!
Salut Viorel! Te deranjez cu o intrebare. Te rog, imi poti da un sfat cu privire la rezolvarea unei probleme pentru setarea unei margini in ceea ce priveste continutul dintr un div. De exemplu, am afisat continutul: " 1234567"
Cum pot seta margin-left selectand sfarsitul numarului??
Problema pe care o intampin este ca, continutul este afisat dinamic dintr o baza de date si doresc o pozitionare fixa din partea dreapta a numarului. Cu margin-right, continutul sufera modificari in ceea ce priveste pozitionarea atunci cand modific rezolutia sau cand este afisat continut mai mare de 10/15 caractere.
Multumesc de intelegere.
Salut, Andrei. M-ar ajuta mult să pui codul într-un GitHub sau și mai bine, pe un CodePen, ca să văd exact cum arată și la ce te referi. Sau în cel mai rău caz, fă niște screenshot-uri. Aici nu cred că te va lăsa TH-cam-ul să pui link-uri către GitHub, CodePen sau screenshot-uri, deci te invit pe Discord, unde eu sau oricine altcineva din comunitate te poate ajuta cu un răspuns concret: discord.com/invite/UpnAutz
@@ViorelMocanu Am abordat altfel situatia si am reusit sa rezolv problema. Multumesc inca odata pentru timpul acordat. Spor iti doresc! ;)
@@andrei.c939 La fel și ție, mă bucur c-ai rezolvat!
@@ViorelMocanu Multumesc!
eu nu inteleg care este problema,si am incercat si singur sa refac genul asta de proiect insa background-color de la container nu este full si am observat ca este provocat acest lucru cand pun la imagine float:left; asta este cauza care strica containerul
În general un float left va anula înălțimea elementului pe care pui float pentru părinte - dacă ai neapărată nevoie să folosești float, folosește pentru elementele care trebuie să apară SUB float proprietatea clear: both; ca să eviți problemele de înălțime.
Dacă nu merge, pune-ți codul pe GitHub și dă-mi link către proiect, să văd exact despre ce e vorba.
@@ViorelMocanu am rezolvat deja,multumesc.
@@therealnero820 Felicitări! :)
2:24:00
care browser?
Google Chrome de preferat. www.google.com/chrome/
Văd că la mine, după 1200px nu are efect gridul, pe niciun browser.
Dacă te referi la HTML/CSS static, folosește jsfiddle.net/ sau codepen.io/ ca să testăm să vedem care e problema, și postează link-ul aici fără https și înlocuind punctele cu spații (TH-cam nu te lasă să postezi link-uri dacă nu ești autorul video-ului) sau scrie-mi pe Discord sau pe grupul de Facebook și rezolvăm. :)
@@ViorelMocanu Mă refeream la linkul de pe git. Dar probabil s-au adus modificări și ați scos gridul. Văd că a apărut și al 13-lea link, cred că cel cu e-mail. Mă adaptez din mers :)
@@laurentiudanceanu552 Ah, te referi chiar la link-in-bio-umber.vercel.app/ ? :) Da, au mai fost modificări în live-ul următor.
nu stiu de ce spui ca salariul mediu este de 2000 Euro/luna dupa 10 ani. Am 2 prieteni (buni) care castiga 8000 $/luna(50 $/h) , remote cu Java Script, cu program fulltime nu freelancer dupa 3 ani de experienta.
Faptul că tu ai 2 prieteni care-au reușit să spargă „tavanul de sticlă” cum zic americanii, și să găsească job-uri sau freelance gigs foarte bine plătite nu-nseamnă că industria în general e la nivelul ăla. Eu prin medie mă refer la media aritmetică a tuturor salariilor oamenilor din categoria menționată. Vor exista întotdeauna „outliers” care câștigă mult mai mult sau mult mai puțin...
m ai cam pierdut....
Unde exact? Cu ce te pot ajuta ca să fie mai simplu de înțeles?
@@ViorelMocanu acolo la mobile.am creat pagina dar nu este disponibila pt mobil ,practic nu se vede css-ul .
@@ViorelMocanu ma poti ajuta te rog
@@denisbaicu1218 cu ce?
Acum am primit comment-ul (era marcat ca spam dintr-un motiv care-mi scapă).
Dacă nu se vede CSS-ul înseamnă că nu l-ai referențiat bine în HTML probabil. Încearcă să te uiți la structura de fișiere unde ai proiectul și să definești link-ul către CSS corect.
Dacă nu te descurci, scrie-mi mie sau restului comunității pe Discord: discord.com/invite/UpnAutz și o să te putem ajuta mai rapid.
Proiectul asta e nimic fata de ce ti se cere ca junior front end dev., Daca reusesti sa il faci de la 0, felicitari, sti 1% din minimul necesar ca sa lucrezi in domeniu
Normal, nu am pretins niciodată că e altfel. Vezi că am zeci de live-uri și mai multe proiecte construite în live-uri, cu niveluri diferite de dificultate, și urmează să intru și în lucruri mai complexe curând.