Skodev
Belajar coding dalam bahasa Indonesia
DISKON TERBATAS! Masukkan kupon "skillbaru" saat checkout di kelas apa saja
Skodev
Belajar coding dalam bahasa Indonesia
Ini menjadi langkah awal kamu untuk terjun ke dunia website. Mengatur tampilan dasar yang akan dilihat user dan menghiasnya sesuai yang kamu mau. Frontend bisa kita sebut sebagai bagian yang bisa dilihat dan user bisa berinteraksi dengannya.
Tentu saja frontend sangat erat kaitannya dengan design website itu sendiri. Dengan mempelajari ini, kamu sudah bisa membuat website statis, atau website yang tidak banyak berinteraksi dengan data seperti profil pribadi atau perusahaan.
Frontend website sendiri secara kasar akan terbagi tiga:
Belakangan ini istilah frontend web developer sebenarnya tidak berhenti di website statis saja, adanya library/framework seperti angularjs, reactjs dan vuejs membuat tugas frontend developer lebih dari sekedar mengubah design ke website. Tapi tenang, kita akan belajar pelan-pelan dengan mengenal konsepnya satu per satu.
Pertama-tama, kita harus memahami bahwa ada tiga elemen penting dalam pengembangan web frontend: HTML, CSS, dan JavaScript. HTML adalah kerangka dasar dari sebuah situs web, CSS menambahkan keindahan dan gaya pada situs tersebut, sementara JavaScript memberikan interaktivitas. Jadi, langkah pertama dalam belajar frontend adalah memahami ketiga teknologi ini.
HTML adalah langkah pertama yang harus kamu lakukan dalam belajar frontend. Mulailah dengan mempelajari tag-tag HTML dasar seperti <h1>, <p>, <div>, dan <img>. Kemudian, cobalah membuat halaman HTML sederhana.
Setelah kamu nyaman dengan HTML, langkah selanjutnya adalah CSS. Pelajari cara menambahkan gaya pada elemen HTML menggunakan CSS. Mulai dengan properti dasar seperti color, background-color, font-size, dan margin. Kemudian, cobalah untuk mendesain halaman HTMLmu dengan CSS.
Sekarang, setelah kamu memiliki pengetahuan dasar HTML dan CSS, waktunya belajar JavaScript. Mulailah dengan konsep dasar seperti variabel, tipe data, fungsi, loop, dan kondisional. Kemudian, cobalah menambahkan interaktivitas pada situs webmu dengan JavaScript.
Setelah kamu memahami dasar-dasar HTML, CSS, dan JavaScript, kamu bisa mulai belajar menggunakan tools dan framework yang biasa digunakan dalam pengembangan frontend, seperti Bootstrap untuk CSS, dan React, Vue, atau Angular untuk JavaScript.
Cara terbaik untuk belajar adalah dengan praktek. Cobalah membuat proyek sendiri. Misalnya, kamu bisa membuat situs web portofolio pribadi atau situs web untuk bisnis fiktif. Ini tidak hanya akan membantu kamu memahami konsep yang telah kamu pelajari, tetapi juga akan memberikan sesuatu untuk ditunjukkan kepada calon pemberi kerja.
Pengembangan web adalah bidang yang selalu berubah. Jadi, penting untuk terus belajar dan berpraktek. Ikuti tutorial online, baca dokumentasi, dan jangan takut untuk mencoba hal baru.
Ingat, belajar frontend itu perjalanan, bukan tujuan. Jadi, nikmati proses belajarnya dan jangan menyerah! Selamat belajar dan semoga sukses!
Mau belajar bikin website tapi sama sekali tidak tahu harus mulai dari mana? tenang.. ikuti kelas-kelas di perjalanan ini dan siap-siap membuat website pertamamu!
Daftar isi Belajar HTML dari dasar
Berkenalan dengan html, singkatan dari hypertext markup language, bahasa markup yang digunakan untuk membuat struktur dasar website
menyimpan file html membutuhkan format khusus yaitu .html, tidak boleh yang lain, kita juga akan melihat cara membuka file html di browser yang sangat mudah.
Tag html adalah cara penulisan kode kode html yang perlu kita ketahui. Ada banyak tag html yang akan kita lihat satu persatu
Ada berbagai macam cara untuk membuat tulisan di HTML, salah duanya heading dan paragraf. Heading akan membuat tulisan kita lebih tebal secara otomatis, sementara paragraf akan terlihat seperti text biasa
Website kita bisa terhubung dengan halaman halaman lain, mulai dari halaman lokal, atau halaman yang kita buat sendiri sampai halaman luar seperti google, belajar cara menghubungkannya dengan tag link
salah satu hal yang menari di website adalah gambar, kita akan melihat bagaimana cara menampilkan gambar dengan tag img di html
Iframe memungkinkan website untuk mengambil konten dari website lain dan menampilkannya di website sendiri. Lihat bagaimana kekuatan iframe yang luar biasa
Kita bisa mengubah format text langsung di html, mulai dari menebalkan sampai memiringkan tulisan di halaman website
Tag-tag pada html punya sifat-sifat yang automatis ikut saat digubakan. Salah satunya sifat block dan sifat inline. Disini kita akan lihat perbedaan apa itu block element dan apa itu inline element
Apa itu doctype html dan apa kegunannya. Temukan jawabannya di video ini
Komentar adalah cara kita membuat dokumentasi atau menambahkan info sebagai developer atau penulis kode, agar kode lebih mudah dibaca atau mudah mendapatkan keterangannya
Kita akan melihat bagaimana cara membuat beberapa halaman html dan menghubungkannya satu sama lain
Kita akan melihat bagaimana cara membuat table pada html. Tag tag apa saja yang kita butuhkan?
Apa itu list dan bagaimana cara membuatnya. Ada beberapa jenis list, kita akan melihatnya di video ini
Untuk menampilkan html secara benar, kita butuh mendeklarasikan charset. Selain itu ada juga cara penggunaan symbol dan entities di html
Kita akan mulai melihat cara membuat form dan elemen elemen apa saja yang bisa kita masukkan ke dalam form html
Setiap tag html memiliki attribute. Apa itu attribute dan kegunannya? mari kita saksikan
Checkbox dan radio button adalah dua element form yang bisa kita manfaatkan untuk membuat pilihan ke user yang menggunakan website
Selain checkbox dan radio, select juga bisa kita manfaatkan untuk menampilkan pilihan.
Menyelesaikan form html dengan menambahkan input submit, tombol yang digunakan saat user ingin mengirimkan data datanya
Selamat! teman-teman sudah menyelesaikan playlist htmlnya. Setelah ini, kita bisa mulai belajar CSS untuk menghias website atau melihat feature-feature baru di html5
Daftar isi Belajar CSS dari dasar
Bekenalan dengan css, bahasa yang digunakan untuk menghias website. Kalau sudah belajar html sebelumnya, css jadi bumbu pelengkap hidangan website kita!
Bagaimana cara menghubungan css dan html? Ada tiga cara, inline, internal dan external, temukan jawabannya di video ini
Belajar struktur dasar dari css, lihat bagaimana cara penulisannya
Bagaimana cara kita menentukan elemen html mana yang mau dihias? untuk itu kita akan belajar selektor, memilih tag, id ataupun kelas
Bagaimana cara mengubah warna background pada css
Bukan hanya warna, kita juga bisa menambahkan gambar sebagain background pada css. Belajar juga apa itu komentar dan penggunannya di css
Text adalah media yang paling penting dan paling banyak dikonsumsi di dunia website. Belajar cara menghias text dengan css
Selain text yang bisa kita hias, jenis font tulisannya pun bisa kita atur dengan css
Link punya style yang automatis datang saat dibuat, disini kita akan melihat bagaimana cara mengubah dan menghias link yang ada pada website
Sangat penting untuk mengetahui pengaturan dimensi pada CSS, pelan pelan kita akan melihat tentang display, boxmodel, margin, border dan padding.
Mengatur display elemen elemen html, mulai dari melihat apa itu inline, block dan juga inlineblock, pelajari perbedannya di sini.
Ada dua cara biasa untuk menghilangkan elemen dengan css, bisa kita sembunyikan atau kita hapus keberadaanya, apa bedanya? lihat disini
Penting untuk mengetahui apa itu boxmodel, konsep dasar dari pengetahuan seputar tinggi dan lebar konten pada css, ada juga margin yang akan menjadi pembuka
Selain margin, ada padding dan border yang mempengaruhi pengaturan lebar dan tinggi suatu konten, lihat perbedaan dan cara menggunakannya
Pengaturan posisi pada css tidak boleh dilewatkan, kita akan mulai belajar perbedaan posisi relative dan static di sini.
Belajar apa itu posisi absolute pada css dan bagaimana cara menggunakan posisi absolute
Belajar apa itu posisi fixed pada css dan bagaimana cara menggunakan posisi fixed
Posisi parent atau pembungkus suatu element sangat berpengaruh pada isinya. Belajar bagaimana cara mengatur posisi parent pada css
Kita bisa mengatur posisi elemen pada koordinat z, atau seakan-akan suatu elemen berada di atas elemen lainnya dengan z-index
Float dan clear akan sangat sering ditemukan pada pembuatan struktur website. Kemampuannya memang bisa dimanfaatkan untuk banyak hal, termasuk mengatur layout dasar suatu website
Float tidak cukup kita pelajari di satu video, lanjutkan belajar float dan kuasai cara menggunakannya
Selain selektor dasar, seperti memilih tag, id atau class, ada juga cara lain yang membuat pemilihan element html jauh lebih fleksibel
Temukan informasi lebih banyak tentang selektor yang bisa kita gunakan disini referensi CSS w3school dan onlastblog css cheatsheet
Membuat website lebih menarik dengan efek hover dan focus. User akan mendapatkan feedback dari aktivitasnya
Belajar CSS dasar selesai! terus latihan dan belajar untuk menguasainya. Setelah ini kita bisa belajar html5 atau CSS3
Daftar isi Belajar html5
html5 adalah versi terbaru dari html, pastikan teman-teman sudah pernah belajar html sebelum mengikut kelas ini. Untuk yang punya akun premium, bisa mendownload layout yang akan digunakan
Struktur dasar html yang akan kita manfaatkan dalam kelas ini. Kita akan melihat layout yang dibuat dengan html dan css.
Semantic element baru pada html5, ada header, footer, article, section, nav dan main. Kita akan melihat kegunannya masing-masing
Membuat caption atau info tulisan pada gambar sangat mudah pada html5
Kadang kita ingin menyembunyikan beberapa tulisan dan membiarkan user yang menampilkannya, kita bisa memanfaatkan tag detail untuk ini. Ada juga dialog untuk menampilkan info-info
Input baru apa saja yang ada pada html 5, kita akan melihat daftarnya di HTML5 Doctor dan langsung mempraktekkannya
Memasang video pada website sangat mudah dengan html5, kita bisa mengatur format dan juga backup jika browser tidak mendukungnya
Sama seperti video sebelumnya kali ini, kita akan memasang audio pada website sangat mudah dengan html5, kita bisa mengatur format dan juga backup jika browser tidak mendukungnya
Selamat! kita udah selesai belajar HTML5. Rekomendasi website CaniUse.com untuk melihat browser mana saja yang mensupport tag tag html5 tertentu.
Daftar isi Belajar CSS3
CSS3 adalah versi terbaru dari css, ada banyak property-property baru yang bisa kita pelajari dan manfaatkan untuk website. Pastikan sudah familiar dengan dasar css sebelum mengikuti kelas ini
Border radius digunakan untuk mengatur radius dari sisi sisi elemen, kita bahkan bisa membuat suatu elemen berbentuk bulat dengan ini
Menambahkan efek bayangan pada element html dengan menggunakan box shadow
Vendor prefix adalah cara memberitahu browser tertentu yang belum sepenuhnya mendukung property baru di css3, ada juga box sizing untuk mengatur cakupan lebar dari suatu element
Kalau sebelumnya kita belajar box shadow, ada juga text shadow untuk mengatur bayangan pada text, berikan efek keren pada text website kita
Atur bagaimana text dibungkus oleh css, dengan menggunakan property word wrap dan text overflow
Mulai mengubah konten secara 2d dengan property translate dan juga rotate
Mulai mengubah konten secara 2d dengan property Scale dan juga Skew
Property transition pada css memberikan efek ketika melakukan perubahan pada element element tertentu
Atur perspective atau cara pandang dari satu elemen, untuk menampilkan kesans 3 dimensi
Ternyata translate dan rotate bisa kita gunakan juga untuk membuat efek 3 dimensi!
Melihat efek scale pada 3 dimensi
Latihan memanfaatkan property 3 dimensi yang ada pada css, dengan membuat efek flip card
Latihan memanfaatkan property 3 dimensi yang ada pada css, dengan membuat efek flip card bagian kedua
Buat animasi melalui css ternyata sangat mungkin! lihat property animation dan juga apa itu keyframes
Mengatur iterasi dan arah pada animasi yang kita buat di css
Masih ada banyak lagi yang bisa kita atur dengan animasi pada css, diantaranya Delay, fillmode, timing dan playstate
Ternyata mengatur keyframes bisa kita lakukan dengan bantuan satuan % (persen), dengan ini animasi jauh lebih fleksibel
Kita pernah melihat property background pada css dasar, dengan css3, masih banyak lagi yang bisa kita lakukan
Konten yang melebihi batasnya, bisa diatur dengan property overflow resize, ada juga opacity untuk mengatur transparansi suatu elemen
Bosan dengan font yang itu-itu saja? kita bisa mengambil font dari font lokal yang kita punya ataupun dari library gratis seperti google font
Selektor yang bisa kita lakukan untuk memilih element html di berbagai macam kasus dengan pseudo classes
Mengatur elemen kebarapa bahkan dengan rumus pada css
Input juga punya berbagai macam pseudo classes, yang bisa kita manfaatkan untuk membuat lebih menarik pada css
Daftar isi tips dan trik CSS
Belajar bagaimana cara membuat tombol cantik dengan koding yang dinamis berdasarkan nama kelasnya di css
Belajar bagaimana cara membuat efek hover untuk suatu produk pada css, tentu bisa diimplementasikan di mana saja
Belajar bagaimana cara membuat accordion murni dengan css
Belajar bagaimana cara membuat modalbox dengan css
Daftar isi Bermain dengan Flexbox
mengenal property pada css3 yang sangat luar biasa! flexbox
mengenal property align item dan align content pada flexbox , untuk mengatur posisi elemen elemenya
mengenal property untuk child pada flexbox, apa saja yang bisa kita lakukan untuk konten yang menggunakan flexbox pada parentnya
bagaimana cara berkerja dengan responsive website menggunakan flexbox
Satu lagi property yang luar biasa untuk bekerja membuat sistem kolom, yaitu multi column css!
Daftar isi Membuat halaman depan homepage facebook
Latihan html dan css dengan membuat halaman depan dari homepage facebook
Membuat bagian header dari homepage facebook
Membuat bagian header dari homepage facebook bagian 2
Membuat bagian konten dari homepage facebook
Membuat bagian konten dari homepage facebook bagian 2
Membuat bagian konten dari homepage facebook bagian 3
Membuat bagian footer dari homepage facebook
Daftar isi Membuat website responsive
Belajar bagaimana cara membuat responsive website dengan html dan css
Belajar bagaimana cara membuat layout dasar website menjadi responsive
Belajar apa itu media queries dan bagaimana cara menggunakan media queries untuk website responsive
Membuat ukuran font menjadi responsive
Mengenal meta viewport dan apa keguannnya pada website responsive
Daftar isi Belajar javascript untuk pemula
berkenalan dengan javsascript, bahasa program yang bisa digunakan pada bagian front-end website untuk membuatnya lebih interaktif
Bagiamana cara menghubungkan javascript dengan html, kita akan melihat beberapa cara yang bisa kita gunakan
Variabel adalah cara untuk menyimpan suatu nilai dengan memberikannya nama. Dengan nama ini kita bisa mengambil atau mengubah nilai tersebut dimana saja.
String adalah salah satu tipe data pada bahasa program termasuk javascript yang kita manfaatkan untuk menulis suatu text atau karakter
Angka/Number adalah salah satu tipe data pada bahasa program termasuk javascript yang kita manfaatkan untuk menuliskan angka termasuk desimal ataupun angka dengan koma
Belajar lebih dalam tentang variabel pada javascript
Dengan operator matematika pada javascript, kita bisa melakukan berbagai macam operasi matematika, mulai dari penjumlahan, pengurangan, perkalian, pembagian dan lain-lain
Javascript punya fungsi-fungsi yang sudah secara automatis datang untuk kita manfaatkan pada tipe data angka
Javascript punya fungsi-fungsi yang sudah secara automatis datang untuk kita manfaatkan pada tipe data angka (bagian kedua)
Javascript punya fungsi-fungsi yang sudah secara automatis datang untuk kita manfaatkan pada tipe data string
Javascript punya fungsi-fungsi yang sudah secara automatis datang untuk kita manfaatkan pada tipe data string (bagian kedua)
Belajar apa itu fungsi pada javascript dan bagaimana cara menggunakannya
Setelah belajar fungsi, kali ini kita akan melihat guna paramater yang bisa kita masukkan pada fungsi di javascript
Paramter boleh lebih dari satu, lihat cara menggunakannya di sini
Fungsi bisa memiliki ‘return’.. apa itu return dan bagaimana cara menggunakannya?
Variabel pada javascript memiliki scope atau ruang lingkup hidup yang menentukan dari mana saja variabel ini bisa diakses
Satu tipe data lagi dari javascript! namanya array, lihat bagaimana cara membuat array di javascript
Tipe data array juga punya metode metode yang bisa kita manfaatkan, sama seperti pada tipe data string atau number
Tipe data array juga punya metode metode yang bisa kita manfaatkan, sama seperti pada tipe data string atau number (bagian 2)
Tipe data boolean, tipe data pada javascript yang hanya memiliki 2 nilai, true dan false
Mulai belajar logika, menentukan suatu kasus dan mengambil keputusan dengan if dan else
Operator logika pada javascript, untuk membandingkan nilai-nilai. Lihat cara penggunaan operator logika pada javascript di sini
Bagaimana cara menggunakan operator logika jika ada lebih dari satu syarat?
Kita sudah pernah melihat boolean, tapi ada sih sebenarnya kegunaannya yang hanya bisa bernilai true atau false
Kita sudah pernah melihat if dan else, masih ada lagi yang namanya else if untuk mebuat syarat lebih dari satu
Bagaimana jika kita punya syarat di dalam syarat? atau istilahnya nested if (if bercabang)
persyaratan yang banyak bisa kita buat lebih simple dengan switch case
Melakukan hal yang berulang-ulang cukup dengan bantuan for loop
Mirip dengan forloop, kali ini kita akan melakukan hal yang berulang-ulang dengan bantuan while loop
Pasangan dari while loop, yaitu do while, dimana kita akan mengeksekusi kode minimal satu kali sebelum menguji syarat
Selamat! kita sudah selesai belajar javascript dasar, masih banyak rahasia dan kekuatan javascript, mulai belajar teknik DOM pada javascript atau penggunaan objek
Daftar isi DOM pada Javascript
DOM adalah singkatan dari document object model, dengan menguasa DOM kita bisa berinteraksi dengan HTML dan CSS melalui Javascript dan memanipulasinya
Bagaimana cara memilih elemen HTML yang ingin dimainkan dengan DOM. Kita akan lihat cara menggunakan selektor
Cara menambahkan, menghapus dan mengedit elemen HTML, melalui DOM pada Javascript
Memainkan attribute pada HTML dengan DOM pada Javsascript
Memainkan CSS yang dimilik suatu elemen melalui DOM pada Javsascript
Dengan event pada javascript kita bisa mendengan aktivitas yang dilakukan oleh user dan menyiapkan respon yang ingin diberikan dari setiap aktivitasnya
Latihan event, dengan event pada javascript kita bisa mendengan aktivitas yang dilakukan oleh user dan menyiapkan respon yang ingin diberikan dari setiap aktivitasnya
Kita sudah melihat cara menggunakan selektor pada DOM di javascript, masih ada satu selektor lagi yang punya kekuatan super!
Daftar isi Objek pada Javacsript
Apa itu objek dan bagaimana cara membuatnya di Javascript
Bagaimana cara membuat objek pada Javascript
Bagaimana cara membuat metode pada objek di Javascript
Apa itu objek prototype pada javascript
Objek pada Javascript memiliki sifat mutable, apa pengaruhnya dan kenapa kita perlu tahu?
Daftar isi Membuat galeri foto dengan javascript
Kita akan melihat bagaimana cara membuat galeri foto dengan javascript, html dan css tentunya
Menambahkan tombol sesudah dan sebelum agar user bisa mengatur bagian mana yang ingin ditampilkan
Menambahkan caption atau text yang dinamis sesuai gambar yang ditampilkan pada proyek galeri foto
Melakukan refactor, melihat ulang dan membuat kode jauh lebih rapi dan efisien dari sebelumnya
Daftar isi Bermain dengan Javascript
Belajar bagaimana cara Membuat selektor fleksibel di javascript seperti jquery, di mana kita tinggal menggunakan $(dollar).
Belajar bagaimana cara membuat Aplikasi To Do dengan Javascript. Kita akan belajar bagaimana menambahkan konten secara dinamis, bagaimana menghapusnya dan memainkan kelasnya di CSS
Melanjutkan kelas membuat aplikasi To Do dengan Javascript. Kali ini kita belajar bagaimana agar datanya tersimpan di browser tanpa database atau backend, yaitu memanfaatkan web API Local Storage
Bagaimana cara bikin dark mode di website kamu? kita akan bermain dengan javascript dan HTML. Di sini juga kamu bisa menyimpan tema pilihan user kamu untuk kunjungan website berikutnya
Sebelumnya kita membuat sistem dark mode pada website dengan 2 tombol, sekarang kita coba dengan 1 aja, dan beberapa refactor lainnya
Kamu sudah pernah belajar API tapi masih belum pernah coba konsumsi? nah ini ada free API untuk aplikasi pokemon sederhana. Kita akan belajar menggunakan FETCH API di Javascript, sebagai pengganti XMLHttpRequest
Belajar bikin playlist sendiri dengan javascript dengan memainkan iframe embed dari youtube. Kamu bisa mengimplementasikan untuk audio/podcast dan konten lainnya.
Belajar bagaimana cara membuat aplikasi kuis atau ujian dengan pilihan ganda. Di akhir kita menampilkan skor dari jawaban benar yang didapatkan user