Dasar-dasar tata letak modern - kursus gratis dari Hexlet, pelatihan 9 jam, Tanggal: 5 Desember 2023.
Miscellanea / / December 06, 2023
Anda akan mempelajari lebih lanjut tentang markup HTML dan kemampuan standar HTML5 modern. Anda juga akan memperoleh pengetahuan dasar tentang penataan gaya menggunakan CSS: pelajari cara menghubungkan gaya, menggunakan penyeleksi, dan bekerja dengan cascading. Selain HTML dan CSS, Anda akan belajar cara bekerja dengan alat debugging tata letak bawaan browser, khususnya Google Chrome DevTools. Hasilnya, Anda akan mempelajari cara menggunakan bahasa markup HTML untuk menata teks di situs web, dan juga memahami aturan dasar penggunaan CSS dan gaya teks.
Anda akan dapat segera mempraktikkan keterampilan baru Anda - kami akan mempelajari editor tata letak dan plugin untuk keterampilan tersebut. Di akhir setiap pelajaran Anda akan menemukan tugas-tugas kecil mandiri. Panduan ini ditujukan untuk pemahaman yang lebih praktis tentang topik yang dibahas, dan oleh karena itu sangat direkomendasikan untuk diterapkan.
Dasar-dasar tata letak akan berguna jika Anda memutuskan untuk mempelajari pengembangan web, apa pun arahnya. Pengetahuan dari kursus ini membantu programmer menandai data dan menampilkannya di situs. Kursus ini cocok untuk pemula dan developer yang belum pernah ditemui
Perkenalan
Kursus “Dasar-Dasar Tata Letak Modern” merupakan dasar untuk mempelajari dasar-dasar tata letak situs web HTML dan CSS. Dalam pelajaran ini kita akan berbicara secara singkat tentang apa yang kita pelajari dalam kursus ini dan bagaimana pengetahuan ini dapat diterapkan dalam praktik.
Pengantar HTML
Pelajaran ini dikhususkan untuk tata letak HTML dari awal. Kami berbicara tentang peran atribut dan mempelajari skema umum untuk mendeskripsikan tag HTML.
Model blok
Elemen manakah yang bertanggung jawab atas bingkai halaman, dan elemen mana yang membantu dalam proses penataan gaya atau penambahan bagian fungsional? Mari berkenalan dengan elemen HTML blok dan sebaris serta mempelajari pengaruh gaya pada lebar akhir elemen.
HTML semantik
Tujuan utama dari setiap tata letak HTML adalah untuk menyampaikan arti dari blok. Dalam pelajaran ini, kita akan mengeksplorasi kemampuan semantik standar HTML5 terbaru dan mempelajari aksesibilitas web.
Struktur dasar dokumen HTML
Setiap dokumen HTML memiliki struktur dasar yang terdiri dari tag dan elemen layanan. Browser membutuhkannya untuk menampilkan informasi dengan benar. Dalam pelajaran ini kita akan melihat setiap baris struktur ini.
Dasar-dasar CSS
Bahasa CSS diciptakan untuk desain visual halaman web. Kami mempelajari kemampuan dasar bahasa tersebut, mencari tahu cara menggunakannya bersama dengan HTML. Kita belajar memasukkan file CSS dan mengenal tipe dasar selector.
Bertingkat dalam CSS
Apa itu cascading dan bagaimana cara kerjanya di CSS? Pelajaran ini dikhususkan untuk perbedaan prioritas pemilih dan kemampuan untuk menggunakannya dalam proyek Anda.
Alat Pengembang Chrome
Saat membuat situs web, penting untuk menemukan kesalahan tepat waktu atau memahami cara mengonversi blok yang kita perlukan dengan benar. Sebelumnya, hal ini dilakukan terutama dengan tangan. Saat ini browser modern memiliki fungsi pemeriksa web. Mari kita pertimbangkan kemampuan salah satunya - Chrome DevTools.
Editor kode
Untuk menyimpan pekerjaan Anda, Anda memerlukan editor kode. Dalam pelajaran ini kita akan melihat cara menginstal Visual Studio Code. Ini adalah alat yang ampuh yang dapat digunakan tidak hanya untuk tata letak, tetapi juga untuk pemrograman dalam bahasa apa pun.
Semut
Mari pelajari salah satu plugin paling berguna untuk desainer tata letak - Emmet. Ini akan mempercepat markup kode HTML dan menghapus sebagian besar langkah rutin.
Publikasi di Internet
Untuk menempatkan proyek di Internet, Anda perlu menggunakan hosting - server khusus yang akan menyimpan file dan menyediakan akses ke file tersebut melalui nama domain. Dalam tutorial ini kita akan melihat hosting GitHub gratis.
Editor grafis
Ada beberapa editor besar di pasar. Beberapa di antaranya khusus hanya untuk satu sistem operasi, yang lain dapat diinstal pada salah satu sistem operasi tersebut. Di bagian ini, mari kita lihat langkah-langkah utama ketika seorang desainer tata letak bekerja dengan editor online Figma.
Pekerjaan mandiri
Tugas tambahan yang memungkinkan Anda mengkonsolidasikan teori yang diperoleh
Bahan tambahan
Artikel dan video dikurasi oleh tim Hexlet. Akan membantu Anda mendalami topik kursus lebih dalam