Tips All

BuildWith Angga saat ini bersedia untuk memberikan akses kelas Premium & group konsultasi belajar dengan mentor yang expert, kamu berhak mendapatkan 3 akses kelas Premium secara gratis yang bisa dipelajari tanpa batasan waktu. Bantuan dari BWA kali ini hanya diberikan khusus untuk mereka yang baru saja terkenda dampak laid off yang mungkin ingin upgrade skills, mempelajari skills baru, atau switching karir di perusahaan baru nantinya. Bantuan Dampak LaidOff Dari BuildWith Angga Loading… Bantuan ini dibataskan dengan kuota 100 orang pertama yang submit oleh karena itu silahkan bagikan kepada rekan terdekat kamu yang membutuhkannya sehingga karirnya akan menjadi lebih baik lagi ke depannya. BuildWith Angga dan mentor expert di sini berharap bahwa bantuan ini akan bermanfaat untuk kamu yang ingin switching karir dan mencari pekerjaan yang lebih baik lagi pada perusahaan baru nantinya, silahkan claim bantuan tersebut di atas dan semoga bermanfaat. Perfect place to begin your career development. BuildWith Angga.

Hello people with spirit of learning! Pasti kalian mengetahui banyak aplikasi yang kita gunakan rata-rata mempunyai tombol navigasi dibawahnya, tombol tersebut bernama Bottom Navigation Bar. Disini kita akab belajar cara membuat Bottom Navigation Bar atau biasa disebut NavBar sederhana seperti gambar diatas. Namun sebelumnya, kita mendownload assetnya terlebih dahulu disini. Sebelum membuat Bottom Navigation Bar, Kita download assetsnya terlebih dahulu. Berikut caranya : 1) Kunjungin website Shaynakit.com lalu pilih Login 2) Masukkan Email dan Password 3) Lalu pilih Mobile Design https://buildwithangga.com/storage/photos/shares/flutter-tutorial-membuat-bottom-navigation-sederhana/image3.png 4) Cari design yang berjudul “Doctor Consultation UI KIT” https://buildwithangga.com/storage/photos/shares/flutter-tutorial-membuat-bottom-navigation-sederhana/image5.png 5) Buka website figma.com dan import file figma yang sudah kita download https://buildwithangga.com/storage/photos/shares/flutter-tutorial-membuat-bottom-navigation-sederhana/image6.png 6) Sesudah import, klik icon pada Bottom Navigation nya, Lalu export masing-masing icon https://buildwithangga.com/storage/photos/shares/flutter-tutorial-membuat-bottom-navigation-sederhana/image7.png 7) Terakhir, kita create folder dalam project flutter kita bernama “assets”. Lalu pindahkan icon yang sudah kita export ke dalam folder assets. https://buildwithangga.com/storage/photos/shares/flutter-tutorial-membuat-bottom-navigation-sederhana/image8.png https://buildwithangga.com/storage/photos/shares/flutter-tutorial-membuat-bottom-navigation-sederhana/image9.png Untuk cara menambahkan assets ke dalam flutter, bisa membaca dokumentasi berikut : Cara Menambahkan Assets pada Flutter. Kita baru saja mengikuti tutorial cara mendownload template di website Shaynakit.com. Yuk masuk ke tutorial membuat Bottom Navigation Bar sederhana. Berikut caranya : 1) Menambahkan Widget Scaffold dan diisi dengan properti bottomNavigationBar Scaffold( bottomNavigationBar: ), Langkah awal untuk membuat Bottom NavBar adalah menambahkan widget Scaffold. Lalu dalam Scaffold tambahkan properti bottomNavigationBar. 2) Menambahkan Widget BottomNavigationBar Scaffold( bottomNavigationBar: BottomNavigationBar( items: [], )), Langkah kedua adalah menambahkan widget BottomNavigationBar pada properti bottomNavigationBar. pada Widget BottomNavigationBar, kita tambahkan properti items. fungsi properti items adalah untuk menempatkan Widgets yang bertipe BottomNavigationBarItems. Jadi selain widget BottomNavigationBarItems, maka akan terjadi logic error. 3) Isi Properti List Items dengan BottomNavigationBarItems https://buildwithangga.com/storage/photos/shares/flutter-tutorial-membuat-bottom-navigation-sederhana/image10.png Scaffold( bottomNavigationBar: BottomNavigationBar(items: [ BottomNavigationBarItem( icon: Image.asset( 'assets/doctor.png', width: 24, ), label: ''), BottomNavigationBarItem( icon: Image.asset( 'assets/notification.png', width: 24, ), label: ''), ])), Langkah ketiga adalah menambahkan BottomNavigationBarItem. Pada BottomNavigationBarItem, ada 2 properti yang wajib dipakai. Yaitu icon dan label. icon untuk menambahkan asset gambarnya atau iconnya dan label untuk penamaan navigasinya. Untuk icon kita isi dengan widget Image.asset lalu arahkan dengan path asset kita tempatkan. dan label disini kita isi dengan String kosong saja. Kenapa tetap menambahkan label ? bila kita tidak menambahkan label, maka akan terjadi logic error. Note : Properti List items harus kita isi minimal 2 widget yang bertipe BottomNavigationBarItem. Mengapa ? nanti akan terjadi logic error jika kurang dari 2, Berikut pesan errornya. https://buildwithangga.com/storage/photos/shares/flutter-tutorial-membuat-bottom-navigation-sederhana/image11.png 4) Menambahkan 2 Widget BottomNavigationBarItem https://buildwithangga.com/storage/photos/shares/flutter-tutorial-membuat-bottom-navigation-sederhana/image12.png Scaffold( bottomNavigationBar: BottomNavigationBar( items: [ BottomNavigationBarItem( icon: Image.asset( 'assets/doctor.png', width: 24, ), label: ''), BottomNavigationBarItem( icon: Image.asset( 'assets/notification.png', width: 24, ), label: ''), BottomNavigationBarItem( icon: Image.asset( 'assets/bookmarked.png', width: 24, ), label: ''), BottomNavigationBarItem( icon: Image.asset( 'assets/ic_profile.png', width: 24, ), label: ''), ], )), Disini kita hanya menambahkan widget BottomNavigationBarItemnya saja dan mengubah iconnya saja. 5) Menambahkan Properti Type pada BottomNavigationBar https://buildwithangga.com/storage/photos/shares/flutter-tutorial-membuat-bottom-navigation-sederhana/image13.png Scaffold( bottomNavigationBar: BottomNavigationBar( type: BottomNavigationBarType.fixed, items: [...], )), Pada gambar sebelumnya, kita melihat bahwa align icon home tidak rata dengan icon yang lainnya dan ujung kanan dan ujung kiri jaraknya tidak sama. Dengan itu pada Scaffold kita tambahkan properti type. Dan kita isi dengan Widget BottomNavigationBarType.fixed. Kita baru saja membuat Bottom Navigation Bar sederhana. fungsi dari Bottom Navigation bar atau biasa disebut dengan Bottom NavBar adalah untuk berpindah ke suatu halaman / fitur ketika kita menekan tombol navigasi yang ada. Semoga bermanfaat dan terima kasih!

