jam
menit
detik
Ferdinand Antonius | Web Infra Engineer at Traveloka
Ferdinand Antonius | Web Infra Engineer at Traveloka
Diskon 80%
Level Kelas : Pemula
19 Chapter | 6 Jam 4 Menit
1 Workbook (PDF)
Bersertifikat
Akses Seumur Hidup
Tentang Kelas ini
Kelas ini cocok untuk,
Kelas ini cocok untuk,
Skill yang kamu Dapatkan
Alur Pembelajaran
1. Melakukan Pre-Test di Awal Pembelajaran
Pre-test merupakan tahap awal yang dilakukan untuk mengetahui sejauh mana kamu mengetahui ruang lingkup dalam pembelajaran yang akan kamu ikuti.
2. Menonton Seluruh Video Pembelajaran
Kamu bisa menonton materi video mana saja, dimana saja sesuai dengan keinginan dan pahami materinya dengan kualitas yang tinggi
3. Mengerjakan Assignment
Ini merupakan evaluasi akhir dalam setiap materi yang ada. Kamu bisa mengulangi test ini hingga mendapat nilai yang sesuai.
4. Dapatkan Sertifikat
Tersedia sertifikat yang dapat mendukung perjalanan karir kamu (bisa kamu cantumkan di LinkedIn atau CV)
1. Melakukan Pre-Test di Awal Pembelajaran
Pre-test merupakan tahap awal yang dilakukan untuk mengetahui sejauh mana kamu mengetahui ruang lingkup dalam pembelajaran yang akan kamu ikuti.
2. Menonton Seluruh Video Pembelajaran
Kamu bisa menonton materi video mana saja, dimana saja sesuai dengan keinginan dan pahami materinya dengan kualitas yang tinggi
3. Mengerjakan Assignment
Ini merupakan evaluasi akhir dalam setiap materi yang ada. Kamu bisa mengulangi test ini hingga mendapat nilai yang sesuai.
4. Dapatkan Sertifikat
Tersedia sertifikat yang dapat mendukung perjalanan karir kamu (bisa kamu cantumkan di LinkedIn atau CV)
Kurikulum
19 Chapter | 6 Jam 4 Menit
Memasuki chapter ini, kamu akan dijelaskan mengenai lingkup kerja Front End Engineering. Penjelasannya akan digambarkan dalam ilustrasi yang menarik loh! Mending, klik tombol play sekarang deh!
Sebelum belajar HTML lebih jauh, kamu harus tahu nih, tentang cara kerja internet. “Hmm.. apa hubungannya sama HTML dan Front End Engineering?” Temukan jawabannya di video ini!
Nah! Cara kerja internet udah kamu pahami, sekarang saatnya kamu memahami juga tentang perbedaan HTTP dan HTTPS. Dua hal ini sangat berkaitan! Jadi, jangan sampai ada yang kelewatan! Yuk, pencet tombol play!
Tren dalam dunia Front End Engineering semakin berkembang. Makannya, part ini akan ngebahas perkembangan tren Front End Engineering, mulai dari Roadmap hingga berbagai penggunaan Framework yang populer. Check it out!
Sebelum melangkah lebih jauh dalam membuat code HTML dan CSS, kamu perlu melakukan Set Up Environment terlebih dahulu. “Kira-kira apa aja ya yang dibutuhkan?” Kepoin materinya di sini!
Set Up Environment menggunakan Online Editor dan Instalasi Node.Js udah kamu pahami! Sekarang saatnya melanjutkan ke part Set Up Repository dan Instalasi Git. Let’s play!
Setelah Instalasi Git, selanjutnya adalah melakukan Integrasi Git dengan Github. Ada banyak yang harus dilakukan, salah satunya adalah inisialisasi Github. Seperti apa prosesnya? Cari tahu semuanya dengan klik tombol play!
Nah! Udah waktunya masuk ke materi pengantar HTML nih! Di part ini, kamu akan belajar tentang HTML in general, Developer Tools, dan Anatomi Komentar dalam Tag HTML. Wah mulai seru nih! Daripada kelamaan, langsung aja kita mulai!
Tahap berikutnya adalah mengenal HTML Entities dan Penggunaan Head dalam HTML. Ini akan berguna ketika kamu ingin membuat suatu simbol di website dan berbagai jenis teks dalam HTML. Jadi, perhatikan baik-baik ya!
Memasuki chapter ini, kamu akan dijelaskan mengenai lingkup kerja Front End Engineering. Penjelasannya akan digambarkan dalam ilustrasi yang menarik loh! Mending, klik tombol play sekarang deh!
Sebelum belajar HTML lebih jauh, kamu harus tahu nih, tentang cara kerja internet. “Hmm.. apa hubungannya sama HTML dan Front End Engineering?” Temukan jawabannya di video ini!
Nah! Cara kerja internet udah kamu pahami, sekarang saatnya kamu memahami juga tentang perbedaan HTTP dan HTTPS. Dua hal ini sangat berkaitan! Jadi, jangan sampai ada yang kelewatan! Yuk, pencet tombol play!
Tren dalam dunia Front End Engineering semakin berkembang. Makannya, part ini akan ngebahas perkembangan tren Front End Engineering, mulai dari Roadmap hingga berbagai penggunaan Framework yang populer. Check it out!
Sebelum melangkah lebih jauh dalam membuat code HTML dan CSS, kamu perlu melakukan Set Up Environment terlebih dahulu. “Kira-kira apa aja ya yang dibutuhkan?” Kepoin materinya di sini!
Set Up Environment menggunakan Online Editor dan Instalasi Node.Js udah kamu pahami! Sekarang saatnya melanjutkan ke part Set Up Repository dan Instalasi Git. Let’s play!
Setelah Instalasi Git, selanjutnya adalah melakukan Integrasi Git dengan Github. Ada banyak yang harus dilakukan, salah satunya adalah inisialisasi Github. Seperti apa prosesnya? Cari tahu semuanya dengan klik tombol play!
Nah! Udah waktunya masuk ke materi pengantar HTML nih! Di part ini, kamu akan belajar tentang HTML in general, Developer Tools, dan Anatomi Komentar dalam Tag HTML. Wah mulai seru nih! Daripada kelamaan, langsung aja kita mulai!
Tahap berikutnya adalah mengenal HTML Entities dan Penggunaan Head dalam HTML. Ini akan berguna ketika kamu ingin membuat suatu simbol di website dan berbagai jenis teks dalam HTML. Jadi, perhatikan baik-baik ya!
Dalam CSS, ada yang dinamakan CSS Selector yang memiliki fungsi untuk menambahkan attribute pada elemen HTML. “Kira-kira seperti apa pembuatan codenya?” Simak di video berikut!
“Tunggu-tunggu, kamu pasti bingung kenapa ada Javascript di sini?” Ternyata, ada keterkaitan antara Javascript dengan HTML dan CSS loh! Yuk cari tahu hubungannya, dengan klik tombol play!
Async & Defer serta Event Handler dalam Javascript, memiliki peranan penting dalam proses penambahan Javascript ke dalam dokumen HTML. “Udah kebayang belum gambarannya seperti apa?” Kalau belum, cek aja di video ini!
Pembuatan template HTML dengan Next.Js akan mempermudah pembuatan server web dan halaman web. “Kok bisa gitu ya?” Tenang, jawabannya bisa kamu temukan dengan klik tombol play sekarang!
Di part ini kamu akan diajarkan untuk mengetahui perbedaan sintaks HTML dalam React.Js. Dan nggak ketinggalan, dengan demo code dalam Import Export komponen di React.Js. Oke let’s play this video!
Import Export komponen di React.Js udah. Sekarang saatnya untuk adding framework CSS serta menambahkan CSS ke dalam komponen Next.Js! “Pasti udah pada nggak sabar kan?” Yaudah klik tombol segitiga untuk memulai!
Di chapter ini kamu akan belajar Block dan Inline yang merupakan salah satu elemen dalam HTML. Serta penggunaan Display Property dalam CSS. “Hmm kira-kira fungsinya buat apa sih?”. Tetap tenang dan langsung tonton videonya!
Oke karena berbagai Display Property udah kamu kuasai, sekarang saatnya mengenal berbagai properti dalam CSS Box Model, mulai dari margin, border, padding, hingga mengubah warna dan background. Pasti seru! Yuk kita play!
Ketika melakukan Formatting Text dalam HTML, ada banyak sekali yang bisa dilakukan loh! Tujuannya adalah untuk menciptakan berbagai variasi text dalam website. Biar websitenya, nggak gitu-gitu aja! Oke, here we go!
Nah! Setelah melakukan pemformatan teks dalam HTML, agar tampilan dalam websitenya lebih tertata dan eye catching, kamu bisa melanjutkan formatting text menggunakan CSS. So, play here!
List dalam HTML dan CSS jenisnya ada banyak sekali. Karena itu, di chapter ini kamu akan dijelaskan berbagai jenis List dalam HTML dan CSS serta berbagai code dan cara membuatnya! Watch it carefully!
Sekarang saatnya masuk ke dalam cara membuat tabel dalam HTML. Nggak cuma membuat tabel aja! Bakal ada demo untuk penggunaan Attribute Rowspan dan Colspan. “Astaga, apalagi tuh?” Tenang! Kita bahas di video ini yuk!
Positioning dalam CSS berperan untuk mengatur posisi sebuah elemen HTML, menggunakan properti yang dinamakan Position, ZIndex, dan Float. Untuk pembuatan codenya, bisa kamu pelajari di chapter ini. Let’s go!
Setelah belajar mengatur Position, Zindex, dan Float, maka penting buat kamu belajar Navbar dalam HTML dan CSS. Spill dikit deh! Ada 2 jenis Navbar yang bakal kamu pelajari di sini. So, just keep on watching!
“Modal itu apa sih? Terus cara buat komponen Modal tuh kaya gimana?” Sabar sabar, di part ini kamu akan belajar cara pembuatan modal, implementasi modal, hingga perilaku menutup modal. Watch it carefully!
“Modal itu apa sih? Terus cara buat komponen Modal tuh kaya gimana?” Sabar sabar, di part ini kamu akan belajar cara pembuatan modal, implementasi modal, hingga perilaku menutup modal. Watch it carefully!
Flexbox berfungsi mengatur tata letak elemen-elemen dalam satu dimensi. Dalam Flexbox, akan dijelaskan bagaimana pembuatan CSS Flex Container, CSS Flex Item, hingga Reimplementasi Navbar dengan Flex. So, keep on going guys!
Flexbox berfungsi mengatur tata letak elemen-elemen dalam satu dimensi. Dalam Flexbox, akan dijelaskan bagaimana pembuatan CSS Flex Container, CSS Flex Item, hingga Reimplementasi Navbar dengan Flex. So, keep on going guys!
Ketika kamu akan membuat sebuah Form dalam HTML, yang perlu dilakukan terlebih dulu, adalah memahami penggunaan dari berbagai attribute dan juga elemen-elemen dalam Form HTML. Yuk kita pelajari sama-sama!
Oke, di part sebelumnya kamu udah paham nih berbagai jenis Form dalam HTML, sekarang saatnya, melakukan pembuatan Log in Form, yang dibantu dengan penambahan Javascript Event Handler, dan Component dalam React. Yuk mulai!
Langkah selanjutnya yang perlu dilakukan setelah membuat Log in Form adalah, menyambungkannya dengan API dan melakukan Testing, agar bisa mengetahui dimana letak error serta penangannya. Stay focused and don’t miss it!
File-file HTML, CSS, dan Javascript yang sudah di-build, kode rutenya bisa ditangani oleh Static Website. Untuk memastikan website bisa di-build, maka kita harus melakukan Deployment Statis Website ke Vercel. Langsung aja kita mulai!
Kenapa kamu harus beli kelas di Kelas.work?
Tersedia Uji Kompetensi dan dapatkan Sertifikat pendukung CV
Diajarkan oleh mentor-mentor yang profesional
Sistem pembelajaran yang fleksibel, dapat dilakukan dimanapun dan kapanpun
Kenapa kamu harus beli kelas di Kelas.work?
Tersedia Uji Kompetensi dan dapatkan Sertifikat pendukung CV
Diajarkan oleh mentor-mentor yang profesional
Sistem pembelajaran yang fleksibel, dapat dilakukan dimanapun dan kapanpun
Web Infra Engineer at Traveloka
Web Infra Engineer at Traveloka
Ferdinand Antonius, seorang Web Infra Engineer di Traveloka. Ia memiliki ketertarikan dengan dunia programming sejak bangku SMP. Kemudian ia memutuska....n untuk melanjutkan pendidikannya di Fakultas Ilmu Komputer Universitas Indonesia. Selama kuliah, ia kerap kali dipercaya untuk menjadi Asisten Dosen dan mengembangkan berbagai project pengembangan website. Hingga saat ini, ia berhasil menduduki posisi sebagai Senior Web Infra Engineer di Traveloka, setelah lebih dari 5 tahun menggeluti bidang ini. Mentor dengan segala keistimewaan yang dimiliki, akan membantumu belajar Front End menggunakan HTML & CSS.
Diskon 80%
Rp 250.000
Level Kelas : Pemula
19 Chapter | 6 Jam 4 Menit
1 Workbook (PDF)
Bersertifikat
Akses Seumur Hidup
Copyright Kelas.Work © 2023. All rights reserved.