Outline Materi CSS SurabayaDev

[iniakunhuda]

Outline Tutorial Lengkap CSS (Cascading Style Sheets) dalam Bahasa Indonesia

Part 1: Pengenalan Dasar CSS

Chapter 1: Apa Itu CSS?

• Lesson 1: Definisi dan Fungsi CSS
  • Pengertian CSS (Cascading Style Sheets)
  • Fungsi CSS dalam pengembangan web
  • Cara kerja CSS dengan HTML
• Lesson 2: Struktur Dasar CSS
  • Sintaks dasar CSS: selector, property, dan value
  • Komentar dalam CSS
  • Perbedaan penggunaan CSS internal, inline, dan eksternal
• Lesson 3: Menyisipkan CSS di HTML
  • CSS Inline (menyisipkan langsung dalam elemen HTML)
  • CSS Internal (menggunakan <style> di dalam HTML)
  • CSS Eksternal (menggunakan file .css terpisah)

Chapter 2: Selectors CSS

• Lesson 1: Selector Dasar
  • Selector tipe (memilih elemen HTML berdasarkan nama tag)
  • Selector class dan id (memilih elemen berdasarkan atribut class dan id)
  • Selector universal *
• Lesson 2: Selector Kombinasi dan Hierarki
  • Selector descendant (memilih elemen anak/cucu dari elemen lain)
  • Selector child (memilih elemen anak langsung)
  • Selector adjacent dan general sibling (memilih elemen tetangga)
• Lesson 3: Selector Atribut dan Pseudo-Class
  • Selector atribut (memilih elemen berdasarkan atributnya)
  • Pseudo-class dasar (:hover, :focus, :nth-child, dll.)
  • Pseudo-class link (:link, :visited, dll.)

Chapter 3: Menata Teks dan Font

• Lesson 1: Pengaturan Font dan Warna
  • Properti color, font-size, font-family
  • Penggunaan font web-safe dan custom font (Google Fonts)
• Lesson 2: Spasi dan Perataan Teks
  • Properti line-height, letter-spacing, text-align
  • Mengatur jarak antar huruf dan baris teks
• Lesson 3: Dekorasi dan Transformasi Teks
  • Properti text-decoration, text-transform
  • Efek underline, overline, capitalize, dll.

Part 2: Layout dan Positioning

Chapter 1: Model Kotak CSS (CSS Box Model)

• Lesson 1: Pengertian Box Model
  • Komponen utama: content, padding, border, margin
  • Cara mengukur elemen dengan box model
• Lesson 2: Padding, Border, dan Margin
  • Properti padding, border, margin untuk mengatur jarak dan bingkai
  • Cara mengatur border: warna, tebal, dan jenis garis
• Lesson 3: Menggunakan Box-Sizing
  • Perbedaan box-sizing: content-box dan box-sizing: border-box
  • Pengaruh box-sizing terhadap ukuran elemen

Chapter 2: Float dan Clear

• Lesson 1: Properti Float
  • Fungsi dan penggunaan float dalam membuat layout
  • Float kiri dan kanan (float: left, float: right)
• Lesson 2: Properti Clear
  • Penggunaan clear untuk menghentikan efek float
  • Penggunaan clearfix untuk mencegah masalah layout
• Lesson 3: Contoh Penerapan Float dan Clear
  • Contoh membuat layout kolom dengan float
  • Masalah umum float dan cara mengatasinya

Chapter 3: Positioning CSS

• Lesson 1: Position Static, Relative, Absolute
  • Penjelasan mode position: static, relative, dan absolute
  • Kapan dan bagaimana menggunakan setiap mode positioning
• Lesson 2: Position Fixed dan Sticky
  • Fungsi dan penggunaan position: fixed untuk elemen yang tetap di layar
  • Penggunaan position: sticky untuk elemen yang mengikuti scroll
• Lesson 3: Layering dengan Z-Index
  • Penjelasan properti z-index dan bagaimana mengontrol lapisan elemen
  • Pengaruh z-index terhadap posisi elemen bertumpuk

Part 3: Responsivitas dan Animasi

Chapter 1: CSS Flexbox

• Lesson 1: Pengantar Flexbox
  • Definisi dan fungsi Flexbox dalam layout modern
  • Konsep utama: kontainer dan item flex
• Lesson 2: Properti Flexbox
  • Properti display: flex, flex-direction, dan justify-content
  • Properti align-items, align-self, dan flex-wrap
• Lesson 3: Contoh Penerapan Flexbox
  • Membuat layout kolom dengan Flexbox
  • Membuat layout yang responsif dengan Flexbox

Chapter 2: CSS Grid Layout

• Lesson 1: Pengantar CSS Grid
  • Apa itu CSS Grid dan fungsinya dalam layout
  • Perbedaan Grid dengan Flexbox
• Lesson 2: Properti Dasar Grid
  • Properti display: grid, grid-template-columns, grid-template-rows
  • Properti gap, grid-area, dan grid-template-areas
• Lesson 3: Contoh Layout dengan Grid
  • Membuat layout sederhana menggunakan Grid
  • Kombinasi Grid dan Flexbox dalam satu halaman

Chapter 3: Animasi dan Transisi CSS

• Lesson 1: Pengantar Animasi CSS
  • Membuat animasi dengan properti @keyframes
  • Penggunaan animation-name, animation-duration, dan animation-timing-function
• Lesson 2: Properti Transisi
  • Penggunaan properti transition untuk membuat efek animasi halus
  • Efek transisi warna, posisi, ukuran, dan lainnya
• Lesson 3: Contoh Penerapan Animasi
  • Membuat efek hover dengan transisi
  • Contoh animasi sederhana untuk tampilan web yang interaktif

Part 4: Tips dan Trik Lanjutan CSS

Chapter 1: Media Queries untuk Responsivitas

• Lesson 1: Apa Itu Media Queries?
  • Penggunaan media queries untuk membuat desain responsif
  • Sintaks dan cara menulis media queries
• Lesson 2: Breakpoints yang Umum Digunakan
  • Breakpoints standar untuk mobile, tablet, dan desktop
  • Contoh penggunaan media queries dalam desain
• Lesson 3: Teknik Responsif Lanjutan
  • Penggunaan media queries untuk grid dan flexbox
  • Desain fluid dan teknik pengaturan layout yang fleksibel

Chapter 2: CSS Variables dan Custom Properties

• Lesson 1: Pengantar CSS Variables
  • Apa itu variabel CSS dan fungsinya
  • Cara mendefinisikan dan menggunakan variabel CSS
• Lesson 2: Contoh Penggunaan Variabel CSS
  • Penerapan variabel CSS dalam tema warna
  • Menggunakan variabel CSS untuk ukuran font dan spacing
• Lesson 3: Cascade dan Inheritance pada Variabel
  • Bagaimana variabel diwariskan dalam CSS
  • Perbedaan antara variabel lokal dan global

Chapter 3: Optimasi dan Best Practices

• Lesson 1: Struktur Kode CSS yang Efektif
  • Tips membuat struktur kode CSS yang rapi dan mudah dipahami
  • Menggunakan BEM (Block, Element, Modifier) sebagai metode penamaan class
• Lesson 2: Minifikasi dan Performance CSS
  • Cara meminifikasi file CSS untuk performa yang lebih baik
  • Optimasi loading CSS dengan teknik critical CSS
• Lesson 3: Tools dan Framework Pendukung CSS
  • Penggunaan preprocessor CSS seperti SASS dan LESS
  • Framework CSS populer: Bootstrap, Tailwind, Foundation