Belajar Frontend website

Frontend adalah bagian dari website yang terlihat oleh mata. Berguna untuk mengatur tampilan dasar seperti struktur dan hiasan yang akan dilihat oleh user kita nantinya.

gambar Mulai belajar website (frontend)
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:
  • 1. HTML - untuk membuat struktur dasar website, seperti menampilkan text, gambar, video dan elemen lainnya.
  • 2. CSS- menghias struktur setiap bagian yang sudah kita buat dengan HTML, termasuk warna, ukuran dan animasi.
  • 3. Javascript - membuat website menjadi lebih interaktif.
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.

cover playlist Mulai belajar website (frontend)

Daftar Pelajaran Track Mulai belajar website (frontend)


Belajar HTML dari dasar

Belajar HTML dari dasar, HTML adalah bahasa yang digunakan untuk membuat struktur dasar website, bagian awal untuk yang ingin terjun ke dunia pengembangan 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



Belajar CSS dari dasar

CSS tidak boleh dilewatkan saat belajar mengembangkan website, dengan CSS website yang dibuat akan jauh lebih cantik dan menarik. Belajar bagaimana cara menggunakan css di sini


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



Belajar html5

HTML5 adalah versi terbaru dari html, banyak element-element yang menarik untuk kita pelajari disini. Terus update pengetahuan html kita dengan kelas ini


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.



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


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



tips dan trik CSS

Latihan CSS, di kelas ini ada banyak tips dan trik untuk membuat website jauh lebih menarik dengan bantuan 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



Bermain dengan Flexbox

Flexbox CSS, membuat sistem grid atau kolom dan mengatur posisinya menjadi sangat mudah dengan property-property dari flexbox


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!



Membuat halaman depan homepage facebook

Latihan html dan css dengan belajar membuat homepage dari website facebook


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



Membuat website responsive

Belajar bagaimana cara membuat website repsosive


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



Belajar javascript untuk pemula

Sekarang kita akan belajar javascript! javascript adalah bahasa program yang bisa kita gunakan pada frontend (bagian depan) website sehingga website akan menjadi lebih interaktif dan mempunya logika untuk berpikir


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



DOM pada Javascript

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


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!



Membuat galeri foto dengan javascript

Di kelas ini kita akan melihat bagaimana cara membuat galeri foto dengan javascript. Ikuti kelas javascript dasar dan DOM pada javascript agar lebih mudah


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



Tag: Kenapa belajar Frontend website, Mengenal apa itu Frontend website, Di mana mulai belajar Frontend website, mulai dari mana belajar Frontend website , tutorial Frontend website bahasa indonesia untuk pemula dari dasar, apa kegunaan Frontend website, bagaimana cara menggunakan Frontend website, belajar bertahap Frontend website, kursus online Frontend website