Cum se face un SITE RESPONSIVE cu HTML si CSS | Frontend Development Romana

In acest tutorial, o sa iti arat cum se face un site responsive cu HTML si CSS. Acesta este proiectul final din cursul de HTML si CSS in limba romana pentru incepatori, iar aici o sa punem in practica majoritatea lucrurilor despre care am vorbit in acest curs.
In partea de HTML, o sa folosim elemente precum titluri si paragrafe, link-uri, imagini, liste, div si span, tag-uri de HTML5 si tag-uri meta.
In partea de CSS, o sa vedem cum se folosesc diferiti selectori, proprietatea display, proprietatea position, cum se face un site responsive folosind media query, dar si lucruri noi cum ar fi background de tip gradient, proprietatea float si unitatea de masura rem.
Site conversie din PX in REM: nekocalc.com/px-to-rem-converter
Cod sursa pentru proiect: github.com/devschoolro/link-i...
📺 Videoclipuri recomandate
===================================
👉 Ce este HTML | Cum creezi o pagina WEB: • Tutorial HTML in ROMAN...
👉 Titluri si paragrafe: • Tutorial HTML in ROMAN...
👉 Link-uri in HTML | Legaturi intre pagini WEB: • Tutorial HTML in ROMAN...
👉 Cum adaugi imagini in HTML | Video intr-o pagina WEB: • Tutorial HTML in ROMAN...
👉 Liste in HTML: • Tutorial HTML in ROMAN...
👉 Tabel in HTML | Atributele colspan si rowspan: • Tutorial HTML in ROMAN...
👉 Cum faci un Formular in HTML: • Tutorial HTML in ROMAN...
👉 Elemente inline si block in HTML | Tag-urile div si span: • Tutorial HTML in ROMAN...
👉 Tag-uri de HTML5: • Tutorial HTML in ROMAN...
👉 Meta tag-uri in HTML | Introducere in SEO: • Tutorial HTML in ROMAN...
👉 Ce este CSS si cum se foloseste intr-o pagina WEB: • Tutorial CSS in ROMANA...
👉 Selectori CSS explicati cu exemple | Specificitatea CSS: • Tutorial CSS in ROMANA...
👉 Diferenta dintre padding si margin in CSS: • Tutorial CSS in ROMANA...
👉 Ce este Box Model in CSS: • Tutorial CSS in ROMANA...
👉 Proprietatea display in CSS | inline, block si inline-block: • Tutorial CSS in ROMANA...
👉 Cum se foloseste CSS position | relative, absolute, fixed si sticky: • Tutorial CSS in ROMANA...
👉 Pseudo clase si pseudo elemente in CSS: • Tutorial CSS in ROMANA...
👉 Ce inseamna Responsive Design | Media Query in CSS: • Tutorial CSS in ROMANA...
👉 Culori in CSS | Reprezentarea hexazecimala si functia rgb: • Tutorial CSS in ROMANA...
===================================
🔔 Daca iti place canalul de KZbin te poti abona aici: / @devschoolro
🔥 Vrei sa ajuti acest canal?
===================================
👉 www.buymeacoffee.com/devschoolro
👉 www.revolut.me/mariusoprea95
===================================
💬 Unde ma gasesti
===================================
👉 devschool.ro/
👉 Email: [e-mail]
===================================

[@DevSchoolRo]

Vrei sa vezi cum se face un SITE DE PREZENTARE modern cu HTML si CSS? Vezi video-ul acesta 👉 kzbin.info/www/bejne/hIqriJh_qJiWbJo

[@dragosserea6594]

Minunat! Tot respectul meu pentru tine. Hai cu niste tutoriale java script după, dacă vrei. Orice ar fi să mai postezi, nu contează ce.

[@DevSchoolRo]

Mersi. Da, in plan este un curs de JavaScript pentru incepatori.

[@iosifklmr1299]

Eu te apreciez că iti iei din timp să pui aceste clipuri, mulțumesc mult și te susțin în continuare

[@DevSchoolRo]

Mulțumesc, sper ca te-au ajutat

[@iosifklmr1299]

@@DevSchoolRo Tutorialul acesta îl căutam de mult timp, clar m-a ajutat!

[@aronoprisan]

