 Ya, tiada tiada tiada di sini, kamu bekerja dengan nama-nama. Oh, kamu ada nama-nama tiada di sini. Baiklah, saya akan jadi nama-nama yang lain daripada saya. Jadi... Ini pasal Wi-Fi, ID dan pasal. Jadi ada sesiapa yang masih perlukan pasal ini? Tawarkan tangan kamu. Okey, mari kita jemput. Jadi... Pada masa ini, kamu patut tahu apa nama-nama itu. Jika tidak, saya akan berkongsi lebih banyak tentangnya. Jadi kami adalah komuniti untuk wanita... ...berkongsi dan belajar dengan program-anak. Jadi kami buat perkara seperti... ...memperbaiki berbicara, berbicara untuk kamu berkongsi... ...berkongsi dengan satu-anak. Kita juga melakukan penyelamat-penyelamat-penyelamat... ...yang adalah penyelamat-penyelamat-penyelamat... ...di mana kami beritahu bagaimana menerima... ...kongsi untuk kamu membuat produk yang terbaik untuk penyelamat-penyelamat. Dan kemudian, kami ingin membantu kamu dapat kerja... ...dan juga mempunyai lebih banyak peluang dalam industri... ...dengan kamu bercakap di konferensi. Saya ingin berkongsi dengan cepat... ...berkongsi apa yang kami percaya. Kami percaya teknologi adalah kuasa untuk berjaya. Anda mungkin berkata bahawa teknologi bukan kuasa... ...sebab sangat mudah untuk membuat pilihan. Dan ia dapat dibuat untuk kamu membuat pilihan. Kami percaya teknologi untuk semua orang... ...seharusnya dapat dipercaya untuk sesiapa yang ingin belajar. Dan ia berkongsi bahawa industri kami adalah mempunyai. Jadi apa yang kita ingin buat adalah membuat pilihan... ...di mana kita boleh mempunyai lebih banyak peluang dalam industri. Sebenarnya, kami adalah penyelamat-penyelamat. Kami adalah penyelamat-penyelamat, tetapi kami juga bukan penyelamat-penyelamat. Sebab itu, kamu masih melihat orang-orang yang membantu. Jadi, kamu tahu, jangan seperti, Kenapa kamu berada di sini? Ini adalah perkara penyelamat-penyelamat, kamu tahu? Bukan baik dan senang, okey? Jadi, mari kita bincangkan lebih banyak tentang kampan budaya. Ini adalah perkara penyelamat-penyelamat. Seperti yang saya katakan, ia perkara penyelamat-penyelamat. Jadi, kamu tidak perlu menghidupkan kerja kamu. Oh! Jadi... Jadi, ini perkara penyelamat-penyelamat ini adalah program perkara penyelamat-penyelamat... ...di mana kita beritahu kamu cara mengekalkan. Ia disebabkan untuk membantu perempuan dengan keadaan negeri. Jadi, jika kamu sudah adalah program penyelamat-penyelamat... ...tidak untuk kamu, kamu boleh belajar sendiri. Jika kamu tidak tahu, ia mungkin tidak untuk kamu. Kerana ia hanya terlalu intensif. Ya, jadi... ...pada pilihan pertama, kita ada 9 perempuan... ...3 perempuan telah dapat bekerja... ...dan kita mengalami orang-orang dari seluruh tempat. Jadi, untuk campan budaya berikutnya, kita akan mulakan campan budaya berikutnya... ...dalam 24 September. Dan kita akan menarik selama 10 minggu... ...dan kita akan berada pada 3 September. Jadi, kita hanya akan menggunakan langkah Ruby. Jadi, saya berharap ada banyak jenis langkah program. Tapi, untuk campan budaya ini, kita hanya akan mempunyai langkah Ruby. Ya, 15 perempuan akan dikejar. Dan setiap perempuan yang dikejar... ...dia akan bekerja dalam perjalanan 3. Jadi, kita tidak akan bekerja dalam perjalanan 3... ...untuk 1 NGO untuk 1 projek... ...untuk selama 10 minggu. Ya, ia adalah $500 untuk memperkenalkan... ...sendam sekolah yang digunakan... ...dengan kecuali kecuali kecuali kecuali kecuali kecuali kecuali kecuali kecuali kecuali kecuali kecuali kecuali kecuali kecuali kecuali. Jadi, ini adalah pengalaman yang menjelaskan. Dan ini adalah NGO yang akan membantu kita kali ini. Jika anda ingin melihat tentang... ...encana apa pilihan yang mereka ada... ...biasanya pengalaman yang menjelaskan. Anda ingin tahu lebih banyak tentang pengalaman... ...bagaimana anda boleh melihat video yang kita telah mempunyai. Jadi, kita bercakap tentang ini di dalam sebuah kursus... ...yang kami melihat beberapa minggu lalu. Bagaimana dengan setelah sejujurnya? Ya, setelah sejujuj. Ini adalah pemerang yang paling penting. Bagaimana anda memungkinkan program 10 sejujurnya? Anda perlu membuat masalah... ...sebelum anda dapat menghubungkan pemerangan. Jadi, jika anda... Berapa banyak anda sudah berada di Facebook? Jadi, anda sudah tahu... ...sebelum malam tadi saya menjelaskan... ...saya menjelaskan sebuah pemerang yang sangat lama... ...dengan banyak pemerang yang saya merenungkan. Dan saya sangat menyerangkan tentangnya. Jadi, masalah teknik. Ini adalah masalah teknik. Berserang satu app. Berserangkan ke Githa. Lepaskan ke hero-goon. Jadi, ini masalah. Dan ia perlu diberserangkan. Jadi, jangan beri kita... ...an app yang tidak berlaku. Jangan beritahu saya... ...saya tidak melihat pemerang yang tidak berlaku... ...semasa ia tidak berlaku. Dan ia perlu diberserangkan... ...dalam pemerangan program. Jadi, seperti yang anda lihat... ...ini sangat besar. Kita hanya ingin anda membuat sesuatu. Memiliki sesuatu yang diberserangkan di internet. Jadi, ia boleh menjadi sesuatu yang anda inginkan lakukan. Tapi, tentu saja, saya telah mengatakan bahawa ia sangat besar. Anda perlukan sesuatu framework. Jadi, kami ada beberapa idea untuk anda yang anda boleh cuba. Pertama yang pertama adalah... ...Berserangkan ke Githa. Jadi, anda dapat membuat artikel... ...dan di setiap artikel... ...saya akan mempunyai... ...pembuan negara, pemerangan, dan gambar. Jadi, ia perlu diberserangkan... ...dengan pemerangan. Jadi, jika anda melihat semua idea... ...saya akan mempunyai ini. Jadi, ini adalah penyelesaian. Ini adalah lebih dari jika anda mahu bergerak ke kedua... ...saya akan membuat sesuatu yang anda boleh lakukan. Ini juga bukan informasi yang teruk. Jika anda melihat post Facebook, ...saya juga ada... ...beri para penyelesaian yang kami memperkenalkan anda. Jadi, penyelesaian... ...menyelesaian ini adalah tentang perkara yang sama. Ada beberapa terserah yang dapat membantu anda... ...menyelesaian lebih cepat. Pertama yang kedua adalah blog personal. Jadi, ia seperti sebuah blog biasa. Anda akan mempunyai artikel... ...dan pemerang yang menunjukkan semua artikel. Jadi, untuk membuat ini lebih susah... ...saya hanya boleh membuat post di blog anda. Jadi, saya tidak boleh membuat post di blog anda... ...dan membuat post di blog anda. Faham? Okey? Okey? Kemudian kedua... ...beri para penyelesaian. Ada sesuatu seperti penyelesaian... ...di mana anda dapat melihat listan semua penyelesaian. Dan jika anda mencari... ...saya dapat melihat semua detaian dari satu penyelesaian. Dan ini... Jika anda menikmati penyelesaian pertama... ...ini sebenarnya seperti untuk mengetahui nombor... ...sebab anda memutuskan sesuatu... ...dan anda dapat sesuatu darinya. Untuk masa ini... ...untuk penyelesaian, anda hanya perlu mendapatkan... ...untuk mencari penyelesaian. Okey, ada sesiapa-siapa ada pertanyaan... ...sebelum ini? Ia terlalu susah... ...saya tidak tahu apa yang saya bercakap... ...atau terlalu mudah... ...saya dapat melakukan Facebook atau sesuatu. Jadi, di penyelesaian hari ini... ...saya fikir ia sangat sedap... ...untuk di sini. Untuk penyelesaian ini, jika anda menikmati penyelesaian... ...saya akan... ...mencari penyelesaian dan Hiroku... ...saya tidak mengenali perkataan... ...tapi anda akan mendengar apa yang berlaku. Anda akan mendengar penyelesaian dan Hiroku... ...tapi anda tidak tahu apa yang mereka lakukan. Jadi di penyelesaian ini, kami akan cuba... ...mencari itu. Jika tidak, kami akan melakukan itu minggu depan. Kerana penyelesaian penyelesaian... ...yang kami perlu beritahu... ...saya akan memberikan kesilapan... ...yang akan berlaku di sana. Jadi, di penyelesaian pertama... ...saya mempunyai penyelesaian penyelesaian... ...sekejap-kejap. Seperti apa yang berlaku. Hari ini, anda akan belajar bagaimana... ...mencari penyelesaian yang cantik. Selanjutnya, anda akan mempunyai... ...bagaimana penyelesaian ini... ...dan bagaimana anda dapat menggunakan itu... ...untuk mencari penyelesaian. Sebenarnya, apabila anda tahu penyelesaian... ...saya sangat mudah membuat penyelesaian. Anda hanya perlukan sebuah kota. Ia disebut kota penyelesaian. Jadi, ia adalah kota penyelesaian. Jika anda dapat membuat penyelesaian sekarang, anda akan mencari penyelesaian... ...untuk mencari penyelesaian. Okey, ada apa-apa lagi pertanyaan? Jika anda mempunyai lebih banyak pertanyaan... ...saya akan menyebabkan anda... ...dan seseorang lain akan mencari penyelesaian. Okey, jadi ini adalah perjalanan yang penting. Sebelumnya, kami... ...mencari penyelesaian penyelesaian... ...dan hari ini atau esok... ...saya akan mencari penyelesaian... ...sehingga anda juga dapat melihat penyelesaian... ...untuk mencari penyelesaian... ...selepas penyelesaian penyelesaian. Jadi, kami akan memulangkan proses aplikasi... ...selepas hari ini atau esok... ...dan kami akan mencari penyelesaian... ...selepas hari ini atau setiap September. Ya, anda dapat mencari penyelesaian. Ada apa-apa pertanyaan tentang hari ini? Jadi, cepat saja. Okey, sangat mencari penyelesaian. Terima kasih. Baiklah, anda dapat memulangkan penyelesaian... ...sebelum itu, hanya beberapa halus... ...dan jika anda berada di Wi-Fi network... ...tidak menghubungkannya. Jangan minum makanan. Jangan minum makanan. Jangan minum makanan. Jangan minum makanan dan makanan di dalam sini. Kami akan mempunyai penyelesaian... ...selepas 2 atau 3.30. Dan kami akan membuatnya di luar. Apa lagi? Ya, itu semua untuk tempatan. Jadi, di pejabat ini... ...saya akan memulangkan penyelesaian... ...dan dia akan mencari penyelesaian... ...mencari penyelesaian... ...dan kami juga mempunyai penyelesaian. Jadi, mungkin kami akan memulangkan penyelesaian... ...kira-kira memulangkan penyelesaian... ...kalau kalau p...! Nama hidup kamu, Sunny. Ya, okey. Mari kita buat ini. Jadi, penyelesaian akan mengatakan... ...mau mengatakan tuan, dan kita semua mesti mula mengatakan tuan. Kita akan lagi memulangkan меч. Hai Sunny! Chieng. Hai Chieng. Hai Wanika. Hai Barun. Hi Liza. Hai, Lisa. Siapa? Min. Hai, Min. Jadi, pada masa yang anda tidak faham apa yang berlaku, atau mempunyai masalah dengan apa-apa pun yang anda menyebabkan versus apa-apa pun yang anda menunjukkan, pergerakan tangan anda. Jadi, pada masa yang anda memperkenalkan, pergerakan tangan anda, dan kami akan datang dan menyelamatkan anda. Okey! Sekarang, kita akan menghubungi untuk menunggu. Berikan perjalanan. Pergerakan pergerakan tangan. Adakah saya menghubungi untuk menggunakan pergerakan tangan? Kerana saya sangat berat. Adakah semua orang dapat dengar saya tanpa pergerakan tangan? Kerana saya... Adakah anda ingin menggunakan tangan? Okey, baiklah. Dan saya fikir saya... Eh, saya tidak dapat menggunakan tangan. Ya, saya fikir saya sangat berat. Apa pun. Ya, jadi seperti yang Elisha beritahu, saya adalah Huijing dan saya akan menjadi orang yang berada di depan anda. Saya akan menjadi orang yang berada di depan anda selama 5-4 jam. Jadi, semoga anda tidak berada di depan anda. Jadi, perkara pertama, saya fikir mungkin... ...berat-berat setengah jam, saya juga ingin mempunyai kemungkinan untuk sesiapa-siapa yang mempunyai... ...untuk mempunyai pembantu. Untuk membantu mereka. Jadi, tidak menggunakan pergerakan tangan. Sebenarnya, saya hanya akan bercakap semasa mereka... ...masa beberapa anda dengan masalah, mereka dapat membantu anda. Jadi, itu adalah pilihan pembantu saya. Jadi, perkara pertama ini, anda boleh... ...tunggu dan mendengar... ...beritahu saya cerita-cerita. Jadi, kerja hari ini... ...banyak tentang pembantu dan pembantu. Banyak tentang pembantu. Saya tahu... ...saya ada peluang besar hari ini... ...dan tidak semua orang akan bergerak... ...untuk membuat pergerakan tangan. Tetapi, apa yang saya mahu... ...saya suka pembantu. Saya seperti pembantu pembantu. Jadi, saya mempunyai agenda kecil... ...saya mahu beritahu... ...perempuan tentang pembantu... ...sebab saya rasa... ...banyak orang... ...saya menggunakan pembantu setiap hari... ...tapi kita tidak tahu... ...bagaimana apabila... ...saya menggunakan pembantu... ...untuk menggantar pembantu... ...saya hanya mahu... ...pembantu... ...untuk melihat apa yang sebenarnya berlaku. Jadi, hari ini saya akan menggantar... ...pembantu tentang internet juga. Dan kemudian kita akan bercakap tentang... ...HTML dan CSS. Sebenarnya, saya percaya itu adalah... ...foundasi web. Ia dibina pada HTML dan CSS. Saya akan beritahu apa yang HTML dan CSS bermakna. Saya rasa... ...kalau banyak orang tidak berkenal dengan pembantu... ...saya akan memperkenalkan bahawa... ...saya memperkenalkan bahawa... ...saya akan memperkenalkan bahawa... ...Saya bercakap dengan Elisha di periuk agama yang lain... ...di tempat yang paling teruk... ...di dunia programus... ...pembantu dan pembantu... ...tidak maka... ...pembantu dan pembantu. Tetapi, ...kalau orang sebenarnya mencari... ...awak bercakap tentang pembantu... ...dan pembantu dan pembantu. Tapi jika kamu memasangkan... ...dan memulakan untuk memasangkan... ...pembenaran, kemudian kamu akan mencari... tetapi anda akan membuat lebih banyak perniagaan kepada anda. Apabila orang berkata, anda boleh beritahu apakah mereka bercakap tentang bahagian yang benar-benar sedih, atau bahagian yang bercakap tentang perniagaan yang berlainan. Jadi, pertama dan ketiga, mari kita bercakap tentang perniagaan web, apa yang adalah perniagaan web? Saya rasa perniagaan web adalah sebuah hot topic sekarang. Saya rasa ia juga sebab ia sebabnya, internet adalah perkara-perkara yang sangat berlainan sekarang. Saya rasa ia perkara-perkara yang paling berlainan untuk menghubungkannya. Jadi, bagaimana perniagaan web berlainan? Sebenarnya, ia hanya sebuah proses perniagaan. Ia sangat mudah. Jangan menghubungkan perkara-perkara. Jangan berfikir tentang perniagaan yang benar-benar sedih yang kita ada. Dan ia sebenarnya sangat mudah untuk dibuat. Apa yang anda perlukan adalah komputer anda. Sebuah gambar ini sebenarnya bukan gambar. Ia adalah CSS. Ia dibuat oleh CSS. Saya akan jelaskan CSS nanti. Ia mungkin membuat perkara-perkara yang mudah. Jika anda mempunyai banyak masa seperti saya. Dan anda hanya perlukan perniagaan anda. Itu saja. Jadi, jika anda tidak menunjukkan untuk pekerjaan pertama, saya hanya akan menjaga ini. Sebenarnya, bagaimana kota? Kota adalah hanya sebuah penerbangan, penerbangan dan sebuah simbol. Ia bukan sebuah bahagian magical yang hanya beberapa orang dapat faham. Ia hanya mengambil sesuatu yang dikenali. Bagi sebuah penerbangan, bagi apa yang anda gunakan dengan sebuah penerbangan, dan dengan sebuah penerbangan, anda dapat menjaga kota. Apa maksud anda? Bagi sebuah penerbangan, jika anda melihat kota dengan lebih keras, ia seperti kota yang berlainan, kota yang berlainan, kota yang berlainan. Ia adalah bahagian, kan? Jadi, mungkin ianya berlantat pada bahagian bahagian. Tapi ia hanya bahagian. Ia hanya sebuah penerbangan, sebuah penerbangan dan sebuah simbol. Lainan yang lain, sebuah bahagian yang lebih keras, seperti C. Anda dapat melihat bahagian bahagian bahagian dalam. Anda juga ada bahagian bahagian, sebuah kota yang berlainan. Ia seperti bahagian bahagian bahagian. Dan bahagian yang sangat-sebelah yang sangat terlalu keras, basically, anda sudah mengawal apa yang anda melihat di komputer anda. Ia disebut asam. Ia melihat sedikit kaya, tapi sebenarnya, ianya sebuah penerbangan dan sebuah simbol. Dan bahagian bahagian bahagian bahagian bahagian. Jadi, ianya sebuah masalah mengahwini apa yang sebuah simbol ini lakukan. Dan bagaimana kita boleh mengawal masyil kita menggunakan simbol ini. Itu saja yang ia adalah. Jadi, seperti yang saya beritahu sebelumnya, saya percaya HTML dan CSS adalah sebuah fondasi. Apa yang saya bermakna apabila saya katakan teknologi ia adalah sebuah kombinasi teknologi yang kita perlukan untuk membuat websites. Jadi, perkara basikal yang kita gunakan untuk membuat websites adalah HTML. Kerana, jika anda berfikir tentangnya, apabila kita menggunakan website, apabila kita gunakan internet, kita menggunakan informasi. Web adalah media informasi. Kita menggunakan internet untuk mengetahui informasi. Kita ingin melihat bagaimana media informasi. Kita ingin melihat apa restoran yang bagus. Itu juga informasi. Jadi, ini adalah konten. Konten adalah yang paling penting di internet. Jadi, apa yang HTML berlaku? Biar kita memperkenalkan konten dengan cara yang mempunyai yang terbaik. Jika anda memikirkan sebuah tekanan. Tidak ada format. Tidak ada sebuah sebuah tekanan. Anda dapat memikirkan dengan sangat susah untuk faham apa yang berlaku. Tapi jika anda memperkenalkan format, seperti anda mempunyai tekanan dan sebuah tekanan, ia lebih mudah untuk menggunakan. Dan HTML memperkenalkan untuk memperkenalkan konten kita dengan cara yang terbaik untuk menggunakan. Jadi, jika anda hanya mempunyai konten, beberapa orang akan mencuba. Jadi, anda mempunyai sesuatu yang disebabkan CSS yang memperkenalkan anda untuk memperkenalkan. Jadi, anda dapat memperkenalkan sebuah tekanan, anda dapat memperkenalkan sebuah tekanan. CSS adalah apa yang memperkenalkan anda untuk membuat semua ini. Dan pada masa itu, ada sebuah perkara yang disebabkan Javascript, yang kita tidak akan memperkenalkan hari ini. Tapi ia memperkenalkan anda untuk memperkenalkan sesuatu element yang berlaku kepada web-side anda. Untuk contoh, jika saya mempunyai tekanan, saya mahu tekanan untuk memperkenalkan keadaan dan memperkenalkan. Javascript dapat membuat itu untuk anda. Tapi walaupun jika anda tidak memperkenalkan itu, ia baik juga. Javascript sudah menjadi lebih kuat pada masa yang baru. Jadi, ia sebenarnya memperkenalkan pekerjaan anda. Sebenarnya anda tidak memperkenalkan, ia sangat terlalu banyak. Jadi hari ini, kita hanya akan memperkenalkan keadaan yang pertama. Jadi, jika anda mahu web-side anda memperkenalkan keadaan yang lain, bagi fesbuk atau banyak lagi web-side anda. Semua keadaan yang anda memperkenalkan untuk anda menangani, seharga semalam, anda memperkenalkan keadaan. Jadi, semua informasi ini, saya tidak tahu, menerima 65 keadaan. 65 keadaan akan memperkenalkan informasi keadaan. Jadi, semua informasi ini akan diperkenalkan di tempat yang diperkenalkan. Jadi, web-side yang memperkenalkan user login, bagi contoh, anda mesti mempunyai database di bagian untuk memperkenalkan semua informasi ini. Jadi, beberapa web-side anda tidak memperkenalkan, seperti, beberapa personal blog, jika anda memperkenalkan blog anda sendiri, anda tidak memperkenalkan keadaan, anda tidak memperkenalkan database. Tetapi, database yang memperkenalkan tergantung perjalanan web-side anda. Jadi, kadang-kadang, beberapa web-side anda juga memperkenalkan database. Jadi, ini sebenarnya teknologi yang sangat basic untuk membuat web-side anda. Jadi, sebenarnya, hari ini, kita hanya memperkenalkan keadaan yang lain, akan diperkenalkan di masa depan oleh orang lain. Memperkenalkan. Apa? Memperkenalkan. Memperkenalkan. Memperkenalkan. Memperkenalkan. Ia tidak memperkenalkan FMA. Jadi, di rumah saya memperkenalkan. Di rumah saya memperkenalkan. Awak cuba memperkenalkan. Saya tak tahu. Awak memperkenalkan. Memperkenalkan. Saya minta maaf. Saya minta maaf. Bukan begitu penting, hanya saya akan menutupi konten yang penting dengan memperkenalkan. Okey, hari ini, beberapa tools yang kita gunakan adalah Github, Nitrous, dan HeroCool. Kemudian, termasuk ini sangat menarik. Jadi, saya akan cuba jelaskan. Jadi, Github adalah Gith Repository hosting service. Saya mungkin hanya memperkenalkan anda lebih banyak. Gith adalah sistem kontrol versi. Jadi, dalam kerja saya yang pertama, saya memainkan untuk membantu membuat perjalanan projek. Dan kemudian, saya mempunyai dokumen perkara terdapat untuk menerima minit. Tapi sebab saya sangat jenis, seperti kejadian jenis, saya mempunyai minit terhadap di edit oleh My Senior. Jadi, selepas My Senior di edit oleh My Minutes, dan ia akan memasangkan Percayalah. Kemudian nama dia. Kemudian selepas My Senior edit, ia harus mengambil kelebihan. Kemudian, kelebihan akan membantu. Klebihan akan mengambil dan mempunyai pakaian kelebihan untuk P3, kelebihan akan mengambil. Kemudian, kelebihan akan mengambil kembali dan meminta saya membuat beberapa perubahan, kerana setelah ia berubah, ia tidak mahu membuat perubahan, ia adalah saya untuk membuat perubahan lagi. Jadi, saya perlu mengambil perubahan, membuat perubahan, dan saya mengambilnya, V4, dan nama saya. Kemudian setiap mesej setiap bulan, seperti yang kita ada, kita mempunyai VFINAL, dan VFINAL2, dan VFINAL, FINAL, FINAL. Jadi, dia akan mempunyai 10 kopi yang sama. Tetapi untuk kota, penyelidik-penyelid, mereka datang dengan sistem apa yang kita nampak, adalah dalam perubahan yang tidak sebenarnya mempunyai 10 kopi faham di komputer anda. Yang ini, dan ini adalah jelas bahagian, ia hanya sebab setelah saya membuat perubahan pada faham, semasa anda memuji, anda memuji dan anda memuji. Memuji adalah sebuah kata yang saya akan menjelaskan nanti, tetapi setelah anda memuji perubahan ini, walaupun hanya ada satu perubahan di komputer anda, perubahan yang terakhir adalah sebenarnya berhenti. Seperti snapshot. Jadi anda tidak mempunyai 10 kopi yang sama di komputer anda, tetapi sebuah kata-kata anda masih ditutupkan di mana-mana. Jadi, sistem ini yang ditutupkan sebuah kata-kata ini, ia disebabkan GIT. Jadi, itu seperti jelas bahagian yang saya boleh fikirkan. Dan kemudian, GIT HUB adalah sebuah tempat online. Jadi, seperti yang saya menyebabkan sebuah peperiksaan yang datang awal, anda cuba jelaskan apa yang sebuah servis hosting. Pada internet, ia seperti sebuah kata-kata virtual. Jadi, dalam hidup kata-kata, jika anda mahu tinggal di mana-mana, anda tidak perlu membeli rumah atau membuat sebuah kata-kata. Jadi, jika anda mempunyai website, jika anda mempunyai website itu, website itu perlu tinggal di mana-mana. Jadi, sebuah servis hosting, sebuah servis hosting, ia seperti kata-kata anda. Jadi, anda sebenarnya mempunyai sebuah kata-kata di internet untuk mempunyai website anda. Jadi, GIT HUB adalah sebenarnya salah satu kata-kata kata-kata yang akan mempunyai kata-kata kata-kata anda. Maksudnya, kata-kata anda, ia seperti... dan sebab mereka membuatnya untuk kata-kata, dengan keputusan, ia seperti kata-kata kata-kata yang membuat anda menggunakan kata-kata mereka untuk kata-kata. Jadi, itu kata-kata yang terbaik. Itu kata-kata yang terbaik. Sekarang, NITRAS adalah perubahan perubahan online kerana sekarang saya melihat semua masyarakatnya berbeza. Saya melihat kata-kata 6 tahun, saya melihat banyak kata-kata, saya melihat kata-kata servis. Jadi, semua masyarakatnya akan berbeza. Jadi, kata-kata anda berfikir ia akan sangat susah untuk membuat semua kata-kata membaikkan kata-kata. Tetapi, jika anda menggunakan NITRAS, juga ada masalah. Tetapi, saya rasa tidak ada masalah. Jadi, adalah perubahan perubahan online. Jadi, bagaimana ia berbeza? Bila kita membuat program, ada beberapa prerasaya yang perlu diberikan pada masyarakat yang anda bekerja untuk membuat kota-kata untuk membuat. Untuk memperbaiki semua software ini dan untuk membuat masyarakatnya diberi. Sebenarnya, ia berusaha untuk membuat kerja sendiri kerana kadang-kadang, semua masyarakat yang diberi semua komputer seperti ini berbeza. Mereka akan mempunyai sesuatu masalah. Mereka akan mempunyai sesuatu masalah. Jadi, kita memilih untuk menggunakan perubahan perubahan online. Sebenarnya, bagaimana ia melakukannya, semua orang akan menggunakan perubahan yang sama. Dan semoga, kita akan mempunyai lebih kurang perubahan. Jadi, jika sesiapa ada masalah, silahkan tangan dan tanya kepada saya, bagaimana anda boleh membantu kami? Terakhir, ia adalah HIROKU. HIROKU adalah sempurna untuk Github. Tetapi, ia sebenarnya membuat kode aplikasi anda. Jadi, apa yang saya katakan di Github, adalah sistem yang mengingatkan semua perubahan anda. Sekarang, HIROKU menggunakan kode aplikasi anda. Kode aplikasi anda yang digunakan. Kode aplikasi anda yang digunakan. Jadi, ia sama. Ini adalah lantai lain. Ini adalah lantai yang menggunakan kode aplikasi anda untuk menggunakan aplikasi anda. Jadi, seperti yang saya katakan, terutamanya, kita membuat perubahan perubahan di Github. Tetapi, ia terlalu sulit. Jadi, ia adalah itu. Jadi, Sekarang, tujuan saya. Internet. Jadi, apa? Apabila anda memikirkan internet, anda tidak tahu bagaimana banyak orang yang mendengar kode aplikasi anda. Tetapi, jika saya beritahu ibu saya, jika saya memikirkan kode aplikasi anda kepada ibu saya, dia akan berkata, apa? Bukan apa? Bukan kode aplikasi saya. Jadi, seperti di kode aplikasi anda, ia adalah satu-satunya perubahan yang menggunakan kode aplikasi anda. Tetapi, ia menyebabkan keadaan online yang digunakan seperti online. Tetapi, apa yang online bermaksudnya? Adakah ia benar-benar seperti di luar, seperti keadaan di luar? Sebenarnya, tidak. Internet adalah perkara sangat fizikal. Jadi, Internet adalah perkara sebuah network yang menghidupkan semua perkara sebuah devis untuk ibu-sahara. Jika anda fikir tentangnya, anda mempunyai kod aplikasi yang tersebut dan lebih banyak, menghidupkan kod aplikasi, mungkin anda mempunyai tablet. Anda mempunyai bagaimana? Anda mempunyai Smart TV, ada Smart Fridge, ada orang yang mempunyai Smart Toaster. Apabila ia menghidupkan ke arah internet, sejauh yang anda menghidupkan ke arah internet, sebenarnya, semua devices bagaimana bisa menghidupkan ke arah. Sebenarnya, ia sangat menarik. So, internet adalah kerana network network Semua orang di dalam bilik ini, kamu semua berkoneksi kepada IDA LAPS 4 Itu network, itu adalah network singil Tapi network IDA 4 ini berkoneksi kepada network yang lebih besar Itu servis, tapi saya tidak tahu dengan ISP, mungkin kita mempunyai S.T.A.H. So S.T.A.H. network, kami berkoneksi kepada network S.T.A.H. network Si S.T.A.H. network yang berkoneksi kepada network yang lebih besar Jadi itu adalah bagaimana, mari kita katakan kamu ada kawan di Argentina Dan kamu beri mereka e-mails Bagaimanapun informasi dari komputer kamu, duduk di sini di Singapura Boleh memperkenalkan network ini dan menggunakan Argentina Hidup seluruh dunia Jadi ia sebenarnya sangat fizikal, ia sebenarnya dibuat Ini adalah, saya tidak tahu anda dapat lihat, tapi ini adalah kabel di bawah Jadi network seluruh dunia Di antara kondensi dan negara Mereka menggunakan kabel di bawah Dan mereka adalah kabel di bawah Kabel di bawah, sebenarnya mereka sangat ekspensif Dan kemudian mereka tidak hanya kabel Jadi mereka seperti intermediari Mereka seperti kabel di bawah dan kabel di bawah Itu nampak sesuatu seperti ini Biasanya adalah kabel di bawah dan kabel di bawah Ini servis dan anda akan melihat banyak Ya, sebenarnya hal ini kelihatan muda Tapi semua ini adalah kabel Jadi ingat jika di rumah anda menggunakan kabel di bawah Sama seperti 10,000, 100,000 kabel Menggunakan semua kabel ini Mereka mengambil banyak kuasa dan perlu menjadi hebat Dan ia seperti ini Kemudian kita juga mempunyai power seluruh Kita mempunyai startups, M1, SingTel Ini adalah network telkone Yang menggunakan kabel di bawah Mereka mempunyai tower seluruh Dan kemudian ada kabel dari startup Mereka juga menggunakan kabel di bawah Kemudian ia menggunakan rumah anda Jika anda mempunyai kabel di bawah dan bawah Itu yang anda menggunakan untuk menggunakan network telkone Jadi anda akan mempunyai kabel di bawah Kemudian anda menggunakan kabel di bawah Jadi ini adalah kabel di bawah Ini adalah kabel di bawah Semua kabel ini Dan SingTel sangat menakjubkan Kerana untuk Kailah Tanah Ada banyak kabel di SingTel Sangat menakjubkan SingTel mempunyai sekitar 5 kabel di bawah Dan kabel di bawah ini Saya rasa di SingTel ada kemungkinan kemungkinan Tapi dalam kemungkinan kemungkinan Bukan kemungkinan kemungkinan yang sangat tinggi Ia hanya berada di bawah Sudah tentu ia sepatutnya berjaya Tapi kadang-kadang ia bergerak Dan kemungkinan kemungkinan terdapat Jadi jika anda mempunyai kabel di bawah Dan anda mempunyai kabel Dan jika anda sangat marah Saya akan membuangkan kabel ini Sebenarnya anda dapat menghubungi internet Tapi tidak... Ia tidak akan menjadi kabel di bawah Sebenarnya kerana cara internet berfungsi Dan saya akan jelaskan nanti Ia sebenarnya dibuat untuk kemungkinan Jadi mari kita jelaskan 1 kabel di bawah Internet akan menjadi lebih tinggi Untuk region yang penting Tapi anda tidak akan mengecewakan bersama-sama Kerana kabel di bawah Internet kabel sebenarnya membuangkan diri Tapi saya akan jelaskan cara ini berfungsi Sangat tinggi nanti Tapi ini kabel di bawah global Dan ia cukup menarik Kemudian ada juga kabel di bawah internet Jadi kabel di bawah data center Yang nampak sesuatu seperti itu Ada banyak di dunia Di Singapura juga ada Ia sebenarnya tidak terdapat Tapi jika anda mempunyai Ia sebenarnya public information Ianya mereka tidak beragam Seperti kabel di bawah internet Di sini Maksud saya Ada sebuah kabel yang berkata Jangan beritahu bahawa Ia di sini Jadi mereka di sana Mereka tidak dihidupi daripada rancangan Tapi mereka juga tidak beritahu Jadi sebenarnya anda boleh Google Di mana kemungkinan internet ini Jadi ada kabel di bawah data Yang masih dikeluarkan di Museum ArtScience Saya rasa ia akan terakhir pada bulan ini Dan Ia adalah kemungkinan yang sangat menarik Sudah tentu saya pergi untuknya Dan anda akan menjelaskan lebih banyak Seperti sebuah kabel di internet Ini adalah salah satu perkara yang saya bincangkan hari ini Anda akan berada di sana Dan kemudian Ada beberapa kabel yang menarik Dan jika anda berada di Singapura Saya rasa anda mempunyai pengalaman Dan saya akan pergi Saya tidak berada di Singapura Tapi saya masih pergi Jadi sebuah kisah Di internet Saya akan mencuba menjelaskan kemungkinan saya Jadi internet sebenarnya Menulis sebuah projek perniagaan Kerana Selepas WTW2 Ada sebuah stand-off Di antara Union Soviet dan United States Jadi saya rasa apa yang berlaku Ia mempunyai perniagaan Soviet Untuk tempatan Ini adalah hubungan saya Jadi ia mungkin tidak akan menjadi Ia akan menjadi penjaga Tapi kemudian Amerika ada sedikit stres Mereka seperti Ia mempunyai perniagaan Dalam penjagaan dan teknologi Ini tidak akan berlaku Jadi mereka mempunyai Perniagaan Perniagaan Perniagaan Seperti apa Biasanya, ia tidak hanya untuk internet Ia adalah untuk menjelaskan teknologi Dan perniagaan Jadi ia sebenarnya Membunyai banyak perkara Dan di masa lalu Dan pada hari itu Perniagaan tidak seperti Laptop yang anda boleh menyebabkan Perniagaan adalah tentang Perniagaan ini Orang-orang berjalan di dalam perniagaan Sebaiknya untuk mencari mereka Kerana mereka sangat besar Dan perniagaan Kemudian Anda akan berkata Membunyai banyak perkara Banyak perkara yang mereka tidak dapat lakukan Banyak perkara yang kita mengambil Seperti sekarang Saya ingin menyebabkan Saya menyebabkan video ini Saya ingin menyebabkan kepada kawan saya Saya boleh menyebabkan Flash Drive dan saya menyebabkan kepada anda Banyak masa yang hanya berlaku Walaupun Orang-orang yang anda menggunakan Tapi pada masa lalu Perniagaan tidak boleh bercakap dengan orang lain Sebab Mereka sangat tergantung Satu komputer akan mengambil Saya tidak tahu 1.25 milion dolar Dan perkara itu $ 1.25 milion dolar Kerana tidak seperti sekarang $ 1.25 milion dolar Kerana mereka juga Mereka juga tergantung untuk dibuat Dan mereka akan bergantung Maksudnya Biasanya dibuat oleh universiti Jadi bagi contoh Saya dibuat komputer ini Saya menggunakan Sokot Spal Atau koding Dan lain universiti Mereka juga mempunyai Mereka mempunyai NUS NTU Jadi NUS NTU mempunyai 1 komputer Dan NUS NTU juga mempunyai komputer lain Tapi mereka mempunyai Mereka menggunakan sebuah langit Jadi Tak ada protokol standar Jadi mari kita kata NUS NTU mempunyai program yang sangat menarik Dan NUS NTU mempunyai Yang ini program yang sangat bagus Mereka hanya mempunyai Mereka hanya mempunyai Mereka memperkenalkan Mereka memperkenalkan Yalah sebuah program yang sangat mahal Ini tidak sangat efektif Mereka harus melakukan kerja Mereka harus melakukan kerja yang lain Cuma untuk Dan anda tidak harus memperkenalkan Berlengkar Dan ia sangat mencari Jika mereka belum sendirinya Memperkenalkan Jadi beberapa Penyiasis yang mereka sudah mengagum kita perlu mempunyai cara untuk komputer ini untuk menghubungi bersama-sama. Jadi, ada konsep ini, circuit switching dan paket switching. Circuit switching, biasanya adalah keadaan tradisional. Mereka menggunakan konsep yang dipanggil circuit switching. Maksudnya, jika anda dapat memandangkan sebuah film 50-an, kemudian ada wanita yang duduk di belakang switchboard. Apabila seseorang menghubungi telefon seperti, Hello operator, please connect me to Mr. Roberts. Mereka akan menghubungi switchboard. Jadi, perkara itu adalah, keadaan tersebut akan dipanggil untuk durasi panggilan. Jadi, ia berfungsi untuk panggilan tradisional. Kerana panggilan harus dipanggil untuk durasi panggilan kerana anda mempunyai berkongsi dengan orang lain. Anda tidak mahu berada di sejauh-jauh. Jika anda menghubungi ibu anda, anda akan berkata, Hey, bawa saya beli sesuatu. Mereka menghubungi. Mereka tidak dapat menghubungi. Mereka tidak dapat menghubungi sejauh-jauh. Jadi, panggilan selalu dapat menghubungi. Tetapi, apabila anda cuba memdesain network komputer, data komputer tidak harus menghubungi panggilan sepanjang masa. Jadi, sebenarnya, jika panggilan itu menghubungi, saya tidak tahu jika anda boleh menggunakan internet pada tahun 90-an. Apabila saya adalah anak, kita menggunakan dollar. Jadi, apabila orang menggunakan internet, anda tidak dapat menghubungi. Jika anda cuba menghubungi panggilan, anda akan menghubungi. Kerana internet itu berada di jalanan. Jadi, jika anda mempunyai sistem yang berbeza, mereka mahu mempunyai sistem yang tidak bergantung di jalanan sepanjang masa. Jadi, seseorang menghubungi dengan konsep panggilan untuk menghubungi. Maksudnya, data yang anda perlu menghubungi, bukan menghubungi segala hal yang dihubungi, anda membuangnya menjadi panggilan. Jadi, anda dapat menghubungi dengan panggilan. Jadi, jika anda memikirkan panggilan, jika anda mempunyai panggilan yang besar, dan ada dua panggilan, mereka mahu menghubungi. Anda harus menghubungi segala panggilan. Maksud saya, apabila panggilan saya menghubungi, anda harus menunggu sepanjang masa untuk menghubungi sebelum yang lain dapat menghubungi. Tapi jika mereka semua menghubungi dengan panggilan, bagaimana ia berlaku? Saya akan menghubungi panggilan pertama saya, kemudian anda menghubungi panggilan yang lain. Jadi, ia dapat menghubungi pada masa yang sama. Itu lagi, ia adalah panggilan yang sangat berlainan, yang mungkin tidak seluruh akurasi, tetapi, hanya mencari cara itu. Panggilan yang menghubungi adalah panggilan yang mereka menghubungi pada tahun 1960. Jadi, apabila saya menghubungi bahawa panggilan tidak dapat menghubungi dengan orang lain, keputusan dibuat untuk menghubungi panggilan yang dihubungi. Jadi, apabila panggilan adalah sebuah setaulah panggilan yang semua orang menghubungi, apabila panggilan yang saya menghubungi, ia adalah panggilan yang menghubungi. Saya menghubungi bahawa kita menghubungi untuk menggunakan cara ini. Jadi, semua orang mempunyai cara yang sama dan ia menghubungi, ia adalah panggilan yang menghubungi. Jika kita semua menghubungi bahawa bahawa orang-orang dapat mengahwini bahawa bahawa panggilan berlainan, jika seseorang mempunyai bukan untuk menghubungi panggilan, saya mahu menghubungi bahagian, tidak ada yang dapat mengahwini. Jadi, mereka menghubungi dengan panggilan yang menghubungi. Jadi, seorang panggilan yang sangat berlainan, anda mungkin tidak dapat menghubungi bahagian yang menghubungi bahagian. Ini adalah panggilan yang menghubungi untuk protokol kelebihan dan protokol internet. Jadi, apabila saya beritahu bahawa bahagian yang dihubungi dari komputer di internet, ia menghubungi kembali. Anda harus... Pertama, jika anda menghubungi kembali, ia perlu menghubungi bersama-sama. Jadi, sesuatu perlu menjadikan ini. Jadi, protokol kelebihan menghubungi ini. Ia akan menghubungi bahagian yang dihubungi untuk menghubungi bahagian bersama-sama. Yang lain adalah protokol kelebihan internet. Jadi, setiap bahagian ini perlu menghubungi kembali. Anda tidak dapat... jika anda menghubungi kembali 20 bahagian, jika anda menghubungi kembali, itu tidak berfungsi. Jadi, protokol kelebihan internet menghubungi bahagian yang dihubungi. Kemudian, setiap bahagian menghubungi kembali tetapi setiap bahagian menghubungi kelebihan internet mempunyai adres IP. So, adres IP adalah bahagian yang terkenal adalah sebuah berita. Jadi, 1, 9, 2, 1, 6, 8, 0, 0, 1. Itu adalah sebuah adres IP. Menarik, kita sebenarnya menghubungi adres IP beberapa tahun. Sebab jika anda memikirkan bahagian itu, 4 setiap bahagian setiap bahagian dengan 3 bahagian. Kerana bahagian menghubungi dari 0 ke 255. Sebenarnya, tidak cukup. Jadi sebenarnya, sekarang ada sebuah protokol yang lebih baru disebabkan adres IP yang lebih lama. Dan adres IP yang lebih baru ada cukup daripada mereka. Dari perspektif matematik, adres IP yang berlaku adalah tentang bahagian yang terkenal di dunia. Jadi, saya rasa kita mungkin tidak akan bergerak. Tapi anda tidak akan tahu. Jadi, ini adalah kebenaran. Sebenarnya, saya tahu bahagian ini sangat sulit. Tetapi, bahagian kelebihan adalah perlayang. Dan saya tidak akan menutupi ini dalam detail dan memperkenalkan bahagian yang sangat baik yang saya menemukan adalah, saya rasa, bahagian yang digunakan untuk seluruh. Jadi, kita akan menutupi ini. Sekarang, internet dan web adalah perkara yang berbeza. Internet, seperti yang saya katakan, adalah sebuah infrastruktur fisikal yang sebenarnya memperkenalkan bahagian anda. Tetapi, web internet yang berbeza adalah bahagian ini, di tahun 1989. Jadi, dia memperkenalkan bahagian. Dia juga dalam akademia. Jadi, mereka memperkenalkan bahagian, saya tidak pasti bagaimana anda sebenarnya menerima bahagian dan sebagainya. Tetapi, anda tahu bahagian yang ada di atas bahagian. Anda perlu memperkenalkan bahagian anda. Jadi, anda perlu memperkenalkan. Pada tahun 1997, apabila anda mempunyai bahagian ini. Jadi, dia berfikir bahagian kalau mereka menulis bahagian bahagian itu. Bibliografi itu sebenarnya adalah tentang estik bahagian itu. Jadi, dia berfikir bahagian yang baik adalah, kadang-kadang, orang-orang sebenarnya ingin memperkenalkan bahagian yang berbeza. Tetapi, pada masa itu, kerana semuanya mempunyai bahagian, mereka sebenarnya perlu memperkenalkan bahagian yang berbeza. Kemudian, mereka akan menemukan bahagian. Jadi, dia berkata bahagian, jika anda menggunakan komputer, anda akan dapat memperkenalkan bahagian. Kemudian, saya boleh memperkenalkan bahagian yang baik. Jadi, dia memperkenalkan bahagian ini disebabkan hyperlinking. Jadi, bagaimana sebuah konsep ini adalah untuk memperkenalkan bahagian yang lebih mudah untuk memperkenalkan bahagian yang berbeza dengan orang lain. Kerana pada masa itu, internet sebenarnya hanya mempunyai bahagian untuk orang-orang memperkenalkan bahagian digital, bahagian fisikal. Jadi, dia memperkenalkan bahagian ini yang sebenarnya memperkenalkan bahagian seperti yang kita tahu hari ini. Jadi, protokol transfer hypertext. Jadi, apabila saya katakan bahagian hypertext, seperti apa yang saya katakan tadi, bahagian hyperlinking. Jadi, ada protokol. Jadi, lagi, anda perlu... ada sebuah rupanya. Semua dokumen ini memperkenalkan bahagian untuk memperkenalkan dengan orang lain. Jadi, ada protokol yang dia harus keluar dengan. Kemudian, dia harus keluar dengan konsep sebuah rupanya. Jadi, URL akan lebih berkenal kepada orang lain. Tapi sebenarnya, setiap rupanya pasti unik. Kerana jika ia tidak unik, anda tidak akan mengalami satu-satunya. Sebab itulah, orang-orang yang memperkenalkan bahagian ini bukan hanya perkara internet. Jadi, jika anda cuba mempunyai dua rupanya yang sama, komputer akan memperkenalkan bahagian ini. Jika anda tidak memperkenalkan bahagian ini, kenapa anda tidak memperkenalkan bahagian ini? Sebab uniknya sangat penting untuk komputer tahu apa yang anda memeriksa. Yang ketiga adalah langit markup hypertext. Jadi, dengan html, apa yang kita akan menutupi. Jadi, dia keluar dengan ini untuk memperkenalkan bahagian yang anda akan berbagi di web ini. Jadi, ini adalah web yang dibuat. Dan saya menemukan perkara ini yang saya suka tentang internet adalah yang sangat berbeza daripada banyak ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... Filosofik, tapi ini sebenarnya dengan referensi kepada bagaimana anda mengandalkan Ketika paket data diberi kepada anda, tetapi jika anda fikir bahawa ini boleh diberi kepada Sebenarnya, ini Sebenarnya, tinggalkan Tinggalkan perkara yang lebih baik daripada apabila anda menemukan Dan saya menemukan ini, ia adalah Ia adalah perkara yang sangat baik Ia sangat baik bahawa internet telah dibina pada permintaan ini Pertama permintaan ini Berhenti kerja Berhenti apa-apa pun yang anda menemukan Lebih baik daripada apabila anda menemukan Jadi, ya, baik-baiknya, saya sedang berfilosofik, tapi saya benar-benar suka perkara ini Jadi, seperti yang saya beritahu, jika anda ingin membaca perkara Ini adalah perkara yang berlainan kepada perkara yang saya berhati-hati Setelah itu, saya akan menemukan perkara yang saya berlainan Jadi, jika semua perkara boleh digunakan Saya akan menemukan perkara yang saya berhati-hati kepada semua anda nanti Tetapi, perkara yang pertama adalah Di mana keadaan penerbangan berlainan Sebenarnya, ia bercakap tentang perkara yang telah dibina Pemintaan internet Ia adalah perkara ini Ia berlainan pada perkara yang tersebut di seluruh dunia Untuk berlainan dan melihat Bagaimana perkara internetnya? Jadi, ia berlainan untuk menikmati Macam data exchange centre Ia berlainan untuk melihat bagaimana orang menemukan kabelnya Jadi, perkara itu juga sangat menarik Pertama perkara yang tersebut, perkara yang tersebut sangat menarik Pertama perkara ini Ia berlainan untuk memperkenalkan Ia berlainan dengan cara yang penting Ia sangat mudah untuk memahami Ia adalah sebuah penerbangan yang sangat berlainan Dan yang terakhir, ia dibuat oleh Tim Berners-Dy himself Ia adalah Ia mengambilkan bagaimana ia berlainan di internet Jadi, jika anda berminat di internet Dan jika anda ingin melalui penerbangan Jika tidak, tidak mengapa Tidak mengapa Saya rasa semua ini Saya rasa ia berlainan untuk berlainan Jadi, sebenarnya Singapura seperti kami Ia sangat bagus Saya sangat gembira untuk berlainan Jadi, perkara yang saya ingin memperkenalkan Ia adalah perkara yang berlainan dan penerbangan Jadi, sebab saya rasa Jika anda berlainan Atau jika anda sebenarnya bercakap dengan I.T. yang berlainan di mana anda bekerja Anda pasti akan mendengar perkara yang diperkenalkan Seperti, perkara yang diperkenalkan Dan saya rasa, perkara yang diperkenalkan Saya perlu menghubungi perkara yang diperkenalkan Macam mana perkara yang diperkenalkan Sebenarnya, perkara yang diperkenalkan Ia hanya penerbangan Ini sebenarnya, apabila saya memulakan Saya tidak mempelajari penerbangan Jika anda ingin, saya ada perangkatan Saya tidak boleh beritahu, betul Tapi, sebenarnya Anda menunggu saya sekejap untuk memahami perkara yang diperkenalkan Tetapi, perkara yang diperkenalkan Penerbangan ialah perkara yang diperkenalkan Saya akan menjelaskan nanti Pada masa internet seperti ini, perkara yang diperkenalkan Ia adalah Representasi internet yang diperkenalkan Penerbangan ialah perkara yang diperkenalkan Ia terunggung dengan internet Jadi, perkara yang diperkenalkan Penerbangan i adalah Sebenarnya, perkara yang diperkenalkan Ia hanya ialah penerbangan Penerbangan i yang lalu adalah Ia menghubungi software yang membuat Ia menolaknya untuk menjawab Jadi, Pada masa internet ialah penerbangan Ia berkumpulan, perangkat, sesuatu Jadi, orang kita, untuk mengajar internet dan kita tidak hanya hanya melakukannya ke dalam semua yang kita lihat di luar kita harus biasanya menghubungi wifat public dan jika anda fikir tentangnya, wifat public ini digunakan oleh internet provider, jadi ia berguna atau tidak jadi seseorang berikan servis ini anda tidak hanya dapat menghubungi wifat internet, anda harus menghubungi wifat internet ini jadi telefon anda, laptop anda, ia digunakan sebagai klien kerana yang berbeda dengan klien dan servis itu, klien adalah yang membuat perbezaan seperti apabila saya mahu pergi ke Facebook jika anda menghubungi www.facebook.com, tiba-tiba Facebook mempunyai di komputer anda tetapi saya pasti bahawa file yang menggunakan Facebook tidak mempunyai di komputer anda jadi kenapa Facebook dapat mempunyai di komputer anda kerana anda membuat perbezaan kepada servis Facebook jadi jika anda dapat menghubungi pengalaman awal saya tentang landlots dan spesia, kode yang menggunakan Facebook sebenarnya tinggalkan di komputer di mana-mana sebabnya mereka tinggalkan banyak komputer di mana-mana tetapi kode ini adalah dalam masin fisikal dan apabila anda menggunakan adres www.facebook.com, anda membuat pembinaan kepada masin ini untuk jika anda mahu menggunakan pembinaan pada kode Facebook supaya saya dapat menggunakan pembinaan pada kode klien saya jadi kode klien, i.e. perbezaan anda membuat pembinaan dan pembinaan jadi pembinaan di mana pembinaan website membuat pembinaan kepada pembinaan mereka jadi saya menggunakan pembinaan jadi saya rasa itu sebabnya mereka menggunakan pembinaan kerana kita tidak sebenarnya membuat pembinaan pembinaan saya rasa mungkin membuatkan sedikit pengetahuan kerana anda boleh beritahu pembinaan fisikal sebagai pembinaan tetapi juga ada konsep pembinaan software jadi apa yang membuat pembinaan komputer yang berbeza daripada pembinaan normal saya adalah ia menggunakan pembinaan ia menggunakan pembinaan software yang memberi jawatan kepada pembinaan ini jadi jika itu sedikit pengetahuan saya tidak boleh mengerti ini juga sehari-hari anda mengerti jadi pada semua pembinaan interseksual ada selalu pembinaan jadi apa yang pembinaan ini membuat saya mengatakan konsep pembinaan pembinaan di mana-mana pembinaan perlu pergi ke mana-mana jadi pembinaan tersebut jika anda mempunyai pembinaan di rumah, anda akan mempunyai pembinaan jadi apa yang pembinaan membuat ia adalah kontrol trafik jadi apabila anda membuat pembinaan dari rumah ke internet anda mempunyai banyak pembinaan mungkin ibu anda ingin mencari Facebook dan melihat pembinaan dan anda ingin membeli pembinaan di Taobao pembinaan ini mempunyai pembinaan yang berbeza jadi pembinaan tersebut pembinaan tersebut tapi pembinaan tersebut pembinaan sebenarnya membuat setiap pembinaan tersebut untuk pembinaan lain dengan pembinaan tersebut dan apa yang berlaku adalah mereka tidak tahu pembinaan tersebut tapi anda akan tahu pembinaan tersebut yang dapat mendapatkan pembinaan tersebut anda akan tahu untuk meminjakan pembinaan tersebut ke satu lukisan, ke lukisan lain ke lukisan lain jadi ia seperti itu how the internet works itu, sehingga pembinaan akan meminta pembinaan dan pembinaan dari pembinaan copebis, sewaktu mereka meminta Untuk data tax, nama dan sebagainya, anda tanya untuk gambar, anda tanya untuk video. Semua ini adalah panggilan, dan panggilan akan mengembangkan panggilan ini. Jadi bagaimana ia berlaku? Anda akan menghubungi panggilan, anda akan membuat panggilan, seperti, eh, beri saya panggilan ini, kemudian panggilan akan memberi jawapan dan kemudian panggilan terminat. Tetapi ini berlaku seperti, ini berlaku sangat cepat, tetapi ini adalah, anda boleh menghubungi ke bawah ini. Jadi apa yang berlaku? Apabila anda masuk URL dalam barang panggilan, jadi URL adalah langsung, tetapi setiap bahagian URL mempunyai maksudnya. Ia mempunyai protokol, serva dan panggilan yang ditanggung, apa maksud saya? Okey, protokol, seperti yang saya katakan, sekarang Http atau Https, ini dikenal sebagai protokol. Ia adalah pertanyaan pertama di URL. Pertama, ia seperti www.unicorn.com. Ini adalah nama serva. Jadi setiap serva sebenarnya, ia sebenarnya mempunyai nama serva. Dan, kerana kadang-kadang, ini adalah bagaimana panggilan berlaku. Kadang-kadang, apa yang mereka akan lakukan adalah, mari kita katakan, anda mahu pergi ke sisi yang penting, www.unicorn.com adalah panggilan official. Kadang-kadang, anda akan melihat, orang akan mempunyai, dan anda akan menjadi seperti, ia mungkin, www.unicorn1.com. Dan beberapa orang yang tidak menghargai, orang akan menjadi menghubungi, mungkin akan pergi ke sisi itu, bahawa ia hanya satu perbedaan, ia adalah serva yang berbeda, serva yang berbeda yang berbeda. Dan itu biasanya adalah bagaimana panggilan berlaku. Mereka akan mendapat nama yang sangat berlaku, dan orang-orang yang tidak mengetahui, mereka akan hanya pergi ke sana. Atau, www.papel.com adalah, www.paipa1.com, anda tidak tahu, dan anda akan pergi ke tempat yang salah. Jadi, itu serva. Jadi, setiap serva adalah unip. Dan kemudian, anda akan mempunyai nama yang di-request, www.vambo.html. Ia mungkin juga adalah www.vambo.jpg. Jadi, itu panggilan yang di-request. Jadi, ia adalah panggilan yang di-request. Jadi, panggilan akan menghubungi panggilan dengan serva. Jadi, anda akan tanya serva untuknya. Serva, sebab panggilan itu... Semua panggilan, yang membuat website, tinggalkan serva. Jadi, serva akan berkata, di dalam kawasan saya, di mana panggilan ini? Saya akan mencari panggilan panggilan www.vambo.html. Kemudian, saya akan... Jadi, saya akan mencari panggilan panggilan untuk anda. Kemudian, ia akan menghubungi panggilan. Jadi, ini adalah panggilan bagaimana... bagaimana panggilan anda dapat informasi, bagaimana anda dapat melihat website. Jadi, semuanya adalah menghubungi panggilan kerana internet dibina pada panggilan. Jadi, apabila anda mencari panggilan, anda hanya mencari URL yang di-request. Jadi, mari kita katakan, ada panggilan yang di-request, panggilan untuk gallery.html. Apabila anda mencari panggilan, ia adalah panggilan yang sama. Jadi, apabila anda mencari panggilan di gallery.html, anda akan mencari panggilan dan panggilan anda akan mencari panggilan dan mencari panggilan. Jadi, ini adalah panggilan bagaimana panggilan internet berlainan. Jadi, saya akan menyebabkan panggilan dan panggilan yang berlainan. Dan saya rasa ini akan mencari panggilan jika anda lanjutkan untuk menjelaskan lebih banyak panggilan dan sebagainya. Panggilan yang berlainan sangat spesifikasi kerana mereka akan spesifikasi protokol dan panggilan. Sebenarnya, pergi ke sini ia benar-benar di sini untuk menjelaskan panggilan. Ada lagi panggilan yang tidak berlainan di mana anda tidak menjelaskan panggilan. Dan panggilan itu menghargainya bahawa apabila panggilan yang anda mencari adalah sama. Jadi, saya di Facebook.com. Atau, saya akan menyebabkan panggilan yang anda menulis dalam panggilan html. Baik. Jika anda tidak menulis panggilan dan segala-galanya, anda akan menyebabkan bahawa ia berlainan yang sama. Jadi, bahawa yang sama seperti panggilan yang anda menulis. Ini akan berlainan apabila saya mencari panggilan dan panggilan yang anda menulis. Dan kemudian anda dapat melihat apa yang saya maksudkan apabila saya katakan panggilan yang sama. Jadi, okey. Jadi, semua orang menulis ini untuk bekerja. Panggilan yang anda menulis, anda akan melihat oh, kenapa ini kecil? Anda akan melihat anda mempunyai dua panggilan yang ada di luar dan perlihatan. Dan kemudian ada beberapa panggilan di luar. Panggilan yang penting dalam pekerjaan hari ini adalah panggilan di dalam panggilan dan perlihatan. Jadi, sebenarnya, panggilan jem, panggilan yang anda tidak menulis. Jadi, ia hanya sepatutnya di sana supaya panggilan akan berlainan. Jadi, jika sesiapa ada masalah hanya mencari panggilan, anda akan melihat panggilan ini.erb. Sebenarnya, ia adalah panggilan yang berlainan. Erb adalah panggilan yang berlainan. Jadi, anda hanya mengharapkan untuk sekarang, hanya berlainan dengan html. Kerana ia sebenarnya nampaknya sama dengan html. Tapi, tentu saya tidak akan mengekalkan apa-apa yang akan berlainan hari ini. Jadi, mari kita pergi dengan panggilan hari ini. Jadi, jika kita ada... Tunggu, mari saya buka. Tunggu. Okey, ini... ini adalah panggilan yang saya harap semua orang dapat mengekalkan pada akhir hari ini. Saya akan mengekalkan. Bagaimana anda akan mengekalkan? Bagaimana anda panggilnya? Ya, ya. Bersyukur. Apa-apa pun. Ini... ini patut menjadi panggilan yang berlainan. Untuk sekarang, untuk sekarang, anda patut mempunyai panggilan yang berlainan. ia adalah panggilan panggilan yang berlainan. Jadi, perkara tentang panggilan itu, saya hanya akan berlainan. Di sini, adalah panggilan yang berlainan. Dan di sini adalah panggilan. Dan panggilan bawah ini adalah panggilan. Jadi ini adalah panggilan. Ini adalah panggilan yang berlainan. Anda tidak perlu mengekalkan panggilan ini di panggilan.rubi. Jangan perlu mengekalkan. Jadi, jika anda boleh, hanya pula anda akan mengekalkan, anda akan mengekalkan panggilan index.html. Anda patut mengekalkan sesuatu seperti ini. Semuanya seperti itu. Jadi, di panggilan anda, saya rasa yang terbaik anda patut mengekalkan seperti ini. Anda patut melihat panggilan dan kekalkan dan mengekalkan panggilan. Jika tidak, anda perlu mengekalkan ke panggilan itu. Ya, tolonglah. Okey, okey, okey. Jadi, apabila kita mulakan, idealnya, panggilan anda patut mengekalkan ke ke panggilan ini. Sebenarnya, ia berkongsi kepada panggilan. Panggilan panggilan. Jadi ia akan menjadi kota. Kemudian, mengekalkan panggilan di Atrah. Kita patut mengekalkan panggilan anda. Kenzoom? Kenzoom. Begitulah. Baiklah, kita mulakan. Berserah yang lebih baik untuk kami. Saya akan beritahu kakitah yang akan berlaku. Saya akan beritahu kakitah yang akan berlaku. Saya akan beritahu kakitah yang akan berlaku. Bolehkah anda cuba mencari komand ini di sini? www.execruby.slashapp.rb Jika anda melihat kata-kata ini, anda okey? Jika anda mempunyai keadaan, tolong tangan anda akan mencari dan membantu anda. Instruksi adalah di link yang Elisha memberikan. Biasanya, apabila anda mempunyai kata-kata anda, anda akan melihat kata-kata anda. Jadi, kata-kata ini adalah kerana anda mempunyai keadaan. Kata-kata anda mempunyai keadaan dan membantu anda. Jadi, jika anda melihat kata-kata anda, anda akan mempunyai keadaan yang sama. Kata-kata anda mempunyai keadaan. Melepaskan keadaan yang besar. Jadi, jika anda membantu sebuah keadaan, jika anda memberikan keadaan, anda memperoleh kata-kata anda. Kata-kata anda memperoleh kata-kata anda. Jadi, nanti anda memperoleh kata-kata anda. Pada kawasan RUBI, anda patut melihat kawasan 4 dan yang terakhir pada kawasan ini adalah POT 3000. Jadi, apa yang ini melakukan adalah, ia menolak anda melihat apa-apa pun yang terhadap kawasan anda. Jadi, jika anda klik pada botan preview dan anda klik pada POT 3000, anda patut melihat ini. Ini adalah kawasan yang baik. Jika anda tidak melihat ini, okey, tidak terlalu baik, terima tangan anda dan tanya di mana. Terima kasih. Terima kasih. Terima kasih. Jadi, apa yang anda lihat berlaku pada kawasan ini adalah, anda akan beritahu saya kalau saya perlu beritahu. Ini adalah kawasan yang baik. Saya ada kawasan yang baik. Terima kasih. Terima kasih. Terima kasih. Kita periksa saja. Semua orang okey, saya boleh teruskan. Okey, saya akan bergerak sebabkan hidup. Okey, sekarang saya akan gunakan kod sebagai... Oh, maaf. Kod yang baik. Jadi, saya akan gunakan kod yang kita perlu menerima. Jika anda beritahu kod saya, anda boleh. Saya akan... Saya akan mencari bahagian yang anda lihat sekarang. Jadi, kod yang ditutupkannya XTFL adalah alat yang berlaku pada negeri kod yang saya harus menyebut. Jadi, keadaan pertama yang anda lihat, ada masalah ini, Erno. Tentang lina ini, itu menguruskan kod anda. Kod anda memanggil kod HTML. Kod anda menguruskan kod yang anda mahu menyebut So, so to speak. It tells your browser that this document is a HTML file. That's all. So, it actually stands for document type. It just declares to the browser that, hey, I'm a HTML document hall. So, that's what the first line does. And every HTML file you create must have this declaration. If it doesn't, the browser will... The browser can potentially still open it, but it may not behave the way you expect it to. Because when the browser knows that this is a HTML document, it will process it accordingly. So, it's like when you submit form to the government, you must submit. You cannot just... Your name must be correct. You cannot put your brother's name and expect the correct result to occur. So, you have to declare that you are a HTML document. So, the browser knows how to deal with you. The next line. Okay, so how HTML works is that HTML is made out of tags. What I mean by tags? You'll see a lot of these angle brackets throughout the entire document. So, whatever is between these angle documents, these are known as tags. And there are a lot of different HTML tags that you can use to format your content. So, okay, I think I still have to use those lines. Okay, so content is marked up using tags. Tags, usually. Okay, now this is the part of web development that you will need to understand very early on is that some things are arbitrary. So, the first arbitrary thing that you encounter is that tags, usually, but not always, come in pairs. So, most tags, you will have an opening tag. For example, this is a paragraph element. So, it's angle bracket P. Open angle bracket, close angle bracket. And you will have an ending tag that a closing tag will have a slash, backslash, backslash P. So, everything in between it, we refer to it as a HTML element. So, this is like a paragraph element. But some tags don't need the closing tag. I'm sure there was a reason for this, but I don't know what it is. So, for me, the more you do it, the more you will remember or this one got an opening tag, this one don't have. So, it's like when you ask me when I edit English sentences and you ask me why this particular sentence is currently, I'll just tell you because it sounds right. So, there's a logic behind it but I'm not really sure what it is. So, just take it, and compare. So, as I mentioned, this is the basic structure of a HTML document which should be very similar to what you all have in the project. So, there's HTML itself is a tag. So, there's an opening and a closing. So, if you refer to your own index.html, you will see there's also an opening and a closing. So, basically, it just demarkates the start of the HTML document in between. There are two major sections in a HTML document. There's a head and there's a body. Asking where it's in to type the link out for you so you can also just follow the slides for the laptop. It's very flexible, man. Do you need the screens here, actually? I don't know if you can compare. Yes, actually. Let me have the same screen on the screen. I want to do two screens. I've got a new refer. Oh, of course it's in full screen mode. We're going to take one minute. If you can't see the screens, go to this website and load the slides. I got without the one. Yes, without the one. Why is the one there? Huh? So, I type wrongly then they find same. Do you work? Ya, it works. It's TL, not T1, everybody. TL, L. FYI1 looks like this. Slash 4 slash 2. Slash 4 slash 2. Thank you. Okay, I'm moving on with life. My cursor. To navigate, you can use arrow keys or you can press space bar. So, space bar. So, I mention the document type already. So, the HTML element. HTML element. So, every HTML element. Every HTML element, every tag will have a set of attributes and there will be different depending on the type of tag you're using. So, for example, the HTML tag is pretty special because it's like the grandfather tag and it has an attribute called language. So, we need to remember one thing code in general regardless of what language you are. You have to be very specific. For example, just now, I was helping somebody navigate to the correct directory. You couldn't get there because there was an extra slash. So, that's the problem. If you typo something or you accidentally add a dot or slash, it probably won't work because computers are not intelligent, but the attribute is the same. So, even though what I noticed because I've done this course before, some people actually typo language tag. L-A-N-G means L-A-N-G. I'm sorry, you cannot be creative in this regard. But what this particular attribute does L-A-N-G, you can declare the language. So, why is this useful? If you all use Chrome, sometimes if you go to foreign language website and you go to a Russian website there will be this grey bar and it says, hey, this site is in Russian. Do you want us to translate it? How on earth does Google know that that website is in Russian? This particular feature only works if the website creator actually specify L-A-N-G equals whatever the code is for Russian. And another benefit of having this attribute meaning this HTML is a very forgiving language in the sense that if you don't have this attribute, your site will still work. It's just that there are less features that are available to you. So, if you don't include the language attribute is still valid but you don't get the benefit of certain features that browsers can provide. So, what is this good? So, first here I feel all very able-bodied but actually there's a significant population of people who use the internet that have some disability in some way it could be so it visually impact people actually also need to use the internet and they'll use something called screen readers I think it's less common in Singapore but there's still a respectable number of people who actually need to rely on screen readers as someone who is very, very near-cited or not, I mean become blind one day so I think this applies to me screen readers when screen readers read the website, they actually rely very, very heavily on the correct HTML text to sort of convey the message correctly I will colour this a bit later on why it's so important to use the correct HTML text because as I mentioned, HTML is very forgiving essentially you could actually just put HTML you could put everything in between without any text from a visual perspective your website was still rendered in the browser but the person who is using a screen reader will probably have a less pleasurable experience browsing the website so that's the thing about HTML it's good and bad good as in it's forgiving but bad in that you can afford to if you don't care it doesn't penalise you for not caring so anyway, moving on so the next part, there's a hate element so whatever information in this hate element contains metadata about your website, meaning what is metadata is actually just information about your website, this does not actually appear on your website itself but it contains information about your website in the sense that there's a title so the only things that actually reflect whatever you put in the hate element are two attributes the title and the meta description which I don't think you all have that line in your code again, it's not crucial but it's very good to have title is especially important because the title is basically what shows up on the tabs on the top of the website so if you actually want to try you delete whatever is inside between the title tab you save it, when you refresh the preview window I think the tab won't have a title may or may not work because I'm not sure how Nitrous renders but why is the title important? Google search engines, you know when you search for things on the internet it returns a list of results and whatever is disturbed it's actually a page title so if you have no page title Google will not find you so this to me is the modern interpretation of the rhetorical question if a tree falls in a forest if you have a website and Google cannot find it does it exist? rhetorical question so it's site title very important, don't miss out this line you can miss out the other lines especially if you want your site to be found so one other piece or important link that you want to put in your head element is links to other files so when I talk about CSS later this probably will make more sense but what happens in HTML is that you can make references to other files inside your project directory so our simple project we probably only have the index and the styles.css if you continue but you see there are other files for bigger websites each page will be its own HTML and you will have maybe multiple CSS files you will have some JavaScript files how does the browser know that all these files are related to each other you have to tell the browser by using a link and there's this particular attribute so I don't know if you can see the color from behind it's formatted in a way that the actual tag itself is yellow and each of the attributes is orange so the link tag has a particular attribute called href and it tells the browser the location of where this related file is that's all just inside your head element technically it does not show up on the page itself except for the page title that shows up as a tab title but it's still very important now the body element is where you see all your work all your content as long as it's between two body packs it will show up on your web page so it's the main content of the web page and it ideally should only be one body element again the forgiving nature of html if you want to put 3 body elements your page will probably still render but it might behave very funny so let's keep it let's be standards compliant only one body element so if you have an opening body tag you should have a closing body tag which should already exist in your index.html so all this content in between so you can see there are many different tags you can use to structure your content in this example i have a header tag inside my header i can have an image for my logo then i can also have a navigation which is actually a list of links they have their own tags ul actually stands for unordered list then li is a list item so there are many different tags you can use it's like h1 for header 1 p for paragraph tags that you potentially can use you will not know all of them because i also don't know all of them but the reason why i put this very long list here is just to prove a point a point that there are many different tags that you can potentially use to mark up your content so for example there is you could make everything a div but let's say you have a list of you writing a recipe you could put help you could potentially put everything between paragraph tags but if it's a list ideally you should mark it up as a list so it's a semantic thing it makes more sense to mark it up as a list so you should use there's a list element for that and there are many other elements that you potentially can use and each of these tags, browsers will add additional features so for example if you mark something up as a list the browser automatically will add bullet points so little things like that that's why you should try to so if you don't know you actually just google because there are again as i mentioned i don't i also don't memorize this whole list but i will google to see that is there a more appropriate tag i'm trying to and one concept i want to introduce is that the way webpages render things is top to bottom left to right i actually used to work in an advertising firm and a lot of my designers were print designers they used to do physical media they are the type that print poster you see on the bus stop but for them they are very used to having a fixed fixed camera i want my logo to be 20cm from the bottom and they are very used to this control but when they first started doing web design and we try to explain to them no we cannot when the screen size change it cannot just jump to the bottom as in i kept repeating the phrase top to bottom left to right so that's why this is the title because webpages you think of it as every element it's a box, it's a rectangular box and this boxes the browser because the code if you see your file is this one not like many lines and the browser reads the lines follow the lines of each line and it will render each element top to bottom left to right and the first one is a header then it will render it first and like essentially in this order top to bottom left to right so this is a concept and there are two types of elements first of which is a block level element block level elements take up the width of the entire container container is just your browser window think of it as a container so when i say take up the entire width you look at the dotted lines it takes up the entire width even though after rainbow is blank space but this space is occupied, it belongs to rainbow so in this particular example H1, H2 they are like header tags P is a paragraph tag and these are list tags all of them they are considered block level elements and they take up the entire space of the container there's a long list so if you click the link you can see it and another type of element are inline level elements and this is actually in the official documentation if it's not block level it's inline so i think they couldn't explain it either so they just like it's not inline but for inline elements it's against self-explanatory it doesn't take up the entire container it just it takes up its own space and it's inline so links links are its own tag the links use an A tag and they are inline elements so the monsel colour system this is a link and it takes up only its own space it doesn't take up the other spaces but a block level element just push everyone away so very commonly used inline tags as i mentioned the A tag the link tag there will be a tag for input which you will encounter later IMG image is also an inline level tag so another full list big list if you are interested okay let's break everybody s thing okay i think everybody is back okay okay i will stop talking i think everybody very bored already so let's all just go to nitrous so this is the basic index not html and right now your page will look like this so it's a bit boring so let's let's get used to how it feels to how we generally do web development the benefit of this setup is that when you make a code change and you save the file you will reflect immediately here so what you could potentially do is you open this as a separate window then you like show both screens at the same time if you want this is just an option if you want to switch also can i'm doing this cause then it's easier for me to say stuff so basically what you can do is just try making a change so let's say i say the original file has guessed the number game i don't want to word game i just want to guess the number so we remove the word game and then save the file so if you like to use keyboard shortcuts if you're on a Mac i think it says command as if you're on a windows it will probably control as keyboard shortcuts works if you don't want you can use the file save interface also can so once you save the file if you notice when you make a change to a file on the tab it will become a circle the moment you save it will become an X sometimes when you refresh your page how come my change doesn't reflect that's probably because you haven't saved the file so if you double check you make sure this is an X that means you have already saved your change so once i've saved my change i refresh the page basically we will be doing this save refresh action many times so what we have now is we can go through i mention the hate element just now before the break whatever so you see this style sheet this text doesn't show up on the web page at all because it's part of the websites metadata but what does show up is whatever is between the body text so we have data for guess the number we have a paragraph that says here's a simple game you can play to try to guess the number i'm thinking of then another paragraph and then a link so as i mention this is the end result we're trying to achieve so what we have in the project folder that we prepared for you we also have a folder of images so to let everybody's website look exactly the same actually provided for background this one looks a bit but sorry no time to prepare nice images so you can play and choose so too dark and too light and then there's also a trophy image .svg is just another image format but personally i like this image format because they actually just code so i can actually make edits to it in the code itself won't be covering that just treat it as a standard jpeg or standard pngg file basically it's going to be a trophy a picture of a trophy and we're going to be so we're going to be styling 3 separate pages which is the let's call it the title page of this game it has already been done for us so let's say you click or start the game you should see this and this page corresponds to the file that's inside the views folder called play so if you click on play you will realise that it's actually just html that's why earlier i mentioned if you see the .erb pretend it's html because it looks exactly the same so same as a body with a h1 that corresponds to each so okay the only thing that's different that you cannot control today is this funny percentage bracket okay this is ruby code so because we're not touching ruby today let's just leave it so you cannot change try to guess it just take it that life is like that and just leave it alone but what we can do is we can actually change the text if we wanted to so it's just that earlier we did the text we just leave it alone and then there's also this new text called form tag so basically a form tag is a wrapper for the input input text so what is an input tag input is self-explanatory so actually there are two inputs here there's the enter gas so because input has its own set of attributes there are actually many different type of input elements that you can create but for the purposes of this guess the number game only we're going to have two one is the number because we're trying to guess the number and one is the submit which looks like this so only two inputs and we can style these inputs accordingly so if you want to actually play the game the special thing about the input number and if you use your keyboard you can actually go up and down you can have these numbers inside so this is why I say it's good to use the correct HTML tag because if you just put a normal input if you never specify a number and then you just put input text you will not get the when I try to use my keyboard up and down there's no number one because this field is not a number field it's like as if you use Microsoft Excel then you format similar so I want my input field to be a number so we'll cover this later and then later when you win there's another page so we go back to the first page first corresponds to the in-depth.html so the first thing that we we want to change is this tag why not change it but if you remember when I was talking about mountains just now I talked about block and inline elements so in our target we want like each element so this gets the number, this instruction this we need to play, each of them to take up the entire space of the entire container so right now it doesn't right now if you don't teach right ready to play and start the game on the same line so let's change that so what we do is the reason why they're on the same line is because this ready to play and the link for start the game they're all within the same paragraph tag meaning you think of it as they are broke in the same container but we don't want it like that we want the link to be its own container so what we can do is we you make, let's make ready to play its own element so what we do is we add the closing tag at the end of the question mark and remember to delete the original closing tag so the good thing about using nitrous is that there's this color so just now when I had extra closing tag the rest of the tag was grey so it's an indication but once I've deleted the closing tag then everything we can write again so you can use the color as a visual indicator because when we are writing code especially like maybe HTML or we will have to type things like this equal sign we have to have these brackets and these double codes sometimes we'll miss out and if your text editor doesn't have this color coding functionality you might miss it because there's a lot of times I typo then I forgot to add a coding code and my code look very weird but because of the color thing actually you can just try so if you just remove the double codes that indication that you probably typoed something wrong and once you put it back the color reverts so you can use this to help us so for now can everybody managers to get their code at least already you save and then you refresh and see how it looks so if all is well start the game should have moved itself downstairs if nobody raise hand continue so okay, we have that so I want to introduce so I want to introduce another concept known as classes yes please does anybody else have internet problem organiser organiser see how rare of bo internet anybody trying to watch olympics no is everybody connected to idea 4 idea leps 4 no internet fail who don't have internet raise up hand who don't let me to one table share your friend so for the 3 individual without internet can you keep your hand raise there's more than 3 so you also don't have internet so can try switching your wifi and off and on again does it work so you can try and titer if you cannot then I will pair you up with someone working at club technical difficulty so I am going to introduce all of you to the concept of a class so a class is another type of html attribute and what it allows you to do it allows you to specify specific element because how it works is that if you notice this example there are multiple p elements so let's say I want to target the first p element I can't do that because there are 2 elements that are p elements so what can I do I can give each of these elements a class so that's the concept of class okay very very quickly keep all this so a class will look like this I am switching to a class just to show how it looks like so a class is is used when we write css so css stands for is cascading style sheets and it allows us to add different style related attributes to html elements so you can apply css in 3 different ways so you can either match the element so as I just now mentioned there are 2 p elements on the page so if I style the p element it will apply to all the p elements if I only wanted to style one p element and not another I will give the p element I want to target a class and then I will style that class there's another attribute id which is even more specific in the sense that for class, you can have elements with the same class meaning I can have 2 p elements that are called monkey but if I'm using an id id is unique it's like your ic number whole of Singapore you are the only one with your ic number so when you give an id that id can only be used once by element chicken only can have 1 chicken so that's a brief introduction so let's say I want to let's see about my target actually it looks like me okay so as I mentioned just now we have multiple pages we need to style so there's the title then there's also the when you actually start playing the game so the CSS that we write will apply to all 3 pages so as you can see there's also h1 there are also h1 elements in the play file so for the target end result this guess another is very very big but when I start the game I go in so this h1 is smaller that means I cannot only apply my style to the h1 element so what we are going to do is for the one on the title the index hml let's give this h1 a class so I'm going to call it title oops sorry so for all attributes the value of the attribute it must be enclosed within um what's it called quotes yes so again make sure you got opening and closing so that it's yellow if the whole thing is yellow so now that we've given it a class we can apply a style to it so if you just save it and you refresh nothing is going to happen because you haven't done anything to it yet so what we can do is let's go to our style.css file it's empty for now completely empty so what we can do is we can start styling the element so the first thing we let's try making something happen so in order to target a class you need to have this dot in front dot title so this is how we target a class if you only wanted to target an element alone then you don't need the dot just the element so a CSS rule basically is made up of this there's the selector this is i will refer to this as a selector a dot title so the title class is selector h1 element is a selector and you will put all your so called styling rules between these curly braces so styling is as follows you must have an opening curly brace followed by a closing curly brace and the first thing I want to do is I want to make the font size big font size is controlled by this attribute this property font dash size font size is a CSS property so there are many CSS properties that we can use that look different so this is just one of them so it's called font size the syntax is as follows your property must be followed by a colon it's a colon, it's not a semicolon this is very important and then the text in pink that is the value so after this value you must have a semicolon the reason for this is you can apply multiple properties so how does the browser know that this is the end of a value and the start of a new value it recognizes the semicolon so sometimes option shift is it still very fade it's like that this better shift alternate shift option shift alternate shift control sorry actually at home i'm a windows user so what we can do is let's set this file save the file already when we refresh you should be very big oh it's not oh cache does anybody else have this problem when you save already then it doesn't show up command shift r if you're on windows control shift r okay so there are potentially there are potentially two issues if you cannot see it the first thing is did you save the file and the second thing is unfortunately when we do the refresh we cannot just do the normal refresh we have to do control shift r or command shift r depending on your operating system so that's why the sky is blue okay so now we have our super big title text which is and what you can do is when you click on start the gaming you'll notice that it didn't affect it didn't affect the H1 on the other page but if you want to try something funny just to make sure that you understand you go to your H1 tag the H1 tag and then you just change the color to anything and please note that because we are Queens English unfortunately we have to use American spelling C-O-R-N-O-U and the fun part about CSS is that for the more common colors like red, blue, green, orange or you can actually type the word instead of the hex code because for more specific color shape you need to use something called hex code just testing and if you save this and you refresh both pages should have green tags so this one is green and if we go back it's also green but let's not make it green it's just to prove a point so let's remove this and save again so that's the difference between how specific we want to be when we are styling our tags so the next the next thing we can do is there is a background in edge for the app so here is where I'm going to introduce another rule um but the back okay this part this part you're just just trying to copy the code I'll explain what's going on okay I'm going to quickly explain this but if you don't understand never mind because it's not entirely crucial but I'm going to do something I'm going to open this this thing called an inspector so as if you continue to build websites you will use this particular function very often is when you right click your browser and you click on inspect it should pop up this window and as you can see what it does it shows you the code of your website and if you're using Chrome the good thing is that when you highlight a particular line it shows you exactly what element that you're pointing to so when I highlight the HTML element the whole thing is blue then like the H1 it highlights it in blue so the orange bits is called a margin and you can see when I highlight HTML the blue part is about the size of the 4 lines that are on the screen but if I want to apply a background image I want it to be the full screen all the way to the bottom I don't want there to be this white space in between so that's the reason why I asked you all to set HTML height to 100% and the body height to 100% so what these rules do is that now that I've saved it it now refers to the full height of the container so now we can start we can put in our background image so we want to apply the background image to the body element so we space down the background property we're going to be using is called background image so maybe the property name is background-image again, specific is dash-image not img so again, a helpful part about this particular text editor if you type a background property that doesn't exist it will not be green so just now i actually thought mistakenly thought it was background img it's actually gray so if you type image and it becomes gray then you know that you type it correctly so for background image the syntax is this we want to tell the browser where to find the image file they want to use for the background image so you just type url then parenthesis so what we you can choose what file you want to use that's inside this image folder so i'm just going to the funny looking one i change sorry i was bad i didn't expect it to look so bad but if any of your friends are using the purple hearts you can laugh at them so this is a dark background so i want to bring everybody's attention to a particular point that happens when we design websites is that for legibility purposes, we really need to consider contrast so this is a very prime example black tags on background is the worst idea on the planet because nobody can read whatever is so what we can do is let's make the tags let's make the tags color light and another concept i want to introduce is the fact what we mean by cascading style sheets so if you notice the hierarchy of the tags on your element if you think of tags as containers we can safely say that all these elements the H1, the P they are wrapped within the body container so how this works is that but in most cases again not all but in most cases a rule that applies to the parent container will so called cascade to all its students so we i'm being lazy i'm going to apply the color property to the body so the H1 and the P inside will all inherit from the parent so i didn't apply anything to the H1 or the P but they also because they inherited from their parent so that's something that's something to take note that if you find that your styles don't behave the way you expect them to you may have this situation where the children have inherited some properties that the parent has this doesn't make sense to you it's not mission critical so we have this if you notice as i mentioned in general most cases the style will inherit from the parent but not all so if you notice the link the A tag it didn't inherit the reason is because the browser when we didn't style anything at all before when the style.css was completely empty you notice that because we use H1 tags we use A tags we use P tags so that element was already bigger and bold as compared to the other elements and the A tag already was already blue and had this underline that's because the browser has a set of default styles it's basically when you declare to the browser that this is a html file because you are a html file i have some styling for you already so that's the reason we declare the html file so browser actually applies some base styles this is a good thing or it could also be a bad thing because sometimes the browser applies styles that we don't want so you will have to overwrite those styles so the browser by default has already set the link color to blue and most of us will be familiar with the fact that links are blue because almost all browsers set it like that but we don't want it to be blue we want it to be actually it's going to look different i should follow this if you want to use the black background i'll change it back to black so i want i want to target this link i want to make it look like the purple button purple button so what i'm going to do is the class is good because you can apply the same class to different elements and the same styles will apply so how is this relevant if you go to the second file that we haven't changed yet which is the play.erb file this is the file with the i'm thinking of a number content you'll notice that the submit button we want to make it look like the purple button also so what we can do is and we'll come back to this page later but you'll find that the class will help us to style the button so you kidnap mine first but what we'll do now is let's give this A element a class called button so once you've done that let's go back to the style.css so we can style the button so each each style property does one thing only so if we look at the target you can see that the background is purple the text is white and when you hover at least color change should i cover this we ignore the color change first but we notice that there is no underline the original one, the text is purple and then there is underline we want to make it white and we want to give it a purple background so these are the things that we want to do and these are the corresponding rules that we should have so let's make the color white first one mistake that i tended to make all the time when i started for text the property name is color for some very weird reason i don't know why my brain is like that i always put text color and then it will be wrong so just something to take more of is color and for the background then you have to use background dash color that's just the way that they name the property so sometimes if you get stuck maybe check your property names sometimes you may use the wrong property this third line the text dash decoration none this is the rule that removes the underline so if you have type these 3 rules and you save it already you should have something that looks a bit like a button so we are almost there you realise the background is hugging the text so what we need to do is we need to give this element some padding ok, before we move on i want to mention this value that i have been using it's called em so an em is a unit of measure it's like pixels px is pixels, cm is centimetre so em is pronounced m it's basically it's a unit of measure and it's if any of you have graphic design background then you know that it's a typographic term that refers to the width of the letter m for that particular font but just think of it as another unit so like one pixel is the width of one pixel so one em is actually the value of the default font size so what i mean by default font size the browser applies a default font size to all text and that default font size is the default font size that the browser gives all text is 16 when you add a h1 for h1 text it's double n which actually translates to 32 so by default for example when you use microsoft word your default text size is either 10 or 12 pixels so for what browsers do, if you don't specify the default is 16 pixels so when i use one em one em refers to 16 pixels so when i put a padding of one em it just means a padding of 16 pixels around the element so there are two ways to add space to your elements one is what we did just now padding there's another property called margin so the difference between padding and margin is that padding whatever the so called amount of padding you add applies to the element itself but when you're using margin it's the distance between itself and other elements so the best way is an example so if you notice it's ready to play and start the game it's a bit too close for my liking so let's add a margin of 1.5 okay i've started explaining as if you can still remember what i said before the break i said that there are two types there are inline elements and there are block elements and one of the quotes is that you cannot margin bottom doesn't work on inline elements and by default a link is an inline element so now because margin only applies to block level elements i have to declare that i want this button to become a block element and i do that using yet another css property called display so if you feel like giving up and throwing your laptop and me i will not blame you but this is another property that we need to use basically i'm declaring that the button element needs to behave like a block why is it called inline block what it does is this might sound confusing it will retain so the browser will treat it like a block meaning it allows it to take up space the width of the container but it also keeps some of its inline properties so if you notice what i type just now when i just type block the element really dutifully took up the entire width of the page but i don't want this i want it to still behave kind of inline-ish this is the most terrible explanation on the planet but when you use inline block it behaves like a block but it also retains some of the original inline properties there's a better explanation for this but just look for me afterwards i'll give you a nice long explanation okay it's closer to what we want already so the target is everything is centre-aligned so again the next thing we can do is because everything is centre-aligned the same thing as when we did the colour just now let's just make everything centre-aligned on the parent or CSS rules use American spelling so it's T-E-R not T-R-E one more thing we can do to make the site pretty is the font is different typography deserves its own workshop so i will actually just start and go on this and play cheat by using google fonts so if you go to google fonts you can pick some other fonts and you can copy directly let's do that let's just all go to google fonts for fonts in general because font files font themselves they don't magically appear each of these fonts contain in files and these files do have a size so the more font files the more fonts that you use it means that your webpage has to load more fonts so if you can imagine if you have a slow connection and then go to a website sometimes you'll see that the text is the font text after you read half way the article you'll be like oh new font so actually that kind of behaviour is a bit jarring and usually it happens number one you're on a slow connection but this also an indication if you use about 6-7 font and you're loading a lot of font files it will slow your whole site down and then your text because if the font file doesn't load the browser will just use the default style first then the moment the style loads apply it and it's a very jolting experience so generally what we suggest is keep it to 1 or 2 3 ish so general guideline for pitting fonts to a certain extent it's a what looks right but a guideline would be to choose if you're going to use 2 fonts or even each other simple way is to choose a font from different type face styles for example the fonts that don't have those series at the end these are sans serif fonts so usually you just pick a serif and pair it with a sans serif font let's not make this graphic design so i'm not going to care i'm not going to judge whatever font if you want to use comic sans go ahead, i will not judge so just pick 2 font that you like or you can just use 1 font that's also fine so how google fonts work is that you just add to collection so then there's a proper at the bottom then you just click on use so you can choose weights so the weights actually each weight each weight is its own font file so if you choose all the weights they actually tell you also this meter go all the way to the weight so in most normal circumstances we only need at most maybe one boat and one italic for the everyone that i choose, i only use one single weight so up to you if you really want to choose all of them you can also choose i'm not going to judge you so the most important part is you copy the code from here so click on the import tab you auto select the whole thing just copy and paste over based on the very very top of your stars.css file so you should look something like this so in my example i choose two fonts if you only pick one font that's fine but take note of the name of the font so i pick two font one is called the the other one is called average so i i use the phala one for my header and i use average for the rest of my text so how do we change the font because the most of general body of my text i want it to use the average font so this is what i do these two rules actually you can copy from google also so you can just copy and paste into your css if you don't know tag one thing to note because i pick the font that had two words in it's name so ideally you want to put them in quotes normally if you don't if you don't put your properties in quotes spaces spaces are not processed spaces are not processed properly so just remember to have the quotes or just copy from google font is the safest so once we have applied our fonts and refresh we should almost be there i'm going to cut for intermission so Sunny can explain why things are not working we sing this can i just talk can everyone hear me at the back about that can you hear me? fantastic okay cool so Huijing is going to hit me for a while 2 minit on stage and i'm already breaking things break everything some of you wait so i don't see what i see here let's turn turn i hope so sorry ya i feel like a moron oh no some of you might see my ass okay so what's happening is that some of you see this all of a sudden how many of you have seen this all of a sudden how many of you are panicking all of you okay cool this means that your server is not running so when you see this what's happening is you as a client can you serve me my web page server says i don't know what you're talking about i can't see you and this is what you get so you need to get your server up and running when you tell the server hey i need my page so let's see how we get that done so one of the things that you guys do is to run your bundle execute ruby dot slash app.rb to start your server so what do you think will happen when i do it now does this look familiar to most of you some of you might not be able to see it so let me just some of you how many of you is this familiar a lot of you i'm assuming maybe some blocking could not locate jam pal or ruby bundle directory right so the issue is it is what it is it's saying i as the terminal take out the terminal as your butler this guy has got a lot of powers so you are telling terminal i need you to tell bundle to execute ruby on this file so now he says i cannot find the damn file you know how do i execute what do i execute on so now we are going to find our way around into fixing this you want to ask terminal where are you and what files do you see to do that i tell terminal list me my files so when i say list it's ls easy to remember ls ccode so it's actually what you would be looking at so i'm just going to try and show it to you the way the computer sees it this is what the computer sees right now you are here and you are asking can you run the execute on app.rb he says i only can see this file i can't see the rest of my files so what can i run so i'll tell you i cannot find it so then you tell okay terminal since you cannot see that file let's go and find that file let's change our directory to change the directory cd brilliant right list is ls, change directory is cd let's go and change our directory so a few tricks that programmers use just to make yourself feel cool some of you will go out and say cd into code most of you will here's the cool one you press c what are the first letters and you press tab and you'll find for you that file it's magical i'm telling you see again point sorry ok so first thing i did was what to say terminal can you find me my files what files are you looking at so next now that you see code let's go into code i cd i type c and then i tab and then you'll say there's code so let's go into code ok now you're in code what do you want to do next what would you want to do next you try and run bundle again what do you think will happen what do you think will happen when i run bundle wait let me just increase the height of this so it comes closer ok so now you're in code and then we run this and again it says 8 i cannot find oh sorry i cannot find so you ask what can you see what would you use listening all my files you'll say oh i can see guess the numbers ok fine let's go in to guess the number so a few times i've been helping some of you here and then you're like damn it guess the number no you don't need to do that you just type gu and then you tab magic ya so you say ok let's go in to guess the number so now what you're going to see right what the computer might see is this all of this so let's see what the computer sees i type ls do you see the app.rb correct so the app.rb is there so now if i tell the terminal can you oh ya this is the other trick what was the code i need to run then you go and you open your browser and then you try and find which tab you don't need to do that because the terminal was programmed by a bunch of lazy people so what you want to do is this press the up arrow or the down arrow and he will remember all your commands ya ok cool things like this now if i press enter what's going to happen magic press enter the application is up in life voila so for the rest of you who face this issue i expect you to be able to do it by yourself now no if you face the issue if you need me to run through it with you guys again let me know so remember it's 2-4 months that you need to understand all has is list whatever i'm looking at cd is to change the directory other than that then you should be fine so just change the directory and find your fault before you run it one last thing let me just close this command we will not show you we will use rrt sorry rr as in the normal terminal ok ah and that's it ok just to dissect what this is doing just so that you guys understand the telling bundled execute ruby on this file and the rb don't always when use this because this has got special meaning this names find this file in my current directory this directory ok anybody unsure unclear of what's happening all good so remember so what is essentially what the computer is going to do right when you do that and you say run this command right and you put top slash it's going to go to top of the file and go down one by one so this has got special meaning so you need to understand when to use it when not to use it you want to use it when you are in the file and you are saying find this file for me then you use this everybody understand ok fantastic ok thank you guys set up and now and now back to your regularly scheduled programming ok so we got this part ready so let's go to the next page so everybody just click start the game so you are moving on to the next page and a lot of things as i mentioned just now because this same css file is loaded for all 3 of the sites so notice there are a lot of things that we did for the first page so like the background image the centralized and the font right it also applies to this this page as well so we don't have to do that the only thing we need to do is that we have to deal with this input and these 2 inputs so now we are done with this but let's open it's inside the views and play.erb so if double click should open and it should look most exactly the same so we have so probably not going to touch the h1 and h2 because they kind of already start so let's focus our attention on this part the form element so the form element essentially as i mentioned is a wrapper input element generally we have label the label tag and the input tag inside in this particular case let's focus in on this input type so this input type number actually corresponds to this input field so this is the default input field without any styling i mean with just the browser's default styling and you'll notice that the input actually is a h1 element that has quite a number of attributes so you can briefly touch on what these attributes are so earlier when i demonstrated more of the attributes is called type and they're quite a number of input types so the most common input type because i'm sure a lot of us when you'll sign up for your github nitrous i can feel a lot of fun right so the most common input input type is actually text so that's all it does you just input text into the field that's all but you also have a more specific type so in this example we're using number so if you try to enter text okay you can see what i'm doing but i'm trying to press a letter no it doesn't work because it's a number field you only access numbers you can try just type something anything if it's not a number it won't appear and all input fields also should have a name name attribute so in most cases the reason why we have form elements is because we want to collect some user input github wanted to collect your name and your email and your password so if you think about it right when i click submit what actually happens it's not that because this form and whatever i'm doing for styling it's for people it's for people to see but if you're a computer you don't really care about how the website looks you only care about the data if i'm the computer supposed to process your information i only care about whatever you field so let's say for example in the github sign up i'm not sure maybe there are 4 or 5 fields but how would i know which data correspond to what field so in a sense the name attribute is a label so it identifies the field so when i give a name called guest number what the server recognizes is that in this field called guest number the value is 21 for example if i put in 21 and i submit so the brand server will be able to recognize that the guest number field had a value of 21 so when you enter first name and your last name and your email the server will recognize oh they were 3 fields depending on what the developers name let's assume they named it first name, last name and email, then they will know that first name was Huizing, last name was Chen email was whateverwhatever.com so that's why we need to have a name attribute in the input field placeholder another attribute that allows you to put in it is very small but let you all look at one screen you will see that the input field has this text called enter guest so the data meaning the text that is inside this gray faded out placeholder text actually comes from this placeholder attribute so if you want to change the text inside the field to something else enter your favorite number you can just change whatever is inside the value of the placeholder field autofocus as you notice for all the other attributes there is a value but autofocus doesn't have a value because autofocus is a particular attribute that doesn't need a value basically what it does it tells the browser when you load when the page loads by default make the field active for example this may not be very evident because there is only one field but in the future if you are building other forms and you have multiple fields maybe you want a particular field to be highlighted the moment that the page loads the cursor to be blinking on that particular field so from a logic perspective you only want to put autofocus on one field if you autofocus many fields i think the default behavior is you take the first one and if you think about it why don't you need autofocus i can just go my mouse click also the same thing but if you think about it for example every other day is injured so imagine if you your wrist got injured and that day you cannot use your mouse so maybe you only want to use your keyboard because your head very pain so if you cannot use your mouse this is a convenience once i load the page that field is already highlighted so i can start typing and then i use tab to move on to the next field it's something we take for granted when everything is well but my perspective on this is all of us right now we are all temporary able people meaning there will come a day that you may be like i mentioned i spray my wrist then you will be disabled for that day or now i am 29 years old but 50 years down the road i am 80 years old and i am blind all of us just temporary able so i think we need to keep in mind when we are designing websites and we are building stuff not everybody can do everything that we can do and we need to keep these people in mind also because we want them to be able to use the same things and if you build something so whatever i mentioned just now it's called accessibility when we build with accessibility it doesn't only benefit people with disabilities for us it also makes the website better so it's actually a plus for everybody if we design with accessibility in mind so anyway moving back here the target that we have in mind is like i mentioned just now why is this so small too small, we don't like this let's make it big so how do we make this as big as this now if you notice there are 2 input fields even though they are different types the browser will still if you apply a style to just the input element the browser will try to apply to both elements so what we want to do is we also want to give this input field so let's i'm lazy at my brain i'm just going to call it guest number actually i've just got quite guest if one day you all really decide you all want to build websites more seriously you'll find yourself be very frustrated with css i personally love css but a lot of people tell me that they hate css but so one of the quotes is that to control guest theoretically you might say you might think okay i'll use what type of property will correspond maybe height yes height will work but they ask how do we put this there are actually multiple properties that can achieve the same effect so let's try using height because the end goal i won't be using height okay if you use height yes we can make input field but when you try to type something the tag size is still really really tiny so it's like we did not really the effect that we are looking for so instead let's think about this font size font size is controlled by font size let's try font size font size is a better idea in this case because what it does is that font size will control the size of the text in whatever you input inside the field and how how html behaves is that generally speaking container will take the height or width of what's inside so we end up having to use the font size which is a bit counter-intuitive instead of height to change the size so again there are a lot of things that you will get used to experience really helps in this kind of situation but if you are first starting out then you will feel like throw your laptop out of the window so now we have the same issue as when we first started whereby yes, the next element is in line with it so we want to fix that so the original button was an A element it was a link but in the second page is now an input so again input type submit is another type of input and the browser applies some default styles to the input type to make it look like a button is what we want to override so instead of typing everything again what we are going to do is we are going to give this submit input the same class that we gave the button in the first page so just give class button be fair so this is why I say using a class is helpful is because if you have written the rules once this button or this set of 6 rules you can reuse these styles again in other elements by just giving them that same class so that is helpful so input again by default is an in line element so let's make gas block element you may not be confusing but it may make a bit more sense if I show you so now that I made it a block element it beautifully takes up the entire width of the container but we want it we want it to be center align so the technique that we use to make block element center align is to use we call it the margin technique because margin is the margin padding properties that take in length values so 1 unit of measure so for padding I didn't mention this just now so I mention it now padding alone by default will take all 4 bottom left and right if I only use padding it applies to all 4 sides if you notice for margin I actually explicitly say margin bottom so then this 1.5 em only applied to the bottom so what you can do in CSS is that for padding there is something called a short hand so let's say I want the top and bottom to be 1 em but left and right I can write it like this this short hand there is a lot of combinations because you can actually enter 3 values and how it works is that this actually means that top is 1 em left and right is 2 em bottom is 0.5 em so there are 4 sides what this means is is red top, right, bottom, left clockwise direction but to be honest this took me forever to catch because when I started out then I used to copy and paste other people's code so I just copy and paste other people would write put in 3 values also funny one so eventually one day, one fine day you will get it but if you are confused now that is perfectly normal so going back to this I mentioned the so called center align margin trick margin not only can take explicit values it can also take this value called auto so what we do if you want to centralize block level element what this does means that so if it is a 2 value the first value applies to top bottom the second value applies to left right so when I put margin 0 auto it just means that top bottom no margin but left and right auto margin and when you apply auto margin the person distributes the amount of space on the left and the right of that element so this is the trick it's not a trick it's a technique that we use to centralize block level element so if you notice that maybe setting 0 for the margin bottom so what we can do is let's give it the same amount of margin as the first button first page so one more thing you will notice is that your button kind of looks a bit smaller than the original if you press back the button was bigger again this is simply because the browser has some default styles on all the different elements and for input type submit the browser has actually explicitly set the font size to be 10 so it's much smaller so what we can do is 16 pixels or we can also use another property which is called inherit so it does what it means basically what it does is it will inherit the size of its parent and because the default size for html documents that the browser applies 16 pixels when you put font size inherit and because we didn't explicitly say it will just take the default as 16 the reason why we use inherit instead of explicitly putting a font size is we are going to make use of the property of css in that child elements can inherit the properties that its parent has so a benefit is that i don't want the default size to be 16 because my mother want to play this game my mother cannot read 16 pixels i want to make the text 22 pixels so if i change the base font size to something larger all the text will grow accordingly that's the benefit of using m's because m is a relative unit what i mean relative unit so when i started out and i said the default font size was 16 pixels and 1m correspond 16 pixels that's what i mean everything is relative to that default font size so when i said the title to font size 5m that means its 80 and then if i said something to font size 2m is 32 now when i change the base font size to 22 everything in the same ratio so now its 110 and whatever 2m was 44 so that's the advantage in that if you actually say 60 pixels and maybe this one you say put 30 pixels and when you change the base font size you have to actually go to each individual and change font size manually so a bit tedious so if you want everything to grow scale together that's the benefit of using relative units so when you do font size inherit same concept so when i explicitly say font size inherit it will inherit the default font size by overriding because i said the default font the default size that the browser gives it was 10 so i already overwrite this file by saying font size inherit you take cancel the 10 take whatever size the parent is so same concept when i change upstairs everything just change automatically so that's a and as you go along you will realise that some properties have different values and this kind of thing again i say its an experience thing you cannot possibly expect to memorize all of this the only reason i can write i can type all this from memories people actually pay me to do this most of you probably don't get paid so you definitely not expected to memorize always google your friend so the last page the very last page that you want to style is if you guess currently page i'm not very good at ruby so i don't know how to hack this to get to that page by automatic so what i did when i tried this myself is i actually literally had to play the game so maybe all can try playing the game and try to get the correct number because i don't have a good idea i don't have a good solution for this so i actually got to play this game i'm sorry i don't have a good idea or on the plus side you can verify that the code engine works why is this a game finally win you will get to this screen this is the win screen so the content in the win screen corresponds to the win.erb file so again it will look very familiar looks almost exactly the same as the previous two files and the content is just different so again it also have h1 and h2 elements and p elements that's why the styling is already there the only difference is that if you won the game after clicking i click 6x that was such a big effort you don't want to give people just this plain text let's give them an image so what we are going to do is we are going to add an image to the file so the image is image is going to be a html element so it's not css so we will be editing the win.erb file so how do we add images to our website we use the image tag okay now image tag is not i m a g e i m g so it's another potential typo candidate but if your image doesn't show up maybe check that so the image has the image also has its own set of properties like just now i mention the input type had like name and stuff so the image also have its own property the important part for an image element is where is that image file the browser needs to know where the image file is so the key property is source but it's spelled src not s-o-u-r-c-e something to take note of so because we already prepared the images for you is in the same file as the background images so you just reference it it's called trophy.svg but one other very important attribute that all images need to have is this attribute called what's happening okay everybody somebody has taught me how to bypass the game so everybody go to app.rb file down to line 55 you're probably squareed so what you need so what you need do is just now it looks the original file look something like this please highlight from line 55 until line 59 so it should be a slightly different colour Dan jika anda berada di MacPres Hold Command dan Backslash, yang adalah pilihan yang mempunyai jawapan. Jika anda berada di Windows, menggunakan Control. Hold Control, Backslash. Ia sepatutnya menggunakan semua karakter hash. Anda mahu menggunakan karakter 1x1 juga boleh. Kemudian, keadaan 56, yang berkata ERB colon green, mengubah hash seperti ini. Jadi, anda akan mempunyai 4 keadaan dan 1 karakter. Anda hanya mengubah keadaan. Biar saya tidak memperkenalkan semua perkara. Jika anda memperkenalkan keadaan, pembantu anda akan membuat ini. Jadi, jika anda memperkenalkan, bantuan anda akan membuang lebihhip. Semua perkara itu sudah terakhir. Saya percaya ia sudah berakhir. Saya akan melakukannya ke pek-pek. Anda dapat lihat perkara ini di atas saya? Saya minta maaf untuk orang yang boleh bermula, tetapi saya akan memperkenalkan sebabnya masa saya berkerja. Saya akan kembali di sini. Perkembalan pek-pek seperti itu. Kadang-kadang jika anda melihat keadaan, anda akan mengingatkan bahwa beberapa pekerjaan bergantian. Jadi jika anda tidak mempunyai pakaian tersebut, semua pakaian anda akan mempunyai pakaian ini. Dan itu tidak begitu bagus. Kerana jika ia tidak menyebabkan untuk menyebabkan informasi penting di file image, tetapi anda mahu... Jadi untuk orang untuk pakaian yang tidak menyebabkan, anda masih mahu beritahu pakaian anda apa pakaian itu. Jadi mungkin anda boleh menggunakan pakaian sendiri untuk menyebabkan apa yang pakaian itu akan berlaku. Seharusnya hanya menyebabkan mereka di tempat panas. Jadi dalam instan ini, saya akan menyebabkan pakaian sebagai pakaian. Jadi dalam pakaian yang tidak menyebabkan pakaian saya, pakaian akan mempunyai sebuah pakaian di sini. Dan kemudian anda boleh menyebabkan apa yang pakaian itu menyebabkan dan membuat anda gembira. Jadi itu penting untuk pakaian. Tetapi dengan semua pakaian yang lain di HTML, anda juga boleh menggunakan pakaian untuk pakaian. supaya anda boleh menggunakan pakaian. Kerana anda juga boleh menggunakan pakaian. Jadi mari kita menyebabkan pakaian yang dipanggil Trophy dulu. Kerana kita akan mempunyai pakaian untuk Trophy. Okey, mari kita menyebabkan dulu dan lihat bagaimana ia nampak. Okey, ia sedikit besar. Ia sedikit terlalu besar. Jadi ini adalah sebabnya kita menyebabkan pakaian. Jadi kita boleh menyebabkan dan membuatnya lebih besar. Jadi saya katakan. Okey, jadi apa yang kita nak buat adalah kita mahu menyebabkan pakaian Trophy. Jadi anda... Okey, itu bukan apa yang anda maksudkan. Jadi mempunyai apa yang anda mahu, anda boleh menyebabkan pakaian yang biasa. Mungkin 400 pakaian, 200 pakaian. 500 pakaian atau apa-apa pakaian. Jadi menyebabkan pakaian. Jadi untuk membuatnya lebih besar. Baiklah jika anda menyebabkan pakaian ini kerana ia sebuah pakaian. Jadi... Ya, jadi jika saya katakan ke 400 pakaian, ia akan berada di sini. Anda boleh membuatnya lebih kecil, membuatnya lebih besar kepada anda. Tak penting. Jadi sekarang ini nampak lebih besar. Dan akhirnya, perkara yang terakhir, saya harap ini sudah terakhir, adalah pakaian lagi. Jadi lagi ini hanya pakaian. Jadi pakaian ini adalah... Anda hanya perlu menyebabkan pakaian. Hanya menyebabkan pakaian ke D. Ya, itu saja. Jadi idealnya anda harus mempunyai nampak ini. Ya, jadi baik-baik saja, ini adalah tentang nampak pekerjaan. Dan semoga semua anda berhasil mencapai nampak ini. Dan pergi. Jelaskan apa yang ia. Dispelik. Oh, oh, oh, oh, sorry, sorry. Ini adalah pakaian. Jadi... Jika saya menyebabkan gila dan hewak juga? Mereka perlu menyebabkan pakaian. Saya tak tahu. Pakaian ini... Pakaian ini adalah pakaian saya. Saya menyebabkan pakaian dan pakaian. Sebenarnya, tidak boleh. Kita hanya menyebabkan dan menyebabkan. Tapi mereka nak pergi ke rumah. Saya rasa saya sudah pergi. Mereka nak pergi ke rumah. Pakaian yang terakhir. Hai. Hanya sebuah pakaian. Jadi sekarang anda sudah mempunyai... ...pakaian yang sangat cantik. Pakaian yang terakhir adalah menyebabkan di internet. Tapi sudah ada lima. Kita mungkin mengenai sekitar 15 minit. 15 minit. Mungkin lebih lama. Mungkin 20 minit. 25 minit. Mungkin 30 minit. Jadi berapa banyak orang akan mencabar... ...dan menyebabkan di internet? Okey, kita akan melakukannya. Jadi, ia bukan kompausasi. Jadi, apa yang akan kita lakukan? Mari kita lakukannya. Kita akan menyebabkan ini selama setengah jam... ...untuk mencuba bagaimana... ...bagaimana anda menyebabkan gila... ...dan bagaimana anda menyebabkan... ...bagaimana anda menyebabkan Giroku. Jadi ini sangat opsi. Jika anda ada sesuatu untuk menghubungi... ...kehubungi, sesuatu yang ditutupkan. Jadi anda dapat selalu mencubungi. Ia harus dilakukan oleh... ...Monday 9. Okey? Okey, mari kita lakukannya. Teruskan. Okey. Saya sangat mahu menghubungi masa. Tapi jika anda boleh kembali... ...awak boleh menyebabkan... ...pakaian yang terakhir. Jadi, terus menyebabkan gila... ...untuk menyebabkan gila. Ini adalah jelasan. Lepas-lepas. Lepas ke panel 5. Jadi ini adalah... ...pada bagi pakaian yang terakhir, ...awak mahu anda memikirkan... ...tapi saya akan mencubung. Tunggu. Okey, untuk begini kita perlu menggunakan termina. Jadi, saya akan menunjukkan... ...saya sangat mahu menggunakan kode yang bagus... ...dan selesai dan selesai. Jadi sekarang kita akan mengubah ke termina. Jadi anda perlu... ...awak perlu menggunakan kode yang terakhir... ...untuk menggunakan termina. Jadi anda patut melihat... ...pakaian yang terakhir, ...git colon master. Jadi, jika anda... ...apa yang anda boleh lakukan... ...konseh git itu... ...saya menyebabkan... ...awak ada tempat untuk anda... ...untuk menyebabkan... ...pakaian yang terakhir. Jadi... ...saya memikirkan... ...pakaian yang di tempat kerja anda... ...dan kemudian... ...pakaian yang terakhir di github. Dan kemudian ada tempat intermediari... ...pakaian yang terkenal... ...pakaian yang terkenal... ...yang... ...masukkan... ...masukkan... ...pakaian yang di tempat kerja anda... ...tapi di tempat kerja... ...pakaian yang terakhir untuk kode anda. Jadi, apa yang anda perlu lakukan... ...awak boleh menggunakan git... ...pakaian yang terakhir. Untuk menunjukkan tempat baru anda... ...pakaian yang terakhir. Dan kemudian, anda hanya perlu mendengar... ...kita... ...masukkan git saya yang terkenal... ...kita sudah bersedia. Jadi, gitar saya sudah membuat... ...pakaian yang terkenal. Jadi, apa yang anda perlu lakukan... ...awak boleh menggunakan git anda. Dahulu anda ada gitar yang tidak bernasang. Rippo tidak boleh menggunakan gitar... ...tapi anda tidak memulakan gitar... ...saya menyebabkan... ...yang yang diperbaiki adalah... All the files that we work on into this area called staging area. So, what I packed in my browser just now, I packed something called git status. What it does is it shows all the... It will show, it will identify that we modified these five files. Of course, this is the five files that we touched in for today. All these other files, these bundled files, they are back-end-related files. Just pretend that they don't exist. So, what I need y'all to do is, and this part, try not to be confused, but can y'all navigate to the file browser section, right? Under guess the number Sinatra, y'all right-click. Right-click, and then click on new file. So, then there's going to be an input box that shows up, right? Y'all tag in dot g-i-t-i-g-n-o-r-e. Git ignore. Oh my God, my spelling card. Git ignore. Then press enter. Okay, where's my file? Hey, nitrous cannot show hidden system files. So, I cannot get ignore the bundle. No, of course, the bundle also cannot commit. It doesn't matter. Okay, after discussion with my friend, let's skip this part. Ignore everything that I just said. So, just now y'all tag git-add-full-stock, ready, right? Okay, after y'all tag git-dash-full-stock, what we did is that we put all our files into this staging section. So, the next part is we want to push all these files from this staging section into the GitHub account that y'all created. So, what we need to do is that we need to write a commit message. What is a commit message? Every time we make a commit, we want to sort of be able to identify this commit. So, a commit message is like a label. A label that this is what I did to the files. So, for example, the commit message for this particular commit that we're going to be doing is called add styling to test the number add. Because in future, if you modify the add again and then you commit again, you probably want to give it a description like maybe minor fix, change title color to blue or something like that. So, it sort of identifies. Because the handle git works is that you can actually step forward and step back because each commit is a snapshot of how your project was at that particular time when you made the commit. So, for example, after I made some changes then I committed as, oh, no, no, no. The first version was my favorite version. You can actually revert back to that version. But if you don't name your commit, if you don't label your commit messages correctly, for example, I've worked in projects where I've seen a consecutive six messages that say, fix, fix, fix, fix. And I didn't know which commit did what. It was a bit irritating. So, it's not so much. I know that you're maybe doing this for yourself. But future you will score, present you if you don't label it properly. So, let's not do that. So, let's just write sensible commit messages. So, if you all can, copy and paste or you want to type your whole thing is git commit bash small letter m and whatever message you want inside double quotes. So, you can, you can copy this verbatim git commit dash m then add styling to guess the number app and then just press and pull. So, you should see something like this create mode, blah, blah, blah, blah. So, now that it's committed, you need to push the files to the... So, you think of it as your files are trying to cross the custom. When you commit, it's just like it's at the custom and then you'll chop password already. So, now you need to go across across to Malaysia and go home. So, the last command that you need to do is push origin master. So, it just means you know push your files to the master branch that is upstairs. So, if you if you all are there just like the four words git push origin master enter. So, right now what this would have done is this would have committed your files that you all worked on today to your github repository. So, if you go to github and you navigate you should be able to see something has changed on your own site. So, you should be able to see your commit message on your github on your github repo page. You should be able to see whatever you type in as the github repo. So, for example in my own project I actually committed multiple times so I have like different commit messages. So, if all went well and you go to your github repository you should be able to see this. So, if you are interested and you can click on commits to see that oh, this is what all the commits that happened on your project. So, in the github but there is also a hero group part I am going to hold on the hero group part. You actually just add all the files in your file. Sometimes because this is like the first time you call is initial commit. So, for shortcut just add all but moving forward let's say you only change like one file you can just specify or just give a commit the change to this particular file. Or maybe sometimes a real-world use case is there. Because your project got many files and then maybe I did one file but I have worked in progress in other files. So, those work in progress I don't want to commit yet. I only want to commit the one computer one. Then I can just specify that file next step. I have remedial japan. So, In the past, if you want to go to school you can do it like this. But if you want to go to school you can do it like this. If you want to go to school you can do it like this. I can't be a terrible student. I have a shitty student. If I see my sister and say, I will whack you. Oh my god. So, you can teach kids. I go to school to sleep. Liberally. I just sleep. Then we say we can't go and play more. Then sleep. After school, we go and play more. So basically, if we play, I just sleep. Then I tell myself I cannot be teacher because kama is real. That's why if I'm teacher all I say is to me. I didn't sleep during your class in the previous class when I was first time. I didn't sleep. Oh, you know I don't got bigger for sleep. So, never mind. I think somebody fell asleep. Jebus. Jebus fell asleep. No, no, no. Ya, that's why. Many people actually followed the on Jiruku section in the instructions which many people actually followed the instructions already. Okay, most of you, right? So, if most of you followed the instructions here when you you all have Jiruku open if not just go there. So, on your dashboard, right? You should already have an app. If you go to the app deploy so it's like the third option. So ideally, you all would have selected the deployment method to be GitHub. So, there should be GitHub connected with a vintage and it should be connected to your GitHub repository. So, if this is not the case you all ask the assistant coach Rokai and help here, help there. So, then okay, automatically. Go to the last part which says manual deploy. So, you'll see deploy your GitHub branch, right? So, you just you all should only have one branch. I got a lot of branches because I was playing around the other day. You all should just be master. So, just select master already. Then click on deploy branch. So, you should see something popped up and then there will be things running. So, ideally if all is well there should be a button that says open app or launch app or view app or something, something, something app. So, just click the button and if all is well you should see what you build. Oh, it's not well. Let me know. So, the URL that because Hiroku is free, right? So, there are certain limitations one of which is that all your URLs will have Hiroku app behind them. But because they are offering this service for free let's not complain and just appreciate the freeness. So, if all is well this website that this app that you have just built is live. So, this link you can use your phone to access to work because it's live on the internet. All of you so, there's probably 50 copies of the exact same app on the internet right now. Potentially different fonts Potentially different background image. So, just one more thing I want to share is that whatever I cover today is pretty basic so, it's some basic CSS and some basic HTML that you can use to make a plain website look pretty. But CSS actually can do a lot more things. So, there's this the same version of the app that I worked on before this is because with CSS I can do things that I can make the background change color. I can make the button so, I can make the button I can skill the text I can make the text I can sing it. There are a lot of things that we can do with CSS like the button we can actually style the button to actually behave like a button so, if you press the button it will be depressed that kind of thing so, all this can be done with CSS also. So, ya so, hopefully you are interested can continue on and find out more and I hope today was beneficial to everybody. Ya Oh, Goy knows one Goy knows one Come to the real end of the workshop Feel free to stay just to figure out the kings with Gita and also Hero pool we have the space to actually actually as we want so, but not too late so, the applications for the boot camp will open tomorrow to night or tomorrow and will last all the way to 2nd of September some housekeeping things like if you have trash please throw them outside not in the trash bin inside the room what now we are going to do is we are going to take a group photo so everybody stand up and let's go