Dalam pembuatan / pengembangan aplikasi, Kita membutuhkan widget-widget untuk membuat aplikasi pada Flutter. Salah satunya adalah Appbar Application Bar. Disini kita akan membuat Appbar sederhana. 1) Menambahkan Widget Appbar Scaffold( appBar: AppBar() ) Yang Pertama, Kita harus menambahkan widget Scaffold dan property appBar kita tambahkan dengan widget Appbar(). Ini adalah Langkah dasar menggunakan Appbar. 2) Menambahkan Leading, Title dan Action Scaffold( appBar: AppBar( leading: IconButton( onPressed: () {}, icon: Icon( Icons.list_rounded, size: 30, )), title: Text('Home'), centerTitle: true, actions: [ IconButton(onPressed: () {}, icon: Icon(Icons.notifications)) ], ), ), Yang kedua menambahkan Leading, Title, dan Action. Leading adalah sisi kiri menu sebelum title yang berfungsi sebagai tombol navigasi. Leading ini bersifat opsional ya, Jadi jika kamu tidak menggunakan Leading maka sisi kiri akan diisi dengan Title. Untuk membuat Title berada di tengah, maka gunakan CenterTitle dan set menjadi True. Fungsi property Action pada Appbar adalah dapat menambahkan widget-widget yang akan diletakkan pada sisi kanan Appbar secara horizontal seperti baris. Biasanya digunakan untuk menampilkan tombol menu yang sering digunakan seperti notif, search, dll. Pada bagian Property Action yang bertipe List, Saya isi dengan widget IconButton. Penulisannya code nya bisa dicontoh seperti yang diatas. 3) Mengubah warna pada AppBar Scaffold( appBar: AppBar( backgroundColor: Colors.purple, leading: IconButton( onPressed: () {}, icon: Icon( Icons.list_rounded, size: 30, )), title: Text('Home'), centerTitle: true, actions: [ IconButton(onPressed: () {}, icon: Icon(Icons.notifications)) ], ), ), Yang terakhir, Jika kalian ingin mengubah warna, maka pada AppBar gunakan property BackgroundColor. Disini aku mengubah warna Appbar nya menjadi ungu. Kalian bisa ubah sesuai keinginan. Kita baru saja menerapkan AppBar yang sederhana dalam project flutter kita. Kegunaan dari Appbar atau Application Bar adalah sebagai menu petunjuk dan menampilkan beberapa navigasi. Semoga bermanfaat dan Terima kasih!

