Front End Web Developer dengan HTML & CSS

Hai! Selamat datang di kelas “Front End Web Developer dengan HTML & CSS”. Di chapter ini, kamu akan diajak mengetahui alasan, kenapa harus belajar HTML & CSS untuk pengembangan website. Mau tahu? Play aja videonya sekarang!

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!

Hai! Selamat datang di kelas “Front End Web Developer dengan HTML & CSS”. Di chapter ini, kamu akan diajak mengetahui alasan, kenapa harus belajar HTML & CSS untuk pengembangan website. Mau tahu? Play aja videonya sekarang!

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!

Formatting Text? Udah. Menambahkan media dan tautan ke dalam website juga udah! Nah, sekarang waktunya membuat Transition dan Animation dalam website menggunakan CSS. “Gimana caranya tuh?” Yuk cari tau di video ini!

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!

Pembuatan Grid dalam CSS, bisa kamu lakukan mulai dari membuat pengaturan rasio ukuran, menggunakan berbagai Property Grid, dan yang terakhir melakukan Render Array dalam React. “Hah? Maksudnya gimana?” Tonton aja di video ini!

“Kita mulai dengan pertanyaan, gimana sih membuat web menjadi responsif?” Kuncinya adalah memahami CSS at Rules yang diperlukan. “Lalu apa aja rulesnya?” Tenang, pertanyaanmu akan terjawab kok! Let’s play this video, now!

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!

Setelah perjalanan panjang ini, akhirnya kita tiba di penghujung kelas! Di chapter ini kamu akan diajak untuk mengetahui Career Path Front End Web Developer. Persiapkan dirimu menjadi Front End Web Developer terbaik bersama Kelas.work!