Belajar Membuat Website

Daftar isi Belajar HTML dari dasar

Intro html

Berkenalan dengan html, singkatan dari hypertext markup language, bahasa markup yang digunakan untuk membuat struktur dasar website

Menyimpan file html pertama

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.

Berkenalan dengan tag HTML

Tag html adalah cara penulisan kode kode html yang perlu kita ketahui. Ada banyak tag html yang akan kita lihat satu persatu

Heading dan paragraf

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

Membuat link

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

Menampilkan gambar

salah satu hal yang menari di website adalah gambar, kita akan melihat bagaimana cara menampilkan gambar dengan tag img di html

Apa itu iframe

Iframe memungkinkan website untuk mengambil konten dari website lain dan menampilkannya di website sendiri. Lihat bagaimana kekuatan iframe yang luar biasa

Mengubah format text

Kita bisa mengubah format text langsung di html, mulai dari menebalkan sampai memiringkan tulisan di halaman website

Perbedaan element block dan inline

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

Doctype HTML

Apa itu doctype html dan apa kegunannya. Temukan jawabannya di video ini

Komentar pada html

Komentar adalah cara kita membuat dokumentasi atau menambahkan info sebagai developer atau penulis kode, agar kode lebih mudah dibaca atau mudah mendapatkan keterangannya

Membuat lebih dari satu halaman

Kita akan melihat bagaimana cara membuat beberapa halaman html dan menghubungkannya satu sama lain

Membuat table html

Kita akan melihat bagaimana cara membuat table pada html. Tag tag apa saja yang kita butuhkan?

List pada html

Apa itu list dan bagaimana cara membuatnya. Ada beberapa jenis list, kita akan melihatnya di video ini

Charset, symbol dan entities

Untuk menampilkan html secara benar, kita butuh mendeklarasikan charset. Selain itu ada juga cara penggunaan symbol dan entities di html

Form , text dan textarea

Kita akan mulai melihat cara membuat form dan elemen elemen apa saja yang bisa kita masukkan ke dalam form html

Attribut, label dan id

Setiap tag html memiliki attribute. Apa itu attribute dan kegunannya? mari kita saksikan

Checkbox dan radio

Checkbox dan radio button adalah dua element form yang bisa kita manfaatkan untuk membuat pilihan ke user yang menggunakan website

Penggunaan select dan Option

Selain checkbox dan radio, select juga bisa kita manfaatkan untuk menampilkan pilihan.

Menyelesaikan form

Menyelesaikan form html dengan menambahkan input submit, tombol yang digunakan saat user ingin mengirimkan data datanya

Ke mana setelah ini

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

Apa itu css

Bekenalan dengan css, bahasa yang digunakan untuk menghias website. Kalau sudah belajar html sebelumnya, css jadi bumbu pelengkap hidangan website kita!

Menghubungkan css dan html

Bagaimana cara menghubungan css dan html? Ada tiga cara, inline, internal dan external, temukan jawabannya di video ini

Struktur dasar CSS

Belajar struktur dasar dari css, lihat bagaimana cara penulisannya

Selektor pada CSS

Bagaimana cara kita menentukan elemen html mana yang mau dihias? untuk itu kita akan belajar selektor, memilih tag, id ataupun kelas

Background color

Bagaimana cara mengubah warna background pada css

Background Gambar dan komentar

Bukan hanya warna, kita juga bisa menambahkan gambar sebagain background pada css. Belajar juga apa itu komentar dan penggunannya di css

Text pada css

Text adalah media yang paling penting dan paling banyak dikonsumsi di dunia website. Belajar cara menghias text dengan css

Font pada css

Selain text yang bisa kita hias, jenis font tulisannya pun bisa kita atur dengan css

Menghias link

Link punya style yang automatis datang saat dibuat, disini kita akan melihat bagaimana cara mengubah dan menghias link yang ada pada website

Dimensi element

Sangat penting untuk mengetahui pengaturan dimensi pada CSS, pelan pelan kita akan melihat tentang display, boxmodel, margin, border dan padding.

