Slide DevCoach

DevCoach 130 : Front-End | CSS Grid, Solusi Layouting yang Kompleks

Transcript

1. Dicoding Slides Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore. Front-End Web
3. Position CSS Grid, Solusi Layouting yang Kompleks Front-End Web Nur Rizki Adi Curriculum Developer
4. Learning Objectives • Menjelaskan istilah-istilah penting dalam CSS grid. • Menentukan jumlah dan ukuran kolom dan baris dalam satu layout. • Menjelaskan cara mendesain halaman web menggunakan grid template. • Membedakan dua pendekatan penyusunan layout dengan metode flexbox dan CSS grid. • Mendemonstrasikan penerapan CSS grid pada aplikasi Belajar Alfabet. Front-End Web
5. Agenda • Apa itu CSS grid • Terminologi CSS grid • Dasar penyusunan layout dengan CSS grid • Mendesain halaman dengan Grid template • Perbedaan antara Flexbox dan CSS grid Front-End Web
6. Kalau diminta bikin halaman portfolio, apa gambaran desain yang akan disusun? Front-End Web
8. Dengan Float
9. Dengan Flexible Box Layout
10. Dengan CSS Grid Layout
12. Dengan CSS Grid Layout
13. Dengan CSS Grid Layout
14. Inilah metode layouting untuk dua dimensi CSS Grid ✨
15. Terminologi CSS Grid
19. Kolom dan Baris dalam Grid
20. Menentukan Jumlah Kolom grid-template-column: [ <line-names>? [ <track-size> | <track-repeat> ] ]+ <line-names>?
21. .char-list { display: grid; grid-template-columns: minmax(150px, 1fr) minmax(150px, 1fr) minmax(150px, 1fr); justify-content: space-between; column-gap: 24px; row-gap: 32px; } Menentukan Jumlah Kolom
22. Menentukan Jumlah Baris grid-template-row: [ <line-names>? [ <track-size> | <track-repeat> ] ]+ <line-names>?
23. .char-list { display: grid; grid-template-columns: minmax(150px, 1fr) minmax(150px, 1fr) minmax(150px, 1fr); grid-template-rows: 250px 250px 250px; justify-content: space-between; column-gap: 24px; row-gap: 32px; } Menentukan Jumlah Baris
24. Grid Area
25. main header sidebar footer
26. Grid Template Area
28. Grid Template Area
29. Conclusion
30. The Main Difference Between Flexbox and CSS Grid
31. More capability & flexibility means more to learn
32. Thank You nurrizkiadip Nur Rizki Adi Prasetyo @NAdiPrasetyo nrizki@dicoding.com Nur Rizki Adi Prasetyo Nur Rizki Adi Prasetyo Front-End Web
33. Feedback! Hadiah: • 2 Token Langganan Academy (30 Hari) *untuk pengisi feedback terpilih! dicoding.id/devcoachfeedback
34. Front-end Web