CSS Grid memberi Anda kendali atas baris dan kolom desain halaman web Anda.
Dalam kursus ini, Anda akan membuat artikel majalah. Anda akan mempelajari cara menggunakan CSS Grid, termasuk konsep seperti baris grid dan kolom grid.
Mulailah dengan boilerplate HTML standar Anda. Tambahkan deklarasi DOCTYPE, elemen html yang menentukan halaman ini dalam bahasa Inggris, elemen kepala, dan elemen tubuh.
Tambahkan tag <meta> dengan charset yang sesuai dan tag <meta> untuk respons seluler di dalam elemen kepala.
Tambahkan elemen judul dengan Majalah teks, elemen tautan untuk https://fonts.googleapis.com/css?family=Anton%7CBaskervville%7CRaleway&display=swap lembar gaya font, tautan untuk https://use.fontawesome. com/releases/v5.8.2/css/all.css FontAwesome stylesheet, dan link untuk stylesheet ./styles.css Anda.
Lembar gaya font Anda akan memuat tiga font terpisah: Anton, Baskervville, dan Raleway.
Di dalam tubuh Anda, buat elemen utama. Kemudian di elemen itu, buat bagian dengan class yang disetel ke heading.
Langkah 4
Di dalam elemen .heading Anda, buat elemen tajuk dengan set kelas ke hero.
Dalam elemen tersebut, buat elemen img dengan src disetel ke https://cdn.freecodecamp.org/platform/universal/fcc_meta_1920X1080-indigo.png, alt disetel ke logo freecodecamp, dan kelas disetel ke hero-img.
Atribut pemuatan pada elemen img dapat diatur ke lazy untuk memberi tahu browser agar tidak mengambil sumber daya gambar hingga diperlukan (seperti saat pengguna menggulir gambar ke tampilan). Sebagai manfaat tambahan, elemen yang dimuat lambat tidak akan dimuat hingga elemen yang tidak malas dimuat - ini berarti pengguna dengan koneksi internet lambat dapat melihat konten halaman Anda tanpa harus menunggu gambar dimuat.
Berikan elemen img baru Anda atribut pemuatan yang disetel ke lazy.
Langkah 5
Setelah elemen img Anda, tambahkan elemen h1 dengan kelas diatur ke judul-pahlawan dan teks diatur ke KURIKULUM BARU KAMI, diikuti oleh elemen p dengan kelas diatur ke subtitle-pahlawan dan teks diatur ke Upaya kami untuk merestrukturisasi kurikulum kami dengan fokus yang lebih berbasis proyek.
Gambar Anda saat ini memakan banyak ruang. Untuk melihat dengan lebih baik apa yang sedang Anda kerjakan, tambahkan atribut lebar ke elemen img, dengan nilai 400.
Anda akan menghapus ini nanti ketika Anda telah mengerjakan CSS.
Langkah 7
Setelah elemen tajuk Anda, buat div dengan set kelas ke penulis.
Di dalam div itu, buat elemen p dengan kelas yang disetel ke nama penulis dan berikan teks By freeCodeCamp. Bungkus bagian freeCodeCamp dalam elemen a dengan href disetel ke https://freecodecamp.org, dan target disetel ke _blank.
Di bawahnya, tambahkan elemen p kedua dengan tanggal publikasi kelas dan teks 7 Maret 2019.
Header HTTP Referer berisi informasi tentang alamat atau URL halaman yang mungkin dikunjungi pengguna. Informasi ini dapat digunakan dalam analitik untuk melacak berapa banyak pengguna dari halaman Anda yang mengunjungi freecodecamp.org, misalnya. Menyetel atribut rel ke noreferrer menghilangkan informasi ini dari permintaan HTTP. Berikan elemen a Anda atribut rel yang disetel ke noreferrer.
Langkah 9
Di bawah elemen .author Anda, buat elemen div baru dengan class social-icons.
Tambahkan lima elemen a di dalam div baru itu, dan beri mereka atribut href berikut.
Elemen a pertama harus memiliki href yang disetel ke https://www.facebook.com/freecodecamp.
Elemen a kedua harus memiliki href yang disetel ke https://twitter.com/freecodecamp.
Elemen a ketiga harus memiliki href yang disetel ke https://instagram.com/freecodecamp.
Elemen a keempat harus memiliki href yang disetel ke https://www.linkedin.com/school/free-code-camp.
Elemen a kelima harus memiliki href yang disetel ke https://www.youtube.com/freecodecamp.
Langkah 11
Di bawah elemen .heading Anda, buat elemen bagian baru dengan kelas diatur ke teks. Di dalamnya, buat elemen p dengan kelas diatur ke paragraf pertama dan teks berikut:
Buat elemen p lain di bawah elemen .first-paragraph Anda, dan berikan teks berikut:
Tambahkan elemen p ketiga di akhir elemen .text Anda,
Setelah tiga elemen p di dalam elemen .text Anda,
Beri elemen .quote pada teks Seluruh kurikulum harus
Langkah 15
Di bawah elemen blockquote Anda, tambahkan elemen p lainnya dengan teks berikut:
Buat elemen p kelima di akhir elemen .text Anda, dan berikan teks berikut:
Buat satu elemen p terakhir di akhir elemen .
Di bawah elemen .text Anda,
Di dalam elemen artikel Anda, buat elemen h3 dengan kelas
Langkah 20
Di dalam elemen ul Anda, buat enam elemen li. Tambahkan elemen h4 dengan set kelas ke subtitel daftar dan elemen p ke setiap elemen li Anda.
Kemudian beri elemen h4 dan p konten teks berikut, secara berurutan, dengan masing-masing h4 menggunakan apa yang ada di sisi kiri titik dua, dan setiap p menggunakan apa yang ada di kanan:
Langkah 21
Di dalam elemen samping Anda, buat dua elemen img, elemen blockquote, dan elemen img ketiga. Berikan elemen blockquote set kelas ke image-quote.
Di dalam elemen .image-wrapper, berikan elemen img pertama Anda sebuah src dari https://cdn.freecodecamp.org/testable-projects-fcc/images/random-quote-machine.png, sebuah alt gambar dari mesin kutipan proyek, kelas gambar-1, atribut pemuatan disetel ke malas, atribut lebar 600, dan atribut tinggi 400.
Langkah 23
Di dalam elemen .image-wrapper Anda, beri elemen img kedua sebuah src dari https://cdn.freecodecamp.org/testable-projects-fcc/images/calc.png, alt gambar proyek kalkulator, atribut pemuatan atur ke malas, kelas atur ke gambar-2, atribut lebar atur ke 400, dan atribut tinggi atur ke 400.
Di dalam elemen .image-wrapper Anda, berikan elemen img ketiga Anda sebuah src dari https://cdn.freecodecamp.org/testable-projects-fcc/images/survey-form-background.jpeg, alt dari empat orang yang mengerjakan kode , atribut pemuatan malas, kelas disetel ke gambar-3, atribut lebar disetel ke 600, dan atribut tinggi disetel ke 400.
Langkah 25
Di dalam elemen .image-quote Anda, buat elemen hr, elemen p, dan elemen hr kedua. Berikan elemen p satu set kelas untuk mengutip dan teks Jutaan orang yang belajar kode melalui freeCodeCamp akan memiliki sumber daya yang lebih baik untuk membantu mereka mempelajari dasar-dasar ini.
Langkah 26
Untuk memulai CSS Anda, normalkan aturan CSS dengan menargetkan semua elemen dengan *, termasuk pemilih semu ::before dan ::after.
Atur properti padding dan margin keduanya ke 0 dan atur properti box-sizing ke border-box.
Langkah 27
Buat pemilih html dan berikan properti ukuran font yang disetel ke 62,5%. Ini akan mengatur ukuran font default untuk halaman web Anda menjadi 10px (default browser adalah 16px).
Ini akan memudahkan Anda untuk bekerja dengan unit rem nanti, karena 2rem akan menjadi 20px.
Buat pemilih tubuh. Setel properti font-family ke Baskervville, dengan fallback serif. Setel properti warna ke linen dan properti warna latar belakang ke rgb(20, 30, 40).
Langkah 29
Buat pemilih h1, dan atur properti font-family ke Anton dengan fallback sans-serif.
Langkah 30
Buat pemilih h2, h3, h4, h5, h6. Berikan properti font-family yang diatur ke Raleway dengan fallback sans-serif.
Buat pemilih, dan berikan properti dekorasi teks yang disetel ke none dan properti warna disetel ke linen.
Langkah 32
Sekarang Anda siap untuk mulai menyusun tata letak kisi. CSS Grid menawarkan tata letak berbasis kisi dua dimensi, memungkinkan Anda memusatkan item secara horizontal dan vertikal sambil tetap mempertahankan kontrol untuk melakukan hal-hal seperti elemen tumpang tindih.
Mulailah dengan membuat pemilih utama dan memberinya properti tampilan yang disetel ke kisi.
Sekarang Anda dapat menata tata letak kisi Anda. CSS Grid mirip dengan Flexbox karena memiliki properti khusus untuk elemen induk dan anak.
Dalam hal ini, elemen induk Anda adalah elemen utama. Atur konten agar memiliki tata letak tiga kolom dengan menambahkan properti grid-template-columns dengan nilai 1fr 94rem 1fr. Ini akan membuat tiga kolom dengan lebar kolom tengah 94rem, dan kolom pertama dan terakhir sama-sama 1 fraksi dari ruang yang tersisa di wadah kisi.
Langkah 34
Gunakan fungsi minmax untuk membuat kolom Anda responsif di perangkat apa pun. Fungsi minmax membutuhkan dua argumen, yang pertama adalah nilai minimum dan yang kedua adalah maksimum. Nilai ini bisa berupa panjang, persentase, fr, atau bahkan kata kunci seperti konten maksimal.
Bungkus setiap nilai properti grid-template-columns yang sudah Anda tentukan dalam fungsi minmax, gunakan setiap nilai sebagai argumen kedua. Argumen pertama masing-masing harus 2rem, min-content, dan 2rem.
Untuk menambahkan spasi antar baris dalam tata letak kisi, Anda dapat menggunakan properti celah baris. Berikan pemilih utama properti celah baris 3rem.
Langkah 36
Majalah Anda akan memiliki tiga bagian utama. Anda telah menetapkan tata letak keseluruhan di aturan utama, tetapi Anda dapat menyesuaikan penempatan di aturan turunan.
Salah satu opsi adalah properti grid-column, yang merupakan singkatan dari grid-column-start dan grid-column-end. Properti grid-column memberi tahu item grid garis grid mana yang akan dimulai dan diakhiri.
Buat aturan .heading dan atur properti grid-column ke 2 / 3. Ini akan memberi tahu elemen .heading untuk memulai dari garis grid 2 dan berakhir di garis grid 3.
Buat pemilih .text dan berikan properti grid-column yang disetel ke 2/3.
Langkah 38
Untuk kontrol tambahan atas tata letak konten Anda, Anda dapat memiliki Kotak CSS di dalam Kotak CSS.
Setel properti tampilan pemilih .heading Anda ke kisi.
Langkah 39
Sekarang Anda dapat menata konten elemen .heading dengan CSS Grid.
Fungsi CSS repeat() digunakan untuk mengulang nilai, daripada menuliskannya secara manual, dan berguna untuk tata letak kisi. Misalnya, menyetel properti grid-template-columns menjadi repeat(20, 200px) akan membuat 20 kolom dengan lebar masing-masing 200px.
Berikan elemen .heading Anda set properti grid-template-columns ke repeat(2, 1fr) untuk membuat dua kolom dengan lebar yang sama.
Berikan pemilih .heading Anda properti celah baris yang disetel ke 1.5rem.
Langkah 41
Ingat bahwa properti grid-column menentukan kolom mana elemen dimulai dan diakhiri. Mungkin ada saatnya Anda tidak yakin berapa banyak kolom yang akan dimiliki kisi Anda, tetapi Anda ingin sebuah elemen berhenti di kolom terakhir. Untuk melakukan ini, Anda dapat menggunakan -1 untuk kolom akhir.
Buat pemilih .hero dan berikan properti kotak-kolom yang disetel ke 1 / -1. Ini akan memberi tahu elemen untuk menjangkau seluruh lebar kisi.
Langkah 42
Berikan pemilih .hero properti posisi yang diatur ke relatif.
Anda harus menghapus atribut lebar sementara sebelum menulis CSS untuk .hero-img Anda.
Langkah 44
Buat pemilih img dan berikan set properti width ke 100%, dan set properti object-fit untuk menutupi.
Properti object-fit memberi tahu browser cara memposisikan elemen di dalam wadahnya. Dalam hal ini, penutup akan menyetel gambar untuk mengisi wadah, memangkas seperlunya untuk menghindari perubahan rasio aspek.
Buat pemilih .hero-title dan berikan properti perataan teks yang disetel ke tengah, properti warna yang disetel ke oranye, dan properti ukuran font yang disetel ke 8rem.
Langkah 46
Subjudul juga perlu ditata. Buat pemilih .hero-subtitle dan berikan properti font-size yang disetel ke 2.4rem, properti warna yang disetel ke oranye, dan properti perataan teks yang disetel ke tengah.
Buat pemilih .author dan berikan properti font-size yang disetel ke 2rem dan properti font-family disetel ke Raleway dengan fallback sans-serif.
Langkah 48
Buat pemilih .author-name a:hover dan berikan properti background-color yang diatur ke #306203.
Ini akan membuat efek hover hanya untuk elemen a di dalam .author-name, menampilkan warna hijau freeCodeCamp asli di latar belakang.
Buat pemilih .publish-date dan berikan properti warna rgba(255, 255, 255, 0.5).
Langkah 50
Buat pemilih .social-icons. Berikan properti tampilan yang disetel ke kisi, dan properti ukuran font disetel ke 3rem.
Pengaturan default untuk CSS Grid akan membuat baris tambahan sesuai kebutuhan, tidak seperti Flexbox. Berikan pemilih .social-icons properti grid-template-columns yang diatur ke repeat(5, 1fr) untuk mengatur ikon dalam satu baris.
Langkah 52
Jika Anda ingin menambahkan lebih banyak ikon sosial, tetapi mempertahankannya di baris yang sama, Anda perlu memperbarui kolom-templat-kisi untuk membuat kolom tambahan. Sebagai alternatif, Anda dapat menggunakan properti grid-auto-flow.
Properti ini mengambil baris atau kolom sebagai nilai pertama, dengan nilai padat opsional kedua. grid-auto-flow menggunakan algoritme penempatan otomatis untuk menyesuaikan tata letak grid. Menyetelnya ke kolom akan memberi tahu algoritme untuk membuat kolom baru untuk konten sesuai kebutuhan. Nilai yang padat memungkinkan algoritme untuk mundur dan mengisi lubang di grid dengan item yang lebih kecil, yang dapat menyebabkan item tampak rusak.
Untuk pemilih .social-icons Anda, setel properti grid-auto-flow ke kolom.
Sekarang algoritme penempatan otomatis akan bekerja saat Anda menambahkan elemen ikon baru. Namun, algoritme menyetel lebar kolom baru menjadi otomatis, yang tidak akan cocok dengan kolom Anda saat ini.
Anda dapat menimpanya dengan properti grid-auto-columns. Berikan pemilih .social-icons properti grid-auto-columns yang disetel ke 1fr.
Langkah 54
Sama seperti Flexbox, dengan CSS Grid Anda dapat menyelaraskan konten item grid dengan menyelaraskan-item dan membenarkan-item. align-items akan menyelaraskan elemen anak di sepanjang sumbu kolom, dan justify-items akan menyelaraskan elemen anak di sepanjang sumbu baris.
Berikan pemilih .social-icons properti align-items yang disetel ke tengah.
Langkah 55
Berikan pemilih .text properti ukuran font yang disetel ke 1.8rem dan properti spasi huruf yang disetel ke 0.6px.
Elemen .text Anda bukan Grid CSS, tetapi Anda bisa membuat kolom di dalam elemen tanpa menggunakan Grid dengan menggunakan properti column-width.
Berikan pemilih .text Anda properti lebar kolom yang diatur ke 25rem.
Langkah 57
Majalah sering menggunakan teks yang dibenarkan dalam konten cetaknya untuk menyusun tata letaknya dan mengontrol alur kontennya. Meskipun ini berfungsi dalam bentuk cetak, teks yang dibenarkan di situs web dapat menjadi masalah aksesibilitas, misalnya menghadirkan tantangan bagi penderita disleksia.
Untuk membuat proyek Anda terlihat seperti majalah cetak, berikan pemilih .text set properti perataan teks untuk membenarkan.
The ::first-letter pseudo-selector memungkinkan Anda menargetkan huruf pertama dalam konten teks suatu elemen.
Buat pemilih .first-paragraph::first-letter dan atur properti font-size ke 6rem. Berikan juga properti warna yang disetel ke oranye untuk membuatnya menonjol.
Langkah 59
Teks lainnya telah digeser keluar dari tempatnya. Pindahkan ke posisinya dengan memberikan pemilih .first-paragraph::first-letter properti float yang disetel ke kiri dan properti margin-kanan disetel ke 1rem.
Langkah 60
Buat pemilih hr, dan berikan properti margin yang disetel ke 1.5rem 0.
Langkah 61
Untuk memberi warna jam, Anda perlu menyesuaikan properti perbatasan. Berikan pemilih jam properti perbatasan yang disetel ke 1px solid rgba (120, 120, 120, 0,6).
Buat pemilih .quote. Beri properti warna yang disetel ke #00beef, properti ukuran font disetel ke 2.4rem, dan properti perataan teks disetel ke tengah.
Untuk membuat teks kutipan lebih menonjol, beri pemilih .quote properti font-family yang disetel ke Raleway dengan fallback sans-serif.
Langkah 64
Kutipan sebenarnya bukan kutipan tanpa tanda kutip yang tepat. Anda dapat menambahkan ini dengan pemilih semu CSS.
Buat .quote::before pemilih dan setel properti konten ke " dengan spasi mengikutinya.
Juga, buat pemilih .quote::after dan setel properti konten ke " dengan spasi sebelumnya.
Sekarang saatnya menata bagian ketiga Anda. Perhatikan bahwa ia memiliki nilai teks dan teks dengan gambar untuk atribut kelas, yang artinya ia sudah mewarisi gaya dari aturan .text Anda.
Buat pemilih .text-with-images dan atur properti tampilan ke grid.
Langkah 66
Anda harus memiliki kolom untuk teks dan kolom untuk gambar. Berikan pemilih .text-with-images properti grid-template-columns yang disetel ke 1fr 2fr. Juga atur properti column-gap ke 3rem untuk memberikan lebih banyak jarak antar kolom.
Berikan pemilih .text-with-images properti margin-bottom yang disetel ke 3rem.
Langkah 68
Buat pemilih .lists dan setel properti tipe gaya daftar ke none. Ini akan menghilangkan poin-poin pada item daftar.
Berikan pemilih .lists properti margin-top yang disetel ke 2rem.
Langkah 70
Buat aturan .lists li untuk menargetkan item daftar dalam elemen .lists Anda. Berikan properti margin-bottom yang disetel ke 1,5rem.
Buat pemilih .list-title, .list-subtitle dan atur properti warna ke #00beef.
Langkah 72
Saatnya menata bagian terakhir majalah - gambar.
Gambar dibungkus dengan elemen samping menggunakan kelas image-wrapper, jadi buat pemilih .image-wrapper. Setel properti tampilan ke kisi.
Gambar harus berada dalam tata letak dua kolom, tiga baris.
Berikan pemilih .image-wrapper properti grid-template-columns yang disetel ke 2fr 1fr dan properti grid-template-rows disetel ke repeat(3, min-content). Ini akan memberikan baris kisi kami yang tingginya disesuaikan berdasarkan konten, tetapi kolom yang lebarnya tetap tetap berdasarkan wadah.
Langkah 74
Properti gap adalah cara singkat untuk mengatur nilai celah kolom dan celah baris secara bersamaan. Jika diberi satu nilai, itu menetapkan celah kolom dan celah baris keduanya ke nilai itu. Jika diberi dua nilai, ini menetapkan celah baris ke nilai pertama dan celah kolom ke nilai kedua.
Berikan pemilih .image-wrapper properti gap yang diatur ke 2rem.
Properti place-items dapat digunakan untuk mengatur nilai align-items dan justify-items secara bersamaan. Properti place-items mengambil satu atau dua nilai. Jika satu nilai diberikan, itu digunakan untuk properti align-items dan justify-items. Jika dua nilai disediakan, nilai pertama digunakan untuk properti align-items dan nilai kedua digunakan untuk properti justify-items.
Beri pemilih .image-wrapper properti place-items yang disetel ke tengah.
Langkah 76
Buat aturan .image-1, .image-3 dan berikan properti grid-column yang disetel ke 1 / -1. Ini akan memungkinkan gambar pertama dan ketiga menjangkau seluruh lebar kisi.
Sekarang setelah tata letak majalah selesai, Anda harus membuatnya responsif.
Mulai dengan kueri @media hanya untuk layar dengan lebar maksimal 720px. Di dalam, buat pemilih .image-wrapper dan berikan properti grid-template-columns 1fr.
Ini akan menciutkan ketiga gambar menjadi satu kolom pada layar yang lebih kecil.
Buat kueri @media lainnya hanya untuk layar dengan lebar maksimal 600px. Di dalam, buat aturan .text-with-images dan berikan properti grid-template-columns 1fr.
Ini akan menciutkan area teks bawah Anda menjadi satu kolom pada layar yang lebih kecil.
Langkah 79
Buat kueri @media ketiga hanya untuk layar dengan lebar maksimal 550px. Di dalamnya, buat pemilih .hero-title dengan ukuran font diatur ke 6rem, .hero-subtitle, .author, .quote, .list-title pemilih dengan ukuran font diatur ke 1.8rem, a .social-icons pemilih dengan ukuran font diatur ke 2rem, dan pemilih .text dengan ukuran font diatur ke 1.6rem.
Langkah 80
Buat satu kueri @media terakhir hanya untuk layar dengan lebar maksimal 420px. Di dalam, buat pemilih .hero-title dengan properti font-size diatur ke 4.5rem.
Selamat! Majalah Anda sekarang sudah selesai.
Full script bisa di download DISINI
Postingan
0 comments:
Posting Komentar