Display inline, block dan inlineblock

Mengatur display elemen elemen html, mulai dari melihat apa itu inline, block dan juga inlineblock, pelajari perbedannya di sini.

Menghilangkan elemen

Ada dua cara biasa untuk menghilangkan elemen dengan css, bisa kita sembunyikan atau kita hapus keberadaanya, apa bedanya? lihat disini

Box model dan margin

Penting untuk mengetahui apa itu boxmodel, konsep dasar dari pengetahuan seputar tinggi dan lebar konten pada css, ada juga margin yang akan menjadi pembuka

Padding dan border

Selain margin, ada padding dan border yang mempengaruhi pengaturan lebar dan tinggi suatu konten, lihat perbedaan dan cara menggunakannya

Posisi relative dan posisi static

Pengaturan posisi pada css tidak boleh dilewatkan, kita akan mulai belajar perbedaan posisi relative dan static di sini.

Posisi absolute

Belajar apa itu posisi absolute pada css dan bagaimana cara menggunakan posisi absolute

Posisi fixed

Belajar apa itu posisi fixed pada css dan bagaimana cara menggunakan posisi fixed

Posisi parent element

Posisi parent atau pembungkus suatu element sangat berpengaruh pada isinya. Belajar bagaimana cara mengatur posisi parent pada css

Z-index 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

Float dan clear akan sangat sering ditemukan pada pembuatan struktur website. Kemampuannya memang bisa dimanfaatkan untuk banyak hal, termasuk mengatur layout dasar suatu website

Masih tentang float

Float tidak cukup kita pelajari di satu video, lanjutkan belajar float dan kuasai cara menggunakannya

Selektor bagian kedua

Selain selektor dasar, seperti memilih tag, id atau class, ada juga cara lain yang membuat pemilihan element html jauh lebih fleksibel

Referensi selektor

Temukan informasi lebih banyak tentang selektor yang bisa kita gunakan disini referensi CSS w3school dan onlastblog css cheatsheet

Hover dan focus

Membuat website lebih menarik dengan efek hover dan focus. User akan mendapatkan feedback dari aktivitasnya

Latihan dan latihan

Belajar CSS dasar selesai! terus latihan dan belajar untuk menguasainya. Setelah ini kita bisa belajar html5 atau CSS3

Daftar isi Belajar html5

Intro html 5

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

Struktur dasar html yang akan kita manfaatkan dalam kelas ini. Kita akan melihat layout yang dibuat dengan html dan css.

Struktur baru html 5

Semantic element baru pada html5, ada header, footer, article, section, nav dan main. Kita akan melihat kegunannya masing-masing

Caption pada gambar

Membuat caption atau info tulisan pada gambar sangat mudah pada html5

Dialog dan detail

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 di HTML5

Input baru apa saja yang ada pada html 5, kita akan melihat daftarnya di HTML5 Doctor dan langsung mempraktekkannya

Memasukkan video pada website

Memasang video pada website sangat mudah dengan html5, kita bisa mengatur format dan juga backup jika browser tidak mendukungnya

Menggunakan audio

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

Ke mana sekarang

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

Apa itu 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

Border radius digunakan untuk mengatur radius dari sisi sisi elemen, kita bahkan bisa membuat suatu elemen berbentuk bulat dengan ini

Box shadow

Menambahkan efek bayangan pada element html dengan menggunakan box shadow

Box sizing dan vendor prefix

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

Text shadow

Kalau sebelumnya kita belajar box shadow, ada juga text shadow untuk mengatur bayangan pada text, berikan efek keren pada text website kita

Word wrap dan Text overflow

Atur bagaimana text dibungkus oleh css, dengan menggunakan property word wrap dan text overflow

Translate dan rotate

Mulai mengubah konten secara 2d dengan property translate dan juga rotate

Scale dan Skew

Mulai mengubah konten secara 2d dengan property Scale dan juga Skew

Transition

