Tutorial Terbaik Pengembangan Web untuk Pemula

 Tutorial Terbaik Pengembangan Web untuk Pemula

Tutorial Terbaik Pengembangan Web untuk Pemula atau lebih dikenal "Best Web Development Tutorials for Beginners"

Cari tahu apakah pengembangan web cocok untuk Anda dengan kursus 5 hari ini. Pelajari semua tentang menjadi pengembang web, mulai dari tanggung jawab yang dilakukan pengembang web sehari-hari hingga serangkaian keterampilan yang Anda perlukan untuk berhasil dalam peran tersebut. Dan, tentu saja, Anda akan mengotori tangan Anda dengan kode. Anda akan mempelajari dasar-dasar HTML, CSS, dan JavaScript—dan Anda akan membangun situs web pertama Anda dari nol, semuanya hanya dalam 5 hari!

Tutorial 1
Pengantar Pengembangan Web

Dalam tutorial pertama Anda, Anda akan mempelajari apa yang sebenarnya dilakukan oleh pengembang web, berbagai jenis pengembang, dan keterampilan yang diperlukan untuk berhasil dalam peran tersebut.👩‍💻Tidak hanya itu; Anda juga akan melihat apa yang akan Anda dapatkan dalam lima hari ke depan—dan Anda akan membuat halaman web pertama Anda!

Pengembang web pada dasarnya adalah seorang seniman interaktif . Mereka adalah seseorang yang didorong oleh keinginan mendalam untuk menciptakan sesuatu . Kanvas pengembang web adalah peramban web pengguna.

Sama seperti bagaimana seorang anak yang ingin tahu senang membuat mainan dengan bergabung dengan balok LEGO—dan kemudian mengalami kegembiraan yang sama saat membongkar barang untuk melihat cara pembuatannya, tugas pengembang web adalah menggunakan balok penyusun dasar web (seperti HTML, CSS, dan JavaScript) untuk membuat sesuatu yang kompleks seperti halaman web. Jangan berkeringat! Kami akan segera membahas semua persyaratan itu.

Ini juga merupakan tugas pengembang web untuk mendiagnosis masalah dalam fungsionalitas situs web, memahami cara kerja sesuatu dengan membaca kode di baliknya, dan membuat perubahan untuk memperbaiki masalah apa pun. Itu pada dasarnya menjadikan pengembang web sebagai dokter dari web di seluruh dunia. Ketika kita berbicara tentang web di seluruh dunia, kita terutama mengacu pada situs web dan aplikasi web. Pada titik ini, calon pengembang yang ingin tahu dalam diri Anda mungkin bertanya-tanya, "Apa perbedaan antara keduanya?"

Yah, kami senang Anda bertanya! Situs web biasanya berupa halaman sederhana atau kumpulan halaman (situs web komik populer, xkcd , misalnya). Namun, situs web modern jauh lebih dari itu. Ambil Google Docs, misalnya . Ini memiliki antarmuka yang bagus, setelah dibuka, sangat mirip dengan perangkat lunak desktop seperti Microsoft Office. Situs web yang rumit seperti itu sering disebut aplikasi web . Pengembang web saat ini diharapkan mengetahui cara membuat dan bekerja dengan aplikasi web. Karena itu, kebanyakan orang menggunakan istilah tersebut secara bergantian, jadi jangan terlalu terpaku pada terminologi!

Jenis pengembang web

Ada berbagai jenis pengembang web yang berfokus pada area yang berbeda. Ini termasuk:

Pengembang frontend: Pengembang frontend mengimplementasikan desain halaman web menggunakan HTML dan CSS. Mereka memastikan situs web terlihat cantik di perangkat yang berbeda, dan formulir serta tombolnya berfungsi.

Pengembang backend: Pengembang backend membuat tulang punggung aplikasi web. Mereka menulis logika kode yang menangani masukan pengguna (misalnya, apa yang akan terjadi jika Anda mengeklik tombol pendaftaran setelah mengisi formulir).

