Basic Programming · Pemula

CSS Dasar Untuk Pemula

Pelajari fondasi dasar pembuatan website dengan HTML. Dari struktur dokumen, tag-tag penting, hingga membuat halaman web pertamamu dari nol.

67 Sub Materi
Pemula
Daftar Sub Materi
  • 1
    01 - Apa Itu CSS? Cara Kerja dan 3 Cara Menambahkannya ke HTML Gratis
  • 2
    02 - Sintaks Dasar CSS: Selektor, Properti, dan Nilai Gratis
  • 3
    03 - Mengenal CSS Reset dan Box Sizing Gratis
  • 4
    04 - Selektor Dasar: Tag, Class, dan ID (Review + Contoh Praktis) Gratis
  • 5
    05 - Selektor Turunan dan Anak (Descendant & Child Selector) Gratis
  • 6
    06 - Selektor Sibling (Adjacent & General Sibling Selector) Gratis
  • 7
    07 - Pseudo-class (hover, focus, active, visited, first-child, last-child, nth-child) Gratis
  • 8
    08 - Pseudo-element (before, after, first-line, first-letter, selection) Gratis
  • 9
    09 - Selektor Atribut (Attribute Selector)
  • 10
    10 - Warna di CSS: Named Colors, HEX, RGB, RGBA, HSL, HSLA
  • 11
    11 - Background: background-color, background-image, background-repeat, background-position, background-size
  • 12
    12 - Gradient: Linear Gradient dan Radial Gradient
  • 13
    13 - Typography: font-family, font-size, font-weight, font-style, line-height, letter-spacing
  • 14
    14 - Menggunakan Google Fonts di CSS (Lanjutan)
  • 15
    15 - Box Model: Margin, Padding, Border, dan Content
  • 16
    16 - Margin Collapse dan Negative Margin
  • 17
    17 - Width, Height, Min-Width, Max-Width, Min-Height, Max-Height
  • 18
    18 - Overflow: visible, hidden, scroll, auto
  • 19
    19 - Position Static dan Relative
  • 20
    20 - Position Absolute
  • 21
    21 - Position Fixed dan Sticky
  • 22
    22 - Z-Index: Mengatur Tumpukan Elemen
  • 23
    23 - Pengenalan Flexbox: display: flex, flex-direction
  • 24
    24 - justify-content: flex-start, flex-end, center, space-between, space-around, space-evenly
  • 25
    25 - align-items dan align-content
  • 26
    26 - flex-wrap, flex-flow, dan gap
  • 27
    27 - Properti Flex Item: order, flex-grow, flex-shrink, flex-basis, align-self
  • 28
    28 - Membuat Layout dengan Flexbox (Navbar, Card Grid, Footer)
  • 29
    29 - Pengenalan CSS Grid: display: grid, grid-template-columns, grid-template-rows
  • 30
    30 - Unit fr, repeat(), minmax(), dan auto-fill vs auto-fit
  • 31
    31 - grid-template-areas: Membuat Layout dengan Nama Area
  • 32
    32 - gap, row-gap, column-gap
  • 33
    33 - grid-column dan grid-row (Spanning Items)
  • 34
    34 - justify-items, align-items, justify-self, align-self
  • 35
    35 - Membuat Layout Website dengan CSS Grid (Header, Sidebar, Konten, Footer)
  • 36
    36 - Media Query: max-width, min-width, dan range
  • 37
    37 - Breakpoint Umum untuk HP, Tablet, dan Desktop
  • 38
    38 - Mobile First vs Desktop First
  • 39
    39 - Menggunakan Media Query untuk Layout Responsif
  • 40
    40 - Responsive Images: max-width, picture, srcset
  • 41
    41 - Responsive Typography (clamp, vw, rem)
  • 42
    42 - CSS Transition: transition-property, transition-duration, transition-timing-function, transition-delay
  • 43
    43 - Membuat Hover Effect dengan Transition
  • 44
    44 - CSS Transform: scale, rotate, translate, skew
  • 45
    45 - Kombinasi Transition dan Transform
  • 46
    46 - CSS Animation: @keyframes, animation-name, animation-duration, animation-iteration-count
  • 47
    47 - Properti Animation Lengkap (direction, fill-mode, timing-function, delay, play-state)
  • 48
    48 - Membuat Loading Spinner dengan CSS Animation
  • 49
    49 - CSS Variables (Custom Properties)
  • 50
    50 - Filter CSS: blur, brightness, contrast, grayscale, drop-shadow
  • 51
    51 - Clip-path dan Shape Outside
  • 52
    52 - CSS Columns (Multi-column Layout)
  • 53
    53 - Aspect Ratio (menjaga rasio elemen)
  • 54
    54 - Container Queries (Alternatif Media Query untuk komponen)
  • 55
    55 - Dark Mode dengan prefers-color-scheme
  • 56
    56 - CSS Spesifisitas dan Cara Mengatasinya
  • 57
    57 - Pengenalan CSS Framework (Tailwind CSS, Bootstrap)
  • 58
    58 - CSS Architecture: BEM (Block Element Modifier)
  • 59
    59 - Debugging CSS dengan Developer Tools
  • 60
    60 - Proyek Akhir: Membuat Website Landing Page Modern dengan CSS
  • 61
    61 - Proyek Akhir: Membuat Portofolio Website Responsif
  • 62
    62 - Membuat Tooltip dengan CSS Murni
  • 63
    63 - Membuat Card dengan Efek Glassmorphism
  • 64
    64 - Membuat Neumorphism UI dengan CSS
  • 65
    65 - Membuat Dark Mode Toggle dengan CSS dan JavaScript
  • 66
    66 - Tips Optimasi CSS untuk Performa Website
  • 67
    67 - Apa Selanjutnya? (SCSS, Tailwind, atau JavaScript Lanjutan)
🎨
CSS Dasar Untuk Pemula

67 sub materi tersedia

RP. 50.000

Login untuk Mulai Belajar Gratis! Daftar akun