DISKON TERBATAS! Masukkan kupon "skillbaru" saat checkout di kelas apa saja

Logo Koala Skodev mengetik

Skodev

Belajar coding dalam bahasa Indonesia

REFERENSI DAN DOKUMENTASI CSS - KODING

Referensi dan dokumentasi lengkap css dalam Bahasa indonesia. Belajar program css, dari developer untuk developer.

Chapter: Perkenalan

Apa itu CSS

CSS adalah teknologi yang dibutuhkan untuk menghias sebuah website. Seperti memberi warna, mengatur ukuran hingga menyajikan animasi

Cara menulis CSS

CSS bisa ditulis di tiga tempat. Bersama file HTML, sebagai file terpisah CSS sendiri atau inline alias langsung pada elemen HTMLnya

Struktur penulisan CSS

Begini sturktur dari suatu kode CSS. Di mana ada selektor, atribut dan nilainya.

Selektor CSS dan HTML

Ada banyak cara untuk memilih elemen HTML mana yang ingin dihias. Pelajari tentang selektor CSS

Chapter: Warna dan Background

Warna tulisan CSS

Warna adalah salah satu komponen dasar dari sebuah hiasan. Berikut cara memberi warna pada text dengan CSS

Warna background CSS

Warna adalah salah satu komponen dasar dari sebuah hiasan. Berikut cara memberi warna pada background dengan CSS

Berbagai warna CSS

Ada banyak cara memberi nilai warna di CSS, seperti kode RGB, HEX, HSL, RGBA, HSLA atau dengan nama unik langsung

Background Gambar

Belajar cara mengatur gambar latar belakang atau 'background gambar' di CSS.

Chapter: Ukuran, Batas dan Jarak

Box Model pada CSS

Box model adalah istilah pada CSS yang menggambarkan secara visual posisi border, padding dan margin pada setiap elemen.

Border pada CSS

Border adalah garis batas yang bisa digunakan di setiap elemen.

Padding pada CSS

Padding pada CSS adalah jarak antara garis batas (border) dengan elemennya.

Margin pada CSS

Margin pada CSS adalah jarak antara garis batas (border) dengan elemen luar atau elemen lainnya.

Outline pada CSS

Outline adalah batasan garis yang berada di luar border elemen

Height dan Width pada CSS

Mengatur ukuran elemen HTML, seperti tinggi bisa dengan height, sementara lebar dengan width, masing masing juga bisa diberi nilai minimal dan maksimal

Overflow pada CSS

Apa yang terjadi ketika isi konten melebihi ukuran dari pembungkusnya? mari kita intip kekuatan overflow

Box sizing

Pelajari seluk-beluk menggunakan CSS Box Sizing untuk mengatur ukuran dan layout elemen HTML.

Chapter: Text CSS

Text pada CSS

Sebuah text bisa dihias sedemikian rupa dengan CSS. Lihat apa saja yang bisa dilakukan di CSS kepada text

Warna text pada CSS

Warna text dan latarnya bisa diubah pada CSS dengan properti color dan background-color

Text align pada CSS

Meratakan text pada CSS menggunakan text-align, untuk membuat elemen rata kiri, tengah atau kanan

Text decoration pada CSS

Untuk memberi baris pada text, baik itu di atas, bawah atau tengah kita bisa menggunakan text-decoration

Text transformation pada CSS

Untuk mengubah besar/kecilnya huruf yang digunakan bisa juga melalui CSS lewat properti text-transformation

Jarak tulisan pada CSS

Ada properti detail masing-masing untuk mengatur jarak pada tulisan, jarak antara huruf, kata juga baris

text indent pada CSS

bagaimana cara mengatur jarak di awal paragraf atau memberi indentasi pada website dengan CSS menggunakan text-indent

letter spacing pada CSS

bagaimana cara mengatur jarak antara huruf satu ke huruf lain pada website dengan CSS menggunakan letter spacing

line height pada CSS

bagaimana cara mengatur jarak antara baris pada website dengan CSS menggunakan line height

word spacing pada CSS

bagaimana cara mengatur jarak antara kata pada sebuah kalimat dengan CSS menggunakan word spacing

white space pada CSS