Hello people with spirit of learning! Flutter dikenal dengan beragam widgets yang dapat membangun UI pada aplikasi kita. Disini saya akan menjelaskan Widget yang wajib kamu tahu yaitu Row dan Column (Baris dan Kolom). Disini kita akan mencoba menggunakan kedua Widget ini dengan Row didalam Column. Step 1 : Menambahkan Widgets Column Yang pertama kita menambahkan widget column terlebih dahulu. Step ini adalah langkah awal untuk membuat column. Begitu juga dengan membuat Row. Step 2 : Isi dengan Widget Text dan Row Langkah kedua kita isi Widget column dengan Widget text dan Row. Disini saya akan mengisi Widget Column dengan 3 Row. Dan Widget text-nya akan kita gunakan sebagai tanda urutan barisnya. Step 3 : Widget Row kita isi dengan widget apapun Langkah ketiga adalah Widget row akan diisin dengan Apapun. Disini saya isi dengan container saja. Untuk Container-nya kita styling terlebih dahulu ya. Kamu juga bisa style Container-nya sesuai keinginan kamu. Gunakan Sizebox untuk memberi jarak antar containernya. Step 4 : Tambahkan CrossAxisAligment pada column Langkah Terakhir adalah menambahkan CrossAxisAligment pada colum, Fungsi CrossAxisAligment pada column adalah menempatkan posisi widget yang ada di column secara horizontal. Disini gunakan CrossAxisAligment.start agar semua widgetnya menjadi rata kiri / Align left. Kita baru saja menyelesaikan Column yang isinya terdapat 3 Row. Dalam membangun sebuah project pada flutter, Kedua widget ini sering dipakai untuk Menyusun widget-widget yang akan dipakai sesuai keinginan kita. Semoga bermanfaat dan Terima kasih!

Elon Musk dikenal dengan cara berpikirnya yang hebat, selain itu juga ia dapat mengerjakan lebih dari satu hal-hal besar secara bersamaan. Pada acara kali ini Elon akan memberikan beberapa saran penting untuk kita bisa meningkatkan kualitas diri dari cara kita berpikir, bekerja, membangun sesuatu dan hal-hal bermanfaat lainnya. Intergenerational Dialogue for Our Emerging Future G20 Critical Thinking Berpikir kritis adalah hal yang perlu diajarkan kepada setiap orang sehingga mereka bisa menjadi lebih kreatif dalam memecahkan sebuah masalah, sebagai contohnya Elon Musk saat ini menjalankan misinya pada perusahaan Tesla untuk membuat dunia menjadi lebih baik lagi dalam segi transportasi dan juga energi (sustainable technology). Artificial Intelligence Setelah kita belajar berpikir kritis maka bisa kita lanjutkan untuk mulai mempelajari Aftificial Intellegence (A.I) untuk membantu manusia bekerja lebih cepat dan ringan. Robot yang diberikan kecerdasan buatan dapat membuat manusia memiliki waktu luang lebih banyak untuk mempelajari atau menikmati hidup lebih baik. Curiousity Selama kita hidup maka kita perlu memiliki rasa penasaran yang tinggi tentang dunia ini, bagaimana jika kita membuat A atau bagaimana caranya meningkatkan perfomance pada alat B. Tujuan utamanya adalah membuat kehidupan menjadi lebih baik, dengan seperti itu maka kita akan tertantang untuk belajar hal baru pada setiap harinya, ini adalah motivasi yang kuat. Kesimpulan Beberapa saran yang diberikan oleh Elon Musk pada video di atas adalah perspektif dari seorang yang memiliki expertise pada teknologi dan jika kamu mencintai teknologi, mungkin bisa mulai mengikuti beberapa saran dari Elon Musk.

