 Hai, semua! Nama saya, Selen. Melewati saya adalah Gloria. Hari ini, kami akan membuat perkara ini, CSS Grip untuk Noobs. Dan perkara yang kecil itu adalah Buy Noobs. Ya, jadi sedikit cerita latihan. Mari kita berada di atas. Mari kita berada di sini. Kami duduk di sini di depan. Dia adalah KSW Singapura. Ada sekeliling CSS ini? Ini yang akan digelaskan untuk dia. Jadi, gambar ini telah ditambah dua bulan lalu di S-Conference, dan Dan perkara yang menarik adalah, kita mengambil gambar ini selepas ada 7 gas yang berwarna. Dan ini adalah perbezaan itu. Kita berdua bergerak. Saya rasa gambar kita adalah yang mengambil gambar yang terbaik di event itu. Dan itu juga sebabnya, kenapa kita berada di sini hari ini? Kenapa? Pada cerita yang terbaik, kita tak akan membuat keputusan yang lebih besar daripada 2 gas yang berwarna. Kenapa saya kata ia adalah keputusan yang lebih besar? Saya rasa, Meagora, kita berdua bergerak. Kita mendengar semua keputusan ini bercakap tentang pengalaman mereka. Dan mereka selalu bercakap tentang perkara teknikal. Untuk kita, kita hanya mempunyai lebih daripada 1 tahun kembali, atau memperkenalkan bahagian antara kita. Jadi, kita berkata, apa yang boleh kita berikan kepada komuniti yang boleh berkaitan? Apa yang kamu mahu kita bercakap tentang? Kita berkata, kita duduk pada sebuah kata-kata untuk lama, tak dapat berkata-kata. Dan kemudian, kita berkata-kata, kita hanya membuat sesuatu dengan berlaku. Tapi kita memilih membuat keputusan di CSS Grid. Sebab, kita telah menerima keputusan dengan Huiching. Dan kemudian, kita keluar dengan 2 keputusan yang dapat dibuat di CSS Grid. Jadi, kita masuk ke konsep keputusan yang dapat dibuat. Keputusan yang dapat dibuat adalah menggabung sebagai program yang dibuat di luar kerja untuk keputusan untuk belajar dan belajar sebuah konsep baru. Jadi, konsep ini sebenarnya dibuat kepada saya dan kami oleh kakak kita di Tide Ladies. Dan ia berkata bahawa eksperimen berlaku dan berlaku, yang benar-benar apa yang kita lakukan. Kita keluar dengan beberapa versi yang berlaku tentang projek kita. Dan kemudian, kita keluar dengan satu versi yang kami sedihkan. Dan kemudian, kami menerima. Jadi, kami menerima sebuah keputusan. Kerana kami menerima, adalah entering this process of mutual code review as well as giving each other positive and constructive feedback. Dan ini juga kemudian we finally came up with the topic of CSS Grid for Noobs by Noobs because I think we decided not only to share what we built, how we build it with CSS Grid but also our learning process and our learning journey as beginners to a new thing. new thing. So okay um now I'm going to do a quick intro to CSS Grid layout templates, can I just get a quick show of hands? How many people actually tinkered with CSS Grid or use CSS Grid 4? Just a quick show of hands so that I can see okay this is like less than one third of the room. Okay that's good. Okay, so just a quick intro to CSS Grid Jadi anda dapat menggunakan analogi dari bot cest yang kita suka menggunakan Untuk mempunyai bot cest untuk mempunyai CssGrid Jadi bot cest sebelum anda memulai bot cest, kita selalu mempunyai bot yang sudah sedia Jadi itu yang kita akan lakukan dengan layout Kemudian selepas itu, apa yang kita akan lakukan adalah memasukkan pangkat dalam bot cest Jadi saya akan mulai dengan htl markup Saya ingin menjelaskan ini kerana sebagai dino devs Saya akan memasukkan pangkat dalam bot cest yang hanya berkongsi dengan css Apa yang mereka lakukan adalah memasukkan pangkat css Mereka akan menunjukkan pangkat css dan bagaimana mereka mempunyai Tapi mereka tidak menunjukkan pangkat htl markup yang di belakang Jadi ketika saya masuk, saya akan memperkenalkan apa yang pangkat css yang diperkenalkan Jadi hari ini, kita akan mulai dengan sesuatu yang sangat mudah Saya akan mempunyai gridless Maka htl markup adalah pangkat yang hanya berkontainan Jadi hanya ingat dua termas, pangkat pangkat dan containan Jadi kita mempunyai pangkat pangkat dengan pangkat 3 Kita akan menyebabkan pangkat pangkat Dan sekarang, anda dapat melihat pangkat css yang sekarang dibuat Tapi kita hanya mempunyai pangkat belakang pangkat Untuk menunjukkan pangkat Jadi pertama yang kita mahu lakukan adalah memasukkan grid layar pada pangkat pangkat Jadi kita melakukan itu dengan menggunakan pangkat css Apa yang saya mahu lakukan di sini adalah tiga pangkat dan tiga pangkat Jadi untuk melakukan ini, kita menggunakan pangkat css Pangkat pangkat dengan pangkat s Di sini anda dapat melihat tiga pangkat Yang mempunyai beberapa pangkat Dan setiap pangkat sebenarnya menyebabkan pangkat Jadi untuk kedua, pangkat pangkat grid Di sini, pangkat css menyebabkan kita dengan pangkat yang bagus Jadi kita tidak perlu menyebabkan pangkat pangkat 3 kali Seperti yang kita lakukan dengan pangkat Dengan pangkat pangkat Jadi pangkat pangkat sebenarnya menyebabkan pangkat Seperti pangkat yang pertama Dan pangkat yang kedua untuk pangkat kedua Dan kemudian kita akan mempunyai tiga pangkat dan tiga pangkat Okey, jadi sekarang Di sini, kita mempunyai Pangkat pangkat yang sudah dibuat awal Sekarang kita hanya mempunyai pangkat Jadi pangkat pertama adalah Kita mahu mengubah pangkat pangkat Dan pangkat pangkat Lihat pangkat pangkat Jadi di sini, saya rasa ia sedikit kecil Tapi di sini, pangkat pangkat 1, 3 Pangkat pangkat 2, 3 Jadi anda dapat melihat pangkat pangkat Pangkat pangkat pangkat sebenarnya pada pangkat kedua Jadi kita mempunyai pangkat pertama Pangkat pangkat kedua Pangkat pangkat di atas Sebenarnya dari Firefox Jadi jika anda menggunakan grid CSS Saya rasa sekarang pangkat pangkat pangkat pangkat untuk grid CSS adalah Firefox Kerana apabila anda membuka pangkat pangkat Anda dapat menggunakan layout grid Dan ia akan menghubungkan Pangkat pangkat dan area template grid Dan anda dapat memilih dan menggambarkan Okey, jadi Mari kita katakan jika saya mahu mengalihkan Pangkat ini Sebelum menggambarkan pangkat Dalam pangkat pangkat pangkat Semua yang saya perlu lakukan adalah mengubah Pangkat grid dari 1, 3 2, 2, 4 Untuk mengalihkan pangkat pangkat pangkat Anda mungkin perlu menggunakan pangkat pangkat atau sesuatu atau pangkat pangkat Pangkat pangkat CSS yang anda gunakan Tetapi untuk grid Anda tidak perlu menggunakan pangkat Jadi ini pangkat pertama yang akan menjadi apa yang saya menggunakan di demo saya nanti Gloria akan menggunakan pangkat kedua yang adalah pangkat grid template Sebelum menggunakan pangkat pangkat apa yang kita lakukan adalah mengubah pangkat CSS Di sini, apa yang kita lakukan adalah mengubah pangkat yang sama dari pangkat pertama dari pangkat pertama kemudian kita mengubah pangkat CSS yang dipanggil grid template Biasa jika anda dapat melihat anda masih dapat melihat pangkat pangkat 3 pangkat pangkat 3 dan pangkat 3 ini biasanya yang anda dapat pada pangkat grid template Jadi untuk menggunakan pangkat ini anda hanya perlu mengubah pangkat pangkat di pangkat grid template ini ini melihat pangkat Little Gloria akan mengubah lebih sedikit tetapi anda masih dapat menerima pangkat ini Jadi anda dapat melihat pangkat saya bermaksud pangkat pangkat pangkat itu sebenarnya bergerak dari ke jalan ke jalan Jadi ini pangkat Nihawli Jadi pangkat CSS grid anda dapat menerima pangkat ini Pangkat pangkat Nihawli adalah pangkat yang mengubah pangkat dia mahu mengubah tapi kita lihat www.nihawli.com Jadi ini pangkat Nihawli pangkat kerana anda dapat mengubah pangkat ke jalan ke pangkat ke jalan ke pangkat dan anda dapat menggunakan pangkat untuk mengindikasi apa yang anda mahu dalam pangkat Jadi anda dapat mengubah pangkat pangkat dengan jika pangkat pangkat CSS Jadi saya rasa Pangkat CSS adalah sesuatu yang sangat menakutkan Okay, kemudian pangkat pangkat CSS demo grid demo Saya rasa pangkat dari cerita tadi Apa yang berlaku kita memutuskan kita harus membangun sesuatu dalam CSS grid Jadi kita perlu menikmati apa yang perlu dibuat kerana tidak ada pangkat Selepas menikmati grid CSS untuk pangkat saya menikmati inspirasi Jadi saya bermula menikmati grid CSS seperti tidak ada pangkat bahkan pangkat saya dapat melihat grid CSS kerana saya fikir bagaimana untuk membangun grid CSS Selepas itu, saya datang melalui ini apabila saya bekerja dalam pangkat pangkat dan ini hanya pangkat yang membuat pangkat kami berada di luar Saya rasa ini sangat cantik warna baik dan sebagainya Jadi saya rasa Okay, mari kita cuba membangun grid CSS Jadi ini adalah versi pertama yang saya datang Saya perlu menikmati Maaf, lelaki Bagaimana menikmati ini? Maaf masalah teknikal Ya Mera Mera? Bagaimana? Ini pangkat pangkat Pangkat pangkat Seperti itu? Maaf, lelaki Ini sangat lucu Saya tahu Okey Boleh awak melihat pangkat saya? Okey Jadi Ini pangkat pangkat Pangkat Pangkat pangkat dan ini pangkat ini adalah pangkat yang saya membangunkan Pangkat pangkat yang saya membangunkan Jadi versi yang awal Sebenarnya saya sangat gembira dengan membangunkan grid sebenarnya lebih lama daripada mencari pangkat Pangkat itu sangat marah dan saya menggunakan pangkat Google jadi anda boleh mengingat berapa banyak masa saya membangunkan Bagaimanapun pangkat yang penting apabila saya menunjukkan pangkat grid ini dan kemudian dia beritahu saya berikan saya beberapa kebunan mengenai pangkat saya dan kemudian pangkat yang lain yang dia beritahu saya adalah anda tahu tak? Anda cuba membuatnya responsif Okey Jadi saya menunjukkan sekarang ia tidak responsif dan pangkat itu menyebabkan saya sebagai pangkat baru apabila saya dengar pangkat pangkat itu kemudian tidak responsif Jadi ia menyebabkan saya kerana ia seperti jika anda tidak anda tidak pernah menghantar kerajaan saya tahu ia ada sesuatu yang menghasilkan kerajaan tapi saya tidak pernah menghantar kerajaan sebelumnya dan bagaimana saya akan melakukan sesuatu yang baru dalam kerajaan CSS dan lakukan sesuatu yang baru dalam responsif, betul? Tapi dia beritahu saya dalam pangkat pangkat pangkat itu saya akan mengambil kebunan dan saya akan memainkan dan saya akan mencoba dan kemudian saya keluar dengan ini jadi pangkat yang baik dan kemudian saya memutuskan okey terima kasih Jadi perkara tentang kerajaan CSS betul? jika anda melihat kerajaan ini saya bermaksud responsif adalah satu perkara okey tetapi melihat perkara perkara perkara dengan kerajaan CSS anda boleh mempunyai perkara lebih mudah daripada anda dengan perkara yang lain anda tahu kerajaan seperti Boushat atau apa-apa atau anda mungkin mempunyai javascript untuk melakukan ini kerana anda dapat melihat seperti dari sini orang sebenarnya bergerak dari kerajaan ketiga ke kerajaan pertama dan ini sangat mudah menerima saya bermaksud semua kode di sini anda dapat melihat kode di dalam kode kami yang kita berkongsi anda boleh bermaksud jadi saya rasa kami ada beberapa feedback dari masa yang terbelakang yang kami tidak berkonek cukup kode dari pembangunan kami jadi hanya untuk menunjukkan anda bagaimana mudah ia untuk meminipulasi perkara dalam perasaan normal saya membangunan seperti ini adalah perasaan normal jadi di sini saya menggunakan seperti dua kode dan 10 kode untuk ini tetapi ke tempat yang lebih besar anda dapat melihat ini adalah hanya satu kode di media yang digunakan jadi pada 701 piksel dan di bawah anda akan sebenarnya memutuskan ini yang mempunyai 12 kode dan 9 kode jadi ini dibuat dengan 12 kode dan 9 kode hanya untuk memastikan yang saya beritahu sebelum ini jadi saya berada di Firefox sekarang dan mempunyai element semua yang saya perlu lakukan adalah untuk pergi ke layout dan kemudian pembentangan ini saya tidak tahu jika saya dapat melihat pembentangan ini apabila saya ambil anda boleh melihat semua pembentangan di sana jadi ia sangat jelas menyebabkan semua pembentangan kolom dan kode yang anda dapat sebenarnya menggunakan untuk mengubah pembentangan anda apabila anda mengubah pembentangan jadi ia sangat menyenangkan ya, jadi itu saya rasa jadi sekarang saya akan menghantar kepada Gloria untuk teruskan pembentangan dia okey, kemudian kemudian saya tahu saya rasa saya rasa semua orang, nama saya Gloria dan saya akan mengambil dari sini jadi setelah semua perkara yang Sherlyn berkongsi tentang kode CSS anda menakjubkan atau menakjubkan bagaimana menakjubkan kode CSS sebenarnya ialah jadi seperti apabila saya pertama menakjubkan kode CSS dengan Huijing saya telah menakjubkan saya telah menakjubkan saya telah menakjubkan kerana saya tidak tahu bagaimana saya dapat membuat semua perkara ini dengan kode CSS sendiri jadi salah satu perkara yang saya suka tentang kode CSS adalah kode Template Area jadi sekarang saya akan menunjukkan kode demo tentang bagaimana kode Template Area sebenarnya jadi apa yang saya suka tentang ini bukan hanya sebab saya dapat melihatnya tetapi juga sebab ia sangat efisien jadi mari saya menunjukkan apa yang saya lakukan dengan itu jadi saya membuat perkara ini di sini untuk menunjukkan bagaimana anda boleh bermain dengan kode Template Area jadi seperti yang anda dapat lihat dari kode ini ia sangat kecil tetapi bagaimanapun perkara kode Template Area kemudian setelah itu saya memutuskan perkara kode saya di sana hanya seperti bagaimana saya mahu perkara ini menunjukkan di live view yang sangat mudah jadi perkara kode Template Area semua berjumpa seperti yang anda dapat lihat secara tersensi sebab saya akan menunjukkan bagaimana mudah untuk menunjukkan perkara kode Template Area okey jadi apa yang saya perlu lakukan adalah menunjukkan perkara kode Template Area di sini untuk perkara kode saya bermakna perkara yang saya mahu menunjukkan dan seperti itu anda boleh menunjukkan dan menunjukkan apa-apa yang anda mahu di kode Area dan perkara lain adalah anda boleh menunjukkan perkara ini mana-mana pun anda mahu menunjukkan perkara ini dan itu sangat menarik dan juga anda boleh menunjukkan bagaimanapun anda mahu perkara yang anda mahu menunjukkan jadi di sini saya mahu perkara A untuk menunjukkan mungkin 2 atau 3 perkara jadi saya boleh mudah membuat itu dengan menunjukkan perkara yang saya mahu di kode Area Esok jadi saya colour så 18 19 Pasang 19 19 19 19 19 19 19 19 19 19 19 apa yang saya bermakna dengan nesting grids. Jadi, mari kita katakan jika saya mempunyai banyak box-nya di sini, dan saya mahu nesting mungkin 4 box-nya di dalam grids di box 3. Jadi, bagaimana saya boleh buat itu adalah, hanya memasukkan item grids yang saya mahu di bawah kelas yang saya telah mencari disebabkan nesting grids. Tapi sekarang, untuk nesting grids ini, kelas tidak ada kelas lagi. Jadi, anda nampak seperti ini. Anda hanya akan berada di atas satu sama lain. Jadi, sekarang anda akan mencari kelas kita untuk nesting grids, dan untuk nesting grids, pertama yang anda perlu lakukan adalah untuk nesting grids. Ini sangat penting kerana jika anda tidak nesting grids, anda tahu apa yang berlaku? Ia tidak akan berhasil. Jadi, untuk nesting grids, saya akan menyebabkan dua kolam dari satu Fr. Jadi, Fr adalah unit fraksional, dan satu Fr bermaksud ia adalah satu jenis tempatan tempatan yang digunakan. Kemudian, saya menerimanya dengan menerimanya 1M. Jadi, tempatan tempatan adalah, ia menjelaskan tempatan antara dan kolam. Jadi, anda tidak perlu melakukan petang, majin dan sebagainya. Anda hanya perlu menyebabkan nesting grids 1M, dan kemudian anda akan melakukan magic untuk anda. Ya, mari kita lihat. Okey, jadi, menyebabkan nesting grids, kan? Ia dapat menjelaskan sangat mudah. Jadi, menjelaskan sangat mudah. Saya sebenarnya membuat tiga tawaran yang berlaku, dan ini adalah salah satu mereka. Ia adalah sebuah kata-kata. Jadi, mungkin anda ingin mengambil beberapa kedengaran untuk mengingatkan bagaimana nesting grids akan berlaku. Okey? Jadi, saya rasa ada banyak cara yang anda boleh lakukan, tetapi ini adalah bagaimana saya lakukannya. Jadi, saya memberi mereka lima kolam dan lima jenis satu Fr. Yang penting yang saya lakukannya adalah kerana saya mahu menerimanya untuk 4, 5, 6. Seperti ada banyak kata-kata. Jadi, saya dapat menyebabkan mereka di kawasan yang berlaku dan ia sangat mudah melakukan begitu. Dan perkara lain yang saya lakukannya adalah tawaran ini, hanya menggunakan nesting grids. Saya tidak tahu kenapa saya memutuskan untuk membangun ini. Mungkin kerana, anda tahu, nesting grids adalah nesting grids. Jadi, saya tidak tahu. Ia hanya berlaku di keadaan saya. Kemudian, saya sangat penasaran untuk mencari, ialah tidak mungkin untuk melakukan sesuatu seperti itu? Kemudian, apabila saya lakukannya, saya sangat gembira kerana saya tidak tahu ialah mungkin. Jadi, saya tidak perlu membuka nesting kolam sejak saya meletakkan ini. Jadi, anda tahu, ada kemungkinan yang tidak berlaku dengan apa yang anda boleh lakukan dengan nesting grids. Dan kita mempunyai beberapa kemungkinan daripada melakukan ini. Jadi, kita berdua sebenarnya menerima banyak daripada melakukan perkara ini. Yang satu dari mana adalah melakukannya dengan melakukannya. Kerana ketika kita melakukannya dan sebagainya, ia biasanya adalah pengalaman yang sangat berlaku, yang akan melihat melakukannya dan melakukannya dengan kita. Tapi kemudian kali ini, ia adalah salah satu daripada yang sama atau yang berlaku daripada melakukan ini bersama. Jadi, ia adalah pengalaman yang sangat berlaku kerana ia sangat berlaku, tetapi ia sangat berlaku. Kerana kita dapat melihat cara kita melakukan perkara yang berlaku dan kita masih berlaku untuk melakukannya. Dan cara kita memilih grids CSS adalah hanya apapun. Jangan fikir. Jangan lakukannya kerana jika anda tidak lakukannya, anda tidak tahu jika ia mungkin atau tidak. Jadi, jika anda lakukannya, anda cuba. Anda akan gembira untuk tahu bagaimana ia berlaku. Tetapi dengan itu, kami belajar perkara yang sepatutnya. Seperti hanya sebuah layar yang sederhana dengan heider, kemudian mungkin seperti bodi, bari dan putar. Kemudian kami mula memperkenalkan item untuk melihat bagaimana perkara-perkara sebenarnya berlaku. Kemudian kami menjelaskan area lain seperti tempat grids CSS dan grids CSS. Ya. Jadi, itu sebenarnya akhirnya. Kami akan menghargainya dengan kuat-kuat seperti pelajaran seperti kami untuk memikirkan dan berkongsi dengan komuniti kerana kita menghargainya secara kesilapan, tetapi kami tidak tahu ia sangat menarik untuk kami berdua, dalam cara yang berbeza. Jadi, saya harap ia juga menarik untuk semua orang. Terima kasih banyak untuk dengar. Saya harap anda menikmati. Terima kasih.