bagaimana cara mengatur jarak antara baris kosong atau white-space dengan CSS menggunakan white space

Text shadow pada CSS

bagaimana cara membuat efek bayangan pada text tulisan di CSS HTML

Chapter: Font CSS

Font Family pada CSS

Mengubah jenis font dengan mengatur font family pada CSS

Font Family dari Google

Google Fonts menawarkan variasi font yang lebih beragam, yang bisa disesuaikan dengan karakter dan jenis situs kamu

Font Size pada CSS

Ukuran font bisa diatur dengan menggunakan properti font size pada CSS

Font Style pada CSS

Variasi font seperti kemiringan dan ketebalan bisa diatur dengan CSS lewat properi font-style

Chapter: Tata Letak (layout)

Display block vs inline

Pelajari perbedaan antara display block dan inline dalam CSS, dengan contoh dan penjelasan yang mudah dipahami.

Display inline-block

Pelajari cara menampilkan elemen dengan CSS inline-block dalam desain web.

Display none

Belajar bagaimana menggunakan properti CSS display none untuk menyembunyikan elemen dari halaman web.

Position static

Pelajari penggunaan CSS position static sambil memahami cara kerjanya dengan contoh yang mudah dipahami.

Position relative

Mempelajari fungsi position relative dalam CSS serta cara menggunakannya.

Position absolute

Pelajari cara mengatur posisi elemen pada halaman web dengan menggunakan properti CSS 'position:absolute'.

Position fixed

Pelajari tentang penggunaan properti Position fixed dalam CSS untuk membuat elemen tetap berada dalam posisi tertentu di layar, tidak peduli seberapa jauh pengguna menggulir halaman.

Position sticky

Memahami cara kerja dari posisi sticky dalam CSS dan bagaimana menerapkannya untuk meningkatkan tata letak website.

Float dan Clear

Pelajari tentang Float dan Clear dalam CSS dan bagaimana cara menggunakannya untuk membentuk layout pada halaman web.

Z-index

Artikel ini menjelaskan tentang properti z-index dalam CSS, termasuk cara kerja, penggunaan, dan contoh kode yang mudah dipahami.

Overflow

Pelajari tentang overflow dalam CSS, cara kerjanya, serta bagaimana menggunakannya untuk mengontrol konten yang melebihi batas elemen.

Chapter: Transformasi dan Animasi

Transformasi 2D CSS

Pelajari transformasi 2D CSS untuk memodifikasi bentuk dan posisi elemen HTML di halaman web Anda.

Transisi CSS

Belajar cara membuat halaman web anda lebih menarik dengan transisi CSS! Artikel ini akan membantu kamu memahami sintaks dan cara kerjanya.

Animasi CSS

Animasi CSS memungkinkanmu untuk membuat transisi visual yang halus antara dua atau lebih CSS-nya. Baca lebih lanjut untuk mempelajari cara kerja dan bagaimana menerapkannya dalam desain web.

Keyframes animasi

Pelajari cara membuat animasi dengan keyframes CSS. Pengenalan sederhana ke konsep keyframes, cara menggunakannya, serta contoh kode.

Transformasi 3D CSS

Pelajari cara menciptakan efek transformasi 3D menggunakan CSS, lengkap dengan contoh kode dan penjelasan rinci.

Perspective pada transformasi 3D

Perspective dalam CSS adalah properti yang membantu menciptakan ilusi depth (kedalaman) dan jarak dalam transformasi 3D

Chapter: Layout dengan Flexbox

Pengenalan flexbox

Artikel ini menjelaskan secara detail tentang Flexbox dalam CSS, termasuk konsep dasar, penggunaan dan penjelasan tentang properti-properti yang terkait dengan Flexbox.

Container dan item flexbox

Pelajaran ini akan membahas tentang Container dan Item dalam Flexbox, cara kerja dan penggunaannya dalam CSS Flexbox.

Flex-direction

Pelajari properti flex-direction dalam CSS Flexbox, yang mendefinisikan arah arus flex item di dalam kontainer.

Flex-wrap

Pelajari tentang properti CSS flex-wrap dalam tutorial ini. Baca panduan sederhana ini dan tingkatkan pengetahuan Anda tentang CSS Flexbox.