Shortcut Figma dapat membantu kita bekerja lebih cepat lagi sebagai ui/ux designer ketika mendesain aplikasi atau sebuah website. Pada kali ini saya akan berbagi beberapa shortcut yang sering saya gunakan agar mendesign lebih produktif dan hasilnya juga sangat baik. 1) Shortcut Figma 'F' Digunakan untuk memilih dan membuat artboard tempat kita bekerja, misalnya kita ingin mendesain aplikasi iOS maka tinggal tekan F pada keyboard lalu pilih iPhone. 2) Shortcut Figma 'T' Apabila kita ingin menambahkan Text pada design kita maka dengan menekan keyboard T kita bisa langsung membuat paragraph untuk kebutuhan design. 3) Shortcut Figma 'R' Membuat background atau button dapat kita lakukan dengan cepat dan mudah dengan menggunakan shortcut R (rectangle) pada software Figma. 4) Shortcut Figma 'P' Biasanya untuk membuat chart maka kita butuh tools yang fleksibel untuk menggambar sebuah garis atau shape, maka dari itu saya mengandalkan shortcut P atau Pen tool pada Figma. 5) Shortcut Figma 'Shift V' dan 'Shift H' Kita dapat mengubah posisi sebuah Icon secara Vertical dengan Shift V atau apabila ingin horizontal bisa gunakan Shift H pada software Figma.

