Get to Know From Basic, Web Wizards: Your First Steps into Web Mastery

Transcript

1. Web Wizards: Your First Steps into Web Mastery Nur Rizki Adi Get to Know From Basic Curriculum Developer, Dicoding
2. Kenalan dengan Website
5. Web developer adalah role pekerjaan yang paling popular di dunia! Gak percaya?!
6. Stack Overflow Developer Survey 2024: Developer Roles
8. Back-End Users don’t see 80% of total effort Repetitive Front-End Users see 20% of total effort
9. Cakupan dari Server-side dan Client-side
10. Komponen Pembangun Website
11. Apa Itu HTML & CSS • HTML adalah kode markup kontennya, sedangkan CSS memberi styling dari struktur dokumen HTML. • Dikembangkan dan di-maintain oleh W3C.
12. Anatomi Elemen HTML Contoh HTML Contoh CSS
13. Website yang Baik Memiliki Struktur Layaknya Media Konvensional
14. Responsive Web Design
15. Responsive Web Design
16. Empat Tip Membangun Layout Responsif 1. Mengatur konfigurasi viewport. 2. Menggunakan satuan relatif daripada tetap. 3. Menerapkan media query. 4. Menerapkan pendekatan mobile-first.
17. Ada berapa bahasa pemrograman?
18. Stack Overflow Developer Survey 2024: Most Popular Technologies
20. JavaScript Machine Learning Desktop Apps Mobile Apps Back-End Front-End
21. Sejarah JavaScript Brendan Eich membuat JavaScript pada tahun 1995. Browser Computer Pada 2009, Ryan Dahl membuat Node.js dan membuat JavaScript dapat dijalankan di sisi server (komputer).
22. JavaScript 💙 Browser
24. Mobile App atau Web App?
25. Menjadi Standalone untuk “Banyak Platform”
26. Mobile Developer Web Developer
27. Salah satu syarat utama offline capability adalah berkomunikasi dengan server.
28. Komunikasi Client-Server • Berinteraksi dengan server web salah satunya dengan protokol HTTP/HTTPS. • HTTP/HTTPS menggunakan pola request-response.
29. Dasar Node.js yang Penting Diketahui 01 03 05 07 02 04 06 Process Object Events Stream HTTP Modularization Filesystem Package Manager
30. Bikin server application dari nol pakai Node.js native bisa dibilang ribet, lo. *subjektif
31. Membuat HTTP Server secara Native // load http module const http = require('http'); // create a HTTP server const server = http.createServer(requestListener); // run the HTTP server server.listen(3000, 'localhost', () => { console.log('Server running on http://localhost:3000'); });
32. Routing Request secara Native const requestListener = (request, response) => { response.setHeader('Content-Type', 'application/json'); // set the content-type manually response.statusCode = 200; // set the status code manually const { method, url } = request; // Routing response based on url & HTTP verb/method manually using if-else if (url === '/' && method === 'GET') { response.end(JSON.stringify({ message: 'You are doing GET' })); } else if (url === '/' && method === 'POST') { response.end(JSON.stringify({ message: 'You are doing POST' })); } else { response.end(JSON.stringify({ message: 'Unknown action' })); } };
33. Mengapa Framework? Mudah Digunakan Fokus ke Logika Bisnis Banyak Fitur Kode Teruji
34. Development Workflow Pre-production Production… Launch … Production) Development Testing Staging
36. Proses Menampilkan Web App
37. Time to Deploy Application
38. Deployment Platform
39. Netlify, Easy Deployment
40. Drag & Drop Deployment
42. Metode Belajar yang Efektif - Hampir untuk Semua Hal Reading (10%) Audio Visual (20%) Demonstration (30%) Discussion (50%) Practice by Doing (75%) Teaching Others (90%) P a s s i v e A c t i v e
43. Web Developer Journey - All in One Belajar Dasar Pemrograman Web Belajar Dasar Pemrograman JavaScript Belajar Membuat Front-End Web untuk Pemula Belajar Pengembangan Web Intermediate Belajar Back-End Pemula dengan JavaScript Belajar Fundamental Front-End Web Development
44. Thank You nurrizkiadip nrizki@dicoding.com Nur Rizki Adi Prasetyo
45. 1. Jelaskan secara singkat pola komunikasi antara client, server, dan database! 2. Sebutkan tiga keunggulan menggunakan framework dalam web development?
46. DBS Foundation Coding Camp Program beasiswa coding online DBS Foundation x Dicoding, didirikan pada 2023, bertujuan meningkatkan keterampilan digital pengembang IT masa depan Indonesia. Inisiatif ini merupakan bagian dari Community Impact DBS Foundation, yang fokus pada pemberdayaan sosial. DBS Foundation Coding Camp juga mendukung difabel, perempuan, pendidik, dan warga berpenghasilan rendah. Back-End Developer | DevOps Engineer | Front-End Web Developer | Machine Learning Engineer Alur belajar diberikan pada program tahun 2023 - 2024 114,072 Penerima Manfaat 26,999 Wanita 6,193 Pendidik 22,104 Warga Negara yang Termarginalisasi 946 Disabilitas Data Kumulatif antara program tahun 2023 dan 2024
47. Coding Camp powered by DBS Foundation Visi Coding Camp powered by DBS Foundation adalah menyelenggarakan program pelatihan berkualitas untuk menghasilkan lulusan terbaik yang siap untuk perusahaan teknologi dan startup. DBS Foundation membuka peluang beasiswa intensif kepada Warga Negara Indonesia melalui program “Coding Camp powered by DBS Foundation” 3,000 Peserta Terpilih Mahasiswa Politeknik, terutama D3 & D4 Siswa Sekolah Kejuruan (SMK) Mahasiswa S1 dengan kategori prioritas* *Kategori Prioritas: Perempuan, Penyandang disabilitas, atau berasal dari latar belakang keluarga dengan keterbatasan ekonomi
48. Terdapat 6 Keuntungan Mengikuti Coding Camp powered by DBS Foundation Sertifikasi Kelulusan Sertifikat kompetensi setelah lulus program Kurikulum updated & Instruktur Ahli Dilengkapi materi berstandar industri global dan bimbingan dari para ahli industri yang berpengalaman Pelatihan Intensif Pelatihan teknologi, soft skill, english dan financial literacy untuk kesiapan karir di dunia IT. Konversi SKS s.d. 20 SKS Terafiliasi dengan Kampus Merdeka - Studi Independen Bersertifikat Kesempatan Kerja untuk Lulusan Kesempatan disalurkan sebagai tenaga kerja oleh DBS dan Dicoding* Tanpa Biaya Pelatihan 100% tanpa biaya secara daring/online menggunakan kurikulum Dicoding Academy
50. AI tidak akan menggantikan manusia. Tapi orang yang tidak menggunakan AI akan tergantikan oleh orang yang menggunakan AI. - Andrew Ng
51. <div> <span>Three words</span> <div> <a>one word</a> <a>one word</a> <a>one word</a> <a>one word</a> </div> </div> <div> <div> <div>five words</div> </div> <div> <div>three words</div> <div>forty-six words</div> <div>forty-four words</div> </div> <div> <span>five words</span> </div> </div> <header> <h1>Three words</h1> <nav> <a>one word</a> <a>one word</a> <a>one word</a> <a>one word</a> </nav> </header> <main> <header> <h1>five words</h1> </header> <section> <h2>three words</h2> <p>forty-six words</p> <p>forty-four words</p> </section> </main> <footer> <p>five words</p> </footer> Struktur dengan Non-Semantic Element Struktur dengan Semantic Element
52. Alasan Menulis Dokumen HTML secara Semantik Meningkatkan Pengalaman Developer Meningkatkan SEO Meningkatkan Aksesibilitas
53. Mendengarkan penjelasan orang lain. Membaca/melihat. Berpartisipasi dalam diskusi. Berlatih dan mencoba. Feedback dari expert. Kombinasi kurikulum, fasilitator, dan metode penguasaan ilmu. Metode Belajar yang Efektif - Hampir untuk Semua Hal
54. IS SIMPLY DUMMY TEXT Nama Speaker LOREM IPSUM Position
58. akun.x Thank You akun.ig alamat.email akun.fb akun.linkedin akun.youtube
60. KUMPULAN ICON