7 Hal CSS Basic yang bisa membuatmu menjadi Fronted Master

Orang-orang memperlakukan pengembangan frontend seperti binatang mitos yang hanya bisa dijinakkan oleh sedikit orang. Orang yang menguasai frontend sangatlah sedikit karena saking sulitnya pengembangan frontend. Tapi kenyataannya, itu tidak sesulit yang anda dipikirkan. Anda hanya perlu menguasai beberapa hal ini dan anda akan menjadi Frontend Master dalam waktu singkat. Seperti kata pepatah terkenal:

Seorang master bukanlah seseorang yang berlatih 10.000 gerakan berbeda, dia adalah seseorang yang berlatih 1 gerakan 10.000 kali.

Tata letak menggunakan Flexbox & Grid

Perbedaan Flexbox dan Grid Layout

Flexbox dan Grid adalah dua alat CSS paling efektif yang dapat anda gunakan untuk membuat tata letak. Mungkin sedikit sulit pada awalnya, tetapi begitu anda menguasainya, itu akan menjadi alat yang sangat membantu untuk anda.

Menggunakan Media Queries untuk Perangkat yang Berbeda

Beda perangkat, berbeda juga tampilannya

Kita tidak pernah tahu perangkat yang akan digunakan pengunjung saat membuka situs web anda. Jadi, sangat penting untuk memastikan bahwa situs web anda terlihat responsif pada perangkat dari segala bentuk dan ukuran. Media Query memecahkan masalah tersebut dengan memungkinkan developer untuk menentukan style untuk setiap ukuran layar.

Memanfaatkan Pseudo-classes & Pseudo-elements

First Letter merupakan contoh dari Pseudo-elements

Pseudo-classes dan Pseudo-elements adalah CSS selector yang memungkinkan anda untuk memilih elemen ketika kondisi tertentu telah terpenuhi atau bagian tertentu dari suatu elemen. Ini dapat digunakan untuk menambahkan interaktivitas, spesifik desain dan lainnya. Seperti memperbarui style tombol saat diarahkan(hover) atau ditekan(press), memberikan style huruf pertama paragraf secara berbeda dan lain-lain.

Menambahkan Animasi

See the Pen Super Simple CSS Spinner by Thomas Mandelid (@mandelid) on CodePen.

Ingin membuat situs anda terihat lebih bagus dan menonjol? Animasi adalah alat yang hebat dan tepat untuk mencapai hal itu! Ini bisa sesederhana menambahkan transisi properti ke elemen yang digunakan dalam kombinasi dengan pseudo-classes atau sesuatu yang lebih kompleks seperti membuat animasi khusus menggunakan keyframes.

Shadow = Life

Perbedaan Dengan atau Tampa Bayangan

Shadow/banyangan adalah cara yang bagus untuk menambahkan kedalaman ke situs web anda sehingga elemen terlihat menonjol. CSS memungkinkan anda untuk menambahkan berbagai jenis bayangan, yaitu box-shadow, text-shadow, dan drop-shadow. Kita harus mengetahui dimana dan kapan waktu yang tepat untuk menggunakan bayangan pada elemen diwebsite. Tetapi warnanya tidak harus hitam.

Posisi Elemen

Jenis jenis posisi elemen

Cara memposisikan elemen sangat penting untuk pengembangan frontend. Dengan tidak mengetahui bagaimana posisi elemen static , relative , absolute , fixed , dan sticky, anda  akan membatasi kemampuan anda secara drastis.

Mengatur border-radius

Properti border-radius ini memungkinkan pengembang untuk membuat UI yang tidak terlihat kaku. Ini adalah alat yang hebat untuk mengembangkan UX yang sangat profesional.

Belajar HTML&CSS Dasar 1 : Software Pendukung Berserta Caranya

Bagi anda yang ingin belajar membuat website tapi masih pemula, saya yakin anda bingung harus mulai darimana pada awalnya. Menurut saya, yang perlu anda lakukan pertamakali adalah menyiapkan alat-alat (software) yang digunakan untuk membuat website. Dibawah ini ada beberapa software yang saya rekomendasikan untuk anda gunakan.

Notepad++

Yang pertama adalah Notepad++. Notepad++ merupakan aplikasi text editor yang sering digunakan untuk membuat serangkaian kode dalam berbegai jenis bahasa pemrograman. Jadi, notepad++ ini akan membantu anda dalam mengoding(menulis kode) nantinya. Sebenarnya anda bisa saja membuatnnya menggunakan Notepad biasa yang merupakan bawaan windows atau semacamnya. Tetapi dengan bantuan Notepad++, membuat web akan terasa lebih mudah dan cepat.

