Versi Publikasi #1-10022021

Digital Talent Scholarship 2021

Kementerian Komunikasi dan Informatika Republik Indonesia
https://digitalent.kominfo.go.id
Versi Publikasi #1-10022021

Silabus Pelatihan HTML, CSS, JavaScript

Kementerian Komunikasi dan Informatika Republik Indonesia
Professional Academy Digital Talent Scholarship (DTS PRO)
Tahun 2021

Disclaimer: Dokumen ini digunakan hanya untuk kebutuhan Digital Talent Scholarship Kementerian Komunikasi dan Informatika Republik
Indonesia. Konten ini mengandung Kekayaan Intelektual, pengguna tunduk kepada undang-undang hak cipta, merek dagang atau hak
kekayaan intelektual lainnya. Dilarang untuk mereproduksi, memodifikasi, menyebarluaskan, atau mengeksploitasi konten ini dengan cara atau
bentuk apapun tanpa persetujuan tertulis dari Digital Talent Scholarship Kementerian Komunikasi dan Informatika Republik Indonesia.

Informasi Pelatihan & Sertifikasi

Programming: HTML, CSS dan Javascript

Akademi Professional Academy

Mitra Pelatihan Progate

Tema Pelatihan HTML, CSS, dan Javascript (WEB)

Sertifikasi Certificate of Completion

Deskripsi Pelatihan
Pelatihan HTML dan CSS akan mempelajari teori dan praktik pemrograman
front-end secara daring/online (tampilan halaman web), peserta akan mempelajari
cara membuat suatu halaman web modern dan beberapa animasi seperti formulir,
tombol 3D, desain responsif menyesuaikan dengan perangkat pengguna. Pada
pelatihan Javascript (ES6) peserta akan belajar menggunakan bahasa pemrograman
dengan lebih interaktif, dinamis dan peserta akan membuat suatu halaman web
dengan kode yang lebih efisien.

Output Pelatihan ● Peserta mengerti dasar pemrograman HTML, CSS dan Javascript
● Peserta memiliki kemampuan perencanaan pembangunan suatu aplikasi
berbasis web secara mandiri

Durasi Pelatihan 4 Minggu/ 28 Hari

Aktivitas Pelatihan Self-paced Learning & Live Session

Pelatihan dilaksanakan secara daring/​online​, peserta belajar secara mandiri
(S​elf-paced Learning​) melalui laptop/komputer. Pada pelatihan ini peserta akan
mendapatkan kesempatan bertanya dan berinteraksi dengan Instruktur pada ​Live
Session

Persyaratan Peserta 1. Warga Negara Indonesia dibuktikan dengan KTP / KK;

