Frontend

1. SESI 1

2. PENGAJAR MENJELASKAN JENJANG KARIR
SEORANG FRONTEND DEVELOPER DALAM
INDUSTRI TEKNOLOGI
COMMIT

3. PENGENALAN
Berbagai Jenis Developer Di Dunia IT
PROCESS

4. Berbagai Jenis Developer Di Dunia IT
• Frontend Developer
• Backend Developer
• Mobile Developer
• Full stack Developer
• DevOps Developer

5. Roadmap Frontend Developer 2023
1. Internet
2. HTML
3. CSS
4. JavaScript
5. Version Control (Github / Gitlab / Bitbucket)
6. Web secure knowledge (HTTPS, CORS, Content Security Policy,
OWASP)

6. Roadmap Frontend Developer 2023
7. Package Manager (npm, yarn)
8. CSS Preprocessor (Sass)
9. Framework (React, Angular, Vue, Svelte, Solid)
10. CSS Framework (Tailwind, Bootstrap, Material UI)
11.Testing your Apps (Jest)

7. Roadmap Frontend Developer 2023
12.Authentication Strategy (JWT, OAUTH, SSO, Basic Auth, Session
Auth)
13.Mobile Apps (React Native, Flutter)
14.Desktop Apps (Electron, Flutter)
15.Keep Learning

8. Apa Itu Internet ?
Internet adalah Jaringan Komputer Global yang terhubung satu
sama lain, yang berkomunikasi melalui seperangkat protokol
standar.

9. Bagaimana Internet Bekerja ?
Karena Internet adalah jaringan komputer global, setiap komputer
yang terhubung ke Internet harus memiliki alamat yang unik.
Alamat internet berbentuk nnn.nnn.nnn.nnn dimana nnn harus
berupa angka dari 0 - 255. Alamat ini dikenal sebagai alamat IP.

10. Bagaimana Internet Bekerja ?

11. Bagaimana Internet Bekerja ?
Komputer yang kita pakai setiap hari disebut sebagai Client karena
kita tidak terhubung langsung ke internet.
Kita membutuhkan Internet Service Provider (ISP) seperti Biznet,
Telkom, First Media, Indosat, dll.

12. Bagaimana Internet Bekerja ?

13. Bagaimana Browser Bekerja ?

14. Bagaimana Browser Bekerja…bagian Kedua ?

15. 1. Parsing HTML ke Document Object Model Tree

16. 2. Generate CSS-OM Tree, Sesuai Dengan Elementnya

17. 3. Menggabungkan DOM Tree Dengan CSS-OM Tree

18. 4. Layout
The content in each element of the rendering tree will be calculated
to get the geometric information (position, size)

19. 5. Paint
After the layout is complete, the rendering tree is transformed into
the actual content on the screen. This step is called painting. The
browser gets the absolute pixels of the content.

20. 6. Display
Finally, the browser sends the absolute pixels to the GPU and
displays them on the page.

21. MENYUSUN PERBEDAAN PERAN
DEVELOPER DALAM BENTUK SEBUAH
ANALOGI SEDERHANA
(Dibuat oleh Mentor)
PRACTICE

22. MENGANALISIS URGENSI FRONTEND
TERKAIT PENGEMBANGAN
SEBUAH WEB
(Dibuat oleh Mentor)
PRACTICE

23. MENSIMULASIKAN ROADMAP UNTUK
MENJADI FRONTEND DEVELOPER
(Dibuat oleh Mentor)
PRACTICE

24. TUGAS PRAKTIK MANDIRI 1 -MERANCANG
WEB UNTUK MENJADI FRONTEND
DEVELOPER
MENGGUNAKAN HTML
PROVE

25. KUIS 1 - MERANCANG WEB UNTUK
MENJADI FRONTEND DEVELOPER
MENGGUNAKAN HTML
PRACTICE

26. SESI 2

27. MELAKUKAN SMALL TALK
TERKAIT MATERI SEBELUM
MATERI DIMULAI
COMMIT

28. HTML
HTML Bagian 1
PROCESS