Contoh Tampilan Notepad++

Untuk kelebihan Notepad++ dari text editor lainnya adalah:

• Mendukung berbagai bahasa pemrograman termasuk HTML, CSS, PHP, SQL, JS, dan lainnya.
• Setiap type syntax terlihat lebih jelas karena ditulis dengan warna yang berbeda-beda.
• Memiliki fitur Tab seperti Web Browser
• Memiliki fitur autocomplete, dimana saat anda mengetik tanda "(" maka akan secara automatis tanda ")" akan muncul. Tidak hanya tanda kurung, tanda kutip, kurung siku juga bisa.
• Gratis
• Mudah dalam mengatur konfigurasinya
• Banyak addon yang tersedia

Anda dapat mendapatkan software ini secara gratis di web aslinya.

Download Notepad++

Xampp

Yang kedua adalah Xampp. Xampp berfungsi untuk menampilkan website yang anda buat dengan semestinya. Terkadang dalam menampilkan web yang anda buat, terdapat keanehan karena tampilan tidak sesuai dengan apa yang anda tulis. Dengan XAMPP ini masalah tersebut dapat teratasi. Untuk lebih lanjut, anda dapat surfing di internet karena banyak web/blog yang telah menjelaskan tentang XAMPP ini.

Tampilan Xampp Control Panel

Anda dapat mendapatkan XAMPP secara gratis di web officialnya.

Download XAMPP

Untuk saat ini, anda tak perlu ambil pusing. Yang penting anda harus punya dua software diatas dan andapun bisa mulai belajar untuk membuat web. Untuk cara penggunaannya akan saya jelaskan nanti.

Selain kedua software diatas, saya juga merekomendasikan beberapa web yang akan membantu anda belajar untuk membuat web.

W3School

Situs ini adalah perpustakaannya bahasa pemrograman web, mirip seperti kamus. Isinya terdapat syntax berbagai bahasa pemrograman lengkap dengan cara penggunaannya. Jadi apabila anda lupa atau tidak tau cara pengguanan suatu syntax, anda dapat melihatnya disitus ini. Situs ini bisa anda gunakan sebagai referensi nantinya.

Situs : W3schools

Codecademy

Codecademy adalah sebuah aplikasi web yang berfungsi untuk membantu kita dalam mempelajari bahasa pemrograman. Anda dapat belajar di web ini langkah perlangkah. Sayangnya anda harus mengupgrade akun anda ke akun pro untuk menikmati semua fitur yang ada.

Situs : Codecademy

StackOverflow

StackOverflow adalah sebuah forum atau komunitas berbasis web yang beranggotakan para programmer. Biasanya jika saya mengalami kesulitan dalam pemrograman, saya akan tanyakan di situs ini. Jadi, nantinya programmer lain akan menjawab dan memberikan solusi terhadap masalah yang saya tanyakan.

Situs : StackOverflow

Kesimpulan

Jadi kedua software diatas harus anda miliki untuk belajar membuat web. Karena untuk tutorial selanjutnya kita akan menggunakan kedua software tersebut, Xampp dan Notepad++. Sambil menunggu tutorial selanjutnya, silahkan anda buka ketiga website yang telah saya sarankan.

Omong-omong saya juga sedang belajar bahasa pemrograman web. Karena dikampus hanya diajarkan dasar-dasarnya saja. Jadi saya belajar secara otodidak untuk bahasa pemrograman web lanjut. Jadi kita sama-sama belajar disini.

Apabila ada pertanyaan atau pendapat seputar topik yang dibahas diatas, silahkan ditulis dikolom komentar. Insyaallah saya akan menjawab secepatnya. Terimakasih....

Harus Mulai Darimana Jikalau Mau Menjadi Web Development

Web Development

Saya yakin anda sering atau setidaknya pernah mendengar kata ini. Web Development adalah seseorang yang membangun sebuah website dengan menggunakan bahasa pemograman tentunya. Untuk lebih detailnya, anda bisa mencari tahu ditempat lain karena sudah banyak web yang menjelaskan hal ini. Hanya saja, tidak diberitahu cara agar bisa menjadi web development. 

Ayo Menjadi Seorang Web Development!

Disini saya ingin menjelaskan Bagaimana cara menjadi Web Development. Bukan berarti saya sudah pro dalam hal ini, karena saya juga sedang belajar untuk menjadi Web Development.

Perbedaan Web Development dan Web Designer