Property transition pada css memberikan efek ketika melakukan perubahan pada element element tertentu

Perspective

Atur perspective atau cara pandang dari satu elemen, untuk menampilkan kesans 3 dimensi

3d translate and rotate

Ternyata translate dan rotate bisa kita gunakan juga untuk membuat efek 3 dimensi!

3D Scale pada css

Melihat efek scale pada 3 dimensi

Membuat kartu part1

Latihan memanfaatkan property 3 dimensi yang ada pada css, dengan membuat efek flip card

Membuat kartu part2

Latihan memanfaatkan property 3 dimensi yang ada pada css, dengan membuat efek flip card bagian kedua

Perkenalan animasi dan keyframes

Buat animasi melalui css ternyata sangat mungkin! lihat property animation dan juga apa itu keyframes

Iteration dan direction

Mengatur iterasi dan arah pada animasi yang kita buat di css

Delay, fillmode, timing dan playstate

Masih ada banyak lagi yang bisa kita atur dengan animasi pada css, diantaranya Delay, fillmode, timing dan playstate

Keyframes dengan persen

Ternyata mengatur keyframes bisa kita lakukan dengan bantuan satuan % (persen), dengan ini animasi jauh lebih fleksibel

Property baru background

Kita pernah melihat property background pada css dasar, dengan css3, masih banyak lagi yang bisa kita lakukan

Overflow resize dan opacity

Konten yang melebihi batasnya, bisa diatur dengan property overflow resize, ada juga opacity untuk mengatur transparansi suatu elemen

Font face dan google font

Bosan dengan font yang itu-itu saja? kita bisa mengambil font dari font lokal yang kita punya ataupun dari library gratis seperti google font

Pseudo classes

Selektor yang bisa kita lakukan untuk memilih element html di berbagai macam kasus dengan pseudo classes

Pseudo nth child

Mengatur elemen kebarapa bahkan dengan rumus pada css

Pseudo pada input

Input juga punya berbagai macam pseudo classes, yang bisa kita manfaatkan untuk membuat lebih menarik pada css

Daftar isi tips dan trik CSS

Membuat tombol cantik dengan css

Belajar bagaimana cara membuat tombol cantik dengan koding yang dinamis berdasarkan nama kelasnya di css

Efek hover untuk produk

Belajar bagaimana cara membuat efek hover untuk suatu produk pada css, tentu bisa diimplementasikan di mana saja

Membuat accordion dengan css

Belajar bagaimana cara membuat accordion murni dengan css

Membuat modalbox dengan css

Belajar bagaimana cara membuat modalbox dengan css

Daftar isi Bermain dengan Flexbox

Mengenal flexbox css

mengenal property pada css3 yang sangat luar biasa! flexbox

Align item dan align content

mengenal property align item dan align content pada flexbox , untuk mengatur posisi elemen elemenya

Property child pada flexbox

mengenal property untuk child pada flexbox, apa saja yang bisa kita lakukan untuk konten yang menggunakan flexbox pada parentnya

Membuat sistem kolom repsonsive

bagaimana cara berkerja dengan responsive website menggunakan flexbox

Membuat kolom dengan column

Satu lagi property yang luar biasa untuk bekerja membuat sistem kolom, yaitu multi column css!

Daftar isi Membuat halaman depan homepage facebook

Intro halaman depan Facebook intro

Latihan html dan css dengan membuat halaman depan dari homepage facebook

Facebook header

Membuat bagian header dari homepage facebook

Facebook header bagian 2

Membuat bagian header dari homepage facebook bagian 2

Facebook konten

Membuat bagian konten dari homepage facebook

Facebook konten bagian 2

Membuat bagian konten dari homepage facebook bagian 2

Facebook konten bagian 3

Membuat bagian konten dari homepage facebook bagian 3

Facebook footer

Membuat bagian footer dari homepage facebook

Daftar isi Membuat website responsive

Intro responsive website

Belajar bagaimana cara membuat responsive website dengan html dan css

Layout dasar

