Belajar Dasar Pemrograman Web
- Get link
- X
- Other Apps
Belajar Dasar Pemrograman Web
Pengenalan Kelas
URL Link Video
Selamat datang di kelas Belajar Dasar Pemrograman Web!
Kelas ini adalah tahap awal dalam jalur pembelajaran Front End Web Developer yang akan memandu Anda dalam memahami bagaimana aplikasi berbasis web dirancang dan dibangun melalui sebuah kode program.
Peranan website di dunia ini sangat luas. Dimulai dari pertukaran informasi hingga aplikasi web yang dapat melakukan layaknya aplikasi desktop dan seluler, seperti edit foto dan video, alat komunikasi berupa video dan suara, dan sebagainya. Hal ini menjadi kebutuhan akan pembuatan website sangat luas dan tingginya permintaan industri akan talenta yang mampu mengembangkan website (web developer).
Jika Anda ingin menjadi seorang web developer, kelas ini merupakan kelas yang cocok sebagai pijakan awal dalam meniti jalannya seorang pengembang web yang professional. Kami harap materi yang disampaikan di kelas ini dapat dipahami dengan baik dan mudah.
Selamat belajar!
Peralatan Kelas
Untuk mengikuti kelas ini, ada beberapa alat yang harus kita siapkan. Beberapa di antaranya dapat dilihat lebih rinci sebagai berikut.
Code Editor atau IDE
Dalam mengembangkan aplikasi, baik website maupun platform lainnya, sudah pasti developer akan menuliskan kode-kode dalam bentuk HTML, CSS, maupun JavaScript. Semakin besar aplikasi maka semakin banyak kode yang akan dituliskan. Oleh karena itu, kita membutuhkan Code Editor atau Integrated Development Environment (IDE).
Sebenarnya, beberapa Sistem Operasi sudah menyediakan text editor usungannya masing-masing. Contohnya, Windows OS memiliki Notepad, Linux OS memiliki Text Editors, dan Mac OS memiliki TextEdit. Ketiga aplikasi tersebut dapat digunakan untuk menuliskan kode dalam pembuatan aplikasi website. Namun, kami tidak menyarankan untuk menggunakan text editor tersebut karena tidak kaya akan fitur-fitur seperti IDE yang dapat mempercepat proses pengembangan web.
Saat ini, banyak code editors canggih yang dapat digunakan. Berikut adalah tiga code editor yang kami rekomendasikan untuk Anda belajar di kelas ini.
WebStorm (Jetbrains)
Salah satu produk milik Jetbrains yang berfokus pada pengembangan web seperti HTML, CSS, dan JavaScript. Berbagai framework JavaScript juga didukung, seperti React, Vue, Angular, dsb. IDE ini tidaklah gratis. Namun, IDE ini dapat diperoleh secara percuma dengan memanfaatkan Student License jika Anda seorang pelajar, mahasiswa, atau dosen. Silakan simak selengkapnya pada jetbrains.com/webstorm.
Visual Studio Code
Visual Studio Code merupakan sebuah text editor yang dikembangkan oleh Microsoft. Code editor ini memiliki banyak fitur seperti debugging, version control integration, syntax highlighting, code search, code completion, code snippets, code refactoring, dan yang tak kalah penting adalah extensions/plugins. Extension dapat memperkaya fitur code editor sehingga dapat memudahkan penulisan kode. Visual Studio Code tersedia untuk sistem operasi Windows, Mac, dan Linux. Selain itu, tentunya code editor ini dapat kita gunakan secara gratis. Silakan kunjungi pada code.visualstudio.com.
Brackets
Brackets merupakan text editor modern yang ringan dan cukup powerful untuk digunakan. Pada brackets terdapat fitur live preview sehingga Anda dapat melihat perubahan yang dilakukan tanpa harus reload browser. Brackets juga merupakan project open-source yang mendapat banyak dukungan dari para pelaku komunitas aktif. Untuk mengunduhnya, silakan kunjungi brackets.io.
Web Browser
Dalam mengakses halaman web, user akan membutuhkan web browser. Developer pun memerlukannya untuk melihat hasil website yang dikembangkan. Berikut beberapa web browser dari berbagai vendor yang dapat digunakan.
Mozilla Firefox
Firefox merupakan web browser usungan Mozilla. Browser ini memiliki keunggulan pada kesehatan internet dan menjaga privasi pengguna. Firefox juga dilengkapi berbagai fitur untuk meningkatkan produktivitas pengguna seperti Picture-in-Picture, sinkronisasi dengan perangkat mobile, tangkap gambar layar, dsb. Silakan simak pada mozilla.org/firefox/new.
Google Chrome
Google Chrome memiliki bermacam-macam fitur terutama dalam membantu web developer melakukan proses pengembangan website. Alat tersebut dinamakan dengan DevTools. Dengan DevTools, developer dapat mengubah halaman website melalui browser secara langsung dan cepat tanpa mengubah kode yang dituliskan. Selain itu, kita dapat menganalisis dengan mudah jika ada kesalahan atau bug yang terjadi. Silakan kunjungi halaman pada google.com/chrome.
Materi yang akan Dipelajari
Dalam kelas Belajar Dasar Pemrograman Web, kita akan mempelajari materi-materi dasar seputar pemrograman di website. Materi dalam kelas ini dibagi menjadi 6 modul. Berikut adalah modul-modul yang akan dicakup dalam kelas ini.
- Modul 1: Pengenalan Website
Pada modul ini kita akan mempelajari berbagai hal seputar website seperti pengertian website, sejarah website secara singkat, struktur pembentuk website dan client dan server.
- Modul 2: Pengenalan HTML
Pada modul ini kita akan mengenal apa itu HTML, proses pembuatan dokumen HTML, struktur dasar dokumen HTML, dan cara mengidentifikasi elemen yang tepat pada konten website.
- Modul 3: Pendalaman HTML
Modul ini merupakan modul lanjutan dari modul sebelumnya yang membahas secara lebih dalam mengenai elemen-elemen HTML. Contohnya attribute pada elemen, paragraf, heading, list, image, teks terformat (quote, anchor, bold, dll), semantic HTML, generic element, table, special character, dan sebagainya.
- Modul 4: Pengenalan CSS
Dalam modul ini, kita akan membahas bahasa markup lainnya, yaitu Cascading Style Sheet atau disingkat CSS. CSS adalah fondasi lanjutan dalam anatomi website setelah HTML. Kita akan mempelajari mengenai pengenalan CSS, cara kerja CSS, pembuatan berkas CSS, penghubung dokumen HTML dengan CSS, penulisan CSS rule, dan konsep yang diterapkan CSS.
- Modul 5: Pendalaman CSS
Modul ini akan membahas secara lebih lanjut mengenai CSS. Diantara hal yang akan dibahas seperti selector, formatting text, text styling, dimensi, warna, box model, positioning, media query, dan sebagainya.
- Modul 6: Layout Responsif dengan Flexbox
Modul ini akan membahas pengaturan posisi layout yang responsif menggunakan flexbox ketimbang float. Flexbox atau Flexible Box merupakan alat yang dapat sangat diandalkan dalam menyusun layout halaman web.
Materi-materi modul diatas akan dibahas secara rinci dengan bahasa yang mudah dipahami sehingga Anda dapat memahami seluruh materi diatas dengan baik. Nikmati proses dengan mempelajari satu per satu sampai Anda benar-benar paham. Gunakan forum diskusi jika Anda menemukan hal yang mengganjal dalam materi.
Glosarium
Ini adalah glosarium dengan istilah umum yang digunakan dalam kelas. Anda dapat membaca sekilas materi ini untuk mengenali istilah-istilah umum yang ada pada materi kelas ini. Selain itu, Anda juga dapat mengunjungi kembali halaman ini setiap kali menemukan istilah yang belum dimengerti. Carilah istilah tersebut pada laman glosarium ini untuk mengidentifikasi makna atau definisinya. Jika masih terdapat kosakata yang tidak dipahami dan belum masuk dalam daftar ini, Anda dapat memberikan saran melalui fitur Laporan Materi.
B
Browser
Browser adalah alat atau tools yang digunakan untuk mengakses atau mengembangkan website.
C
CSS
CSS atau Cascading Style Sheet adalah bahasa markup atau markup language yang digunakan untuk mempercantik website. Bahasa ini merupakan pelengkap dari dokumen HTML.
Client
Client adalah perangkat yang memiliki kemampuan mengirimkan permintaan atau request kepada server melalui protocol HTTP. Hasil request tersebut akan diterima oleh client jika server telah mengirimkan tanggapan (response).
D
DNS
DNS atau Domain Name System adalah layanan jaringan yang berguna untuk menerjemahkan nama domain menjadi alamat IP.
H
HTML
HTML atau Hyper Text Markup Language adalah bahasa markup standar untuk mengembangkan halaman web. HTML ini akan mendeskripsikan struktur dari halaman web dan memberitahukan browser bagaimana menampilkan konten.
HTTP Server
Server berperan pada sebuah website sebagai sebuah software yang dapat menerima transaksi dari HyperText Transfer Protocol.
P
Plain Text
Plain Text adalah teks yang tak terformat. Biasanya digunakan untuk menuliskan kode program seperti website.
R
Rich Text
Rich Text adalah teks yang terformat. Biasanya digunakan dalam pembuatan dokumen menggunakan aplikasi Microsoft Word atau lainnya.
S
Sistem Operasi
Sistem operasi adalah sebuah perangkat lunak sistem yang mampu mengelola sumber daya dari perangkat lunak dan perangkat keras agar dapat berjalan dengan baik serta memudahkan proses interaksi dengan pengguna (brainware).
T
Text Editor
Text Editor adalah alat atau tools pengedit kode yang digunakan untuk mengembangkan website.
W
Website
Halaman yang menampilkan informasi kepada pengguna berupa teks atau gambar. Website dapat diakses melalui internet dengan menggunakan browser.
WWW
WWW atau World Wide Web adalah sebuah ruang informasi yang mana direferensikan sebagai sumber daya yang diidentifikasikan oleh pengidentifikasi global yang dinamai dengan Uniform Resource Identifiers (URI).
Daftar Referensi
[1] CERN. “Tentang proyek ini”. https://first-website.web.cern.ch/first-website . Diakses pada 28 Maret 2022.
[2] Merriam-Webster, “Bahasa markup.”. https://www.merriam-webster.com/dictionary/markup%20bahasa . Diakses pada 28 Maret 2022.
[3] Eric Tirado. “Belajar HTML dalam 5 menit”. https://www.freecodecamp.org/news/learn-html-in-5-menit-ccd378d2ab72/ . Diakses pada 28 Maret 2022.
[4] Diskominfo Kabupaten Kubu Raya. “Bingung Apa itu DNS ? Perhatikan Penjelasan Fungsi dan Cara Kerjanya”. https://diskominfo.kuburayakab.go.id/read/58/bingung-apa-itu-dns-perhatikan-penjelasan-fungsi-dan-cara-kerjanya . Diakses pada 28 Maret 2022.
[5] Chris Coyier. “Panduan Lengkap untuk Flexbox”. https://css-tricks.com/snippets/css/a-guide-to-flexbox/ . Diakses pada 28 Maret 2022.
[6] Jaringan Pengembang Mozilla. “Kotak Fleksibel”. https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox#flex_shorthand_versus_longhand/ . Diakses pada 28 Maret 2022.
Bersambung ke:
Pengantar Web Programming
- Get link
- X
- Other Apps





Comments
Post a Comment