Belajar UX dapat dikatakan sesuatu yang tidak mudah namun di sini saya akan berbagi hal penting yang perlu kita ketahui apabila kita sedang persiapan awal untuk belajar ux design di tahun 2023 dan seterusnya nanti. UX designer adalah karir yang memiliki bayaran tinggi di Indonesia atau luar negeri, pekerjaan UX designer adalah memastikan bahwa pengguna dapat dengan mudah menggunakan aplikasi atau website buatan dari perusahaan tempat kita bekerja. Jika kamu ingin mulai belajar UX design maka wajib sekali untuk mengikuti setiap materi di bawah in yang saya jabarkan khusus untuk pemula seperti kamu saat ini, let's get started. Meningkatkan Rasa Penasaran Sebagai UX Designer Sebelum terjun mendesain aplikasi pertama kita maka ada hal penting lainnya yang perlu kita lakukan, kita bisa mulai dengan menggunakan aplikasi buatan perusahaan lain misalnya Tokopedia, Traveloka, Tiket, TIX, atau aplikasi lainnya. Tujuan utamanya adalah untuk mempelajari setiap pengalaman pada aplikasi tersebut yang nantinya bisa kita implementasikan juga dari segi user-flow, experience design, dan visual design kepada aplikasi buatan perusahaan kita. Ketika menggunakan aplikasi perusahaan lain maka pada benak pikiran kita berpikir kurang lebih seperti ini 'kira-kira kenapa fitur A berada di halaman B ya?' atau mungkin bisa seperti ini 'kenapa pengguna perlu login dulu untuk membeli tiket ya?' Mempraktikkan Heuristic Evaluation Pada Website atau Mobile Apps Setelah kita berhasil menggunakan lebih dari 10 aplikasi buatan perusahaan lain, lalu kita juga sudah bisa merasakan experience design dari setiap aplikasi tersebut. Kini waktunya untuk mempraktikkan heuristic evaluation pada UX design yang di mana tujuan utamanya adalah membuat beberapa peningkatkan pada design dari website atau aplikasi. Misalnya kita uji coba membeli tiket pesawat melalui Traveloka lalu memilih pembayaran menggunakan kartu kredit, setelah itu kita merasakan pengalaman membayar yang masih di bawah harapan kita sebagai pengguna aplikasi Traveloka. Oleh karena itu kita perlu mencatat beberapa hal yang bisa kita tingkatkan kembali bedasarkan dari pengalaman yang kita rasakan sebelumnya, contohnya seperti ini: "Tadi kan saya bayar pakai kartu kredit, lalu saya lihat tidak ada pilihan apakah akan langsung bayar lunas 100% atau bisa mencicil selama beberapa bulan. Jadi, saya kepikiran untuk meningkatkan dan membuat fitur tersebut pada design aplikasi perusahaan saya nantinya". Di atas adalah salah satu contoh kecil dari mengimplementasikan teknik heuristic evaluation pada UX design pada aplikasi Traveloka, kamu juga bisa mempraktikkannya pada aplikasi lainnya yang mungkin menarik untuk Mempelajari Software Design Seperti Whimsical dan Figma Kita sudah mencatat beberapa hal yang perlu ditingkatkan di dalam aplikasi Traveloka, Tiket, Tokopedia, dan aplikasi lainnya. Sudah waktunya untuk kita mempelajari salah satu software design yang dapat membantu kita untuk membuat projek design pertama kita. Kamu bisa mulai mencoba software seperti Figma atau Whimsical yang dapat digunakan secara gratis, selamanya. Whimsical sangat cocok untuk membuat wireframe atau gambaran kasar dari design aplikasi yang akan kita kerjakan, sedangkan Figma cocok untuk difokuskan pada tahap visual design dan prototype. Berikut beberapa kelas online gratis yang bisa diikuti rekomendasi untuk mempelajari kedua software tersebut di BuildWith Angga: Belajar membuat Wireframe dengan WhimsicalBelajar tools dasar dan design aplikasi Travel dengan Figma Kolaborasi Dengan Developer dan Team Marketing Apabila kamu sudah berhasil design menggunakan software Figma dan Whimsical maka kamu bisa coba diskusi dengan developer atau programmer yang berada di perusahaan tempat kamu bekerja sebagai UX designer. Tujuan dari diskusi tersebut adalah memberikan insight tambahan untuk kamu memahami bagaimana nantinya design yang sudah kamu kerjakan akan diimplementasikan kepada coding atau disebut dengan tahap development. Setelah tahap development selesai maka aplikasi atau website siap digunakan oleh pengguna yang sesuai dari customer persona yang telah kita rancang sebelumnya, dari situ nantinya bisa kita lanjutkan untuk meminta feedback kepada pengguna terkait hal apa saja yang bisa ditingkatkan kembali. Di BuildWith Angga, Belajar UX Tanpa Mengeluarkan Biaya Kamu telah mempelajari beberapa hal penting di atas dan apabila kamu sudah berminat untuk belajar lebih tentang UX design maka saya dapat sarankan untuk mengikuti beberapa kelas online gratis yang tersedia di BuildWith Angga.

Figma adalah software design yang digunakan untuk mendesain website, aplikasi mobile, aplikasi jam tangan, poster event, aplikasi desktop, dan bisa juga untuk design content marketing pada kebutuhan Instagram kita. Kali ini kita akan membahas beberapa langkah utama apabila kita ingin belajar software Figma sebagai seorang UI/UX designer mulai dari awal sampai bisa menghasilkan sebuah karya yang digunakan untuk modal bekerja. 1) Mempelajari Basic Tools Software Figma Sebagai materi dasar mungkin kita bisa mempelajari terlebih dahulu basic tools yang tersedia pada software Figma seperti pen tool, rectangle, frame tool, text tool, dan juga color scheme. Sehingga hal tersebut dapat memberikan gambaran awal tentang software Figma. Kita bisa mulai dari memilih jenis artboard yang akan kita kerjakan, apakah untuk website atau mobile apps design. Setelah itu kita dapat bereksplorasi dengan tools lainnya untuk membuat komponen dasar pada user-interface design. 2) Design Beberapa Komponen Dasar User-Interface Agar proses belajar Figma lebih cepat dan mudah serta juga terarah, maka kita perlu memiliki sebuah tujuan utama. Di sini, saya bisa sarankan untuk kamu mencoba mendesign komponen dasar pada user-interface design seperti button, icon, dan juga form login. Pada software Figma, kita juga dapat membuat sebuah reusable component yang di mana setelah komponen tersebut selesai kita design maka dapat kita gunakan pada seluruh projek design kita dan apabila ada perubahan maka kita hanya perlu mengubahnya sekali pada master component lalu akan berimbuh kepada component lainnya. 3) Amati, Tiru, Modifikasi Design Buatan Orang Lain Sebelumnya kita telah belajar Figma dalam menguasai basic tools dan membuat beberapa komponen dasar pada user-interface, selanjutnya kita perlu membuat sebuah projek design secara keseluruhan (untuk website atau mobile apps). Kita bisa menggunakan Dribbble sebagai tempat mencari inspirasi design buatan orang lain lalu kita bisa mengikuti design tersebut dan mendesain ulang kembali menggunakan software Figma, karena dengan begitu proses belajar Figma menjadi lebih asik dan terarah. Kesimpulan Figma sebenarnya mudah digunakan apabila kita pernah menggunakan Adobe XD, Photoshop, atau juga Sketch App, dan apabila kamu belum pernah menggunakan software design lain sebelumnya maka silahkan ikuti beberapa langkah di atas untuk belajar Figma sesuai dengan arahan yang dilakukan oleh UI/UX designer lainnya.

