Ibarat gadis dan produk kecantikan adalah 2 hal yang sulit dipisahkan, pun demikian hubungan antara HTML dan CSS, CSS menjadikan tampilan Website (baca HTML) menjadi lebih indah, elegan bahkan atraktif. Sebelum dilanjutkan saya mohon maaf jika analogi di atas tidak tepat.
CSS3 memiliki fitur-fitur unggulan baru diantaranya adalah transformation dan animation, dua komponen ini membuat tampilan web lebih bagus bahkan seru mulai dari proses loading, karena sering kita jumpai proses penantian loading sebuah laman tampil utuh jadi terasa tidak membosankan karena diiringi dengan loading animation yang bagus.
Contoh yang kami buat di bawah ini sangatlah sederhana, hanya menjelaskan secara singkat penggunaan transformation dan animation:
Saya teringat di awal tahun 2011 saya pernah mencoba melamar perkerjaan di sebuah perusahaan di daerah Jakarta Pusat, walaupun bermodal skill yang bisa dibilang pas-pasan. Proses tes yang dilakukan adalah menulis kode PHP untuk membuat beberapa hal dalam waktu 1 jam, salah satunya adalah judul dari artikel ini.
Banyak jalan menuju Roma, begitupun untuk membuat program dengan PHP, dan mungkin cara yang saya gunakan untuk membuat fungsi sederhana (menghitung jumlah huruf vocal) bisa jadi kurang efisien.
Cara yang saya pilih adalah membandingkan dan mengambil irisan dua array ‘array_intersect’ dan mengambil jumlah dari tiap komponen dalam array terserbut ‘array_count_values’. Array pertama berisi huruf vocal dan array kedua berisi huruf dari kata yang dubandingkan ‘str_split’, dan hasilnya bisa kamu lihat sendiri di video panduan berikut:
Sering kita jumpai jajak pendapat (polling) di website, entah itu untuk membandingkan produk smartphone, sepeda motor atau yang lain.
Nah… karena penasaran ingin coba bikin sendiri (polling sederhana) dengan PHP, akhirnya langsung aja buka text editor, mulai coding. Program yang dibuat sangatlah sederhana, hanya menyimpan data dalam file TXT berisi json dari array yang diencode, dan tampilan form serta hasilnya. Pertanyaan dan pilihan polling juga disimpan dalam file json.
Jadi intinya pelajaran ini menitikberatkan pada manipulasi array dan akses fileystem dengan file_get_contents serta file_put_contents, silahkan disimak langkah lengkapnya di video panduan ini.
Karena Prosesnya cukup panjang, video panduannya dibagi menjadi tiga:
1 . Slicing images dan struktur layout web, proses pemotongan gambar dalam file PSD menjadi beberapa foto kecil yang akan disematkan dalam tag ‘img’, juga pembuatan struktur layout laman website dan style dasarnya dengan HTML dan CSS
2 . Styling: melengkapi kode CSS agar laman website menjadi semirip mungkin dengan desain aslinya dalam file PSD, hal ini mencakup: navbar (menu navigasi), logo, caption (ketengan pada tiap gambar).
3 . Finishing: pembenahan dan koreksi pada kode CSS yang ditulis dalam video panduan sebelumnya, seperti penambahan warna background gradasi, warna background transparan pada caption, penyesuaian padding dan sebagainya.
Mudah-mudahan dengan serial singkat ini, kamu bisa punya gambaran alur pembuatan website khusunya pada proses konversi desain Photoshop menjadi file HTML dan CSS. Happy Practicing…
Belajar HTML dan CSS untuk membuat sebuah website akan lebih efektif dengan mempraktikan langsung, seperti dengan mereplikasi sebuah bagian dari website, contohnya adalah potongan artikel dengan gambar yang mewakili konten artikel terebut.
Karena contoh yang dibuat sangat sederhana, tag HTML yang digunakan hanya h1, h3, div dan article. Dan untuk memperindah tampilannya style CSS yang digunakan adalah hanya seputar: font, width, margin, padding, background dan float.
Proses lengkapnya dapat disimak dalam video di bawah ini
Bermodalkan beberapa foto kita bisa membuat sebuah contoh desain halaman depan website menggunakan Photoshop, dan karena kebetulan foto-foto yang ada adalah lingkungan sekolah saya mencoba membuat desain sederhana tentang kegiatan atau sarana yang dimiliki sekolah.
Langkah demi langkah proses pembuatannya bisa disaksikan di video di bawah ini, meskipun hanya berdurasi sekitar 15 menit dan tanpa narasi semoga bisa membantu dan bisa diikuti jika hendak dipraktikan.
Secara garis besar, pembuatannya sebagai berikut:
Menambahkan warna gradasi untuk background.
Membuat guide line (garis pandu) untuk margin atas, kanan dan kiri, serta area utama.
Membuat shape (bentuk kotak) untuk diisi dengan foto dengan ukuran bervariasi
Menempatkan foto di atas shape dan menambahkan cliping mask untuk memasukkan foto ke dalam shape.
Menambahkan logo dan text keterangan pada tiap foto.
Membuat menu navigasi di bagian atas laman.
Organisasi layer untuk tiap area dalam foldernya masing-masing
Web Developer atau pengembang website adalah salah satu pekerjaan yang mulai dilirik oleh anak muda saat ini sebagai pilihan karir, hampir semua brand mulai dari perusahaan kecil hingga multinasional memiliki website sebagai representasi produk mereka, hal tersebut membuat lapangan kerja untuk Web Developer sangat luas.
Proses pembuatan website sebenarnya cukup kompleks karena harus bisa menerjemahkan ide menjadi visual laman-laman website, biasanya melibatkan satu tim berisi beberapa orang, seperti desainer grafis serta programmer.
Konon instagram dibangun oleh foundernya yang belajar tentang web development secara mandiri, jadi bukan hal mustahil jika kamu ingin menjadi web developer. Satu yang harus diperhatikan adalah menguasai dengan baik dasar-dasar web dev itu sendiri, dan untuk memudahkan proses pembelajarannya ada baiknya memilih ruang lingkup yang lebih spesifik, seperti spesialisasi frontend, backend atau database.
Kamu akan dengan mudah menemukan sumber belajar di internet, tinggal buka saja Google dan ketik apa yang mau dipelajari, ada puluhan bahkan ratusan atau lebih panduan, atau tutorial. bahkan contoh praktikal web develpment banyak ditemukan di youtube.
Ada baiknya juga kamu bergabung dalam komunitas web developer untuk meningkatkan skill kamu, selalu mengikuti perkembangan teknologi berkembang pesat setiap harinya, dan bertukar ide yang bisa dikembangkan jadi sebuah produk yang akan menjadi portfolio kamu.
Hanya ingin berbagi pengalaman yang saya alami dalam bekerja dan belajar adalah alasan utama saya menulis blog, mungkin akan jarang terbit artikel dan update terbaru, hanya jika ada waktu luang atau ide yang sangat membuat saya menggebu-gebu untuk menulis.
Saya ngeblog menggunakan layanan gratis dan aplikasi opensource: hosting web menggunakan Github Pages, bisa dilihat dari url blog ini.
Kenapa tidak menggunakan CMS seperti Wordpress, Ghost atau Blogger? mungkin biar dibilang ‘anti mainstream’, tapi alasan sebenarnya adalah saya ingin lancar menulis dalam format markdown ‘.md’ yang biasa digunankan untuk membuat readme.md file di github.
Pilihan saya adalah Hexo yang sebenarnya masuk dalam kategori framework static web generator. cukup mudah pengoperasiannya, dan banyak modul pendukung, salah satunya adalah github deploy yang memudahkan proses deployment.
Harapan saya bisa konsisten untuk menulis, dan memberikan konten yang bagus dalam kemasan sederhana yang mudah dipahami, ringan dibaca dan tidak membosankan.
