Slide DevCoach

DevCoach 143 : Front-End | Speed Up UI Development dengan Bootstrap

Transcript

1. Position Speed Up UI Development dengan Bootstrap Front-End Web Nur Rizki Adi Curriculum Developer
2. Dicoding Slides Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore. Front-End Web
3. Learning Objectives Front-End Web • Menjelaskan apa itu CSS framework • Mengetahui Bootstrap sebagai salah satu CSS framework. • Cara integrasi Bootstrap ke proyek. • Mencoba components, trik layouting, dan utilities dari Bootstrap. • Menjelaskan penggunaan dokumentasi Bootstrap.
4. Tiga Pilar Pembentuk Aplikasi Web
5. CSS preprocessor Front-End Web
6. HTML preprocessor? JS preprocessor? Front-End Web
7. CSS Framework Front-End Web
8. Front-End Web
9. Lalu, framework? • Secara bahasa, framework adalah kerangka kerja. • Kerangka kerja adalah pekerjaan yang telah dirancang dan dipatuhi agar tools bekerja dengan baik. • Saat ini ada sangat banyak kerangka kerja untuk web development yang open-source. Tidak menutup kemungkinan juga ada yang berbayar. Front-End Web
10. Jadi, CSS framework? Kerangka kerja untuk CSS dalam mengembangkan tampilan halaman web (front-end). Front-End Web
11. Bootstrap Front-End Web About Bootstrap - getbootstrap.com
12. Kenalin, Aku Bootstrap • Kerangka kerja untuk mengembangkan tampilan awal halaman web (front-end) yang bersifat free dan open-source. • Dikembangkan oleh dua orang dari Twitter, yaitu Mark Otto dan Jacob Thornton. Front-End Web About Bootstrap - getbootstrap.com
13. Cara Integrasi Bootstrap Front-End Web
14. 1. Install via Content Delivery Network Front-End Web
15. 2. Instal via package manager
16. 2. Instal via package manager
17. Membutuhkan Module Bundler Webpack Vite Parcel Browserify
18. Let’s get dirty our hands
19. Yang Ditawarkan Bootstrap • Component • Form • Layouting • Utilities • Customization Front-End Web
20. CSS frameworks lainnya… Front-End Web
21. Thank You nurrizkiadip Nur Rizki Adi Prasetyo @NAdiPrasetyo nrizki@dicoding.com Nur Rizki Adi Prasetyo Nur Rizki Adi Prasetyo Front-End Web
22. Feedback! Hadiah: • 2 Token Langganan Academy (30 Hari) *untuk pengisi feedback terpilih! dicoding.id/devcoachfeedback
23. Front-end Web