Justify-content

Artikel ini menjelaskan tentang properti CSS `justify-content`, bagaimana cara menggunakannya, dan berbagai nilai yang dapat diatur pada property ini dalam pengembangan web.

align-items

Pelajari bagaimana menggunakan properti CSS 'align-items' untuk mengatur posisi elemen di sepanjang sumbu lintang dalam container Fleksibel atau Kotak Kotak.

Flex-basis

Pelajari tentang sifat flex-basis CSS dan bagaimana cara penggunaannya untuk mengontrol ukuran elemen yang fleksibel dalam desain responsif.

Flex-grow

Pelajari tentang properti CSS flex-grow dan cara menggunakannya untuk mengontrol sejauh mana item tumbuh untuk mengisi ruang yang tersedia dalam container flex.

Align-self

Artikel ini membahas secara mendalam dan berurutan mengenai bagaimana menggunakan properti CSS `align-self` dalam meratakan elemen dalam tata letak halaman web. Lengkap dengan contoh penggunaan dan penjelasan rinci.

Flex order

Pelajari cara menggunakan properti flex-order dalam CSS untuk mengubah urutan tampilan elemen dalam kontainer flex.

Gap flexbox

Artikel ini menjelaskan penggunaan properti Gap dalam flexbox CSS untuk mengontrol jarak antar item.

Nested flexbox

Pelajari cara menggunakan nested flexbox dalam CSS untuk membuat layout halaman web yang responsif dan fleksibel.

Tips menggunakan flexbox

Artikel ini berisi tips dan trik untuk menggunakan flexbox dalam CSS. Pelajari cara efektif menggunakan properti flexbox untuk membuat layout website yang responsif dan fleksibel.

Layout dengan flexbox

Pelajari cara menggunakan flexbox untuk membuat layout web yang responsif dan fleksibel. Tutorial ini akan membantu Anda memahami penggunaan flexbox dalam CSS.

Chapter: Layout dengan Grid

Perkenalan CSS Grid

Pelajari tentang CSS Grid, cara kerjanya, penulisan sintaks, dan fungsi utama menggunakan contoh sederhana dengan gaya w3school.

Container dan Item Grid

Pelajari cara kerja container dan item grid dalam CSS dan bagaimana memanfaatkannya untuk mendesain layout website dengan lebih efisien dan mudah.

Grid template columns dan rows

Pelajari tentang bagaimana menggunakan CSS grid template columns dan rows untuk membuat layout halaman web yang responsif dan fleksibel.

Grid column dan Grid row

Pelajari lebih lanjut tentang Grid Column dan Grid Row dalam CSS dan cara menggunakan mereka untuk membuat layout yang lebih terstruktur dan responsif.

Grid area

Pelajari tentang Grid Area dalam CSS dan bagaimana menggunakannya untuk mendesain layout situs web yang responsif dan fleksibel.

Grid gap

Pelajari cara menggunakan property grid-gap dalam CSS Grid untuk mengkontrol jarak antara baris dan kolom.

Grid auto rows, columns dan flow

Pelajari cara penggunaan properti grid auto rows, columns dan flow pada CSS Grid Layout dengan penjelasan singkat dan contoh sederhana.

Alignment CSS Grid

Pelajari cara mengatur penyejajaran item dalam CSS Grid dengan cara yang mudah dipahami dan praktis. Dapatkan pengetahuan yang anda butuhkan untuk membuat layout web anda lebih rapi dan profesional.

fr css grid

Kenali satuan fr pada CSS Grid. Panduan menggunakannya

Grid repeat, minmax dan autofill

Pelajari tentang Grid repeat, minmax dan autofill dalam CSS Grid untuk membuat layout halaman webmu lebih efisien dan responsif.

Grid template area

Artikel ini menjelaskan secara detil mengenai Grid template area dalam CSS Grid Layout, cara mendefinisikan area, dan cara merujuk area tersebut dalam kode kamu.

Layout dengan Grid

Pelajari cara membuat layout web dengan menggunakan teknik Grid CSS dalam tutorial ini.

Chapter: Website responsive

Perkenalan website responsive

Pelajari tentang website yang responsif, alasan mengapa dibutuhkan, dan bagaimana membuatnya dengan langkah-langkah mudah diterapkan serta contoh praktis.

