Belajar CSS: Kod & Praktik — Latihan pengekodan CSS dengan editor HTML dan CSS langsung pada telefon anda

Tiga perkara menjadi punca kebanyakan masalah layout pemula. Box model: padding dan border secara lalai menambah lebar yang diisytiharkan bagi sesuatu elemen, jadi kotak akhirnya lebih lebar daripada nombor yang anda taip. Specificity: rule yang lebih khusus di tempat lain secara senyap mengatasi rule anda. Dan tool layout yang salah: cuba membina halaman dua dimensi menggunakan flexbox, sedangkan flexbox direka untuk satu baris. Belajar CSS: Kod & Praktik menyusun kursusnya supaya ketiga-tiga perkara ini difahami mengikut urutan tersebut, bukannya ditemui melalui cuba jaya.

Sedikit pengetahuan sudah memadai, dan anda boleh mempelajarinya bersama-sama pelajaran tanpa perlu menghabiskannya terlebih dahulu. CSS menerangkan cara elemen HTML dipaparkan, jadi memahami bahawa halaman terdiri daripada elemen — tajuk, perenggan, senarai dan imej — sudah cukup sebagai asas untuk bermula. Editor langsung dalam apl memaparkan HTML dan CSS secara serentak, jadi kaitan antara kedua-duanya dapat dilihat sejak pelajaran pertama.

Flexbox menyusun item pada satu garisan — seperti sebaris butang atau bar navigasi — dan mengagihkan ruang yang berbaki sepanjang satu paksi itu. Grid mentakrifkan baris dan lajur pada masa yang sama, jadi anda meletakkan item dalam grid dua dimensi sebenar dan bukannya mengalihkannya menggunakan margin. Layout peringkat halaman biasanya menggunakan grid; satu baris kawalan di dalamnya biasanya menggunakan flexbox, dan kursus ini mengajar kedua-duanya sebelum membiarkan anda membuat keputusan sendiri.

CSS menyelesaikan rule yang bercanggah berdasarkan specificity terlebih dahulu, kemudian susunan dalam sumber. Selector ID mengatasi selector class, dan class mengatasi selector elemen biasa, tanpa mengira yang mana muncul lebih jauh di bawah stylesheet. Sebab itulah rule yang kelihatan betul masih boleh kalah kepada rule yang anda terlupa di tempat lain — kursus Specificity & Cascade dalam apl ini diwujudkan khusus untuk menjadikan susunan tersebut boleh dijangka dan bukannya misteri.

Ya, CSS masih berbaloi dipelajari secara langsung. Framework utiliti seperti Tailwind dibina di atas konsep CSS, bukannya pengganti kepada CSS — apabila utility class tidak berfungsi seperti yang dijangka, pemahaman tentang box model, specificity dan sistem layout di sebaliknya membantu anda menyelesaikan kebuntuan. CSS juga merupakan salah satu kemahiran paling pantas untuk melihat hasilnya, kerana setiap perubahan dapat dilihat pada halaman dengan serta-merta.

Konsistensi lebih penting daripada jumlah jam keseluruhan. Dengan mengikuti pelajaran pendek setiap hari, kebanyakan pemula boleh mengendalikan selector, jarak, tipografi serta layout asas flexbox atau grid dengan yakin dalam masa beberapa minggu, jauh sebelum menghadapi perkara yang lebih mencabar seperti kes khusus specificity atau container queries. 20 projek berpandu dalam apl ini disediakan khusus untuk mempraktikkan tahap tersebut, satu halaman sebenar pada setiap masa.

Apl ini percuma untuk dimuat turun di App Store dan Google Play. Kursus pertama, projek berpandu pertama, dua misi memburu pepijat dan editor langsung adalah percuma, dengan kuota harian AI Mentor. Pro membuka semua kursus, kesemua 20 projek dan 20 misi, peperiksaan sijil serta penggunaan AI Mentor tanpa had, dan membuang iklan.

Belajar CSS: Kod & Praktik tersedia untuk iPhone dan iPad di App Store serta untuk Android di Google Play, dengan antara muka dalam 22 bahasa dan penarafan umur 4+. Apl ini sesuai untuk pemula sepenuhnya, pereka bentuk yang mahu menggayakan halaman sendiri serta mereka yang bertukar kerjaya atau pelajar yang membuat persediaan untuk temu duga front-end.

Pratonton segera secara khusus memerlukan sambungan untuk memaparkan HTML dan CSS anda, dan apl ini menyatakannya dengan jelas tanpa merosakkan pengalaman secara senyap. Teks pelajaran dan bahan bacaan direka untuk terus berfungsi dengan sambungan yang tidak stabil, yang merangkumi kebanyakan perjalanan ulang-alik, tetapi sesi pratonton langsung sepenuhnya luar talian bukan sesuatu yang disediakan oleh editor ini.

Belajar CSS: Kod & Praktik berjalan pada iOS melalui App Store dan pada Android melalui Google Play, serta tersedia dalam 22 bahasa. Apl ini mempunyai penarafan 4+. Lulus peperiksaan akhir dan apl ini akan mengeluarkan sijil tamat kursus — bukti usaha yang anda lakukan, berguna pada CV bersama projek berpandu yang boleh anda terangkan, bukannya kelayakan yang diiktiraf.