Dengan perkembangan begitu banyak bahasa pemrograman, gaya, dan markup, belajar desain web menjadi lebih rumit dari sebelumnya. Untungnya, ada banyak alat yang tersedia untuk membantu Anda memulai. Cari beberapa sumber daya dasar, seperti tutorial online atau buku terbaru tentang desain web. Setelah Anda siap untuk memulai, mulailah dengan menguasai dasar-dasar HTML dan CSS. Kemudian Anda dapat mulai menjelajahi bahasa desain web yang lebih canggih, seperti JavaScript!
Langkah
Metode 1 dari 4: Menemukan Sumber Daya Desain Web
Langkah 1. Periksa online untuk kursus dan tutorial desain web
Internet penuh dengan informasi terperinci tentang desain web, dan banyak di antaranya tersedia secara gratis. Anda dapat memulai dengan mengambil beberapa kursus online gratis di Udemy atau CodeCademy, atau bergabung dengan komunitas coding seperti freeCodeCamp. Anda juga dapat menemukan tutorial video desain web di YouTube.
- Jika Anda tahu persis apa yang Anda cari, coba lakukan penelusuran menggunakan istilah tertentu (mis., “pemilih kelas dalam tutorial CSS”).
- Jika Anda seorang pemula tanpa pengalaman desain web, mulailah dengan mempelajari dasar-dasar pengkodean dalam HTML dan CSS.
Langkah 2. Cobalah mengikuti kelas di perguruan tinggi atau universitas setempat
Jika Anda kuliah di perguruan tinggi atau universitas, tanyakan kepada departemen ilmu komputer sekolah Anda atau lihat katalog kursus Anda untuk mengetahui apakah ada kursus desain web yang tersedia. Jika Anda tidak bersekolah, periksa untuk melihat apakah ada perguruan tinggi atau universitas di dekat Anda yang menawarkan kelas pendidikan lanjutan dalam desain web.
Beberapa universitas menawarkan kelas desain web online yang terbuka bagi siapa saja yang ingin mendaftar. Periksa situs web seperti Coursera.org untuk menemukan kelas desain web gratis atau terjangkau yang diajarkan oleh instruktur universitas
Langkah 3. Dapatkan beberapa buku desain web dari toko buku atau perpustakaan
Buku yang bagus tentang desain web dapat menjadi referensi yang sangat berharga saat Anda belajar dan menerapkan keahlian Anda. Cari buku-buku terbaru tentang desain web umum atau format dan bahasa pengkodean khusus yang ingin Anda pelajari.
Membaca majalah dan artikel blog tentang desain web juga merupakan cara yang baik untuk mempelajari teknik baru, mendapatkan inspirasi, dan mengikuti tren terbaru
Langkah 4. Unduh atau beli beberapa perangkat lunak desain web
Perangkat lunak desain web yang baik dapat membantu Anda membangun situs web dengan lebih efisien dan efektif, dan juga bagus untuk membantu Anda mempelajari seluk beluk penerapan pengkodean, skrip, dan elemen desain utama lainnya. Anda mungkin mendapat manfaat dari menggunakan alat-alat seperti:
- Program desain grafis, seperti Adobe Photoshop, GIMP, atau Sketch.
- Alat pembuatan situs web, seperti WordPress, Chrome DevTools, atau Adobe Dreamweaver.
- Perangkat lunak FTP untuk mentransfer file yang sudah jadi ke server Anda.
Langkah 5. Temukan beberapa templat situs web untuk dimainkan saat Anda memulai
Tidak ada yang salah dengan menggunakan template saat Anda mempelajari dasar-dasar desain web. Lakukan pencarian untuk templat halaman web yang Anda suka, dan perhatikan kodenya dengan cermat untuk mendapatkan gambaran tentang bagaimana perancang menyatukan halaman tersebut. Anda juga dapat bereksperimen dengan mengubah kode dan menambahkan elemen Anda sendiri ke template.
Lakukan pencarian untuk templat situs web gratis untuk memulai, atau bereksperimenlah dengan templat yang disertakan dengan perangkat lunak desain web Anda
Metode 2 dari 4: Menguasai HTML
Langkah 1. Biasakan diri Anda dengan tag HTML dasar
HTML adalah bahasa markup sederhana yang digunakan untuk memformat elemen dasar situs web. Anda dapat memformat berbagai elemen situs web Anda dengan menggunakan tag. Tag muncul dalam tanda kurung siku sebelum dan sesudah setiap elemen, dan memberikan instruksi tentang bagaimana elemen tersebut akan berfungsi pada halaman. Untuk menutup tag, letakkan a / di depan tag terakhir di dalam tanda kurung siku.
- Misalnya, jika Anda ingin beberapa teks Anda menjadi berani, Anda akan mengelilingi elemen dengan tag, seperti ini: Teks ini dicetak tebal.
- Beberapa tag umum termasuk (paragraf), (jangkar, yang mendefinisikan teks tertaut), dan (font, yang dapat membantu menentukan berbagai atribut teks, seperti ukuran dan warna).
- Tag lain mendefinisikan bagian yang berbeda dari dokumen HTML itu sendiri. Misalnya, digunakan untuk memuat informasi tentang halaman yang tidak akan terlihat oleh pemirsa, seperti kata kunci atau deskripsi halaman yang akan muncul di hasil mesin pencari.
Langkah 2. Pelajari cara menggunakan atribut tag
Beberapa tag memerlukan informasi tambahan untuk menentukan bagaimana seharusnya berfungsi. Informasi tambahan ini muncul di dalam tag pembuka, dan ini disebut "atribut". Nama atribut muncul segera setelah nama tag, dipisahkan oleh spasi. Nilai atribut dilampirkan pada nama atribut dengan tanda = dan diapit oleh tanda kutip.
- Misalnya, jika Anda ingin membuat beberapa teks menjadi merah, Anda dapat melakukannya dengan menggunakan tag dan atribut warna font yang sesuai, seperti ini: Teks ini berwarna merah.
- Banyak efek yang dulu secara rutin dicapai dengan atribut tag HTML, seperti mengatur warna font yang berbeda, sekarang biasanya dilakukan dengan pengkodean CSS.
Langkah 3. Percobaan dengan elemen bersarang
HTML juga memungkinkan Anda untuk menempatkan elemen di dalam elemen lain untuk membuat pemformatan yang lebih kompleks. Misalnya, jika Anda ingin mendefinisikan sebuah paragraf dan kemudian membuat miring beberapa teks di dalam paragraf, Anda dapat melakukannya seperti ini:
Saya suka pengkodean!
Langkah 4. Berkenalan dengan elemen kosong
Beberapa elemen dalam HTML tidak memerlukan tag pembuka dan penutup. Misalnya, jika Anda menyisipkan gambar, Anda hanya memerlukan satu tag “img” yang berisi nama tag dan atribut lain yang diperlukan (seperti nama file gambar dan teks alternatif apa pun yang ingin Anda tambahkan untuk tujuan aksesibilitas). Sebagai contoh:
Langkah 5. Jelajahi tata letak dasar dokumen HTML
Agar situs web berbasis HTML Anda berfungsi dengan baik, Anda harus tahu cara memformat seluruh halaman. Ini melibatkan menentukan di mana kode html Anda dimulai dan berakhir, serta menggunakan tag untuk menentukan bagian mana dari kode yang akan ditampilkan versus yang ada untuk memberikan informasi latar belakang yang tersembunyi. Sebagai contoh:
- Gunakan tag untuk mendefinisikan halaman Anda sebagai dokumen HTML.
- Selanjutnya, isi seluruh halaman Anda di dalam tag untuk menentukan di mana kode Anda dimulai dan diakhiri.
- Tempatkan informasi apa pun yang tidak akan ditampilkan kepada pemirsa, seperti judul halaman, kata kunci, dan deskripsi halaman Anda, di dalam tag.
- Tentukan isi halaman Anda (yaitu, teks dan gambar apa pun yang Anda ingin pemirsa lihat) dengan tag.
Metode 3 dari 4: Mengenal CSS
Langkah 1. Gunakan CSS untuk menerapkan gaya ke dokumen HTML Anda
CSS adalah bahasa stylesheet yang memungkinkan Anda untuk menerapkan gaya dan elemen desain yang berbeda ke halaman web Anda. Misalnya, jika Anda ingin secara selektif menerapkan font atau warna teks tertentu ke beberapa elemen teks di halaman Anda, Anda dapat membuat file CSS untuk melakukannya. Kemudian, Anda dapat memasukkan file CSS ke dalam dokumen HTML Anda di mana pun Anda suka.
-
Misalnya, jika Anda ingin file CSS mengubah semua elemen paragraf dalam dokumen HTML Anda menjadi hijau, Anda bisa membuat file.css yang berisi baris:
- P {
- warna: hijau;
- }
- Anda kemudian akan menyimpan file dengan nama seperti style.css.
- Untuk menerapkan stylesheet ke dokumen HTML Anda, Anda akan memasukkannya sebagai elemen tautan kosong di dalam tag. Sebagai contoh:
Langkah 2. Kenali elemen-elemen dari kumpulan aturan CSS
Sepotong kode CSS individual disebut "set aturan." Kumpulan aturan berisi elemen berbeda yang menentukan apa yang Anda ingin kode Anda lakukan. Ini termasuk:
- Selector, yang mendefinisikan elemen HTML yang ingin Anda gaya. Misalnya, jika Anda ingin kumpulan aturan memengaruhi elemen paragraf, Anda akan memulai kumpulan aturan dengan huruf "p".
- Deklarasi, yang mendefinisikan properti yang ingin Anda gaya (seperti warna font). Deklarasi terkandung dalam tanda kurung kurawal {}.
- Properti, yang menentukan properti mana dari elemen HTML yang ingin Anda gaya. Misalnya, di dalam tag, Anda dapat menentukan bahwa Anda ingin memberi gaya pada warna teks.
- Nilai properti mendefinisikan secara spesifik bagaimana Anda ingin mengubah properti (misalnya, jika properti adalah warna font, maka nilai properti akan menjadi "hijau").
- Anda dapat memodifikasi beberapa properti berbeda dalam satu deklarasi.
Langkah 3. Terapkan CSS ke teks Anda untuk membuat pengaturan huruf Anda terlihat bagus
CSS berguna untuk menerapkan berbagai efek pada teks Anda tanpa harus mengkodekan setiap properti secara individual dalam HTML. Bereksperimenlah dengan mengubah properti pengaturan huruf yang berbeda di CSS, termasuk:
- Warna huruf
- Ukuran huruf
- Keluarga font (mis., rentang font yang ingin Anda gunakan dalam teks Anda)
- Perataan teks
- Tinggi garis
- Spasi huruf
Langkah 4. Bereksperimenlah dengan kotak dan alat tata letak CSS lainnya
CSS juga berguna untuk menambahkan elemen visual yang menarik ke halaman Anda, seperti kotak teks dan tabel. Selain itu, Anda dapat menggunakannya untuk mengubah keseluruhan tata letak halaman Anda dan menentukan di mana elemen yang berbeda diposisikan relatif satu sama lain.
Misalnya, Anda dapat menentukan atribut seperti lebar dan warna latar belakang suatu elemen, menambahkan batas, atau mengatur margin yang akan menciptakan ruang di antara berbagai elemen di halaman Anda
Metode 4 dari 4: Bekerja dengan Bahasa Desain Lain
Langkah 1. Pelajari JavaScript jika Anda ingin menambahkan elemen interaktif ke halaman Anda
JavaScript adalah bahasa yang bagus untuk dipelajari jika Anda tertarik untuk menambahkan fitur yang lebih canggih ke situs web Anda, seperti animasi dan popup. Ikuti kursus atau cari tutorial online tentang cara membuat kode dalam JavaScript dan memasukkan elemen kode tersebut ke halaman web Anda | menggunakan HTML.
Sebelum Anda terbiasa dengan JavaScript, Anda harus terbiasa dengan dasar-dasar membuat halaman dalam HTML dan CSS
Langkah 2. Biasakan diri Anda dengan jQuery untuk membuat pengkodean JavaScript lebih mudah
jQuery adalah pustaka JavaScript yang dapat menyederhanakan pemrograman Java dengan memungkinkan Anda mengakses berbagai elemen JavaScript yang telah dikodekan sebelumnya. jQuery adalah alat yang hebat jika Anda sudah terbiasa dengan dasar-dasar pengkodean JavaScript.
Anda dapat mengakses perpustakaan jQuery dan banyak sumber daya berharga lainnya melalui jQuery.org, situs web Yayasan jQuery
Langkah 3. Pelajari bahasa sisi server jika Anda tertarik dengan pengembangan back-end
Meskipun HTML, CSS, dan JavaScript ideal untuk desainer web yang berfokus pada apa yang dilihat dan dilakukan pengguna di situs web, bahasa sisi server berguna jika Anda lebih tertarik pada pekerjaan di balik layar. Jika Anda ingin belajar tentang pengembangan back-end, fokuslah pada pembelajaran bahasa seperti Python, PHP, dan Ruby on Rails.
Bahasa ini berguna untuk mengelola dan memproses data yang tidak dilihat pengguna. Misalnya, PHP dapat digunakan untuk membuat alat pembuatan kata sandi yang aman di situs web yang memerlukan login
File Bantuan
Lembar Cheat HTML
Lembar Cheat CSS
