Skodev
Belajar coding dalam bahasa Indonesia
DISKON TERBATAS! Masukkan kupon "skillbaru" saat checkout di kelas apa saja
Skodev
Belajar coding dalam bahasa Indonesia
Tidak bisa dipungkiri lagi, website menjadi bagian besar dari kehidupan kita sehari-hari. Mau apa saja, kita bergantung dengan “google”. Yap, google adalah salah satu dari sekian banyak website yang kita bergantung. Website lainnya ada youtube, wikipedia, sekolahkoding ini dan masih banyak lagi.
Tentu menjadi hal menarik untuk bisa punya kekuatan mulai membuat website sendiri. Kabar baiknya membuat website tidak sesulit yang kamu bayangkan. Dan kamu bisa mulai dengan alat-alat gratis tanpa biaya.
Yang kamu butuhkan pada dasarnya adalah “text-editor”. Ini adalah tempat kamu menulis program atau kode dari website yang ingin dibuat. Text-editor di mac ada textedit, di windows ada notepad untuk yang sudah terinstall. Kamu juga bisa install text editor lain, seperti atom, visual studio code, sublime text, dst.
Yang kedua adalah “browser” untuk melihat hasilnya. Browser ada banyak, google chrome, firefox, safari dll. Jadi kamu akan menulis kode di text editor sambil melihat hasilnya di browser nanti.
Saya sangat menyarankan untuk memulainya dari belajar HTML. HTML adalah bahasa markup yang kita pakai untuk membuat strukturnya, seperti menampilkan text, gambar, membuat form dan tampilan lainnya. Setelah itu kamu bisa mulai masuk ke CSS. CSS adalah cara kita menghiasnya, seperti mengatur warna, ukuran dan lainnya. Pelan-pelan kamu bisa pindah ke javascript, untuk membuat websitenya lebih interaktif, sebelum nanti mulai memilih bahasa backend dan databasenya.
Siapapun bisa mulai! saya sudah mendapatkan berbagai cerita, mulai dari lulusan SMK yang tidak kuliah, orang yang kerja di dunia perhotelan, dunia arsitektur, penjaga warnet, dan berbagai bidang yang tidak nyambung lainnya. Yang penting kamu mau mulai untuk belajar membuat websitenya. Di bawah dan website ini ada banyak sumber belajar untuk itu.
Belajar frontend website 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.
Belajar Backend website Setelah kamu belajar frontend, langkah selanjutnya adalah mengerti bagaimana backend pada website bekerja. Dengan ini, kamu akan bisa membuat aplikasi yang lebih kompleks dengan data yang bisa diolah, seperti website blog, berita, sampai toko online. Jujur saja, tidak ada lagi batasannya!
Kamu bisa mulai dengan mengenal HTML, sebagai dasar-dasar tampilan dari website
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 HTML dari dasar, HTML adalah bahasa yang digunakan untuk membuat struktur dasar website, bagian awal untuk yang ingin terjun ke dunia pengembangan website
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