1 Belajar CSS : Tutorial
CSS adalah singkatan dari Cascading Style Sheets. CSS adalah bahasa pengkodean yang digunakan untuk menata gaya tampilan web agar lebih cantik dan indah saat ditampilkan di web browser. CSS hadir sebagai pelengkap HTML. Lanjut baca…
2. Belajar CSS : Membuat File Pertama
Pada tutorial kali ini kalian akan belajar betapa mudahnya menambahkan style dan memformat informasi ke halaman web menggunakan CSS. Terdapat tiga cara untuk memasukkan CSS ke dalam dokumen HTML yaitu inline style, embedded style, external style sheets. Lanjut baca…
3. Belajar CSS : Syntax
Aturan pada CSS memiliki dua bagian utama, selector, dan satu atau lebih declaration. Selector adalah nama sebuah aturan yang akan dijadikan sebagai acuan oleh satu atau beberapa elemen di dokumen HTML. Selector digunakan untuk mencocokkan nama elemen di HTML dan aturannya di CSS. Lanjut baca…
4. Belajar CSS : Selectors
Selector adalah nama sebuah aturan yang akan dijadikan sebagai acuan oleh satu atau beberapa elemen di HTML dan aturannnya di CSS. Deklarasi aturan-aturan tiap selector diletakkan dalam tanda kurung kurawal. Tiap properti dan nilainya dipisahkan dengan tanda ; (titik koma). Lanjut baca…
5. Belajar CSS : Color
Properti warna CSS mendefinisikan warna foreground untuk sebuah elemen. Color property biasanya mendefinisikan warna dari konten text dari sebuah elemen. Misalnya, color property dalam body selector mengartikan warna default semua teks di halaman web tersebut. Lanjut baca…
6. Belajar CSS : Background
CSS menyediakan beberapa properti untuk menata background, seperti: background-color, background-image, background-repeat, background-attachment dan background-position. Properti background-color digunakan untuk mengatur warna background suatu elemen. Lanjut baca…
7. Belajar CSS : Font
CSS menyediakan beberapa properti font style untuk konten teks, seperti: font-family, font-style, font-variant, font-weight dan font-size. Properti CSS font-family memungkinkan kalian untuk mengatur daftar prioritas nama font family dan / atau nama generic family untuk konten teks dari elemen yang dipilih. Lanjut baca…
8. Belajar CSS : Text
Properti teks CSS memungkinkan kalian untuk menentukan banyak style teks seperti color, alignment, spacing, decoration, transformation dll. Dengan sangat mudah dan efektif. CSS memiliki beberapa properti untuk menentukan style teks. Properti ini memberi kalian kontrol yang akurat atas tampilan visual karakter, spasi, kata, paragraf, dll. Lanjut baca…
9. Belajar CSS : Links
Tautan memiliki empat status yang berbeda – link, visited, active dan hover. Keempat status tautan atau hyperlink ini dapat ditata secara berbeda melalui properti CSS menggunakan pseudo-classes dari elemen anchor, namun tergantung juga pada statusnya. Lanjut baca…
10. Belajar CSS : List
Pada tutorial kali ini kita akan mempelajari bagaimana cara membuat list dengan CSS. Terdapat tiga tipe list HTML, yaitu ordered list, unordered list, dan definition list. Secara default, item dalam ordered list diberi nomor dengan Arabic numerals (1, 2, 3, dll.), Sedangkan dalam unordered list, item ditandai dengan round bullets (peluru bundar). Lanjut baca…
11. Belajar CSS : Table
Tabel biasanya digunakan untuk menyajikan data tabular. Saat kalian membuat tabel HTML tanpa style atau atribut apa pun, browser akan menampilkannya tanpa border. Mendesain sebuah tabel dengan CSS dapat memperindah tampilannya secara drastis. Lanjut baca…
12. Belajar CSS : Box Model
Setiap elemen yang dapat ditampilkan terdiri dari satu atau lebih kotak persegi panjang. Model box CSS biasanya menjelaskan bagaimana kotak persegi panjang ini diletakkan di halaman web. Kotak-kotak ini dapat memiliki properti yang berbeda dan dapat berinteraksi satu sama lain dengan cara yang berbeda, tetapi setiap kotak memiliki konten area dan opsional seperti margin, padding, dan border. Lanjut baca…
13. Belajar CSS : Margin
Properti margin CSS memungkinkan kalian untuk mengatur margin di sekitar sisi elemen box. Margin tidak memiliki background-color, itu benar-benar transparan. Selain itu juga kita akan mempelajari properti shorthand dimana properti shorthand adalah properti penulisan pendek. Lanjut baca…
14. Belajar CSS : Padding
Padding area adalah ruang antara konten elemen dan bordernya. Properti padding CSS memungkinkan kalian untuk mengatur padding area untuk elemen yang bordernya terpisah dari kontennya. Padding dipengaruhi oleh kotak background-color. Lanjut baca…
15. Belajar CSS : Border
Properti border CSS memungkinkan kalian untuk menentukan area border sebuah kotak. Border dapat berupa style yang telah ditentukan seperti, garis padat, garis ganda, garis putus-putus, dll. Atau dapat berupa gambar. Lanjut baca…
16. Belajar CSS : Membuat Layout Website dengan HTML CSS
Pada kesempatan kali ini, kita akan membuat layout pada sebuah halaman website. Kita akan menggunakan CSS Eksternal. Karena selama ini kita menulis script kode css pada tag lebih tepatnya pada tag <style>. Lanjut baca…
17. Belajar CSS : Membuat Menu Navigation Bar
Tentunya kita dimudahkan untuk memilih berbagai menu yang tersedia pada website. Kita akan dipindahkan ke halaman selanjutnya setelah kita pilih menu tersebut. Nah, itu biasanya disebut dengan nama Navigation Bar atau Menu Navigasi. Lanjut baca…
18. Belajar CSS : Mengatur Style Text, Font dan Link
Pada kesempatan kali ini kita akan mempelajari tentang beberapa perintah dari properti CSS, yaitu Text, Font dan Link. Ketiga properti ini adalah jenis properti dari CSS yang digunakan untuk mengatur tampilan-tampilan teks pada halaman website. Lanjut baca…
19. Belajar CSS : Margin & Padding
Margin dan Padding adalah properti dari CSS yang digunakan untuk mengatur sisi tiap elemen pada HTML. Biasanya, kedua properti ini juga paling banyak digunakan dalam sebuah proyek website. Dari namanya saja sudah beda, seperti biasanya fungsinya juga pasti beda. Lanjut baca…
20. Belajar CSS : Membuat Website Portfolio
Dalam artikel kali ini, saya akan sharing Studi Kasus Membuat Website Portfolio menggunakan HTML CSS, serta librari / framework W3.CSS. Sebelum kita mulai, saya akan jelaskan sedikit mengenai W3 CSS. W3 CSS adalah sebuah Framework CSS untuk membuat User Interface atau desain Website, buatan W3Schools. Lanjut baca…
21. Belajar CSS : Color, Background dan Border
Cascading Style Sheet (CSS) merupakan aturan untuk mengatur tampilan beberapa komponen dalam sebuah web sehingga akan lebih terstruktur dan seragam. Pada umumnya CSS digunakan untuk memformat tampilan halaman web yang dibuat, biasanya dipakai untuk mengendalikan ukuran gambar, warna bagian tubuh pada teks, dll. Lanjut baca…
22. Belajar CSS : Membuat Layout dengan HTML CSS
Pada artikel kali ini, kita akan membuat tampilan layout dalam sebuah website. Dalam situs, web sering menampilkan konten dalam banyak kolom (seperti majalah atau koran). Tiap kolomnya biasanya berisi informasi yang berbeda-beda. Nah, dalam website HTML5 menawarkan elemen semantik baru yang mendefinisikan berbagai bagian halaman web. Lanjut baca…
23. Belajar CSS : Membuat Menu Navigation Bar Fixed pada Posisi Atas
Pada kesempatan kali ini, kita akan berlajar tentang membuat Menu Navigasi. Nah, menu Navigasi itu biasanya terletak pada bagian atas. Digunakan untuk mengarahkan ke suatu halaman, berdasarkan nama menu Navigasi tersebut. Lanjut baca…
24. Belajar CSS : Membuat List Produk E-Commerce Dengan HTML Dan CSS
Pada tutorial kali ini, kita akan membuat tampilan daftar produk e-commerce menggunakan HTML dan CSS. Tentunya kita pernah belanja online, lalu kita melihat daftar produk yang tersedia dalam sebuah website. Kita terus mencari produk yang kita inginkan, lalu kita beli produk tersebut. Lanjut baca..
25. Belajar CSS : Membuat Tabel Harga Produk dengan CSS
Pada kesempatan kali ini kita akan mempelajari tentang Membuat Tabel Harga Produk dengan menggunakan CSS. Tentunya kita pernah melihat dalam sebuah website yang menyediakan produk maupun jasa. Biasanya disitu ada berbagai jenis paket beserta harga hingga keunggulan masing-masing paket. Lanjut baca…
26. Belajar CSS : Membuat Efek Smooth Scrolling Pada CSS
Pada kesempatan ini kita akan belajar Efek Smooth Scrolling menggunakan script dari CSS.
Nah, ngomong-ngomong…Apa sih itu Smooth Scrolling??? Mungkin teman-teman pernah liat sebuah website yang full page atau satu halaman penuh, saat kita klik salah satu menu yang terdapat disitu maka halaman akan berpindah secara pelan-pelan. Lanjut baca…
27. Belajar CSS : Membuat Thumbnail Post Sederhana Dengan HTML dan CSS
Pada kesempatan kali ini kita akan belajar membuat thumbnail post sederhana. Sebelumnya, thumbnail post itu apa sih??? Oke, jadi teman-teman tentu aja pernah baca artikel di sebuah situs website. Yang mana artikel itu biasanya berisi tentang tutorial maupun berita. Lanjut baca…
28. Belajar CSS : Membuat Efek Perubahan Warna Transisi Pada CSS
Pada tutorial kali ini kita akan belajar mengenai Transisi pada CSS. Transisi adalah perubahan objek. Misalkan saat kita arahkan mouse ke suatu elemen di web, maka akan ada perubahan warna. Bukan hanya warna aja, bahkan ada perubahan ukuran dari elemen itu juga. Lanjut baca…
29. Belajar CSS : Membuat Tabel Motif Zebra Dengan CSS
Pada kesempatan kali ini kita akan belajar tentang table zebra. Kenapa disebut Zebra??? Hal ini dikarenakan warna backround tiap baris pada tabel memiliki corak warna selang seling. Maka dari itu disebut dengan Tabel Zebra. Lanjut baca…
30. Belajar CSS : Membuat Full Page Background Website dengan HTML dan CSS
Pada tutorial kali ini kita akan belajar membuat background website full satu halaman. Jadi, di halaman website yang kita buat akan penuh dengan gambar di latar belakangnya. Lanjut baca…
31. Belajar CSS : Membuat Menu Navigasi Vertikal Sederhana
Pada tutorial kali ini kita akan membuat menu navigasi sederhana. Sebuah web tentunya pasti punya menu navigasi, yang memiliki kesan akan konten apa saja yang dimuat dalam sebuah web. Lanjut baca…
32. Belajar CSS : Mempercantik Tampilan Form Login
Sebuah form login tentunya merupakan halaman awal saat kita coba memasuki ruangan user kita. Form login tentunya merupakan pintu masuk ke dalam ruangan user, baik itu seperti member maupun admin. Lanjut baca…
33. Belajar CSS : Cara Menambahkan Font Ke CSS
Pada kesempatan kali ini. Kita akan belajar gimana caranya memasukkan font eksternal ke dalam file css. Seperti biasanya kalo dalam dunia web design, kita memerlukan berbagai macam font untuk mendukung pesan dari tampilan sebuah website. Lanjut baca…
34. Belajar CSS : Membuat Menu Sederhana dengan CSS
Pada kesempatan kali ini saya akan memberikan tutorial pembuatan menu dropdown sederhana dengan css . Sebenarnya menu dengan css sudah banyak di internet, kalian semua tinggal download saja, namun kalian juga harus tau basic dari css. Lanjut baca…
35. Belajar CSS : Membuat Menu Navigasi Vertikal Sederhana
Sahabat Webhozz dimanapun berada, kali ini kita akan bahas sedikit mengenai dasar dalam CSS. Disini kita akan membuat menu navigasi sederhana. Sebuah web tentunya pasti punya menu navigasi, yang memiliki kesan akan konten apa saja yang dimuat dalam sebuah web. Lanjut baca…
36. Belajar CSS : Membuat Tooltip Dengan CSS
Sahabat Webhozz dimanapun berada, kali ini kita akan membahas mengenai cara membuat tooltip dengan CSS. Tooltip merupakan informasi tambahan pada teks yang akan muncul ketika mouse di arahkan ke area teks. Lanjut baca…
37. Belajar CSS : Mempercantik Tampilan Form Login dengan CSS
Sebuah form login tentunya merupakan halaman awal saat kita coba memasuki ruangan user kita. Form login tentunya merupakan pintu masuk ke dalam ruangan user, baik itu seperti member maupun admin. Lanjut baca…
38. Belajar CSS : CSS Hover
Agar tampilan suatu website terlihat lebih hidup, menarik dan interaktif terkadang design yang baik saja tidak cukup. Terkadang kita perlu menambahkan slider, popup dan sebagainya. Salah satu yang sering digunakan yaitu efek Hover pada CSS. Lanjut baca…
39. Belajar CSS : Pengertian CSS dan Contohnya
CSS (Cascading Style Sheet) adalah salah satu bahasa desain web (style sheet language) yang mengontrol format tampilan sebuah halaman web yang ditulis dengan menggunakan penanda(markup language. Biasanya CSS digunakan untuk mendesain sebuah halaman HTML dan XHTML. Lanjut baca…
40. Belajar CSS : Menggunakan Satuan Ukuran Relatif
Halo sobat Webhozz berjumpa lagi dengan saya, kali ini saya ingin membagikan artikel mengenai menggunakan satuan ukuran relatif dengan CSS. Salah satu pendekatan penting dalam membuat tampilan yang responsive adalah pemakaian satuan ukuran relatif. Lanjut baca…
41. Belajar CSS : Menata Font Dengan CSS
Halo sobat Webhozz berjumpa lagi dengan saya, kali ini saya ingin membagikan artikel mengenai menata font dengan CSS. Untuk menata font, kalian dapat menggunakan properti font dengan berbagai variasinya. Lanjut baca…
42. Belajar CSS : Membuat Tabel Interaktif Sederhana
Pada pertemuan kali ini kita akan membuat desain tabel yang menarik. Karena mungkin bisa saja kita bosan dengan tampilan tabel default bawaan html. Jadi untuk menambah keindahannya kita menggunakan CSS. Lanjut baca…
43. Belajar CSS : Membuat Link Menarik Pada Text Link
Pada postingan ini saya ingin membagikan sedikit ilmu tentang CSS, yaitu tentang text hyperlink yang biasanya berisi teks biasa yang selalu kita gunakan untuk menuju halaman tertentu saat diklik. Biasanya Tampilan Standarnya seperti ini. Lanjut baca…
44. Belajar CSS : Mengenal CSS
Halo sobat Webhozz berjumpa lagi dengan saya, kali ini saya ingin membagikan artikel mengenai pengenalan CSS. CSS (Cascading Style Sheet) berguna untuk menentukan tema tampilan dari sebuah website. CSS merupakan bahasa scripting yang sangat ringan dan mudah dipelajari. Lanjut baca…
45. Belajar CSS : Text
Ada bebeberapa cara untuk mengatur text dengan CSS diantaranya text color, Text Alignment, Text Decoration, Text Transformation. Sebagian cara-cara tersebut untuk mengatur text akan saya jelaskan fungsi dan penggunaannya sebagai berikut. Lanjut baca…
46. Belajar CSS : Background CSS
Pada tutorial kali ini kita akan mempelajari mengenai bacground CSS. Properti background CSS digunakan untuk menentukan efek latar belakang suatu elemen. Properti CSS digunakan untuk efek latar belakang. Lanjut baca…
47. Belajar CSS : Selectors
Pada dasarnya ketika kita akan memulai menggunakan CSS ada baiknya kita mengerti apa itu selector, adapun tujuan penggunaan selector adalah untuk memilih elemen / tag html untuk diatur propertiesnya di css. Lanjut baca…
48. Belajar CSS : Struktur Penulisan CSS
Pada tutorial kali ini kita akan mempelajari struktur penulisan CSS. Untuk memulai penulisan kode CSS, baiknya kita mengenal terlebih dahulu struktur penulisan css. Struktur Penulisan CSS terdiri dari “Selector {Properties:Value;}”. Lanjut baca…
49. Belajar CSS : Cara Penggunaan CSS
Pada tutorial kali ini kita akan mempelajari cara penggunaan CSS, dimana terdapat tiga cara dalam menggunakan CSS, pertama yaitu inline CSS, embedded CSS, dan external CSS. Saat ini kita akan membahas mengenai inline CSS. Lanjut baca…
50. Belajar CSS : Cara Mudah Membuat Dropdown Menu
Hai para pembaca setia blog webhozz, kali ini kita akan membahas cara membuat menu navigasi dropdown dengan mudah menggunakan html dan css. Lanjut baca…
51. Belajar CSS : 8 CSS Framework Terpopuler
CSS Framework, ya pasti kalian sudah terbiasa dengan CSS Framework misalnya Bootstrap. Ada beberapa kerangka CSS yang populer, selain Bootstrap. Lanjut baca…
52. Belajar CSS : Fungsi Properti CSS Display
Pada tutorial kali ini kita akan mencoba memahami apa itu Properti Display pada CSS. Mungkin dari kalian akan bertanya-tanya untuk apa fungsi Properti Display pada CSS. Perlu kita ketahui Display yang akan kita coba disini meliputi Properti CSS Display Inline dan Blok. Lanjut baca…
53. Belajar CSS : Membuat Menu Website
Pada tutorial kali ini kita akan mempelajari bagaimana cara membuat menu list yang menarik dengan sangat mudah. Berikut tutorial memasukan menu kedalam konten dan ada beberapa contoh yang bisa kalian unduh langsung. Lanjut baca…
54. Belajar CSS : Membuat Beragam Efek Pada Scroll
Pada tutorial kali ini kita akan membahas tentang bagaimana membuat efek pada menu scroll yang digunakan untuk website. Menu ini bisa berupa daftar tautan atau tulisan biasa yang mana jika digulir kebawah akan muncul beragam efek didalamnya. Lanjut baca…
55. Belajar CSS : Membuat efek kertas terselip
Teman-teman WebHozz pada tutorial kali ini kita akan mencoba membuat sebuah efek kertas terselip dengan menggunakan CSS. Lanjut baca…
56. Belajar CSS : Back to Top
Pada tutorial kali ini kita akan mempelajari cara menambahkan tombol gulir ke atas (back to top) dengan css, dan sedikit bantuan jquery. Lanjut baca…
57. Belajar CSS : Memasukan Efek Transitions & Animations hover pada Image
Pada artikel kali ini kita akan membahas tentang bagaimana cara memasukan efek transitions & animations hover pada image menggunakan CSS Framework, seperti apa sih efek Hover pada Image ? Lanjut baca…
58. Belajar CSS : Prefix Web Browser
Pada tutorial kali ini kita akan mencoba mencari tahu apa itu prefix pada browser? Kalian pernah mengalami saat membuat atau mendesain website, ketika kita ingin menjalankan efek-efek tertentu seperti transform, translated atau yang lainnya tetapi tidak bisa berjalan di semua browser atau mengalami inkompabilitas. Lanjut baca…
59. Belajar CSS : Fungsi :after dan :before
Pengertian dari :before artinya sebelum & :after artinya sesudah. :before digunakan untuk menambahkan elemen sebelum elemen utama, sedangkan :after digunakan untuk menambahkan elemen sesudah elemen utama. Lanjut baca…
60. Belajar CSS : Menambahkan CSS Reset pada Website
Pada tutorial kali ini kita akan membahas mengenai CSS Reset. Perlu kita ketahui bahwa pada setiap browser internet mempunyai style bawaan sendiri, sebagai contoh padding & margin pada browser google chrome dan mozilla itu berbeda. Lanjut baca…
61. Belajar CSS : Membuat Auto Height 100%
Pada kesempatan kali ini kita akan mempelajari bagaimana cara membuat layout pada web dengan memberikan efek height otomatis mengikuti isi dari banyaknya isiian konten. Lanjut baca…
62. Belajar CSS : Membuat Efek Animasi Mengetik Pada Teks
Pada tutorial kali ini kita akan mempelajari bagaimana cara membuat animasi teks di website seolah-olah teks tersebut sedang berjalan seperti sedang diketik. Lanjut baca…
63. Belajar CSS : Float Properti
Pada tutorial kali ini kita akan mempelajari mengenai float properti. Fungsi Properti Float pada CSS digunakan untuk meratakan element ke kiri atau ke kanan. Jika kita ingin meratakirikan element kita tinggal menambahkan float:left, begitu juga sebaliknya. Lanjut baca…
64. Belajar CSS : CSS Position Absolute dan Relative
Baik teman-teman WebHozz dalam mendesign sebuah website untuk menentukan posisi objek terhadap objek lain, atau objek terhadap browser, diperlukan pemahaman CSS Position. Lanjut baca…
65. Belajar CSS : Membuat Menu Dropdown Sederhana
Pada kesempatan kali ini kita akan mempelajari mengenai menu dropdown. Apa itu dropdown menu? Dropdown Menu adalah menu yang jika kita mengarahkan kursor ke menu tersebut maka akan muncul menu lainya yang memanjang kebawah. Lanjut baca…
66. Belajar CSS : SASS
Sass (Syntactically Awesome Stylesheets) adalah sebuah pengembangan dari CSS3 dengan menambahkan nested rules, variables, mixins, selector inheritance, dan banyak lagi.bekerja sebagai penerjemah css dengan struktur yang lebih baik. Lanjut baca…
67. Belajar CSS : Install SASS
Di website official Sass sendiri sudah merekomendasikan text editor yang support atau sudah terinstal dengan Sass , seperti CodeKit, Compass.app, Hammer, Koala (Open Source), LiveReload, Mixture, Prepros, Scout. Lanjut baca…
68. Belajar CSS : Membuat Layout Website Sederhana
Pada artikel kali ini penulis akan memberikan tutorial membuat layout yang paling simple atau sederhana. Layout yang akan dibuat menggunakan HTML 5 juga CSS dan editor nya memakai jetbrains PHP Storm. Lanjut baca…
70. Belajar CSS : Membuat Icon dari Font Awesome
Agar website terlihat lebih indah dan menarik , kita bisa menambahkan gambar – gambar… adapun bisa juga menambahkan ikon. pada artikel kali ini , penulis akan memberitahukan langkah – langkah membuat ikon dari Font Awesome. Lanjut baca…
71. Belajar CSS : Pure CSS – Yahoo
Ada sebuah CSS Framework yang dibuat oleh Yahoo, yaitu Pure CSS. Pure CSS adalah sebuah CSS Module yang dapat dimanfaatkan untuk mendevelop sebuah website. Dalam framework ini, menyediakan berbagai elemen yang dapat kita manfaatkan seperti Layout responsive, Menu, Form, tombol, Grid Base, Tabel dll. Lanjut baca…
72. Belajar CSS : Apa itu CSS?
Perlu kita ketahui, Cascading Style Sheet atau yang lebih dikenal dengan CSS bukanlah bahasa pemograman. Sama halnya styles dalam aplikasi pengolahan kata seperti Microsoft Word yang dapat mengatur beberapa style, misalnya heading, subbab, bodytext, footer, images, dan style lainnya untuk dapat digunakan bersama-sama dalam beberapa berkas (file). Lanjut baca…
73. Belajar CSS : Membuat Background Image CSS
Salah satu komponen desain website yang cukup penting adalah latar belakang atau lebih dikenal dengan nama background. Background digunakan untuk memberikan dekorasi visual terhadap sebuah elemen, yang akan mengakibatkan peningkatan kemudahan nalar atau pengertian akan sebuah konten. Lanjut baca…
74. Belajar CSS : Menggunakan Font dari “Google Font”
Apabila web desainers bosan menggunakan font dari komputer, maka penulis merekomendasikan untuk meng-embed font dari google, kenapa ? karena selain mudah digunakan juga gratis, berikut langkah-langkahnya. Lanjut baca…