Pengembang tumpukan penuh: Pengembang tumpukan penuh melakukan sedikit backend dan frontend. Bergantung pada masalah yang dihadapi, mereka dapat mengganti jubah 🦸‍♀️🦸‍♂️ dan memindahkan tumpukan. Anda dapat mempelajari lebih lanjut tentang perbedaan antara pengembangan frontend dan backend dalam panduan ini .

Ada banyak peran khusus lainnya dalam pengembangan web, seperti arsitek sistem, AI, pembelajaran mesin, dan insinyur keamanan. Peran ini memerlukan pengetahuan yang lebih khusus tentang satu atau beberapa jenis pengembangan di atas, sehingga banyak profesional dalam peran ini akan memulai dengan mendapatkan beberapa pengalaman pengembangan web secara umum.

Tutorial 2
Pengantar HTML

HTML adalah tentang menyusun data; itu adalah kerangka yang menyatukan semuanya.🧱Dalam tutorial ini, Anda akan mempelajari sintaks HTML dasar, beberapa elemen HTML utama, dan Anda juga akan membuat struktur dasar untuk halaman web Anda. Jika Anda merasa ambisius, jangan lewatkan tantangan harian!

Elemen HTML

Sekarang setelah kita memiliki pemahaman dasar tentang elemen HTML, mari kita lihat beberapa elemen yang akan kita gunakan dalam kursus ini.

Judul

Judul persis seperti namanya. Dalam HTML, ada enam heading, mulai dari h1 hingga h6. Heading 1, atau h1, adalah heading terbesar dan paling signifikan; itu menandakan bahwa ini adalah teks paling penting di halaman. Signifikansi menurun secara bertahap saat kita bergerak menuju h6.

Tautan Jangkar

Elemen jangkar, a , mengaktifkan HyperText dalam HTML. Itu dapat menautkan ke halaman lain di situs web yang sama atau berbeda. Berikut cara membuat tautan jangkar ke beranda Google:

Kode ini akan ditampilkan sebagai berikut. Perhatikan bagaimana mengarahkan penunjuk tetikus pada tautan menunjukkan nilai jangkar href di sudut kiri bawah halaman. Anda harus mengklik beberapa tautan jangkar untuk mencapai halaman ini!

Paragraf

Elemen paragraf, p , digunakan untuk blok teks. Kami biasanya menata paragraf sedemikian rupa sehingga memiliki ruang yang bagus antara satu sama lain dan antara paragraf pertama dan judulnya.

Daftar

Daftar sangat berguna untuk menampilkan data dalam daftar terurut atau tidak terurut. Untuk daftar berurut (daftar yang menggunakan angka) kami menggunakan <ol> dan untuk daftar tidak berurut (daftar dengan poin-poin), kami menggunakan <ul>. Di dalam salah satu elemen ini, setiap item daftar dilambangkan dengan <li>. Berikut contohnya:

Beginilah contoh kami 'merender' (yang hanya kata mewah yang berarti tampilannya di browser kami saat kami menyegarkan halaman).

Divisi dan bentang

Segala sesuatu di halaman web dapat dibayangkan terkandung dalam serangkaian kotak. Tugas kita sebagai pengembang web adalah mengatur kotak-kotak ini sehingga seluruh halaman terlihat bagus di semua layar. Kotak-kotak ini berisi teks, gambar, dan semua hal lain yang kita lihat di laman web.

Nama kotak ini adalah divisions (div) dan spans (span) . Div dan span tidak melakukan apa pun sendiri, tetapi kami menambahkan sesuatu ke dalamnya, seperti teks dan gambar, dan memungkinkan kami memposisikan teks dan gambar sesuka kami.

Analogi yang bagus untuk div dan span adalah tas. Tas seperti tas tangan atau ransel tidak terlalu berguna dengan sendirinya. Tidak ada yang akan membawa tas kosong kemana-mana. Mereka menjadi berguna saat kita menyimpan barang di dalamnya–mereka membantu kita mengatur segala sesuatunya. Begitulah cara kami memikirkan pembagian dan bentang. Itu adalah wadah untuk elemen fungsional sebenarnya di halaman web Anda.

Kami akan melihat cara kerjanya ketika kami menambahkannya ke halaman kami di bawah ini.

