13 Website Yang Harus Dikunjungi Untuk Mempelajari Dan Menguasai CSS Pada Tahun 2023
Apakah Anda ingin menjadi web development tapi tidak tahu harus mulai dari mana? Mempelajari CSS ialah tempat yang pas untuk mengawali perjalanan karir Anda, ada banyak sumber daya online luar biasa yang bisa membantu.
Kami sudah melakukan penelitian dan mengumpulkan 13 website yang perlu didatangi yang akan membawa Anda dari pemula ke master CSS dalam waktu singkat.
Apa Anda seorang professional atau baru memulai, website ini mempunyai sesuatu untuk semua orang. Dari tutorial komprehensif, sampai lembar contekan dan kutipan code — beberapa situs ini akan memberikan Anda alat dan pengetahuan yang dibutuhkan untuk membuat halaman situs yang indah dan fungsional.
Flexbox Froggy — Pelajari Flexbox
Bila Anda suka bermain games, maka ini ialah website yang pas untuk Anda untuk mempelajari flexbox. Flexbox Froggy ialah game interaktif yang menggemaskan yang akan mengajarkan Anda beberapa dasar sintaksis flexbox.
Cobalah Flexbox Froggy dan lihat pengetahuan Anda mengenai CSS berkembang cepat.
CSS Grid Garden — Kuasai CSS Grid
Apakah Anda siap untuk membawa pemahaman CSS Anda ke tingkat selanjutnya? Jika ya, CSS Grid Garden adalah game untuk Anda!
Game interaktif ini mengajarkan Anda dasar-dasar Grid Layout, sistem tata letak canggih yang semakin populer. Tujuan permainan ini sederhana: Anda harus watering the garden dan setiap kali melakukannya dengan benar, baris atau kolom baru akan ditambahkan.
Untuk watering the garden, Anda perlu menulis kode CSS dan menerapkannya pada garden. Saat Anda bergerak maju dan mulai menyelesaikan level yang lebih rumit dengan sukses, pengetahuan Anda tentang CSS Grid akan meningkat sepuluh kali lipat!
CSS Grid Garden juga memiliki level tambahan bagi mereka yang ingin menguasai keterampilannya. Melalui level ekstra ini, Anda dapat mempelajari bagaimana pecahan dapat digunakan saat membuat bagian desain, cara kerja penyelarasan dalam meregangkan elemen di seluruh bagian, dan bahkan cara membuat pola menakjubkan menggunakan item bagian.
Plus semua ini dapat dilakukan dengan cara yang menarik dengan banyak animasi dan visual yang menyenangkan!
Flex Box adventure
Apa Anda siap menghadapi rintangan nyata? Flex Box Adventure akan membawa Anda ke sana.
Lingkungan pembelajaran Flex Box Adventure yang seperti permainan mewajibkan Anda untuk menjawab pertanyaan, membuat project tata letak fleksibel, dan menantang monster ganas untuk menguasai seni kotak fleksibel CSS. Tujuan Anda? Untuk menjadi "Master Flexbox" atau "Wizard CSS".
Ini mungkin terdengar sulit, tapi lingkungan yang ramah pengguna memberi Anda dorongan dan support yang Anda perlukan untuk sukses. Jangan terintimidasi — Flex Box Adventure pas untuk orang-orang dari semua tingkat ketrampilan. Tiap latihan dilengkapi dengan petunjuk langkah demi langkah dan code contoh yang bisa Anda gunakan sebagai referensi.
CSS Diner — Uji Pengetahuan Anda tentang Selector
Apa Anda membutuhkan tantangan yang menyenangkan untuk menguji ketrampilan CSS yang baru Anda dapatkan? Tidak terlihat lagi dari CSS Diner. Website ini diisi dengan beragam level yang dimulai dengan penyeleksi sederhana dan berlanjut ke topik yang lebih lanjut seperti kelas semu dan kombinator.
Di setiap level, Anda akan disajikan dengan plate dan Anda harus memilih penyeleksi yang mereka gunakan di CSS dunia nyata. Sesudah Anda merasa mengetahui pemilih yang benar, masukan ke kotak text dan tekan Enter untuk meneruskan.
Dengan tiap tantangan, ada keterangan yang memberikan lebih banyak wawasan mengenai kenapa pemilih tertentu mungkin bekerja lebih baik dibanding yang lain untuk tugas yang dihadapi. Anda bahkan juga bisa melihat petunjuk bila Anda mengalami kebuntuan.
Flexbox defense
Apakah Anda siap menggunakan CSS untuk meningkatkan keterampilan pengkodean Anda dan menguasai seni pertahanan Flexbox? Maka situs web ini untuk Anda. Game Flexbox Defense dirancang untuk membantu Anda memahami dan mempraktikkan tata letak Flexbox dengan beberapa elemen grafis yang menyenangkan.
Flexbox Defense adalah cara yang menarik untuk melatih keterampilan CSS Anda sambil bersenang-senang di waktu yang sama! Jika kedengarannya seperti sesuatu yang Anda sukai, pergilah dan cobalah!
Codecademy — Ikuti Kursus dan Tutorial untuk Mempelajari Lebih Lanjut Tentang CSS
Codecademy ialah pilihan tepat untuk siapa pun yang mencari instruksi lebih dalam mengenai CSS. Codecademy menawarkan tutorial interaktif, kuis, dan latihan coding untuk membantu Anda mempelajari dan kuasai CSS. Plus, dashboard mereka memungkinkan Anda mencari kemajuan Anda hingga Anda tetap termotivasi.
Codecademy memungkinkan Anda untuk mengambil kursus yang mempelajari topik yang lebih spesifik seperti HTML dan CSS, Design Responsive, dan Flexbox. Yang lebih kece lagi ialah sesudah menyelesaikan tiap kursus atau panduan, Anda akan mendapatkan sertifikat penyelesaian yang menunjukkan keahlian baru Anda.
Bila belajar lebih cepat penting untuk Anda, lihat langganan 'Pro' yang memungkinkan Anda mengakses materi pembelajaran yang berguna seperti project, analisis, dan mencari kemajuan langkah demi langkah.
CSSReference.io
Siap menjadi master CSS? Selanjutnya Anda ingin mem-bookmark CSSReference.io, tutorial visual gratis untuk CSS. Dengan beberapa contoh untuk setiap properti, dan penjelasan mengenai kenapa setiap contoh digunakan, website ini adalah salah satu sumber informasi terbaik untuk memahami properti CSS.
Anda juga akan menemukan grafik dan ilustrasi — sempurna bila Anda pembelajar visual.
Selain itu, website ini diperbarui secara berkala dengan content baru, termasuk dukungan untuk Flexbox, Grid, dan property khusus.
Lihat kolom "tampilan populer" untuk rangkuman tentang apa yang baru di setiap bagian.
Jadi jika itu terdengar seperti sesuatu yang akan membantu diperjalanan belajar Anda, pergi dan lihatlah
Knights of the Flexbox Table
Apa Anda siap menjadi master flexbox? Pergilah ke Knights of Flexbox Table, yang merupakan permainan online untuk pemula. Dan bagian terbaiknya? Gratis.
Website memberikan Anda pengantar simpel dan mengajari dasar-dasarnya, seperti cara membuat tata letak, menyesuaikan content, membuat design responsive, dan mengganti nilai CSS dengan cepat.
Pelajari dan ingat Flexbox dengan Tailwind CSS untuk mengatasi cheatsheet Anda.
Flexbox zombies
Bila Anda sedang mencari cara yang keren dan menyenangkan untuk mempelajari beberapa dasar CSS Flexbox, maka Flexbox Zombies mungkin menjadi tiket Anda.
Melalui games interaktif ini, Anda bisa mempelajari semuanya mengenai Flexbox saat Anda melawan zombi dan menguasai kodenya.
Flexbox Zombies hebat karena:
| Memberi Anda pendekatan praktis untuk mempelajari CSS Flexbox | |
| Dibutuhkan pemecahan masalah yang terampil untuk melawan zombie dan menaklukkan level Flexbox | |
| Mempermudah mengingat cuplikan kode dengan mnemonik fleksibilitas | |
| Memiliki tugas dunia nyata seperti membuat baris dan kolom dengan Flexbox yang menggunakan keterampilan yang baru Anda peroleh |
Plus, menguasai Flexbox membantu Anda menjadi pemecah masalah yang lebih bagus, karena memakai fitur ini memberikan Anda alat yang dibutuhkan untuk mengoptimalkan design halaman situs apa pun.
Maka cobalah bila Anda ingin meningkatkan ketrampilan membuat website Anda ke level selanjutnya!
Mozilla Developer Network — Sumber daya tentang CSS dan HTML
Mozilla Developer Network ialah sumber yang baik untuk mempelajari dan menguasai CSS dan HTML. Ini mempunyai segala hal dimulai dari pengenalan singkat ke HTML, dan tutorial langkah demi langkah untuk menguasai beberapa dasar CSS Grid dan Flexbox.
Di MDN, Anda bisa menemukan document situs yang memberi info mendalam mengenai teknologi, pengembangan situs, dan project sumber terbuka termasuk HTML, CSS, JavaScript, grafik, aplikasi seluler dan desktop, dll.
Plus, forum memungkinkan Anda untuk mengajukan pertanyaan ke developer berpengalaman dan menerima jawaban dalam beberapa saat. MDN memberikan Anda akses ke tabel kompatibilitas browser yang menolong Anda memeriksa apa elemen HTML atau properti CSS yang Anda gunakan akan berfungsi di semua browser utama.
Apabila ada yang tidak beres dengan code Anda, MDN bisa membantu Anda men-debug-nya!
Trik CSS — Tutorial, Tip & Trik Menjadi Ahli Dengan CSS
Apa Anda seorang pembuat code CSS menengah yang mencari tempat untuk menggambarkan beberapa dasar dan mempelajari konsep lanjutan? Maka CSSTricks ialah website yang bagus untuk Anda. Didirikan oleh Chris Coyier, website ini menampilkan tutorial, tip, dan trik menjadi ahli CSS.
CSSTricks menawarkan sesuatu untuk semua orang, dimulai dari tutorial untuk pemula yang baru mengawali dengan CSS hingga trik tingkat lanjut untuk para profesional yang ingin masih tetap menjadi yang terdepan.
Ini menampilkan kutipan code yang bisa Anda integrasikan ke project Anda sendiri dan posting website yang diperbaharui secara berkala tentang trend industri terbaru.
Bila Anda ingin lebih meningkatkan ketrampilan pengkodean Anda, CSSTricks jelas sebagai sumber yang harus Anda periksa.
CSS Zen Garden
CSS Zen Garden adalah salah satu situs asli yang mengajarkan dan membantu orang mempelajari cara menguasai CSS. Menurut situs webnya, ini adalah situs yang "dirancang untuk mendemonstrasikan apa yang dapat dicapai secara visual melalui desain berbasis CSS".
CSS Zen Garden telah menjadi bagian yang berpengaruh dalam pengembangan standar web selama lebih dari 15 tahun dan terus menawarkan tutorial tentang semua hal yang dapat Anda lakukan dengan CSS:
Dari pemisahan konten secara visual dari presentasi, hingga ide liar seperti mengubah seluruh tata letak bagian melalui kueri media.
Ini juga menyediakan metode untuk memisahkan konten HTML dari presentasi, sehingga semua visual diterapkan hanya dengan menggunakan CSS.
Apakah Anda mencari inspirasi?
Maka CSS Zen Garden harus berada di urutan teratas daftar kunjungan wajib Anda. Ini memiliki koleksi desain dan tutorial yang menarik yang akan membantu Anda mengasah keterampilan Anda dalam membuat situs web yang indah dengan CSS.
Ringkasan
Dengan beragam sumber daya dan website yang ada, CSS tidak harus terlalu banyak dan sulit untuk dipelajari. Apa Anda seorang pemula atau developer berpengalaman, ada beberapa pilihan untuk melanjutkan perjalanan Anda.
Menyempatkan diri untuk mempelajari metode seperti Flexbox dan Grid ialah kuncinya, dan akan membuat website apa pun itu menjadi lebih efektif dan efisien. Manfaatkan daftar website di atas untuk membuat pembelajaran dan penguasaan CSS lebih mudah dan lebih efektif.
Waktu yang Anda habiskan untuk mempelajari CSS akan terbayarkan, karena ini ialah asset berharga untuk pengembang dan perancang situs mana pun.
Jadi jangan menunggu - mulailah untuk menguasai CSS sekarang!