Dalam flutter, ada banyak package yang bisa kita pakai agar mempermudah dan mempercepat pekerjaan kita dalam mengembangkan aplikasi. Kita bisa mencari package yang kita butuhkan di website pub.dev. Disini saya ingin membahas 5 package flutter yang sering digunakan oleh Flutter Developer. 1) Google Fonts Link untuk mengakses package Google Fonts : Package Google Fonts. Package ini berisi fonts dari Google Fonts. Kita bisa menggunakannya agar tampilan teks bisa menjadi lebih menarik. Dalam package ini, ada banyak macam font yang kitab bisa pilih sesuai style yang kita inginkan. 2) Youtube Player IFrame Link untuk mengakses package Youtube Player IFrame: Package Youtube Player IFrame. Package yang kedua yaitu Youtube Player IFrame. Package ini berfungsi untuk memutar atau streaming video youtube pada aplikasi kita. 3) Email Validator Link untuk mengakses package Email Validator : Package Email Validator. Package yang ketiga yaitu Email Validator. Fungsi dari package ini ialah untuk memvalidasi apakah textfield yang kita isikan berupa email atau yang lain. 4) Google Sign in Link untuk mengakses package Email Validator : Package Email Validator. Yang keempat yaitu Google Sign in. Fungsi dari package ini menambahkan fitur login / sign in dengan menggunakan account google. Dengan ini, kita bisa menggunakannya pada IOS dan Android. 5) Shimmer Yang terakhir yaitu shimmer. Fungsi package ini memberikan efek kilauan Ketika aplikasi kita sedang loading agar tampilannya menjadi lebih menarik seperti contoh gambar diatas. Dan, inilah 5 package yang sering digunakan oleh Flutter Developer agar aplikasi yang kita buat semakin menarik.Semoga bermanfaat dan terima kasih!