Formulir

Kami mengisi formulir sepanjang waktu di internet. Form dan elemen form memungkinkan kita untuk menerima input pengguna. Apakah itu untuk masuk ke akun media sosial kami atau memposting tweet, di mana pun Anda melihat tempat untuk menambahkan teks atau mengklik tombol atau mengaktifkan kotak centang, ada elemen formulir HTML di latar belakang.

Tutorial 3
Pengantar CSS Dan Halaman Web Responsif

Anda telah mempelajari semua tentang HTML—sekarang saatnya untuk berkenalan dengan CSS. CSS adalah cara menata HTML kita. Itu yang Anda gunakan untuk mengubah warna dan membuat situs Anda menarik secara visual.🌈Dalam tutorial ini, Anda akan mempelajari cara memposisikan elemen, respons seluler, dan kueri media, dan Anda akan menambahkan CSS ke halaman web Anda.

CSS, atau C ascading S tyle S heets, adalah cara untuk menata markup kita (biasanya HTML). Itu yang akan Anda gunakan jika Anda ingin mengubah warna beberapa teks atau membuat animasi sederhana. Itu dan opsi gaya lainnya yang tidak terbatas dimungkinkan dengan penggunaan CSS. Pada dasarnya, setiap situs web, betapapun kerennya, dibuat dengan CSS yang sama dengan yang akan kita pelajari dalam kursus ini.

CSS adalah apa yang suka disebut oleh pemrogram 'deklaratif'; dengan kata lain, Anda mendeklarasikan apa yang Anda inginkan, dan CSS memberikannya kepada Anda. Katakanlah Anda ingin teks judul menjadi tebal dan berwarna merah, Anda akan melakukan sesuatu seperti berikut ini, dan hanya itu. Anda akan memiliki tajuk merah tebal!

Mari mundur selangkah dan pertimbangkan apa yang terjadi.