29. HyperText Markup Language (HTML)
HTML bukan bahasa pemrograman, HTML adalah structure dari
sebuah website.

30. HyperText Markup Language (HTML)
Ibarat sebuah rumah.
HTML = pondasi / beton bertulang / dinding dari sebuah rumah.
CSS = interior dari rumah itu sendiri.
JavaScript = Kegiatan di dalam rumah.

31. Struktur HTML

32. HTML
Tag, Attribute, Element
PROCESS

33. Tag

34. Attribute

35. Element

37. HTML
TAG HTML Khusus
PROCESS

38. TAG HTML Khusus

39. HTML
Form Validation on HTML
PROCESS

40. Form Validation on HTML

41. HTML
Information Architecture / HTML Best Practice
PROCESS

42. Gunakan DOCTYPE

43. Hindari Penggunaan Referensi Karakter Sebisa Mungkin
Jika anda menulis dokumen HTML dengan pengkodean UTF-8,
sebagian besar karakter (termasuk emoji) dapat ditulis secara
langsung.

44. Hindari Penggunaan Referensi Karakter Sebisa Mungkin

45. Hindari Penggunaan Referensi Karakter Bernama Seperti &, <,
>, ", dan '

46. Berikan Spasi Di Sekitar Konten Komentar

47. Jangan Menghapus TAG Penutup

48. Jangan Beri Spasi Di Sekitar TAG dan Nilai Pada Atribut

49. Jangan Mencampurkan Karakter Besar dan Kecil

50. Jangan Pisahkan Atribut Dengan Dua atau Lebih Spasi

51. Jangan Membuat Link Untuk Favicon.Ico

52. Tambahkan Link Apple-touch-icon

53. Tambahkan Atribut Title Pada Stylesheet Alternatif

54. Menghapus Atribut Type Untuk CSS

55. Jangan Mencampurkan TAG Untuk CSS Dan Javascript

56. Jeda Baris Setelah Elemen br

57. Data Tabel : Tulis Satu Kolom Per Baris

58. Data Tabel : Gunakan Elemen th Untuk Kolom Header

59. Data Tabel : Gunakan Elemen th Untuk Kolom Header

60. HTML
Accessibility
PROCESS

61. Accessibility Semantic Elements

62. Accessibility Buttons & Links

63. Accessibility Color Contrast

64. Accessibility Color Alone As Meaning

65. Accessibility Link States

66. Accessibility Link States

67. Accessibility Headings Introduction

68. Accessibility Errors

69. HTML
SEO Basic
PROCESS

70. Accessibility Link Text
1. Tambahkan file robot.txt
2. Tambahkan file sitemap.xml
3. Has a <meta name="viewport"> tag with width or initial-scale
4. Document has a <title> element
5. Document has a meta description

71. Accessibility Link Text
6. Page has successful HTTP status code
7. Links have descriptive text

72. DEMONSTRASI ROADMAP PROSES DESAIN
WEB/APLIKASI
(Dibuat oleh Mentor)
PRACTICE

73. PRAKTIK MENULISKAN
KODE SEDERHANA
(Dibuat oleh Mentor)
PRACTICE

74. STUDI KASUS TERKAIT
SEMANTIC ELEMENTS
(Dibuat oleh Mentor)
PRACTICE

75. STUDI KASUS TERKAIT
FORM VALIDATION
(Dibuat oleh Mentor)
PRACTICE

76. STUDI KASUS TERKAIT SVF & CANVAS
(Dibuat oleh Mentor)
PRACTICE

77. DEMONSTRASI TERKAIT
INFORMATION ARCHITECTURE
(Dibuat oleh Mentor)
PRACTICE

78. DEMONSTRASI TERKAIT BASIC SEO UNTUK
FRONT END
(Dibuat oleh Mentor)
PRACTICE

79. PRAKTIK BASIC SEO
(Dibuat oleh Mentor)
PRACTICE

80. STUDI KASUS TERKAIT ACCESSIBILITY
(Dibuat oleh Mentor)
PRACTICE

