 Terima kasih kerana datang untuk talian CSS. Biar saya memperkenalkan diri saya. Nama saya James. Dan saya di sini untuk memberi kepada anda fondasi untuk e-mails. Sebelum kita mulai, saya minta beritahu, bagaimana banyak orang di sini membuat e-mails sebelum HTML e-mails? Sangat hebat. Jadi biasanya sebelum saya bersedia untuk talian, saya sangat risau. Sebenarnya, saya berbincang dengan hati. Saya tidak terlalu yakin ada sesiapa di sini membuat e-mails HTML. Kerana ini sebenarnya adalah talian CSS. Jadi saya tidak terlalu yakin. Biasanya kita biasanya menggunakan talian CSS flag, CSS grids dan sebagainya. Jadi saya bersedia untuk talian ini. Saya sedikit risau sebenarnya. Jadi bagus. Saya rasa lebih daripada 50% awak. Sebenarnya saya berbincang dengan e-mail HTML. Saya percaya ia berbincang, bukan? Ya. Baiklah. Saya hanya ingin beritahu dengan awak talian ini sebenarnya adalah fondasi untuk e-mails. Tapi sedikit tentang saya dulu, saya berbincang. Saya berbincang dengan orang-orang. Saya tahu biasanya banyak orang adalah e-mails yang membuat e-mails di sini. Tapi sebenarnya saya seorang pelajar. Saya berbincang dengan orang-orang bagaimana untuk meletakkan talian CSS. Sebenarnya bukan kerja mudah. Awak perlu berpengaruh dengan semua perkara ini juga. Jadi beberapa pelajar saya, orang-orang e-mails, e-mails yang membuat e-mails, tentu awak tidak perlu berbincang dengan mereka. Biasanya mereka pasti tahu. Dan tentu orang-orang itu adalah e-mails yang membuat e-mails. Jadi itu yang saya buat untuk hidup. Jadi saya tinggalkan mentera adalah sebuah konsep simplif. Sebuah konsep simplif dan membuatnya sangat mudah untuk orang memahami. Semua orang boleh memahami. Itu idea ini. Jadi basically my passion adalah web design, web development. Saya juga membuat e-mails yang menggunakan Adobe Design Suite. Jadi biasanya banyak perempuan saya datang ke centre perjalanan saya. Jadi mereka mahu belajar perkara-perkara seperti HTML, CSS, jQuery, javascript. Jadi saya membuat semua perjalanan ini sendiri. Jadi lebih kurang untuk beberapa tahun lepas, banyak orang minta saya, James, awak membuat e-mails di HTML? Saya berfikir, siapa boleh membuat e-mails di HTML? E-mail ini tidak terlalu susah, bukan? Saya berfikir ia cukup mudah. Ia seperti paragraph, hading, sebagainya. Dan jauh dan sejauh, saya berfikir ia mudah. Sebenarnya apabila saya beritahu lebih banyak ini adalah e-mail saya. Saya percaya banyak orang juga memiliki problem ini. Saya berkata, itu susah. Apa masalah menggunakan e-mail di HTML? Apa masalahnya? Apabila anda menggunakan masa, anda boleh menggunakan perkara seperti pembentangan, anda boleh menggunakan perkara seperti segala-galanya e-mail di CSS? Tidak, anda tidak boleh buat begitu, bukan? Mereka ada beberapa masalah yang saya membuat adalah, ini menggunakan e-mail di HTML. Baiklah. Pertama, anda perlu menggunakan pembentangan pada tahun 1990. Ingat hari itu? Hari itu, anda perlu menggunakan pembentangan, ingat tak? Ya Tuhan! Pembentangan nesta! Saya berfikir, saya fikir pembentangan itu berprogresif. Tapi tidak. Anda perlu menggunakan pembentangan, pembentangan dan pembentangan, menggunakan perkara seperti TDTR, TDTR, TDTR, TDTR, anda boleh menggunakan pembentangan seperti ini. Baiklah. Dan, bukan hanya itu, kita juga perlu menggunakan pembentangan CSS. Sebaik-baik saja. Siapa yang menggunakan pembentangan sekarang? Anda menggunakan pembentangan? Maksud saya, untuk pembentangan, anda tidak membuat begitu. Jika anda ingin lebih spesifik, faham? Tapi kebanyakan masa, kita hanya menggunakan perkara seperti pembentangan. Jadi, saya berfikir menggunakan pembentangan CSS. Untuk kita tidak mempunyai pembentangan CSS, saya akan menunjukkan bagaimana pembentangan itu nanti. Dan tentu saja, kita perlu menggunakan pembentangan untuk pembentangan e-mail. Kerana, menurut pembentangan, kita menggunakan pembentangan. Sebab itulah, Huijing berkata, Firefox, Google Chrome, tiada siapa bercakap tentang pembentangan pembentangan internet tersebut. Baiklah. Kita tidak bercakap tentang itu. Mungkin Microsoft 8, mungkin begitu. Tapi itu masalah kerana kita mempunyai 20 pembentangan e-mail untuk Microsoft Outlook 2007, 2010, 2013, 2016. Kamu sedar semua pembentangan tidak menggunakan Microsoft Outlook. Kamu sedar bahawa semua pembentangan pembentangan pembentangan pembentangan pembentangan. Tapi tidak. Kita tidak mempunyai pembentangan untuk itu. Jadi, kita berikan idea bagaimana pembentangan pembentangan pembentangan. Itu yang kita lakukan. Itu yang saya belajar. Ya Tuhan. Ia membuat perjalanan sangat menakutkan. Mereka kata, Tuan, mereka kata, Bagaimana kita akan menyebabkan seperti ini? Bolehkah kita menyebabkan beberapa pembentangan seperti ini? Mereka akan menyebabkan mereka. Jadi, ini yang perlu kita lakukan. Pertama kami telah melakukan email HTML, kita tahu ada banyak dosa jahit, jika kita sentiasa membuat pembentangan, kita perlu melakukan pembentangan seperti margin, top mighty, pembentangan, berat, 0. top mighty, bottom mighty, 0. Terus jelaskan semua. Itu yang kita lakukan. Jadi, saya rasa kepada kamu, saya rasa, yang baik juga itu saya tidak melakukan email HTML, tidak terlalu teruk. Jadi, itu yang saya lakukan. Jadi saya melihat kembali dan fikir, ada apa-apa solusi yang lain? Saya tidak yakin, ada apa-apa solusi yang anda mempunyai atau mempunyai? Jadi saya menemukan tiga mereka. Untuk memuatkan konon drum ini untuk mempunyai masalah yang sangat susah untuk membuat e-mail desain untuk klien-klien yang berbeda. Yang pertama, banyak pembentangan saya suka mempunyai e-mail servis ini. Seperti MailChimp. Saya rasa banyak orang dengar itu. Mereka mempunyai tiga mereka. Mereka mempunyai banyak. Mereka telah membuat pembentangan. Baguslah. Jadi kita boleh memuatkan dan memuatkan. Tapi masalahnya, anda tidak boleh mempunyai mereka. Dan banyak pembentangan memperkenalkan mereka. Pada pilihan kedua, anda boleh membuat jika anda tidak mempunyai HTML, anda boleh mempunyai pembentangan dari beberapa orang. Mereka mempunyai pembentangan. Mereka mempunyai. Tapi anda masih perlu memperkenalkan pembentangan dan mengubah mereka. Sekarang hari ini, apa yang saya akan cadangkan untuk anda, adalah menggunakan sesuatu yang dipunyai e-mail framework. Ada sesiapa yang menggunakan itu? Itu sebabnya anda di sini. Sekarang itu, saya rasa beberapa bulan kemudian, saya rasa ada seseorang, saya tidak terlalu seronok. Saya sudah lupa nama dia. Dia bercakap tentang menggunakan e-mail framework yang dipunyai MJML. Okey. Adakah itu? Ben, ya. Saya rasa ia sangat bagus, MJML. Tapi saya akan membuat pembentangan untuk e-mail. Biasanya dari Zerb. Pembentangan ini, saya menunjukkan pembentangan. Jadi, jika anda mahu, anda boleh mengambil semua ini. Ini adalah www.foundation.zerb.com. Baiklah, e-mails. Biasanya, pembentangan adalah framework seperti Bootstrap. Jika anda menggunakan Bootstrap atau mendengar Bootstrap, anda tahu bagaimana mudah dan bagaimana mereka mahu membuat hal mudah untuk anda. Adakah anda yakin? Jadi, mereka juga menggunakan perkara yang sama dengan perkara yang 12-columna. Okey. Jadi, ia sangat berbeza dengan perkara itu. Jadi, tentu saja, apabila anda melihat perkara ini, mereka akan beri anda pilihan untuk memilih jika anda mahu pembentangan CSS atau pembentangan CSS. Saya tidak yakin yang ada anda di sini yang pernah menggunakan pembentangan CSS. Ini adalah pembentangan GodSend. Jadi, ia bermaksud anda boleh menggunakan perkara yang berbentangan dan perkara seperti itu. Sekarang, hari ini, saya akan menunjukkan anda menggunakan pembentangan CSS. Seluruh saya, anda akan menangani dengan itu. Setelah semua pembentangan yang anda lihat sebelum ini, anda perlu menggantikan mereka pada akhir hari. Kerana anda perlu pastikan bahawa semua pembentangan itu dapat mendukung. Kita akan menggunakan pembentangan CSS di sini. Okey. Jadi, perkara yang pertama, saya akan menunjukkan anda bagaimana perkara yang harus digunakan dulu. Okey. Adakah anda perlu menggunakan perkara yang pertama? perkara seperti node.js. Saya tidak yakin yang ada anda menggunakan itu sebelum ini. Jadi, anda dapat menggunakan perkara seperti NPM atau node package manager. Beberapa perkara yang boleh digunakan tetapi anda perlu menggunakan pembentangan CSS untuk menggunakan itu. Okey. Dan menggunakan perkara yang terbaru. Untuk perkara yang terbaru, anda dapat menggunakan perkara yang terbaru. Saya rasa anda tahu perkara yang anda lihat di sini. Dan anda juga dapat menggunakan perkara yang digunakan GIT untuk menggunakan kontrol. Jadi, setiap kali anda menggunakan perkara yang terbaru, bukan perkara yang diubah. Adakah anda yakin? Okey. Jadi, anda perlu sebenarnya menggunakan perkara yang terbaru. Sekarang, kerana mempunyai masa, saya sudah melakukannya untuk anda. Dan setelah anda menggunakan perkara ini dan juga sebagai node package manager, pada termasuk anda, anda perlu menggantikan NPM untuk menggunakan pembentangan dulu untuk memastikan yang berlepas. Okey. Semua itu sangat berlaku di website segera. Jadi, anda perlu menggunakan pembentangan KOMAN-LINE interface dulu. Jadi, pada akhir-akhir anda dapat menggunakan perkara seperti pembentangan, saya dah jahat. Pertama, anda perlu membuat projek baru sendiri. Dan setelah anda telah melakukannya, anda boleh terserahkan nama projek anda. Ia mengambil masa untuk digunakan. Mereka kata mengambil sekitar 1 minit. Jangan percaya mereka. Ia mengambil sekitar 5-10 minit untuk digunakan. Mereka kata ia sangat cepat untuk digunakan. Tetapi mereka mengambil masa untuk digunakan. Pada pilihan ini, pilihan yang hanya digunakan adalah mereka mengambil sebuah haram yang besar. Tetapi apabila itu dibuat, ia sangat mudah untuk digunakan. Untuk membuat diri anda dari htmremail. Biar saya menjelaskan ini dengan anda. Saya telah membuat sebuah foto yang dipanggil Sushi Delight. Ini adalah sebuah demo di Hite Works. Pertama, di belakang, anda dapat melihat jelas? Boleh? Bagus. Sebenarnya, saya sekarang melakukannya di dalam dojel saya. Untuk Macintosh, ia terminol. Pertama, sebelum anda memulai, anda perlu memulai pilihan ini yang dipanggil Foundation. Ingat, awal-awal saya memulai NPM. Saya boleh memulai Foundation. Sebenarnya, anda perlu membuat sesuatu yang dipanggil Watch. Untuk melihat dan menggunakan projek yang particular itu. Jadi, ia hanya mengambil masa. Berikan beberapa sengaja. Dan kemudian, ini adalah apa yang anda lihat. Sekarang, apabila anda memulai NPM, apa yang anda lakukan adalah ia akan membuat sesuatu yang dipanggil Zerb Stack. Mereka mempunyai Stack. Apa yang Zerb Stack URB Stack bermakna, adalah ia membuat beberapa perkara. Ia membuat perkembangan untuk anda. Ia sangat bagus. Anda tidak perlu menggunakan segala-galanya sendiri. Selain itu, ia menggabungkan gambar untuk anda. Saya tidak terlalu yakin, bagaimanapun anda menggunakan perkara yang kecil, kecil JPEG untuk menggabungkan perkembangan anda. Anda melakukan itu? Atau foto? Tapi sebenarnya anda tidak perlu menggunakan. Semuanya telah dibuat di dalam sini. Dan ia membuat perkembangan. Apa yang membuat perkembangan? Setiap kali anda memulai, bagaimana anda akan membuat perkembangan untuk anda? Ia sangat bagus. Apabila saya sebenarnya membuat ini, saya hampir bersenang-senang dengannya. Jadi, mari saya berkongsi apa yang Zerb Stack boleh lakukan. Pertama, apabila anda sebenarnya memulai ini, mari saya menunjukkan folder ini. Saya rasa di belakang, untuk menolaknya, saya hanya boleh menunjukkan ini. Perkembangan ini sangat kecil. Beri saya sekejap-kejap saja. Adakah ini lebih baik? Jadi, anda hanya perlu menggunakan sekitar dua folder di belakang. Satu adalah SRC untuk sos. Satu adalah DIC untuk distributasi. Apabila anda membuat projek, anda membuat segalanya daripada sos. Distributasi itu selalu digunakan untuk anda. Jadi, dalam sos, anda dapat melihat bahawa saya mempunyai beberapa folder lain. Jadi, saya ingin mempunyai panggilan. Dengan default, apabila anda mempunyai fondasi MPM, anda dapat melihat bahawa ini adalah beberapa file yang digunakan untuk anda. Jadi, dengan default, mereka memberikan index. Jadi, saya akan menunjukkan anda. Saya menunjukkan editor kode saya. Ini adalah index.html. Adakah anda sudah faham? Apa yang anda lihat sebelum ini, mari kita kembali ke sini lagi. Ini adalah panggilan ini di sini. Sekarang, hanya untuk bantuan untuk membuatnya mudah untuk anda. Berikan saya beberapa saat di sini supaya anda dapat melihat apa yang berlaku. Boleh anda lihat? Jadi, biasanya apabila saya mempunyai panggilan, saya membuat panggilan di sisi. Sebelum menunjukkan kepada anda bagaimana mudah untuk anda dapat melihat di sana. Saya akan berkata, James adalah di sini. Jadi, saya akan menunjukkan ini. Berikan saya beberapa saat. Adakah anda yakin? Apabila saya menunjukkan panggilan, saya akan menunjukkan itu. Mereka mudah. Okey. Jadi, perkara pertama adalah ini. Apabila anda menunjukkan panggilan, mereka akan menunjukkan anda dengan bahan-bahan. Apabila anda menunjukkan panggilan, apa namanya? I.N.K.Y. Adakah anda ingat awal-awal panggilan? Anda akan melihat panggilan yang sedikit. Panggilan yang sedikit. Panggilan yang sedikit. Ya, panggilan yang sedikit. Adakah anda ingat? Jadi, bagaimana menunjukkan bagaimana panggilan yang sedikit. Biar saya mengutipkan semua panggilan ini. Kerana saya akan membuat project yang sangat mudah. Adakah anda okey? Kita ada masa, kan? Kita akan menunggu sepanjang malam. Okey, apabila saya mengutipkan semuanya, untuk menunjukkan bahawa saya tidak menunjukkan panggilan. Jadi, anda dapat melihat ini adalah panggilan. Jadi, ia tidak ada panggilan. Jadi, jika saya menunjukkan ini, anda akan melihat apa yang tidak ada. Ia digunakan oleh konsep kolam 12. Saya tidak yakin sesiapa tahu tentang kolam 12. Adakah anda pernah menggunakan itu? Jadi konsepnya adalah ini. Jika saya mahu mempunyai dua kolam yang sama dengan... ...basisnya adalah 6 dan 6. Kerana 6 dan 6 akan memberikan saya 12 kolam. Adakah anda yakin? Baiklah. Bersenangkan orang itu. Saya tidak gunakan kolam 12 sebelumnya. Jadi ini berlaku. Saya hanya menggunakan kontainer. Saya akan menunjukkan apa yang saya mahu lakukan dalam projek. Ini adalah apa yang saya lakukan. Dan saya lupa mengatakan bahawa... ...sebenarnya ia terpaksa. Jadi ini adalah projek yang saya akan lakukan... ...dalam 10-15 minit. Semoga ada masa. Jadi kita ada 4 kolam. 2 kolam dalam kota 3. Dan apabila ia berlaku, apabila ia berlaku... ...berlaku, semua mereka akan menjadi reka-reka. Adakah anda yakin? Ya. Baiklah. Jadi berniat saya lakukan kota 1 sekarang. Kota 1 ada kemahiran. Adakah anda dapat melihat itu? James Sushi Palace di sini. Baiklah. Jadi ini adalah apa yang saya akan lakukan di sini. Jika anda yakin, anda akan meletakkan tangan. Jika-jika. Jadi apa yang saya lakukan adalah kontainer. Ini adalah kontainer yang seluruh. Dan kemudian... Saya tidak yakin yang ada anda pernah gunakan emet sebelumnya. Jadi saya menggabungkan dengan sebuah emet. Jika anda tidak gunakan emet, emet... ...ini adalah cara membuat kota. Sebenarnya, saya mempunyai kota dalam kontainer. Dan saya hanya mempunyai satu kota... ...dan saya hanya akan mempunyai satu kolam. Adakah anda yakin? Ya. Baiklah. Jadi saya hanya menggabungkan tab K... ...di mana ini telah dibuat untuk saya. Ia mudah-mudah. Jika anda beritahu saya, saya akan beritahu ini. Ya Tuhan! Jadi itu yang anda lakukan. Jadi ini adalah kota pertama. Baiklah. Jadi ini adalah kota kedua. Baiklah. Sebaiklah. Kerana kita akan... Baiklah. Biar saya tunjukkan apa yang sebenarnya berlaku dulu. Ini akan menjadi kota kedua. Kota kedua akan menjadi... ...kota kedua yang penting di sini. Adakah anda yakin? Ia juga akan menjadi satu kolam juga. Jadi... ...saya akan kembali di sini lagi... ...di kota kota. Saya akan mengatakan kolam... ...adakah anda yakin? Jadi kita mempunyai... ...pengalaman yang penting. Jadi saya akan memilih semua ini dulu. Jadi saya akan pastikan anda lakukan dengan cepat. Saya akan lakukan dengan cepat. Saya akan lakukan dengan cepat. Ini sebenarnya kolam yang salah. Ia adalah kolam. Ia bukan kolam. Biar saya tunjukkan? Baiklah. Sekarang hal yang penting adalah... ...kota kedua... ...yang ada dua kolam di sini. Biar saya melihat... ...saya akan menjadikasi... ...saya akan menjadikasi... ...saya ada 7 kolam... ...dan 5 kolam. Jadi saya di tengah jangka yang besar... ...sentranya. Jadi ini adalah apa yang saya akan lakukan. Saya akan mengatakan... ...kolam... ...saya akan menjadikasi. Saya akan mempunyai dua kolam. Biasanya saya akan mempunyai dua kolam. Saya akan menjadikasi. Ia akan menjadikasi. Ia akan menjadi pembunuh... ...dan ini akan menjadi artikel yang penting di sini. Jadi artikel penting. Sebenarnya, saya hanya melakukan semua perkara ini dulu. Dan akhirnya, saya akan mempunyai pilihan terakhir, yang adalah pilihan kolam CO-LUMNS. Okey, jadi ini akan menjadi pilihan. Okey, jadi sebelum saya teruskan, bolehkah anda melihat itu? Saya mempunyai 4 pilihan. Okey, dan sebenarnya, apabila saya selesai itu, saya akan hanya menguruskan pilihan. Berikan beberapa kedengaran. Dan di dalam... Okey, di dalam pilihan saya, di dalam pilihan saya, anda akan mempunyai ini. Bagaimana anda memperkenalkan ini? Okey, jadi apa yang anda tidak melihat adalah di dalam pilihan ini, yang saya akan menunjukkan jika saya memperkenalkan ini. Okey, ia akan mengubahkan html untuk anda. Jadi di dalam pilihan ini, adalah html yang sebenarnya yang telah dibuat di sini. Dan... cantik. Adakah saya mencari ini? Tidak, saya sudah melihat ini. Anda suka itu, kan? Okey, jadi ini adalah... Apakah saya perlu membuat pilihan ini? Apakah saya perlu membuat pilihan ini? Anda tidak perlu membuat pilihan ini? Ingat semua pilihan yang telah digunakan? Ingat apa yang saya beritahu anda? Saya tidak membuat pilihan yang terbaik. Bukan sebab itu, mereka boleh membuat pilihan untuk saya. Saya tidak membuat pilihan yang terbaik. Saya tidak membuat pilihan untuk itu. Okey, jadi kali ini, saya akan membuat pilihan yang terbaik. Saya hanya membuat pilihan yang terbaik. Saya tidak membuat pilihan yang terbaik. Okey, jadi perkara pertama, saya akan membuat pilihan ini di sini. Jadi saya akan mempunyai pilihan. Okey, dan untuk pilihan, saya membuang pilihan di bawah asin. Dan pilihan itu adalah pilihan jpeg di sini. Okey, jadi sebenarnya, saya akan mempunyai pilihan. Di sini. Okey, siapa yang pertama? Biar saya mencari pilihan dan mari saya mencari ini. Okey, awak tahu apa? Saya rasa saya mengalami pilihan yang salah. Biar saya mencari. Saya lupa satu-satunya perkara. Saya perlu membuang pilihan yang terbaik. Yang mana saya lupa? Pilihan yang terbaik adalah di bawah pilihan saya. Saya hanya mempunyai pilihan yang terbaik. Saya lupa membuang pilihan yang terbaik. Saya lupa. Jadi maafkan saya. Saya akan membuat pilihan. Saya akan membuat pilihan. Demo, Sushi Delight, Sauce. Okey, dan saya membuang pilihan di dalam. Dan di bawah IMG. Okey, jadi sebenarnya, semua pilihan yang terbaik adalah membuang pilihan di dalam pilihan pilihan. Dan saya hanya ingin menunjukkan kepada anda. Sementara ini, saya akan memunyai pilihan untuk anda. Saya ingin membuang pilihan di dalam pilihan. Untuk menunjukkan kepada anda. Saya tidak pasti pada belakang. Bolehkah anda melihat? Bolehkah anda melihat pilihan yang terbaik di sini? Saya hanya membuang dan membuang pilihan untuk saya. Bagaimana anda tahu? Pilihan mudah. Bukan hal yang kecil. Bagaimana anda membuang pilihan dan membuang pilihan di dalam pilihan? Jadi semua pilihan sudah membuang. Okey, belum selesai. Saya perlu menunjukkan kepada anda. Okey, jadi saya mempunyai pilihan. Dan saya sudah mempunyai pilihan. Jadi saya hanya melakukan dengan cepat. Jadi saya selalu menunjukkan untuk membuat pilihan. Saya masih pada masa. Sebenarnya, untuk membuat pilihan lebih cepat, saya akan menunjukkan kepada anda. Apabila anda meletakkan pilihan, anda harus selalu menikmati mereka di tengah-tengah. C, E, N, P, R. Jadi semuanya akan dihubungi. Jadi saya menghubungi pilihan di sini. Saya akan menunjukkan untuk anda. Pilihan di tengah-tengah. Jadi di belakang anda dapat melihat dengan jelas di sini. Sekarang, apa yang saya telah lakukan adalah saya akan membuat pilihan yang mudah untuk membuat hidup anda mudah. Untuk membuat pilihan 1 dan pilihan 2. Dan saya akan... Okey, sebab ini adalah pilihan yang mudah, ada beberapa perkara yang anda perlu menikmati. Anda harus sebenarnya mempunyai beberapa pilihan yang mereka ada. Okey, sekarang, saya akan menunjukkan kepada anda dulu. Jika saya menunjukkan pilihan ini, dan untuk menunjukkan kepada anda. Okey, Sushi untuk semua. Okey, ini adalah Voh. Ini adalah kolom Sushi untuk semua. Biar saya menunjukkan ini dulu. Saya akan membuat pilihan yang mudah. Saya akan menunjukkan ini. Okey, yang pertama. Apa yang sebenarnya berlaku? Okey, ini okey. Okey, yang pertama. Kolom Sushi. Okey, kolom Sushi. Okey, tes di sini. Biar saya menunjukkan ini. Ya, ini adalah... Ini adalah untuk... Ya, mungkin kita akan mulakan lagi. Okey, saya akan menunjukkan ini dulu. Okey, saya akan menunjukkan ini dulu. Okey, sup ini berlaku. Ya, tes di sini berlaku. Okey, mari kita melakukan yang cepat. Jadi, saya akan membuat pilihan yang mudah. Saya akan membuat pilihan ini. Saya akan kembali ke index. Dan saya akan menunjukkan di sini. Biar saya menunjukkan pilihan yang mudah. Saya akan membuat pilihan yang mudah. Okey, saya akan membuat pilihan yang mudah. Kemudian... Apa yang saya akan buat adalah... Saya akan membuat pilihan yang mudah. Ada beberapa pilihan yang anda ingat... jika anda memakai pilihan yang mudah. Ia disebut teks hyphen centre. Ia sangat mudah memahami. Jadi, apabila kita mempunyai teks centre... sehingga cara ini menjadi centralis. Adakah anda yakin? Okey, sangat cepat. Saya akan membuat pilihan di sini. Dan apa yang saya mahu menunjukkan anda... adalah pilihan ini akan menjadi... 7 kolom dan 5 kolom. Adakah anda dapat melihat itu? Okey, bagus. Jadi, apa yang saya akan buat adalah... saya akan mengatakan... 7 kolom. Dan di sini... adalah 5 kolom. Di belakang, anda dapat melihat... apa yang berlaku bermaksud... di pilihan ini... berlaku bermaksud desktop. Adakah anda yakin? Jadi, sebenarnya saya mempunyai 7 kolom... di belakang dan... kolom yang betul adalah 5. Adakah anda yakin? Sekarang anda boleh mempunyai kecil... tetapi saya tidak membuat kecil itu... kerana ia memahami... kerana sebelumnya, jika saya tidak mempunyai kecil... ia bermaksud... ia akan mempunyai seperti ini. Sebenarnya, semuanya akan menjadi... kolom yang betul. Okey, mereka juga mempunyai kecil... untuk pilihan mobil. Okey, dan... apa yang saya akan buat adalah... saya akan mengatakan... jadi... saya mempunyai... kecil. Saya mempunyai... dan saya mempunyai... saya rasa tidak salah... ia disebut... Futo Sushi... JPEC di sini. Okey, saya akan mempunyai... Futo Sushi. Dan... jika saya hanya mahu... memasukkan ini... saya mahu... pilihan kecil... jadi, apa yang saya akan buat... adalah saya mahu pilihan kecil... seperti ini. Saya ingat... apabila anda mempunyai pilihan kecil... mereka akan mempunyai kecil. Okey, jadi... saya mempunyai pilihan kecil... dan hanya untuk membuatnya mudah... saya mempunyai kecil di sini... memasukkan pilihan kecil... dan memasukkan di dalam... pilihan kecil saya. Akhirnya, untuk Futo... Pilihan mudah... hanya memasukkan dan memasukkan... saya akan memasukkan di dalam... di sini. Okey, saya hanya memasukkan pilihan kecil... untuk menunjukkan anda. Okey, kami hampir di sana... tapi saya rasa... ia disebut... Futo Sushi. Maafkan saya, Futo Sushi. Okey, jadi Futo Sushi... Futo Sushi... Futo Sushi. Mari kita selamatkan ini... dan biar saya menunjukkan... apa yang sebenarnya berlaku. Adakah anda menunjukkan? Okey, jadi anda dapat melihat... ini adalah desktop... dan ini sebenarnya... adalah mobil... dalam format terbaik... tidak terlalu terbaik... hidup sangat mudah... tapi semua kualitas... sudah dibuat untuk anda. Okey, sekarang... saya tahu ini masih... format terbaik di sini... jadi apa yang saya akan lakukan... adalah saya akan menunjukkan... anda sedikit... bagaimana anda memasukkan CSS. Adakah anda menunjukkan? Sejauh ini bukan CSS, bukan? Okey, ini adalah... bagaimana ini bercakap. Okey, untuk CSS... kita perlu menggunakan sesuatu yang dipanggil... sebagai CSS. Adakah anda yakin? Okey, jadi... ini adalah apa yang saya perlu lakukan. Pertama-tama... mari saya menunjukkan... dalam folder source ini... jika saya menunjukkan ini... saya mempunyai... beberapa folder lain. Okey, selanjutnya... yang menunjukkan saya... IMG... yang ingat? Adakah anda ingat... dalam dua gambar? Adakah anda ingat saya menunjukkan itu? Selanjutnya... ada... ada gambar yang dipanggil CSS. Di dalam gambar ini... saya mempunyai... dua gambar lain... yang dipanggil... settings dan app di sini. Okey. Sebaik-baik saja... apakah app membuat... menggunakan... menggunakan... link. Bolehkah anda lihat? Mereka mempunyai... beberapa gambar... yang mempunyai... CSS. Okey, jadi... mereka mempunyai. Jadi, apa yang saya akan lakukan... adalah... saya akan mempunyai diri saya. Saya akan membuat diri saya... dan saya akan memberikan... nama apa-apa saja. Mungkin saya akan mempunyai... custom yang mempunyai. Okey, jadi... saya akan membuat gambar CSS... yang dipanggil... custom.css. Adakah anda yakin? Custom.css. Jadi, saya mempunyai... setelah saya mempunyai... saya akan mempunyai... di mana saya mempunyai... yang sebenarnya adalah... sasaran. Okey, jadi... anda ingat apa namanya? Custom, bukan? Jadi... saya akan ke dalam sini... dan... membuat gambar baru... dan mempunyai... custom.css. Saya akan mempunyai... jika anda ingin membuat nama itu... anda perlu membuat nama... untuk memberikan nama. Untuk gambar CSS. Okey, jadi... saya akan membuat... berhenti dulu. Jadi, saya mempunyai... gambar ini... dan... saya akan membuat... saya ingin... mempunyai... gambar 1 dan gambar 2 di sini. Adakah anda yakin? Sekarang... untuk pembunyai... apa yang mereka buat... mereka membuat segalanya... menurut nama itu... mereka akan membuat... pembunyai sekeliling... jadi apa yang saya katakan... adalah... pembunyai... di dalam sini. Dan sebab ia CSS... saya boleh membuat nama itu... saya boleh mengatakan... H1 di dalam kontainan itu. Adakah anda yakin? Okey, jadi... kita akan membuat sesuatu yang mudah. Apa yang saya buat... adalah saya akan membuat... sebuah keluarga yang mudah. Okey, dan... A-Rail. Dan... pembunyai... apa yang saya katakan... segalanya... amat. Jika tidak, ini amat. Anda akan membuat... yang amat filters resur想... anda lihat действial dan anda lihat... pantas di sini. dan... saya會 gunakan... yang somebody nampak... cadet blue. Okey, saya akan berhenti disini dulu. Mari kita petik compiler memungangnya... dan mari saya cuba lucu k loca... di sini. B trader bindung... ia sebenarnya memang memerlicua. Okey, jadi.. secretary yang saya sebenarnya ShahDrS... saya akan memuatkan... ia adalah sebab yang mereka akan membuat... adalah di pushes mode... mereka akan membuat CSS... untuk kamu automatically. Biar tidakled. Jadi semuanya ini telah dibuat untuk anda. Jadi semuanya adalah otomatis, anda tidak perlu risau tentang itu. Okey, jadi saya akan buat sedikit lebih banyak. H2, oops, H2 bukan height. Jadi H2. Dan saya akan saja buat keluarga Fond lagi. Okey, T adalah untuk ketika perempuan. Okey, saya akan saja buat sesuatu yang mudah. Fond size 26. Fond style. Hitalic. Okey, dan color. Okey, saya akan saja buat sesuatu yang mudah. Saya tidak akan membuangkan anda dengan itu. Okey, anda dapat idea. Okey, jadi sebenarnya saya boleh lanjutkan mengekalkan. Biasanya semua H1, H2, H3 dan semua ini di sini. Jadi mari saya selesaikan file ini. Boleh anda lihat bahawa saya melakukannya di sini? Jadi setelah itu telah dibuat, anda dapat lihat bahawa ini adalah idea antara. Sekarang jika anda beri lebih banyak masa, saya boleh buat semua ini dan membuatnya lebih baik. Tapi anda dapat lihat bahawa ini adalah apa? Ia sangat responsif. Sekarang, setelah saya beri beberapa minit lagi, setelah saya selesai dengan itu, perkara yang terakhir adalah anda perlu mengekalkan. Memang saya beritahu anda tentang mengekalkan? Okey, mari saya menunjukkan apa yang terjadi dulu. Mengekalkan masih belum mengekalkan. Kerana jika saya menunjukkan index di sini, anda dapat lihat bahawa ini masih belum mengekalkan? Okey, anda dapat lihat bahawa itu masih berlainan dengan f.css di atas atas. Jadi ia masih berlainan dengan file css external. Jadi ini akan dilakukan dengan banyak klien e-mel. Bagaimana anda tahu? Okey, jadi apa yang kita perlu lakukan adalah kita perlu mengekalkan semua mereka. Sekarang bagaimana saya mengekalkan mereka? Apabila anda akan mengekalkan, untuk mengekalkan mereka, anda akan mempunyai kembali ke sini lagi. Bagaimana anda tahu? Untuk teman anda di sini, mari saya mengekalkan ini. Anda hanya perlu faham ini. Saya sudah mengekalkan itu. Jika anda mahu, saya boleh biarkan anda mengekalkan ini. Untuk mengekalkan mereka, anda akan mempunyai kawasan ini npm node package manager 1 build. Bagaimana anda tahu? Jadi anda hanya mempunyai untuk membuat seluruh kawasan. Beri saya beberapa saat. Okey, jadi npm 1 build. Beri saya beberapa saat. Anda hanya akan mengekalkan seluruh kawasan. Bagaimana anda menggunakan gulp, yang sebenarnya adalah kawasan atau kawasan? Bagaimana anda mengekalkan? Saya akan menunjukkan kawasan untuk itu. Saya akan menunjukkan kawasan. Jadi apabila itu telah dibuat, anda dapat melihat kawasan seluruh kawasan sudah mengekalkan. Saya mengekalkan semua ini. Yang baik adalah, jawapan tidak. Sangat bagus. Ini yang anda boleh lakukan dengan cara ini. Jadi, menggunakan kawasan dengan baik. Saya mencuba cara dan cara yang berlaku untuk membuat e-mail lebih mudah. Tapi saya menggunakan semua kawasan, mengekalkan tempat yang berlaku. Tapi sejak saya menjelaskan cara ini, saya mencuba sebuah kawasan untuk membuat desain html. Seperti yang saya beritahu tadi, kita menggunakan sesuatu yang dipanggil INKI, sesuatu seperti kawasan sub-column. Lihat kawasan itu sangat mudah. Mereka mempunyai botan, mereka mempunyai kawasan dan sebagainya. Baguslah, apabila itu telah dibuat, pada akhirnya, anda perlu mempunyai dan menggunakan kawasan dan meletakkan kepada semua orang pembentangan e-mails, dan membuat pembentangan pembentangan. Semoga ini berguna untuk anda. Jadi saya tidak akan membuangkan anda bahan-bahan di sini. Saya harap ini berguna untuk sesiapa yang ingin sebenarnya kembali dan mulai melakukannya. Segera, pergi ke pembentangan dan meletakkan dan mulai menggunakan kawasan itu. Tapi perkara yang penting, anda perlu menggunakan kawasan npm dan git. Segera, anda boleh menggunakan kawasan. Saya harap ini berguna untuk anda. Jadi jika anda mempunyai kawasan dan pembentangan e-mails kepada saya, saya boleh pergi ke link saya dari sana. Saya harap ini berguna. Jadi terima kasih untuk kawasan anda. Terima kasih. Saya tidak. Terima kasih banyak-banyak. Terima kasih banyak-banyak. Terima kasih banyak-banyak.