Cum se face un SITE DE PREZENTARE modern cu HTML si CSS (pentru INCEPATORI)
ฝัง
- เผยแพร่เมื่อ 5 พ.ค. 2024
- Cum se face un SITE DE PREZENTARE modern cu HTML si CSS. In acest tutorial, o sa vorbim despre concepte de baza de HTML si CSS si o sa iti arat pas cu pas cum sa le pui in practica pentru a face un site de prezentare de la 0.
Pe langa asta, o sa facem si lucruri mai avansate cum sunt implementarea unui meniu de navigare responsive si o sa iti arat cum se folosesc Flexbox si Grid in proiecte reale.
Pentru acest site de prezentare, o sa folosim un font custom din Google Fonts si o sa includem libraria Font Awesome pentru a adauga iconite in pagina web.
Limbajele HTML si CSS
HTML (HyperText Markup Language) este un limbaj de markup (marcare) utilizat pentru crearea paginilor web ce pot fi afisate intr-un browser.
CSS (Cascading Style Sheets) este un limbaj folosit pentru a stiliza elementele dintr-o pagina web.
Pe scurt, limbajul HTML descrie structura unei pagini web, iar limbajul CSS o stilizeaza.
📺 Videoclipuri recomandate
===================================
👉 Tutorial CSS Flexbox in ROMANA pentru INCEPATORI: • Tutorial CSS Flexbox i...
👉 Tutorial CSS Grid in ROMANA pentru INCEPATORI: • Tutorial CSS Grid in R...
👉 Curs HTML si CSS in limba ROMANA pentru INCEPATORI: • Curs HTML si CSS in li...
👉 Tutorial Visual Studio Code pentru incepatori: Tutorial Visual Studio Code pentru incepatori
===================================
🕗 Cuprins
===================================
00:00 - Prezentare proiect
03:34 - Pregatirea mediului de lucru
06:08 - Adaugarea unui font din Google Fonts
08:03 - Adaugarea librariei Font Awesome
10:00 - Sectiunile header, main si footer
11:25 - Sectiunea header
29:54 - Sectiunea hero
39:00 - Sectiunea services
49:40 - Sectiunea projects
01:01:26 - Sectiunea team
01:09:50 - Sectiunea contact
01:16:26 - Sectiunea footer
01:20:02 - Navigare intre sectiunile din pagina web
01:22:19 - Fixare header in partea de sus
01:23:17 - Inchidere meniu de navigare la click pe link
01:25:29 - Creare Media Query pentru responsive design
===================================
🔔 Daca iti place canalul de TH-cam te poti abona aici: / @devschoolro
🔥 Vrei sa ajuti acest canal?
===================================
👉 www.buymeacoffee.com/devschoolro
👉 www.revolut.me/mariusoprea95
===================================
💬 Unde ma gasesti
===================================
👉 devschool.ro/
👉 Email: devschoolro@gmail.com
===================================
![[FULL EP.12] "นีโน่ - สเตฟาน" 2 หรั่ง แหย่รังมดแดง | เฮ็ดอย่างเซียนหรั่ง | One Playground](http://i.ytimg.com/vi/zLBmzfrx0u4/mqdefault.jpg)
Te-a ajutat acest video? Fa-mi cinste cu o cafea => ☕ www.buymeacoffee.com/devschoolro
Foarte folositor, am intepes multe lucruri noi. TOT AȘA, poate faci și cevă javascript pe viitor. Felicitări.
Esti unul din cei mai buni creatori de continut online pe partea de programare, continua ca esti ce trebuie !
Mersi de feedback! Ce subiecte te-ar interesa pe viitor?
@@DevSchoolRo de exemplu cum facem partea de backend la trimiterea formularului de contact.
Foarte tare omule! Imi place cum explici. Keep up the good work! 🍻
Mersi, spor la treaba și ție!
Mulțumesc 🙏 Recunoștință 🍀 Admirație 🪄
Mersi și eu 😁
@@DevSchoolRoTot meritul îți revine . Aș fi entuziasmată să ne ajuți să concepem și modele de fleepbook ( care se deschid pagină cu pagină sau vin răsfoite din colțul de sus al paginii). Ar fi.... magnific 😊
Foarte bine explicat, sper sa mai revii si cu alte tutoriale similare.
Mersi de feedback 👍
Codul sursa pentru acest proiect 👉 github.com/devschoolro/presentation-website-it-company
Foarte bine explicat , felicitari! Totul mi-a iesit , in afara de header, la un moment dat ,orice functie si modificare pe care o scriam nu venea cu nicio schimbare asupra lui, ai vreo sugestie in legatura cu asta?
Salut. Te referi la modificări în codul de HTML și CSS?
@@DevSchoolRo CSS
@vladbranoiu2467 greu de spus ce problemă a fost acolo. Trebuie să ai grijă să fie scris corect selectorul de CSS sau încearcă să redeschizi pagina
ce parere ai despre bootstrap? nu este mai usor sa folosesti grid system pentru a face un site responsive ?
Bootstrap este un framework și e destul de bun, te ajuta sa faci lucrurile mai rapid, dar la baza are tot HTML și CSS.
Acel Grid system de la bootstrap este făcut cu Flexbox.
Aș avea niste nedumeriri:
De ce folosesti uneori rem si nu px? Care e diferența între "header .logo" si ".logo", de ce trebuie sa il punem si pe header?
px este o unitate de masura absoluta, rem este una relativa. Spre exemplu, daca folosesti rem pentru font size, cand schimbi din setarile browser-ului dimensiunea fontului, se ajusteaza si in pagina web. Daca folosesti px, textul o sa aiba mereu aceeasi dimensiune. Daca vrei sa vezi asta, ai un exemplu in video-ul "Cum se face un SITE RESPONSIVE cu HTML si CSS"
Diferenta dintre "header .logo" si ".logo" este ca "header .logo" inseamna ca selectezi elementele cu clasa logo care se afla in elementul header. Cand scrii doar ".logo" inseamna ca selectezi toate elemetele cu clasa logo, indiferent unde se afla ele in pagina web. In general, atunci cand scriu CSS, imi place sa fiu cat mai specific cu selectorii.
@@DevSchoolRo Mersi mult! Acuma mi-am amintit când ai făcut optiizarea aia în acel video, cand ai schimbat px in rem.
Treaba aia cu butonul nu se putea face si cu o instructiune if ?
La care treaba cu butonul te referi mai exact?
Salut am tot incercat sa fac butonul de menu sa se inchida si sa se derchida,dar nu merge.Nu vrei sa postezi in git hab acest proiect sa vad de ce nu merge la mine.Multumesc
Salut.
Asta se întâmplă de multe ori și la un job de programator, o să dai de probleme pe care va trebui să le rezolvi.
Încearcă să faci singur debug pas cu pas și să vezi care e problema, mai ales ca ai video-ul unde vezi cum ar trebui să fie.
Vezi dacă ai inclus fișierul de javascript, dacă id-urile elementelor sunt corecte, dacă se intră prin acel event listener când dai click pe buton, deschide inspect element și vezi dacă se adaugă clasa “active” atunci când dai click pe buton, verifică dacă ai scris codul de CSS pentru clasa “active”.
Spor la treabă!
salut cine ma poate sfatui sa fac niste cursuri cu cineva online sigur voi plati pentru asta incerc sa fac dupa videouri depe youtube dar e cam greu as avea nevoe de mai multre explicatii daca este cineva sa ma ajute.multumesc mult
Salut. Ce cursuri cauti mai exact?