Apa itu viewport

Pelajari apa itu viewport dalam pengembangan web dan bagaimana caranya digunakan untuk mengontrol tampilan halaman web di berbagai jenis perangkat.

Media query, breakpoint dan orientation

Pelajari tentang media query, breakpoint, dan orientasi dalam CSS dan bagaimana mereka digunakan dalam web development untuk membuat desain responsif.

Ukuran font resposinve

Artikel ini membahas cara membuat ukuran font yang responsif di CSS menggunakan unit pengukuran yang berbeda seperti em, rem, vw, dan vh.

Ukuran gambar responsive

Pelajari cara membuat ukuran gambar responsif untuk website Anda menggunakan CSS. Langkah mudah yang memastikan tampilan gambar sempurna di semua perangkat.

Flexbox untuk layout responsive

Belajar cara menggunakan Flexbox untuk membuat layout responsive di CSS.

Grid untuk layout responsive

Pelajari cara menggunakan Grid CSS untuk membuat layout responsive yang dapat disesuaikan dengan berbagai ukuran layar.

Tips membuat website responsive

Cari tahu bagaimana cara membuat website responsive dengan langkah mudah dan praktis yang disajikan dalam artikel ini. Ikuti tips berikut ini dan buat situsmu semakin menarik di berbagai perangkat.

Chapter: Selektor dan Pseudo

Selektor Atribut

Pelajari tentang Selektor Atribut dalam CSS, cara kerjanya, dan bagaimana menggunakannya dalam desain web.

Selektor adjacent sibling

Artikel ini menjelaskan konsep dasar Selektor Adjacent Sibling dalam CSS dengan contoh kode yang sederhana dan mudah dimengerti.

Combinators

Pelajari lebih lanjut tentang kombinator CSS, termasuk jenis-jenisnya dan bagaimana cara menggunakannya untuk memilih elemen secara efisien.

Penggunaan !important

Pelajari bagaimana menggunakan !important dalam CSS, kapan harus digunakan dan apa dampaknya dalam mengontrol prioritas aturan CSS.

Pseudo-Class link

Pelajari bagaimana cara menggunakan Pseudo-Class link dalam CSS untuk mempersonalisasi penampilan link web di tutorial ini.

Pseudo-element

Pelajari tentang Pseudo-element dalam CSS, termasuk cara kerjanya, jenisnya, dan bagaimana menggunakannya dengan contoh code snippets.

Pseudo-Class form

Belajar cara menggunakan pseudo-class dalam form CSS untuk memilih elemen tertentu berdasarkan status atau perilakunya pada HTML.

Pseudo-class child

Pelajari tentang pseudo-class child dalam CSS, bagaimana cara kerjanya dan menggunakannya untuk meningkatkan tata letak dan desain web Anda.

Pseudo-class nth urutan

Pelajari cara menggunakan pseudo-class nth-child dalam CSS untuk memilih elemen yang memiliki urutan tertentu dalam grup elemen.

Chapter: Informasi CSS lain

Merapikan struktur code css

Artikel ini memberikan tips dan trik sederhana tentang bagaimana merapikan struktur code CSS kamu agar lebih mudah dibaca dan dipahami.

Minifikasi CSS

Belajar bagaimana melakukan minifikasi CSS untuk meningkatkan kecepatan dan performa situs kamu.

CSS Pre processor

Artikel ini menjelaskan tentang CSS Preprocessor, manfaatnya, dan beberapa contoh preprocessor populer seperti LESS, SASS, dan Stylus.

Vendor prefix CSS

Pelajari cara menggunakan Prefix Vendor CSS untuk memastikan kompatibilitas browser yang lebih baik pada situs web Anda.

Aksesibilitas pada CSS

Pelajari bagaimana memastikan konten web kamu mudah diakses untuk semua pengguna dengan menerapkan aksesibilitas pada CSS yang efektif. Mulai dari penggunakan warna, hingga kontrol fokus, semua akan dibahas di sini.

Apa itu Framework CSS

Memahami apa itu framework CSS, fungsi dan manfaatnya dalam pengembangan web, serta beberapa contoh framework CSS paling populer.