Kami mulai dengan menulis h3 , yang disebut pemilih. Ini seperti membidik target. Di sini, kami menargetkan semua elemen h3. Kemudian kita memiliki kurung kurawal buka ( { ) dan beberapa baris di dalamnya ( color: … dan font-weight: … ). Setiap baris ini adalah gaya tertentu yang akan diterapkan pada elemen yang dipilih (h3 dalam hal ini).

Mari kita ambil contoh lain, kali ini benar-benar mengerjakan proyek kita. Ingat bagian yang kita tulis kemarin saat kita belajar HTML?

Tutorial 4
Penataan Halaman Web Tingkat Lanjut Dengan CSS

Ini baru tutorial keempat dan Anda sudah berada di Penataan Halaman Web Lanjutan. 😇Tidak buruk! Jadi apa sebenarnya yang dimaksud dengan ini? Nah, dalam tutorial ini Anda akan menyesuaikan halaman web Anda untuk membuatnya lebih... Anda! Anda akan melihat bahwa situs Anda tiba-tiba mulai terlihat sedikit lebih profesional.

Secara umum, setiap kali kami bekerja dengan gambar di halaman web (yang hampir selalu), kami mencoba memisahkan file menurut jenisnya. Jadi semua gambar masuk ke satu folder, file CSS masuk ke folder lain, dan seterusnya. Karena kami hanya memiliki satu file CSS, kami tidak meletakkannya di foldernya sendiri. Tapi untuk bagian selanjutnya, kita akan bekerja dengan banyak gambar. Agar tidak mengacaukan direktori kerja kita (yang merupakan nama folder tempat file index.html kita berada), kita akan membuat folder baru bernama 'images' untuk menampung semua gambar kita.

Dalam folder 'gambar' ini, Anda perlu menambahkan beberapa gambar yang akan kita gunakan dalam kursus ini. Kami akan memberi Anda gambar karena lebih mudah untuk tidak berurusan dengan masalah ukuran gambar dan rasio aspek, tetapi Anda selalu dapat bereksperimen dengan gambar Anda sendiri nanti. Semua gambar kami berasal dari Unsplash , situs web stok gambar gratis untuk digunakan dalam proyek seperti milik kami.

Jadi, langkah pertama adalah membuat folder bernama gambar di editor Sublime, di dalam folder portofolio kita .

Setelah Anda selesai melakukannya, unduh file zip dari tautan ini  dan unzip di dalam folder yang baru saja Anda buat. Setelah selesai, beginilah tampilannya di Sublime.

Sekarang kita siap untuk mulai menggunakan gambar kita. Pertama, kami akan mengganti gambar profil. Di file HTML kami, kami akan mengganti baris ini di bagian intro:

Dengan ini:

Perhatikan bahwa atribut src telah berubah. Intinya, kami memberi tahu browser untuk memilih gambar yang disimpan secara lokal (karenanya tidak ada https:// ) dan menampilkannya. Mari muat ulang browser dan lihat tampilannya!

Tutorial 5
Pengantar JavaScript

JavaScript ada di mana-mana di dunia pengembangan perangkat lunak saat ini. 🌎JavaScript adalah dasar pengembangan web frontend dan merupakan bahan utama dalam kerangka kerja seperti ReactJS, Angular, dan VueJS. Dalam tutorial JavaScript ini, kita akan membahas dasar-dasar (variabel, fungsi, operator) sebelum mengimplementasikan beberapa cuplikan kode keren di situs web Anda.

JavaScript juga merupakan bahasa yang menyenangkan dan bermanfaat, yang sangat penting saat Anda baru memulai pengembangan perangkat lunak. Dukungan komunitasnya sangat bagus, jadi jika Anda buntu, kemungkinan besar masalah dan solusinya sudah ada di web.

Sekarang setelah kita mendapatkan tampilan JavaScript yang luas, mari masuk ke detail yang lebih teknis. JavaScript dibuat untuk menambahkan 'kehidupan ke halaman web'. Sama seperti HTML dan CSS, JavaScript ditulis dalam file teks biasa dengan ekstensi .js.

Seperti yang disebutkan sebelumnya, JavaScript dapat digunakan untuk menyelesaikan banyak operasi berguna di frontend, seperti memvalidasi formulir, mengingatkan pengguna, menyimpan data sementara, dan melakukan perhitungan—untuk menyebutkan beberapa saja.

😎Tips pro: Selain namanya, JavaScript tidak ada hubungannya dengan Java. Pemula sering bingung antara dua bahasa. Ingatlah bahwa Java adalah bahasa yang sama sekali berbeda yang dibuat untuk tujuan yang berbeda (walaupun Anda masih akan menemukannya berjalan di backend situs web tertentu).

Terakhir, sebelum kita melihat rencana perjalanan hari ini, ingatlah bahwa JavaScript, seperti halnya HTML dan CSS (tetapi mungkin lebih dari itu), adalah bahasa yang sangat luas. Kami hanya akan mempelajari bagian-bagian yang relevan bagi kami hari ini, jadi kami akan membuat daftar beberapa sumber yang bagus di bagian akhir jika Anda ingin mempelajari lebih lanjut.

Kesimpulan

Selamat! Anda telah mencapai akhir dari kursus singkat pengembangan web Anda. Beberapa hari terakhir sangat mengasyikkan, dan kami harap Anda menikmati perjalanan kecil ini seperti kami.

Kami mulai dengan menyiapkan lingkungan pengembang Anda dan menulis beberapa baris kode pertama kami di dalamnya. Kemudian kami menambahkan HTML dan data ke dalamnya, diikuti oleh beberapa CSS. Lalu ada lebih banyak CSS untuk membuat halaman cantik. Terakhir, kami menyempurnakannya dengan beberapa keajaiban JavaScript dan membuat halaman menjadi hidup.

Kami bangga kepada Anda karena telah bertahan hingga akhir, dan kami harap ini hanyalah awal dari perjalanan luar biasa Anda dalam pengembangan web.

Read on : www.mikrodinet.eu.org

Judul :  Tutorial Terbaik Pengembangan Web untuk Pemula

Url : https://www.mikrodinet.eu.org/2023/05/beginners.html

Penulis : @mikrodinet - Administator

Lab : Artikel

Country : Indonesia