Sebagian orang mengatakan bahwa Web Development dan Web Designer itu sama, tetapi menurut saya tidak. Kenapa? Karena bagi saya seorang Web Development adalah orang yang membangun sebuah website yang lebih ditunjukan untuk membuat sistem / fungsi di web. Seperti jika pengunjung mengklik suatu tombol, maka apa yang terjadi? Jika Mengklik itu, apa yang terjadi? Mengklik ini? dan sebagainya

Sedangkan Web Designer adalah orang yang lebih difokuskan untuk menciptakan tampilan visual website agar lebih cantik, menarik, dan enak dipandang oleh pengujung. Biasanya berhubungan dengan tataletak, desain grafis, dan sebagainya.

Jadi Web Developement dan Designer adalah dua istilah yang berbeda tetapi memiliki tujuan yang sama, yaitu membangun sebuah web yang bagus.

Belajar untuk Menjadi Web Development

Tidak tahu harus mulai darimana? Dimana belajarnya? Apa-apa saja yang harus anda persiapkan? dan Sebagainya. Pertanyaan-pertanyaan inilah yang muncul saat pertamakali anda ingin menjadi seorang web development. Dibawah ini merupakan langkah awal yang harus anda lakukan untuk menuju keinginan anda.

Niat

Yang pertama pastinya adalah niat. Niat kan diri anda, bahwa anda ingin menjadi seorang developer yang handal. Niat ini yang akan menjadi pondasi anda untuk melangkah kedepan. Apalagi jika dibarengi do'a, insyaallah tujuan cepat tercapai.

Tentukan Tujuan

Tentukan tujuan/target/alasan ingin menjadi web development. Setelah itu, tulis disecarik kertas sebesar-besarnya dan letakan ditempat yang mudah dan sering anda lihat. Misalnya di dinding kamar, pintu wc, atau anda juga dapat menjadikannya sebagai wallpaper laptop/smartphone anda.  Ini akan menjadi motivasi anda ketika anda malas melanjutkan tujuan anda. Jadi, saat anda malas melanjutkan semua ini, kertas ini akan mengingatkan anda tujuan anda dan akan membuat semangat lagi.

Ketahui Apa yang Akan Dipelajari

Anda harus tahu apa yang akan dipelajari untuk menjadi seorang web development.

HTML, CSS, JavaScript, Angular, Vue.js, PHP, Ruby, Phyton, Java, Github

Banyak bahasa pemrograman yang bisa anda pelajari sebagai seorang web development. Tetapi tidak semua bahasa pemrograman wajib untuk dipelajari. Menurut saya, setidaknya ada 5 bahasa yang harus anda pelajari, yaitu HTML, CSS, JavaScript, PHP, dan MYSQL. Lalu sisanya anda dapat memilih mana yang akan dipelajari.

Mulai Belajar HTML dan CSS Dasar

Mau itu Web Developer atau Web Designer, kedua bahasa ini wajib anda ketahui. Karena dua bahasa  ini adalah bahasa yang selalu dipakai dalam pembangunan website. Sekurang-kurangnya bahasa pemrograman anda, setidaknya anda harus tahu 2 bahasa ini walaupun dasarnya saja. 

Menjaga Konsistensi

Inilah point terpenting dan tersulit untuk dilakukan. Yaitu menjaga konsistensi. Maksudnya anda harus konsisten dalam menekuni bidang ini. Sudah seminggu anda belajar HTML, tiba-tiba anda malas untuk menjutkannya. Inilah yang disebut tidak konsisten. Memang merutinitaskan belajar memang bagus, tapi menjaga konsistensi lebih bagus. Konsisten = Teguh pada Pendirian.

Stop Thinking, Let's Do It...

Mungkin anda sudah banyak membaca artikel yang sejenis ini. Dan mungkin sekarang anda masih membaca dan berpikir. Jadi anda hanya membaca tanpa mengamalkan/mempraktikan apa yang anda baca. Maka dari itu, hentikan semua kegiatan anda. Dan lakukan apa yang telah anda baca sebelumnya. Anda dapat memulainya dengan menguatkan niat anda dan membuat tujuan/alasan anda untuk ditempelkan/diletakan ditempat yang mudah terlihat.

Penutup...

Mungkin untuk post kali ini menjelaskan tentang persiapan yang dilakukan untuk memulai tujuan baru anda. Yaitu menjadi seorang Web Development yang Handal. Saya juga sedang belajar. Berarti kita sama. Mungkin sekian dari saya, untuk selajutnya saya akan membahas tentang HTML. Terimakasih.