.

Monday 24 November 2014

11 Alat dan Sumber Pembelajaran CSS

1. Unfolding the Box Model

Slaid interaktif yang meneroka perubahan CSS 3D. Pada laman berikut, tekan butang kiri atau kanan untuk maju. Tonton dalam paparan skrin penuh untuk hasil terbaik. (http://rupl.github.io/unfold/)


2. CSS Diner

Permainan yang direka dengan baik untuk membantu anda belajar Pemilih (Selectors) CSS. Taipkan pemilih yang betul untuk menyelesaikan setiap tahap (level). Anda juga boleh melangkau ke tahap lain dengan membuka menu pada ikon humburger di sebelah kanan. (http://flukeout.github.io/)


3. Belajar Pemilih CSS secara interaktif

Gambaran mudah bagi pemilih dalam CSS. Pilih pemilih pada menu disebelah kiri, dan item yang dipilih dengan betul akan dipaparkan di sebelah kanan, beserta penjelasan ringkas dari pemilih dibawah menu. (http://benhowdle.im/cssselectors/)


4. Kuiz Pembangunan Web Bahagian Hadapan (Front End)

Kuiz pengekodan bahagian hadapan dan ianya bukannya mudah, seksyen pertama adalah pada CSS. (http://davidshariff.com/quiz/)


5. The Magic of CSS

Tutorial yang mempunyai 6 Bab mengenai asas-asas CSS (dengan lebih bab-bab yang akan datang). Terdapat beberapa perkara yang lebih mendalam disini. (http://adamschwartz.co/magic-of-css/)


6. Enjoy CSS

Seperti sebuah taman permainan KodPen (CodePen) untuk mempelajari CSS. Bahagian yang paling menarik sekali adalah ianya memfokuskan kepada CSS dengan menu di mana anda boleh memilih ciri-ciri CSS dan menggunakan GUI untuk mengedit item yang ada dalam dokumen itu. (http://enjoycss.com/)


7. CSS Guidelines

Harry Roberts telah mengemaskini Garis Panduan CSS beliau. Sebelum ini ianya hanya terdapat pada GitHub repo, kini ia telah mempunyai domain mereka sendiri dan telah berkembang serta bertambah baik. Harry juga telah melaksanakan model "bayar berapa yang anda mahu" untuk membantu menyokong pembangunan. (http://cssguidelin.es/)


8. CSS Triggers…

Pembangunan Perhubungan Chrome (Chrome Development Relations) - Paul Lewis telah mewujudkan rujukan pantas bagi mereka yang berminat dengan apa yang dicetuskan (triggered) pada halaman apabila ciri-ciri CSS berubah. Contohnya, sesetengah ciri-ciri (properties) akan mengalami perubahan warna dan komposit, tetapi ianya tidak akan mengubah susun atur. Rujukan ini meliputi semua ciri-ciri dan mudah dicari. (http://csstriggers.com/)


9. Code Guide by @mdo

Mark Otto (Bootstrap) telah mengumpulkan panduan HTML dan gaya CSS-nya sendiri dengan banyak tips termasuk ciri-ciri, susunan atribut (attributes) HTML, pemilih (selector), komen-komen (cooments) dan banyak lagi. (http://mdo.github.io/code-guide/)


10. Flexplorer

Aplikasi mudah untuk bermain dengan pelbagai ciri-ciri flexbox dan melihat perubahan dalam masa nyata pada halaman yang sama beserta dengan kod penuh. Apa yang menariknya tentang ini ialah, anda juga boleh menyunting teks dalam kotak pada halaman, membenarkan anda untuk melihat bagaimana perubahan berlaku pada kandungan. (http://bennettfeely.com/flexplorer/)


11. CSS Selectors: Targeting HTML Like a Pro

Kursus terbaru Russ Weakley bagi pemilih CSS pada SitePoint ini, boleh dipelajari dengan lebih dari 20 video yang mengenalkan pelbagai cara untuk anda memilih unsur-unsur (elements) dengan CSS. Jika anda baru sahaja bermula dengan CSS dan masih belum mahir dengan pemilih lagi, ini mungkin adalah pilihan yang terbaik untuk anda. (https://learnable.com/courses/css-selectors-targeting-html-like-a-pro-2876)



Maklumat ini telah diterjemahkan daripada Sitepoint

0 comments:

Post a Comment