2. Status Pekerjaan Peserta:
a. Professional/ASN (Terbuka untuk TNI/Polri) ​dibuktikan dengan
Surat Tugas/Surat Izin Atasan/Surat Keterangan bekerja dari
tempat bekerja;
b. Sudah pernah bekerja ​minimal 1 tahun dibuktikan dengan
melampirkan Surat Pernyataan Pernah Bekerja (template surat
dapat diakses di ​https://komin.fo/sp-pekerjaan​);
c. Wirausahawan ​dibuktikan dengan melampirkan Surat Pernyataan

Digital Talent Scholarship 2021

Kementerian Komunikasi dan Informatika Republik Indonesia
https://digitalent.kominfo.go.id
Versi Publikasi #1-10022021

Kegiatan Wirausaha (template surat dapat diakses di

https://komin.fo/sp-pekerjaan​);
d. Pekerja Lepas atau Pekerja Paruh Waktu ​dengan melampirkan
Surat Pernyataan Pekerja Lepas atau Paruh Waktu (template surat
dapat diakses di ​https://komin.fo/sp-pekerjaan​);
3. Tidak sedang menempuh pendidikan formal ​(perkuliahan/sekolah)
dibuktikan dengan surat pernyataan tidak sedang menjalani pendidikan.
Template surat: ​https://komin.fo/sp-pendidikan​;
4. Terbuka bagi peserta disabilitas. Bagi calon peserta penyandang disabilitas
dapat mendaftar pelatihan dengan menyediakan sarana dan prasarana
pendukung pelatihan secara mandiri.

Persyaratan Sarana Memiliki laptop/komputer yang terkoneksi internet/dapat mengakses perangkat

Peserta tersebut untuk mengikuti pelatihan ​Self-paced Learning​ &​ Live Session

Jadwal Pelatihan

Tanggal Tanggal Verifikasi Tanggal

Pendaftaran Pre Test Berkas Pengumuman

14-28 Februari 2021 1 - 7 Maret 2021 8-10 Maret 2021 12 Maret 2021
Jadwal sewaktu-waktu dapat berubah tanpa pemberitahuan*

Rencana Pelatihan

Pertemuan Topik

Perkenalan Perkenalan ke Instruktur, Platform Progate, navigasi menu-menu di Progate, demo

mengikuti suatu pelajaran di Progate

HTML & CSS I HTML & CSS I:

Chapter 1​ - Memulai Chapter 2​ - Memulai Chapter 3​ - ​Layout​ (tata
dengan HTML dengan CSS letak) dasar
1. Memulai dengan 6. Warna 10. Struktur HTML (1)
HTML 7. Ukuran font dan jenis 11. Struktur HTML (2)
2. Judul dan Paragraf font 12. Layout dasar
3. Tautan 8. Lebar, tinggi, dan
4. Gambar warna latar belakang
5. Daftar 9. Class

Chapter 4​ - Header Chapter 5​ - Footer Chapter 6​ - Konten

13. Struktur header 16. Struktur Footer 18. Layout bagian utama
14. Layout header 17. Layout Footer 19. Struktur konten
15. Padding 20. Batas
21. Padding​ dan ​Margin

Chapter 7​ - Formulir
22. Layout formulir (1)
23. Layout formulir (2)

Digital Talent Scholarship 2021

Kementerian Komunikasi dan Informatika Republik Indonesia
https://digitalent.kominfo.go.id
Versi Publikasi #1-10022021

HTML & CSS II HTML & CSS II:

Chapter 1​ - Layout dasar Chapter 2​ - Bagian Chapter 3​ - Header

1. Persiapan atas halaman 8. Layout header
2. Layout dasar 3. Layout bagian atas 9. Membuat tautan log in
4. Transparansi dan 10. Menyempurnakan log in
spasi antar-huruf
5. Membuat tombol
6. Menyesuaikan
layout
7. Menggunakan
ikon

Chapter 4​ - Daftar Chapter 5​ - Bagian Chapter 6​ - Footer

pelajaran pesan 17. Footer
11. Layout daftar 14. Layout bagian
pelajaran pesan
12. Menyejajarkan bagian 15. Membuat tombol
pelajaran 3D
13. Menyesuaikan Layout 16. Menerapkan CSS
berdasarkan Klik

Chapter 7​ - Memperbaiki
Header
18. Memperbaiki header

HTML & CSS Dojo I HTML & CSS Dojo I (Latihan tanpa instruksi):

Chapter 1 - Membuat halaman web dari awal

1. Header
2. Bagian atas halaman
3. Bagian konten atau isi
4. Bagian formulir
5. Footer

HTML & CSS Dojo II HTML & CSS Dojo II (Latihan tanpa instruksi):

Chapter 1 - Membuat halaman web modern dari awal

1. Bagian atas
2. Header
3. Daftar pelajaran
4. Bagian pesan
5. Footer

HTML & CSS III HTML & CSS III:

Chapter 1​ - Design Web Chapter 2 ​- Media Chapter 3​ - Menjadikan

yang Responsive Queries halaman Anda responsive

Digital Talent Scholarship 2021

Kementerian Komunikasi dan Informatika Republik Indonesia
https://digitalent.kominfo.go.id
Versi Publikasi #1-10022021

1. Persiapan 2. Menggunakan media 5. Persiapan desain

queries yang responsive
3. Layout dengan media 6. Layout tablet
queries 7. Memperbaiki layout
4. box-sizing yang responsive
8. Layout smartphone
(1)
9. Layout smartphone
(2)
10. Membuat font-size
responsive
11. Max-width
12. Menjadikan Header
responsive

HTML & CSS Dojo HTML & CSS Dojo III (Latihan tanpa instruksi):
III Chapter 1 - Menguasai desain web yang responsive
1. Menjadikan header responsive
2. Menjadikan bagian atas responsive
3. Menjadikan daftar pelajaran responsive
4. Menjadikan footer responsive

HTML & CSS IV HTML & CSS IV (Flexbox)

Chapter 1​ - Apa itu Chapter 2​ - Chapter 3 ​- Desain

Flexbox? Mengimplementasikan responsive
1. Persiapan flexbox 4. flex-wrap: wrap
2. Display: flex 5. Media queries
3. Flex: auto 6. flex-direction

Webinar* Briefing Proyek Tim HTML & CSS (opsional)

Menyiapkan 1. Command Line

Aplikasi Web di 2. Git
Environment local 3. Membuat Akun GitHub dan simpan linknya melalui google form
4. Bahan bacaan tambahan

Proyek Tim 1. “Membuat halaman web statis bersama rekan tim anda!”
Tujuan dari proyek ini adalah untuk membuat ulang halaman web ini [link
webpage] tanpa arahan dan atau instruksi apapun, dan anda harus mencoba
menggunakan setidaknya satu animasi. Pastikan untuk:
● Berbagi ilmu dalam proses pembangunan halaman web bersama rekan
tim.
● Bagilah pekerjaan antara rekan tim secara adil.
2. Referensi untuk tipe-tipe animasi CSS

Javascript I Javascript I:
Chapter 1 ​- String & Chapter 2​ - Variable & Chapter 3​ - Statement
Integer Constant Conditional

Digital Talent Scholarship 2021

Kementerian Komunikasi dan Informatika Republik Indonesia
https://digitalent.kominfo.go.id
Versi Publikasi #1-10022021

1. Pengantar Javascript 6. Variable 12. Statement if

ES6
2. console.log(0)
3. Kalkulasi (1)
4. Kalkulasi (2)
5. Menggabungkan
string
7. Menggunakan 13. Operator boolean &
variable perbandingan (1)
8. Mengupdate variable 14. Operator boolean &
(1) perbandingan (2)
9. Mengupdate variable 15. Else
(2) 16. Else if
10. Constant 17. Beberapa kondisi
11. Template literal 18. Statement switch (1)
19. Statement switch (2)

Javascript II Javascript II:

Chapter 1​ - Iterasi Chapter 2​ - Array Chapter 3​ - Object

1. Review variable 5. Apa yang dimaksud 10. Apa yang dimaksud
2. Loop while dengan array dengan Object
3. Loop for 6. Mendapatkan element 11. Mengakses dan
4. Menerapkan array Memperbarui nilai
iterasi 7. Mengupdate element 12. Array dalam object (1)
array 13. Array dalam object (2)
8. Iterasi dengan array (1)
9. Iterasi dengan array (2)

Chapter 4​ - Undefined Chapter 5​ - Latihan Akhir

(tidak didefinisikan) 16. Bagian 1
14. Apa yang 17. Bagian 2
dimaksud dengan
“Undefined”
15. Mencegah
undefined

Javascript III Javascript III:

Chapter 1 - Mempelajari Function

1. Apa yang dimaksud dengan Function (1)
2. Apa yang dimaksud dengan Function (2)
3. Arrow function
4. Argument
5. Menggunakan beberapa argument
6. Nilai return
7. Menggunakan nilai return
8. Scope (cakupan)
9. Latihan Akhir

Javascript IV Javascript IV:

Chapter 1 - Dasar-dasar Class Chapter 2 - Inheritance Class

1. Review object

Digital Talent Scholarship 2021

Kementerian Komunikasi dan Informatika Republik Indonesia
https://digitalent.kominfo.go.id
Versi Publikasi #1-10022021

2. Apa yang dimaksud dengan Class? 10. Apa yang dimaksud dengan
3. Membuat instance inheritance?
4. Constructor (1) 11. Menggunakan inheritance class
5. Constructor (2) 12. Menambah method
6. Constructor (3) 13. Overriding (1)
7. Method (1) 14. Overriding (2)
8. Method (2)
9. Memanggil method di dalam
method

Javascript V Javascript V:

Chapter 1 - Memisahkan File Chapter 2 - Menggunakan Paket

1. Memisahkan file (1) 1. Paket (1)
2. Memisahkan file (2) 2. Paket (2)
3. Meng-export nilai
4. Export bernama
5. Jalur relatif

Javascript VI Javascript VI:

Chapter 1 - Method untuk Array

1. Push
2. ForEach
3. Find
4. Filter
5. Map

Topik VII Javascript VII:

Chapter 1 - Mempelajari tentang Callback Function

1. Tentang Callback Function
2. Apa yang dimaksud dengan Callback Function?
3. Mendeklarasikan callback function secara langsung
4. Argument callback function

Proyek Bonus Briefing Proyek bonus Javascript (wajib)

Javascript

ALUR PENDAFTARAN

Tahapan Kegiatan

Tahap 1 PENDAFTARAN
1. Calon peserta mengunjungi situs ​digitalent.kominfo.go.id​.
2. Registrasi Awal mengisi Informasi Akun Calon Peserta
3. Notifikasi/konfirmasi Akun untuk mendaftar disampaikan melalui Email,
pastikan email yang disubmit merupakan email aktif

Digital Talent Scholarship 2021

Kementerian Komunikasi dan Informatika Republik Indonesia
https://digitalent.kominfo.go.id
Versi Publikasi #1-10022021

4. Selanjutnya kembali ke profil pendaftaran peserta pada website pendaftaran

5. Klik Kategori pilih “Peserta Umum” atau “ Peserta Penyandang Disabilitas” Bagi
calon peserta penyandang disabilitas dapat mendaftar pelatihan dengan
menyediakan sarana dan prasarana pendukung pelatihan secara mandiri.
6. Klik Akademi pilih “Professional Academy”
7. Klik Tema pilih “Tema Pelatihan HTML, CSS, JavaScript ”
8. Klik “DAFTAR SEKARANG”
9. isi biodata dengan lengkap, perhatikan beberapa hal berikut:
a. pastikan penulisan NIK/NIP benar dan tidak ada salah huruf/angka
b. pastikan penulisan NAMA LENGKAP benar dan tidak ada salah huruf
(Nama yg akan tercetak pada ​Certificate of Completion)
c. pastikan berkas FOTO yang diupload terlihat wajah dengan jelas
(disarankan menggunakan foto formal)
d. pastikan penulisan EMAIL benar dan tidak ada salah huruf/angka
e. pastikan EMAIL yang didaftarkan email aktif
f. pastikan penulisan NOMOR TELPON benar dan tidak ada salah angka
g. Pastikan berkas KTP/KK/Surat Pernyataan dan keterangan diupload
dengan ukuran dan tampilan yang dapat dilihat, tidak kekecilan dan
tidak kebesaran.
h. pastikan penulisan semua data diisi dengan lengkap dan benar
i. pastikan semua berkas terunggah
10. Periksa kembali dengan perlahan, teliti dan berulang data yang telah diinput
11. Centang semua ketentuan yang diwajibkan oleh Panitia Penyelenggara, sbb:
a. Menyetujui Surat Pernyataan Peserta DTS 2021
b. Menyetujui Syarat dan Ketentuan DTS 2021
c. Sanggup Mempersiapkan fasilitas pendukung secara mandiri sesuai
dengan Persyaratan Sarana Peserta pada masing-masing Tema Pelatihan
12. Klik “SUBMIT PENDAFTARAN”, periksa email aktivasi (inbox dan spam) secara
berkala maksimal 1x24 jam
13. Setelah terdaftar, simpan BUKTI DAFTAR (format pdf/jpg)

Tahap 2 TES SUBSTANSI

Dilaksanakan tes substansi untuk melihat tingkat kemampuan awal peserta yang
kemudian akan diklasifikasikan dalam kelas pelatihan

Tahap 3 VERIFIKASI BERKAS PESERTA

Verifikasi dilakukan untuk melihat profil dan nilai Tes Substansi calon peserta

Tahap 4 PENGUMUMAN KELULUSAN

● Pengumuman dan pembagian jadwal, kelas akan disampaikan lebih lajut melalui
Email pendaftaran dan group kelas pelatihan
● Peserta mengunggah/upload Form Komitmen

Tahap 5 PERSYARATAN SARANA SEBELUM MEMULAI PELATIHAN

Laptop sudah terinstal:
● Menginstall Aplikasi Video Conferences
● Menginstall Aplikasi online group Discord

Tahap 6 AKTIFITAS PELATIHAN

Pelatihan dilaksanakan secara daring/online, peserta belajar secara mandiri
(​Self-paced Learning)​ melalui laptop/komputer. Pada pelatihan ini peserta akan
mendapatkan kesempatan bertanya dan berinteraksi dengan Pengajar pada

Digital Talent Scholarship 2021

Kementerian Komunikasi dan Informatika Republik Indonesia
https://digitalent.kominfo.go.id
Versi Publikasi #1-10022021

Live Session yang telah disediakan.

Tahap 7 PERSYARATAN SESUDAH MENYELESAIKAN PELATIHAN

● Mengisi survey pelatihan
● Peserta mengunggah/upload Form Lembar Pertanggungjawaban /Form LPJ

Tahap 8 CERTIFICATE OF COMPLETION

Peserta yang menyelesaikan pelatihan akan mendapatkan email pemberitahuan untuk
mengunduh/download ​Certificate of Completion​ di website ​digitalent.kominfo.go.id

Digital Talent Scholarship 2021

Kementerian Komunikasi dan Informatika Republik Indonesia
https://digitalent.kominfo.go.id
Versi Publikasi #1-10022021

Digital Talent Scholarship 2021

Kementerian Komunikasi dan Informatika Republik Indonesia
https://digitalent.kominfo.go.id