81. TUGAS PRAKTIK MANDIRI 2 -MERANCANG
WEB UNTUK MENJADI FRONTEND
DEVELOPER
MENGGUNAKAN HTML
PROVE

82. KUIS 2 - MERANCANG WEB UNTUK
MENJADI FRONTEND DEVELOPER
MENGGUNAKAN HTML
PRACTICE

83. SESI 3

84. SMALL TALK : MATERI SESI 3
COMMIT

85. CSS
Basic CSS, CSS Layouting
PROCESS

86. Structure CSS

87. Structure CSS

88. Structure CSS

89. Structure CSS

90. CSS
Filter, Transition, Animation,
Responsive Design & Modern CSS
PROCESS

91. Filter, Transition, Animation
1. CSS Filter
Properti filter digunakan untuk mendefinisikan efek visual (seperti
blur dan saturasi) pada suatu elemen <img>
Link demo

92. Filter, Transition, Animation
2. CSS Transition
Transisi CSS memungkinkan Anda untuk mengubah nilai properti
secara smooth, dalam jangka waktu tertentu.
Link demo

93. Filter, Transition, Animation
3. CSS Animation
Membuat animasi tanpa menggunakan JavaScript
Link demo

94. Responsive Design
1. Responsive design adalah membuat tampilan website yang dapat
dilihat dengan baik dari berbagai device
2. Responsive web design hanya berlaku di HTML dan CSS, tidak
berlaku di JavaScript

95. Responsive Design

96. Responsive Design : Tambahkan Viewport

97. Responsive Design : Gunakan CSS Media Queries

98. DEMONSTRASI BASIC CSS
(Dibuat oleh Mentor)
PRACTICE

99. DEMONSTRASI FILTER, TRANSITION, &
ANIMATION
(Dibuat oleh Mentor)
PRACTICE

100. PRAKTIK MENULISKAN
KODE MENGGUNAKAN CSS
(Dibuat oleh Mentor)
PRACTICE

101. STUDI KASUS TERKAIT CSS LAYOUTING
(Dibuat oleh Mentor)
PRACTICE

102. DEMONSTRASI TERKAIT MODERN CSS
(Dibuat oleh Mentor)
PRACTICE

103. DEMONSTRASI TERKAIT
CSS ARCHITECTURE
(Dibuat oleh Mentor)
PRACTICE

104. PRAKTIK MENULISKAN KODE
MENGGUNAKAN CSS SESUAI
MATERI AJAR
(Dibuat oleh Mentor)
PRACTICE

105. STUDI KASUS TERKAIT
RESPONSIVE DESIGN
(Dibuat oleh Mentor)
PRACTICE

106. TUGAS PRAKTIK MANDIRI 3 -MERANCANG
WEB UNTUK MENJADI FRONTEND
DEVELOPER
MENGGUNAKAN HTML
PROVE

107. KUIS 3 - MERANCANG WEB UNTUK
MENJADI FRONTEND DEVELOPER
MENGGUNAKAN HTML
PRACTICE

108. SESI 4

109. SMALL TALK : MATERI SESI 4
COMMIT

110. JAVASCRIPT
Basic Js
PROCESS

111. Basic Js
1. Aturan Js.
2. Variabel,
3. Tipe data,
4. Operator Aritmatika,
5. Operator Perbandingan,
6. Operator Statement,
7. Operator Manipulation

112. Apa yang Bisa Dilakukan dengan Javascript ?
1. Mengubah style ataupun posisi element
2. Mengubah konten element
3. Monitoring behavior pengguna website (klik mouse,
mengarahkan mouse, dll)

113. Apa yang Bisa Dilakukan dengan Javascript ?
4. Membuat transisi ataupun animasi website
5. Memunculkan peringatan pop up
6. Melakukan operasi input / formulir dan memunculkan hasilnya
7. Melakukan validasi form

114. Cara Menambahkan Javascript Ke dalam HTML
1. Menuliskan kode JavaScript diantara tag <script> … </script>
2. Membuat file JavaScript Eksternal dan memanggil filenya ke
dalam HTML melalui attribute src

