Învață HTML și CSS – Curs complet pentru începători – Cursuri AZ – Toate cursurile care contează din România

Învață HTML și CSS de la zero creând 6 proiecte și rezolvând peste 80 de provocări de codare. Accesați aici versiunea interactivă de browser: https://scrimba.com/links/htmlandcss

⭐️ Cod ⭐️
🔗 Versiune interactivă: https://scrimba.com/links/htmlandcss
🔗 Repoziție GitHub: https://github.com/scrimba/learn-html-and-css

✏️ Acest curs a fost creat de Per Harald Borgen, co-fondatorul și CEO al Scrimba. Îl poți urmări pe Per pe Twitter aici: https://twitter.com/perborgen

🛠 Instrumente folosite:
🔗 Netlify: https://www.netlify.com/
🔗 Cod VS: https://code.visualstudio.com/
🔗 Desktop GitHub: https://desktop.github.com/
🔗 Figma: https://www.figma.com/
🔗 Coolers: https://coolors.co/
🔗 Fonturi Google: https://fonts.google.com/
🔗 1001 fonturi: https://www.1001fonts.com/

⭐️ Cuprins ⭐️
0:00:00 Introducere

Creați și implementați primul dvs. site web
0:01:32 1: Bun venit la cursul HTML și CSS
0:04:12 2: Etichete HTML
0:07:33 3: Scrieți un articol de știri
0:09:43 4: Eticheta de imagine
0:14:43 5: Cuibări
0:17:33 6: Superputeri ale internetului – Schimbați știrile BBC!
0:22:34 7: Elemente interactive – Buton
0:24:37 8: Elemente interactive – etichete de intrare — Experimentați cu tipuri de intrare 100%
0:29:37 9: Să construim Google!
0:33:28 10: Deoparte – Etichete de ancorare
0:38:04 11: Adăugați o etichetă de ancorare la Google.com
0:39:43 12: Structura corectă a documentului
0:45:29 13: Deoparte: Liste
0:49:27 14: Construiește un site web personal
0:58:15 15: Implementați site-ul dvs. personal
1:01:30 16: Recapitulare HTML

Creați o clonă Google.com
1:03:06 1: Să învățăm CSS!
1:03:53 2: Scrieți primele rânduri de CSS!
1:08:10 3: Scrieți primele rânduri de CSS! Soluţie
1:11:46 4: Să distrugem wikipedia – înregistrarea
1:13:43 5: Link către fișierul CSS
1:16:22 6: Setați lățimea elementelor
1:18:31 7: Elemente inline vs bloc
1:20:49 8: Marja de sus
1:22:05 9: Div-urile conduc lumea
1:24:10 10: Clase CSS
1:28:07 11: Deoparte – Învață marjele prin steaguri
1:34:04 12: Adăugați spațiu între elementele noastre
1:35:12 13: Deoparte – Centrare cu margini
1:38:39 14: Centrarea conținutului nostru
1:40:01 15: Deoparte – umplutură
1:45:23 16: Deoparte – Granița și raza de graniță
1:50:33 17: Provocare deoparte – buton Twitter stil
1:55:36 18: Remediați câmpul de intrare
2:00:22 19: Centrați butonul
2:02:42 20: Stilează butonul
2:07:13 21: De ce nu putem avea două butoane la nivel de bloc
2:11:42 22: Deoparte – Flexbox
2:15:25 23: Centrarea ambelor butoane cu flexbox
2:18:20 24: Recapitulare clona Google

Construiește o carte de vizită digitală
2:20:27 1: Construiește-ți cartea de vizită digitală
2:21:00 2: Remediați calea imaginii
2:23:56 3: Adăugați atributul alt
2:28:24 4: Reduceți imaginea
2:29:40 5: Adăugați o chenar și umplutură
2:33:30 6: Deoparte – containere pentru copii flexbox
2:37:11 7: containere flexibile pentru articole
2:38:51 8: Adăugați o clasă de utilitate
2:42:04 9: Justifică elementele
2:44:13 10: Centrați cardul
2:46:13 11: Deoparte – moștenire
2:50:31 12: Centrați textul prin moștenire
2:53:32 13: Adăugați culori
2:56:57 14: Fonturi sigure pentru web
3:02:06 15: Deoparte – scurtătură marjă/padding
3:06:09 16: Folosește marginea și umplutura
3:07:26 17: Implementează-ți cartea de vizită digitală
3:12:16 18: Recapitulare Cărți de vizită

Construiți un site de explorare spațială
3:14:17 1: Să mergem în spațiu
3:14:54 2: Adăugați o imagine de fundal din Unsplash
3:18:54 3: Elemente centrale și butonul Stil
3:22:12 4: Adăugați un font Google
3:26:34 5: @font-face
3:28:39 6: Deoparte – se întinde
3:32:37 7: Adăugați o subliniere folosind un interval
3:34:27 8: Folosește un ID pentru logo
3:38:51 9: Înlocuiți jpg cu un webp
3:41:25 10: Alegeți o paletă de culori dintr-o imagine
3:44:18 11: Adăugați secțiunea de termeni și condiții
3:48:17 12: Deoparte – umbră text
3:54:17 13: Îmbunătățirea lizibilității cu umbre ale textului
3:56:17 14: Spațiu – Rezumat explorare

Creați un site de cadouri pentru ziua de naștere
3:58:02 1: Să construim un site de cadouri pentru ziua de naștere
3:59:13 2: Adăugați stilul de bază pentru antet
4:02:47 3: Setează culorile
4:04:13 4: Adăugați umbră pe text
4:07:34 5: Avem o problemă pe care Flexbox o poate rezolva
4:10:10 6: Deoparte – alinierea elementelor
4:16:13 7: Deoparte – direcție flexibilă
4:20:42 8: Transformă antetul într-un flexbox
4:22:26 9: Fixați data și designul vârstei
4:26:36 10: Creați primul cadou
4:31:56 11: Înlocuiți imaginea cu un div
4:36:14 12: Deoparte – faceți schimbarea elementelor la hover
4:39:08 13: Adăugați efectul de hover
4:41:17 14: Creează următorul cadou
4:45:39 15: Creează încă două cadouri
4:48:15 16: Creați cadoul final
4:51:38 17: Adăugați subsolul
4:55:18 18: Adăugați un gradient de fundal
4:58:46 19: Personalizați site-ul de cadouri pentru ziua de naștere
5:00:25 20: Utilizați GitHub Desktop pentru a publica site-ul dvs. de cadouri pentru ziua de naștere
5:05:44 21: Desfășurarea site-ului dvs. de cadouri pentru ziua de naștere
5:06:45 22: Utilizați codul VS pentru a vă edita cadoul de ziua de naștere
5:11:36 23: Rezumat site-ul cadourilor

Proiect solo: Hometown Homepage
5:13:29 1: E timpul să mergi singur!
5:15:47 2: Solo Project – Hometown Homepage
5:19:54 3: Felicitări pentru finalizarea cursului!

Învață HTML și CSS – Curs complet pentru începători

Cursuri interesante:

Leave a Reply