Web Wizards: Your First Steps into Web Mastery Nur Rizki Adi Get to Know From Basic Curriculum Developer, Dicoding

Kenalan dengan Website

No content

No content

Web developer adalah role pekerjaan yang paling popular di dunia! Gak percaya?!

Stack Overflow Developer Survey 2024: Developer Roles

No content

Back-End Users don’t see 80% of total effort Repetitive Front-End Users see 20% of total effort

Cakupan dari Server-side dan Client-side

Komponen Pembangun Website

Apa Itu HTML & CSS ● HTML adalah kode markup kontennya, sedangkan CSS memberi styling dari struktur dokumen HTML. ● Dikembangkan dan di-maintain oleh W3C.

Anatomi Elemen HTML Contoh HTML Contoh CSS

Website yang Baik Memiliki Struktur Layaknya Media Konvensional

Responsive Web Design

Responsive Web Design

Empat Tip Membangun Layout Responsif 1. Mengatur konfigurasi viewport. 2. Menggunakan satuan relatif daripada tetap. 3. Menerapkan media query. 4. Menerapkan pendekatan mobile-first.

Ada berapa bahasa pemrograman?

Stack Overflow Developer Survey 2024: Most Popular Technologies

No content

JavaScript Machine Learning Desktop Apps Mobile Apps Back-End Front-End

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).

JavaScript 💙 Browser

No content

Mobile App atau Web App?

Menjadi Standalone untuk “Banyak Platform”

Mobile Developer Web Developer

Salah satu syarat utama offline capability adalah berkomunikasi dengan server.

Komunikasi Client-Server ● Berinteraksi dengan server web salah satunya dengan protokol HTTP/HTTPS. ● HTTP/HTTPS menggunakan pola request-response.

Dasar Node.js yang Penting Diketahui 01 03 05 07 02 04 06 Process Object Events Stream HTTP Modularization Filesystem Package Manager

Bikin server application dari nol pakai Node.js native bisa dibilang ribet, lo. *subjektif

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'); });

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' })); } };

Mengapa Framework? Mudah Digunakan Fokus ke Logika Bisnis Banyak Fitur Kode Teruji

Development Workflow Pre-production Production… Launch … Production) Development Testing Staging

No content

Proses Menampilkan Web App

Time to Deploy Application

Deployment Platform

Netlify, Easy Deployment

Drag & Drop Deployment

No content

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

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

Thank You nurrizkiadip [email protected] Nur Rizki Adi Prasetyo

1. Jelaskan secara singkat pola komunikasi antara client, server, dan database! 2. Sebutkan tiga keunggulan menggunakan framework dalam web development?

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

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

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

No content

AI tidak akan menggantikan manusia. Tapi orang yang tidak menggunakan AI akan tergantikan oleh orang yang menggunakan AI. - Andrew Ng

Three words

one word one word one word one word

five words

three words

forty-six words

forty-four words

five words

Struktur dengan Non-Semantic Element Struktur dengan Semantic Element

Alasan Menulis Dokumen HTML secara Semantik Meningkatkan Pengalaman Developer Meningkatkan SEO Meningkatkan Aksesibilitas

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

IS SIMPLY DUMMY TEXT Nama Speaker LOREM IPSUM Position

No content

No content

No content

akun.x Thank You akun.ig alamat.email akun.fb akun.linkedin akun.youtube

No content

KUMPULAN ICON