Belajar bagaimana cara membuat layout dasar website menjadi responsive

Media queries

Belajar apa itu media queries dan bagaimana cara menggunakan media queries untuk website responsive

Ukuran font

Membuat ukuran font menjadi responsive

Meta viewport

Mengenal meta viewport dan apa keguannnya pada website responsive

Daftar isi Belajar javascript untuk pemula

Intro belajar javascript

berkenalan dengan javsascript, bahasa program yang bisa digunakan pada bagian front-end website untuk membuatnya lebih interaktif

Menghubungkan file javascript

Bagiamana cara menghubungkan javascript dengan html, kita akan melihat beberapa cara yang bisa kita gunakan

Membuat variabel

Variabel adalah cara untuk menyimpan suatu nilai dengan memberikannya nama. Dengan nama ini kita bisa mengambil atau mengubah nilai tersebut dimana saja.

Tipe data string

String adalah salah satu tipe data pada bahasa program termasuk javascript yang kita manfaatkan untuk menulis suatu text atau karakter

Tipe data angka

Angka/Number adalah salah satu tipe data pada bahasa program termasuk javascript yang kita manfaatkan untuk menuliskan angka termasuk desimal ataupun angka dengan koma

Lebih dalam tentang variabel

Belajar lebih dalam tentang variabel pada javascript

Operator matematika

Dengan operator matematika pada javascript, kita bisa melakukan berbagai macam operasi matematika, mulai dari penjumlahan, pengurangan, perkalian, pembagian dan lain-lain

Metode angka

Javascript punya fungsi-fungsi yang sudah secara automatis datang untuk kita manfaatkan pada tipe data angka

Metode angka bagian 2

Javascript punya fungsi-fungsi yang sudah secara automatis datang untuk kita manfaatkan pada tipe data angka (bagian kedua)

Metode string

Javascript punya fungsi-fungsi yang sudah secara automatis datang untuk kita manfaatkan pada tipe data string

Metode string bagian 2

Javascript punya fungsi-fungsi yang sudah secara automatis datang untuk kita manfaatkan pada tipe data string (bagian kedua)

Fungsi pada javascript

Belajar apa itu fungsi pada javascript dan bagaimana cara menggunakannya

Parameter pada fungsi

Setelah belajar fungsi, kali ini kita akan melihat guna paramater yang bisa kita masukkan pada fungsi di javascript

Parameter lebih dari satu

Paramter boleh lebih dari satu, lihat cara menggunakannya di sini

Return pada fungsi

Fungsi bisa memiliki 'return'.. apa itu return dan bagaimana cara menggunakannya?

Scope variabel

Variabel pada javascript memiliki scope atau ruang lingkup hidup yang menentukan dari mana saja variabel ini bisa diakses

Mengenal Array

Satu tipe data lagi dari javascript! namanya array, lihat bagaimana cara membuat array di javascript

Metode Array

Tipe data array juga punya metode metode yang bisa kita manfaatkan, sama seperti pada tipe data string atau number

Metode Array bagian 2

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 boolean, tipe data pada javascript yang hanya memiliki 2 nilai, true dan false

If dan else

Mulai belajar logika, menentukan suatu kasus dan mengambil keputusan dengan if dan else

Operator logika

Operator logika pada javascript, untuk membandingkan nilai-nilai. Lihat cara penggunaan operator logika pada javascript di sini

Dua syarat atau lebih

Bagaimana cara menggunakan operator logika jika ada lebih dari satu syarat?

True dan false

Kita sudah pernah melihat boolean, tapi ada sih sebenarnya kegunaannya yang hanya bisa bernilai true atau false

Else if pada javascript

Kita sudah pernah melihat if dan else, masih ada lagi yang namanya else if untuk mebuat syarat lebih dari satu

Syarat bercabang

Bagaimana jika kita punya syarat di dalam syarat? atau istilahnya nested if (if bercabang)

Switch case

persyaratan yang banyak bisa kita buat lebih simple dengan switch case

For loop untuk pengulangan