115. Cara Menambahkan Javascript Ke dalam HTML

116. Penulisan kode JavaScript: Case Sensitive

117. Variabel JavaScript

118. Hasil Output JavaScript

119. Tipe Data JavaScript
1. String
2. Number
3. Boolean
4. Undefined
5. Null
6. Object
7. Array
8. Function

120. Type of JavaScript

121. Operator Aritmatika JavaScript

122. Operator Perbandingan JavaScript

123. Operator Perbandingan JavaScript

124. Operator Perbandingan JavaScript

125. String

126. Menentukan Panjang String

127. Manipulasi String

128. JavaScript Statement: IF…ELSE

129. JavaScript Statement: Switch Case

130. JavaScript Statement: Switch Case

131. JAVASCRIPT
Basic Js
PROCESS

132. Basic Js
1. Array
2. Sorting Array,
3. Loops,
4. Function,
5. Object,
6. API

133. Array

134. Sorting Array

135. Loops

136. Function, Apa itu Gunanya?
1. Mengulangi penulisan kode yang sama
2. Membuat kode lebih mudah dibaca dan maintenance

137. Function, Apa itu Gunanya?

138. Object

139. Fetch API

140. Fetch API

141. DEMONSTRASI TERKAIT
SYNTAX DAN PROGRAMMING
(Dibuat oleh Mentor)
PRACTICE

142. STUDI KASUS DOM
(Dibuat oleh Mentor)
PRACTICE

143. PRAKTIK PENGKODEAN SEDERHANA
MENGGUNAKAN JAVASCRIPT
(Dibuat oleh Mentor)
PRACTICE

144. ASYNCHRONOUS JAVASCRIPT
(Dibuat oleh Mentor)
PRACTICE

145. FETCH API
(Dibuat oleh Mentor)
PRACTICE

146. PRAKTIK PENGKODEAN SEDERHANA
MENGGUNAKAN JAVASCRIPT
(Dibuat oleh Mentor)
PRACTICE

147. STUDI KASUS TERKAIT
ASYNCHRONOUS JAVASCRIPT
(Dibuat oleh Mentor)
PRACTICE

148. STUDI KASUS TERKAIT FETCH API
(Dibuat oleh Mentor)
PRACTICE

149. TUGAS PRAKTIK MANDIRI 4 -MERANCANG
WEB UNTUK MENJADI FRONTEND
DEVELOPER
MENGGUNAKAN HTML
PROVE

150. KUIS 4 - MERANCANG WEB UNTUK
MENJADI FRONTEND DEVELOPER
MENGGUNAKAN HTML
PRACTICE

151. SESI 5

152. MELAKUKAN SMALL TALK TERKAIT MATERI
SEBELUM MATERI DIMULAI
COMMIT

153. VERSION CONTROL SYSTEM
PROCESS

154. Apa itu Version Control System
Version control system (VCS) adalah sebuah kumpulan perangkat
lunak yang sudah terintegrasi dan digunakan untuk membantu
software engineer mengelola perubahan dalam source code dari
waktu ke waktu.

155. Version Control yang Banyak Digunakan

156. Deployment Frontend Mudah dengan Vercel

157. DEMONSTRASI CARA KERJA
VERSION CONTROL SYSTEM
(Dibuat oleh Mentor)
PRACTICE

158. DEMONSTRASI DEPLOYMENT KE SERVER
(Dibuat oleh Mentor)
PRACTICE

159. PRAKTIK MENJALANKAN PERINTAH
KONFIGURASI SEDERHANA
(Dibuat oleh Mentor)
PRACTICE

160. TUGAS PRAKTIK MANDIRI 5 -MERANCANG
WEB UNTUK MENJADI FRONTEND
DEVELOPER
MENGGUNAKAN HTML
PROVE

161. KUIS 5 - MERANCANG WEB UNTUK
MENJADI FRONTEND DEVELOPER
MENGGUNAKAN HTML
PRACTICE