Supervideo!!!

[@diashowtime]

Esti f.tare

[@mariusovidiualexa7875]

Mulțumim!

[@DevSchoolRo]

Mulțumesc și eu!

[@cmg836Carticitite]

Arta minuțiozității !!! 👏👏🍀 Ideal ar fi să ne îndrumi să facem un C.V. cu amprentă I.T. 😊🍀 după ce terminam partea de front-end 🎉

[@DevSchoolRo]

La ce te referi mai exact prin "C.V. cu amprentă I.T." ?

[@cmg836Carticitite]

@@DevSchoolRo Un model de C.V. care să îl putem publica pe rețelele sociale/ site-uri pentru a găsi un job, de unde să rezulte că avem abilități de front-end developeri juniori (eventual și în engleză) 💖 🍀

[@DevSchoolRo]

@@cmg836Carticitite Dintr-un CV nu prea rezulta ca ai abilitati, mai ales cum este cazul la noi, in IT. In cazul nostru, ce conteaza mai mult este un portofoliu cu cateva proiecte la care ai lucrat. Prin asta demonstrezi unui angajator ca depui sa inveti si de acolo isi poate da seama de abilitatile tale. Sigur, conteaza si CV-ul atunci cand aplici efectiv la un job (sa fie structura ok, sa contina informatii relevante), dar nu este lucrul decisiv atunci cand se face departajarea intre candidati.

[@cmg836Carticitite]

@@DevSchoolRo Optimă gândire. Mulțumesc 🙏🍀

[@adrian-kg1hn]

salut!ai putea face si video despre javascript/python?

[@DevSchoolRo]

Salut. Da, o sa fac video-uri despre JavaScript cât de curând

[@Licanu145]

Salut! Foarte util cursul , insa fiind nou in treaba asta am intampinat o problema la aceasta aplicatie , care poate parea stupida . Dupa ce am scris codul in html ,corect, si am intrat sa il "slefuiesc" in css, modificarile nu se aplica , oricat as salva. Orice sfat este bine venit!

[@DevSchoolRo]

Salut. Ai incercat sa dai refresh la pagina de browser? Pentru ca modificarile sa se aplice automat cand dai save, trebuie sa deschizi fisierul de HTML cu LiveServer (click dreapta pe fisier > Open with Live Server).

[@Loghinesko]

As avea o mica intrebare. Avand in vedere ca 'by default' dimensiunea unui p este deja de 16px, iar cea a unui h2 este de 24px, de ce in fisierul de css specifici din nou ca pentru h2-uri (.section-title) setam 'font-size: 24px'. In dev tools, am urmarit inainte sa trecem la css, fiecare stilizare in sectiunea 'computed' si acolo am vazut ca by default, font-size pentru p este 16px, iar pentru h2 este 24px deja. Deci de ce e nevoie sa specificam din nou asta in css ? Are legatura cu momentul cand trecem la partea responsive si am putea modifica aceste valori sau pentru a creea mai multa siguranta atunci cand browserul citeste fisierele pentru a le interpreta ? Super bun video-ul. Imi place foarte mult cand vad notificarile noi pe telefon :))

[@DevSchoolRo]

Buna observatie, am uitat sa mentionez asta 😅 Nu este nevoie sa specificam din nou dimensiunea pentru font-size daca folosim valoarea care este "by default". Eu am facut-o mai mult pentru a arata procesul de la final cand am convertit din "px" in "rem", dar poate sa fie omisa acea proprietate daca nu modificam valoarea implicita. Mersi de feedback 👍

[@Loghinesko]

Am ajuns pana la final, la partea de 'rem' si am inteles scopul folosirii. Dap, foarte frumos 👏👏

[@dragosserea6594]

Btw de unde ne dam seama cand sa folosim px sau % pentru proprietatea border-radius. Am vazut ca tu le folosesti pe ambele, ai vreun criteriu pentru a le folosi?

[@DevSchoolRo]

% folosesc doar atunci cand vreau sa fac un cerc, de exemplu border-radius: 50%

[@danurancov6971]

Salut, cum putem lua legătură in privat ?

[@DevSchoolRo]

Salut. Găsești pe pagina canalului de KZbin adresa mea de email.