Untuk kamu yang sedang memulai belajar CSS, berikut ini cheatsheet/panduan untuk mempermudah kamu ketika belajar link Link Element Tag pada dokumen HTML digunakan untuk meng-import resources tambahan seperti file CSS yang di dalamnya memiliki properti seperti href, rel, dan type. href digunakan sebagai URL lokasi file CSS tersebutrel digunakan untuk mendefinisikan hubungan antara HTML dan CSStype digunakan untuk mendefinisikan jenis file yang akan diimport Kegunaan CSS CSS (Cascading Style Sheets), adalah bahasa yang digunakan dengan mengombinasikan HTML yang menyesuaikan dengan elemen HTML yang ditampilkan. CSS digunakan untuk styling dengan tujuan mempercantik dan menata tampilan website. Menulis CSS pada File Terpisah Kode CSS dapat ditulis dalam filenya sendiri untuk memisahkannya dari kode HTML. Ekstensi untuk file CSS adalah .css. Extensi Ini dapat ditautkan ke file HTML menggunakan tag pada bagian Menulis CSS Dalam File HTML Kode CSS dapat ditulis pada file HTML dengan menyertakan kode dalam tag style . Kode yang terdapat tag style akan terbaca sebagai sintaks CSS. h1 { color: blue; } Inline Styles CSS Style dapat langsung ditambahkan ke elemen HTML dengan menggunakan atribut style di tag pembuka elemen. Setiap mendeklarasikan style, maka diakhiri dengan titik koma. Style yang ditambahkan dengan cara ini dikenal sebagai Inline Styles. Centered text Blue, 18-point text Memisahkan kode HTML dari CSS Memisahkan kode HTML dari CSS merupakan hal yang sering dilakukan. Hal ini memudahkan untuk memlihara sebuah kode dengan menyimpan sintaks untuk setiap file terpisah. Setiap perubahan pada konten maupun styling dapat dilakukan di file masing-masing. Class and ID Selectors Class pada CSS dapat digunakan kembali dan diterapkan ke banyak elemen. Class selectors dilambangkan dengan titik . diikuti dengan nama Class. ID Selectors CSS harus bersifat unik dan hanya digunakan untuk menata satu elemen. Selectors ID dilambangkan dengan hastag # diikuti dengan nama id. /* Selects all elements with class="column" */ .column { } /* Selects element with id="first-item" */ #first-item { } CSS Selectors Grup Menyesuaikan/menyocokkan beberapa pilhan dengan aturan CSS yang sama menggunakan comma-separated list. Pada contoh ini, teks untuk h1 dan h2 diatur menjadi warna merah. h1, h2 { color: red; } Rantai Selector CSS Selectors menentukan himpunan elemen yang menerapkan kumpulan aturan CSS. Misalnya, untuk memilih semua elemen , selector p dapat digunakan untuk membuat aturan styling. Selector Berantai CSS Selector dapat dirantaikan sehingga sekumpulan aturan hanya berlaku untuk elemen yang cocok dengan semua kriteria. Misalnya, untuk memilih elemen yang juga memiliki class section-heading, maka selector h3.section-heading juga dapat digunakan. /* Select h3 elements with the section-heading class */ h3.section-heading { color: blue; } /* Select elements with the section-heading and button class */ .section-heading.button { cursor: pointer; } Tipe Selector CSS Selector tipe CSS digunakan untuk mencocokkan semua elemen dari jenis atau nama tag yang diberikan. Tidak seperti sintaks HTML, mereka tidak menyertakan tanda kurung siku saat menggunakan tipe selector untuk nama tag. Saat menggunakan tipe selector, elemen dicocokkan terlepas dari tingkat penumpukannya dalam HTML. /* Selects all tags */ p { } Selector Class CSS Selector CSS mencocokkan elemen berdasarkan konten atribut class mereka. Untuk memilih elemen yang memiliki calendar-cell sebagai nilai atribut class, a . perlu ditambahkan terlebih dahulu. .calendar-cell { color: #fff; } Atribut HTML dengan beberapa nilai Dalam sebuah atribut HTML, dapat memiliki beberapa nilai atribut. Beberapa nilai atribut dipisahkan oleh spasi di antara setiap atribut. Selector Specificity Specificity adalah sistem peringkat yang digunakan ketika ada beberapa nilai properti yang conflict yang menunjuk ke elemen yang sama. Saat menentukan aturan mana yang akan diterapkan, maka selector dengan kekhususan tertinggi yang menang. Jenis selector yang paling spesifik adalah selector ID, diikuti oleh selector class, diikuti oleh type selector. Dalam contoh ini, hanya color: blue yang akan diimplementasikan karena memiliki selector ID, sedangkan color: red memiliki type selector. h1#header { color: blue; } /* implemented */ h1 { color: red; } /* Not implemented */ CSS ID Selectors Selector ID CSS mencocokkan elemen berdasarkan konten atribut id mereka. Nilai atribut id harus unik di seluruh DOM. Untuk memilih elemen yang memiliki job-title sebagai nilai atribut id, # perlu ditambahkan. #job-title { font-weight: bold; } CSS descendant selector Kombinator CSS descendant selector digunakan untuk mencocokkan elemen yang diturunkan dari selector lain yang cocok. Mereka dilambangkan dengan satu spasi antara setiap selector dan descendant selector. Jadi, Semua elemen yang cocok dipilih terlepas dari tingkat bersarang di HTML. div p {} section ol li {} Belajar Design Website