Acest tutorial vă învață să construiți site-uri web receptive de la zero. Face parte din The Responsive Web Design Bootcamp de la Scrimba: https://scrimba.com/g/gresponsive
Cu toate acestea, acest tutorial de 4 ore se bazează pe propriile sale picioare. Începe cu explicarea conceptelor de bază necesare pentru a începe să gândiți în mod receptiv, apoi vă duce prin fiecare pas în construirea unui site web receptiv la nivel profesional.
Profesorul este genialul Kevin Powell, care este binecunoscut pentru videoclipurile sale pe HTML și CSS aici pe YouTube. Puteți verifica canalul său aici: https://www.youtube.com/channel/UCJZv4d5rbIKd4QHMPkcABCw
⭐️ Conținutul cursului ⭐️
⌨️ (00:00:00) Introducere
⌨️ (00:02:59) 1. Începeți să gândiți receptiv
⌨️ (00:06:01) 2. Unități CSS
⌨️ (00:09:16) 3. Unități CSS – Procent
⌨️ (00:15:14) 4. Controlul lățimii imaginilor
⌨️ (00:20:05) 5. lățime minimă și lățime maximă
⌨️ (00:22:54) 6. Unități CSS – Unitatea em
⌨️ (00:28:25) 7. Problema cu ems
⌨️ (00:30:58) 8. Soluția: Rems
⌨️ (00:35:46) 9. Alegerea unității de utilizat
⌨️ (00:39:18) 10. ems și rems – un exemplu
⌨️ (00:47:10) 11. Reîmprospătare Flexbox și configurarea unor coduri HTML
⌨️ (00:55:02) 12. Stiluri de bază și configurarea coloanelor
⌨️ (01:02:09) 13. Adăugarea culorii de fundal
⌨️ (01:06:21) 14. Setarea lățimii coloanei
⌨️ (01:10:00) 15. Spațierea coloanelor
⌨️ (01:14:27) 16. Controlul poziției verticale a articolelor flexibile
⌨️ (01:19:42) 17. Elementele de bază ale interogării media
⌨️ (01:29:50) 18. Realizarea unui aspect receptiv cu direcție flexibilă
⌨️ (01:36:45) 19. flex-direcție explicată
⌨️ (01:39:54) 20. Crearea unei navigații
⌨️ (01:44:40) 21. Folosind flexbox pentru a începe să ne stilăm navigarea
⌨️ (01:52:19) 22. Faceți ca navigarea să arate bine
⌨️ (01:59:38) 23. Adăugarea sublinierii
⌨️ (02:03:40) 24. O navigare mai complicată
⌨️ (02:10:25) 25. Faceți navigarea receptivă
⌨️ (02:17:20) 26. Aruncă o privire la restul proiectului
⌨️ (02:21:34) 27. Înființarea structurii
⌨️ (02:29:59) 28. Structura articolului recomandat
⌨️ (02:35:07) 29. Pagina principală – HTML pentru articolele recente
⌨️ (02:37:39) 30. Pagina de pornire – HTML pentru o parte
⌨️ (02:43:45) 31. Pornirea CSS-ului pentru pagina noastră
⌨️ (02:59:15) 32. Pornirea aspectului – privire la imaginea de ansamblu
⌨️ (03:07:48) 33. Începeți să gândiți mai întâi mobil
⌨️ (03:10:37) 34. Stilizarea articolului prezentat
⌨️ (03:17:03) 35. Schimbarea ordinii vizuale cu flex box
⌨️ (03:22:19) 36. Jocul cu poziția titlului și dezavantajele marjelor negative
⌨️ (03:27:05) 37. Schimbarea ordinii vizuale cu flex box
⌨️ (03:31:00) 38. Stilizarea articolelor recente pentru ecrane mari
⌨️ (03:38:50) 39. Configurarea widget-urilor și a punctelor de întrerupere
⌨️ (03:45:41) 40. Folosirea unei noi pseudoclase pentru a încheia pagina de pornire
⌨️ (03:53:12) 41. Crearea paginii de postări recente
⌨️ (03:56:39) 42. Configurarea paginii Despre mine
⌨️ (04:00:54) 43. Repararea unor capete libere
⌨️ (04:05:27) 44. Notă importantă. Metaeticheta viewportului
⌨️ (04:09:10) 45. Încheierea modulului
⌨️ (04:12:24) Altele
—
Învățați să codificați gratuit și obțineți un job de dezvoltator: https://www.freecodecamp.org
Citiți sute de articole despre programare: https://medium.freecodecamp.org
Cursuri interesante:
- Tutorial HTML – Cum să faci un site web super simplu
- Creați un sistem de design cu CSS – Curs de dezvoltare web
- Tutorial de proiect HTML și CSS – Construiți un site web cu rețete
- Curs React – Tutorial pentru începători pentru biblioteca React JavaScript[2022]
- Curs complet CSS – Include tutoriale Flexbox și CSS Grid
- Creați și implementați un site web de portofoliu [Curs de tutorial complet]
- Tutorial JavaScript – Creați un joc de cărți 🃏
- Learn Webpack – Tutorial complet pentru începători
- Tutorial aplicație web – JavaScript, Mobile First, Accesibilitate, Date persistente, Sass
- Dezvoltare Web cu HTML și CSS – Curs complet pentru începători