Melakukan hal yang berulang-ulang cukup dengan bantuan for loop

While loop

Mirip dengan forloop, kali ini kita akan melakukan hal yang berulang-ulang dengan bantuan while loop

Do while pasangan while loop

Pasangan dari while loop, yaitu do while, dimana kita akan mengeksekusi kode minimal satu kali sebelum menguji syarat

Ke mana sekarang

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

Intro DOM Javascript

DOM adalah singkatan dari document object model, dengan menguasa DOM kita bisa berinteraksi dengan HTML dan CSS melalui Javascript dan memanipulasinya

Selektor DOM

Bagaimana cara memilih elemen HTML yang ingin dimainkan dengan DOM. Kita akan lihat cara menggunakan selektor

Menambahkan, menghapus dan edit elemen HTML

Cara menambahkan, menghapus dan mengedit elemen HTML, melalui DOM pada Javascript

Bermain dengan Attribute

Memainkan attribute pada HTML dengan DOM pada Javsascript

Bermain dengan CSS

Memainkan CSS yang dimilik suatu elemen melalui DOM pada Javsascript

Mulai belajar event

Dengan event pada javascript kita bisa mendengan aktivitas yang dilakukan oleh user dan menyiapkan respon yang ingin diberikan dari setiap aktivitasnya

Latihan event

Latihan event, dengan event pada javascript kita bisa mendengan aktivitas yang dilakukan oleh user dan menyiapkan respon yang ingin diberikan dari setiap aktivitasnya

Selektor luar biasa

Kita sudah melihat cara menggunakan selektor pada DOM di javascript, masih ada satu selektor lagi yang punya kekuatan super!

Daftar isi Objek pada Javacsript

Intro Objek

Apa itu objek dan bagaimana cara membuatnya di Javascript

Membuat Objek

Bagaimana cara membuat objek pada Javascript

Metode pada Objek

Bagaimana cara membuat metode pada objek di Javascript

Objek prototype

Apa itu objek prototype pada javascript

Sifat mutable

Objek pada Javascript memiliki sifat mutable, apa pengaruhnya dan kenapa kita perlu tahu?

Daftar isi Membuat galeri foto dengan javascript

Membuat galeri foto

Kita akan melihat bagaimana cara membuat galeri foto dengan javascript, html dan css tentunya

Tombol sesudah dan sebelum

Menambahkan tombol sesudah dan sebelum agar user bisa mengatur bagian mana yang ingin ditampilkan

Caption pada gambar

Menambahkan caption atau text yang dinamis sesuai gambar yang ditampilkan pada proyek galeri foto

Refactor Kode

Melakukan refactor, melihat ulang dan membuat kode jauh lebih rapi dan efisien dari sebelumnya

Daftar isi Bermain dengan Javascript

Membuat selektor fleksibel di javascript

Belajar bagaimana cara Membuat selektor fleksibel di javascript seperti jquery, di mana kita tinggal menggunakan $(dollar).

Membuat Aplikasi To Do dengan Javascript

Belajar bagaimana cara membuat Aplikasi To Do dengan Javascript. Kita akan belajar bagaimana menambahkan konten secara dinamis, bagaimana menghapusnya dan memainkan kelasnya di CSS

Menyimpan data dengan LocalStorage dari Web API

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

Bikin Dark Mode di web kamu

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

Update Dark Mode dengan satu tombol

Sebelumnya kita membuat sistem dark mode pada website dengan 2 tombol, sekarang kita coba dengan 1 aja, dan beberapa refactor lainnya

Bermain API Pokemon dengan Fetch API

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

Custom playlist youtube

Belajar bikin playlist sendiri dengan javascript dengan memainkan iframe embed dari youtube. Kamu bisa mengimplementasikan untuk audio/podcast dan konten lainnya.

Kuis Ujian pilihan ganda

Belajar bagaimana cara membuat aplikasi kuis atau ujian dengan pilihan ganda. Di akhir kita menampilkan skor dari jawaban benar yang didapatkan user