Now available scheduled blog auto post article service. Rrgister Now

Table of Content

Cara Memulai Sebagai Pengembang Web Front-end pada tahun 2022 (Peta Jalan Lengkap dengan Sumber Daya Gratis)

Cara Memulai Sebagai Pengembang Web Front-end pada tahun 2022 (Peta Jalan Lengkap dengan Sumber Daya Gratis)

Menjadi pengembang internet otodidak pada tahun 2022 kini lebih mudah dari sebelumnya. Ada banyak sumber daya gratis yang tersedia, dan ada sumber daya yang mudah diikuti yang dapat Anda gunakan untuk membantu Anda tetap memantau dengan benar.

Pertama. Ada banyak sumber daya gratis yang indah yang dapat Anda pelajari. Tentu, Anda bisa membeli banyak kelas di Udemy, Coursera, dan sebagainya. dan beberapa di antaranya cukup baik. Tetapi. Saya di sini untuk memberi tahu Anda bahwa ada beberapa kelas gratis di luar sana yang sama bagusnya, atau bahkan lebih cocok.

Mari menyeduh secangkir espresso segar, dan memulai.

Langkah 1. Biasakan diri Anda dengan baris perintah

Apa pun bahasa pemrograman yang Anda sukai.

Tidak peduli sistem apa yang dijalankan komputer Anda.

Keakraban dengan baris perintah (atau terminal Anda) adalah suatu keharusan. Anda perlu melakukan hal-hal di sini lagi dan lagi.

Cara Memulai Sebagai Pengembang Web Front-end pada tahun 2022 (Peta Jalan Lengkap dengan Sumber Daya Gratis)

Sebagian besar hal yang akan Anda lakukan di sini akan menjadi hal yang biasa saja, misalnya, menyiapkan Node. js, menyiapkan lingkungan kemajuan Anda, dan sebagainya.

Tetapi. Saat Anda berkembang dengan cara yang sama dalam perjalanan pemrograman Anda, Anda akan semakin sering menggunakan terminal.

Jadi, masuk akal untuk mencobanya sejak awal.

Kabar baiknya? Ini tidak sulit, dan Anda mungkin bisa terbiasa dengan terminal Anda dalam waktu singkat. Jadi mengapa tidak maju dan melakukannya.

FreeCodeCamp. org memiliki video kecil yang menyenangkan saat Anda menginginkan video:

Jika Anda lebih menyukai instruksi teks tambahan yang dapat Anda praktikkan bersama, berikut adalah beberapa alternatif:

  1. Baris perintah untuk pemula (melalui Ubuntu)
  2. Seluruh panduan intro ke baris perintah (melalui LearnToCodeWithMe)
  3. Pelajari baris perintah (oleh Codecademy)
  4. Kursus Singkat Baris Perintah (oleh Mozilla)

Yang perlu Anda perhatikan adalah mempelajari cara melakukan hal-hal utama. Misalnya saja mengembangkan direktori, file, dan lain sebagainya, navigasi antar direktori, menghapus direktori, instalasi aplikasi. Ada banyak hal tambahan yang dapat Anda lakukan dengan baris perintah, namun untuk memulai, ini akan memenuhi sebagian besar kebutuhan Anda.

Anda biasanya dapat memperoleh hal-hal tingkat lanjut jika dan selagi perlu.

Langkah 2. Biasakan diri Anda dengan Git

Git adalah cara memanipulasi model.

Ini memungkinkan Anda mengatur kode Anda, memantau setiap perubahan yang Anda buat pada kode Anda, dan di antara hal-hal lain, bahkan dapat bertindak sebagai cadangan kode Anda.

Ada operator git berbeda yang dapat Anda gunakan:

  • GitHub
  • GitLab
  • BitBucket

Anda dapat memilih salah satu dari mereka. Saya mulai menggunakan GitHub, dan setelah melihatnya, cukup banyak yang tertarik padanya.

Cara Memulai Sebagai Pengembang Web Front-end pada tahun 2022 (Peta Jalan Lengkap dengan Sumber Daya Gratis)

Sama seperti baris perintah, ada banyak hal yang dapat Anda lakukan di git, namun untuk memulai pengalaman pertumbuhan web Anda, hanya ada beberapa hal yang perlu Anda teliti bagaimana melakukannya:

  1. Bagaimana menghubungkan lingkungan pengembangan lokal Anda (laptop Anda) ke akun git Anda
  2. Cara membuat repositori baru
  3. Cara memasukkan kode Anda ke repo git Anda (Inilah yang paling bisa Anda lakukan)
  4. Cara menyeret kode dari repo git ke komputer Anda

Anda dapat mempelajari Git dalam waktu singkat dari video ini:

Brad Traversy membuat banyak konten terbaik yang berguna bagi para pengembang di semua tingkat pengalaman belajar mereka. Jika Anda menemukan diri Anda pergi ke lubang kelinci dan menonton videonya secara berlebihan, itu sangat dapat dipahami. 😁

Langkah ketiga.Pilih editor kode.(Pssst. Langsung saja unduh VSCode)

Anda memerlukan editor kode.

Di sinilah Anda akan menulis kode Anda. Ini adalah satu-satunya program perangkat lunak yang sering Anda gunakan, dan menghabiskan sebagian besar waktunya. Memperbarui repo git Anda dengan basis kode terbaru Anda. Menyebarkan situs Anda ke produksi (URL web). Semua itu, akan Anda lakukan dari internal editor kode Anda.

VSCode adalah editor kode gratis yang cukup efektif dan dapat dibuat lebih canggih dengan menambahkan masalah dan ekstensi ke dalamnya. Anda dapat mengunduhnya dari sini.

Also Read: Saya baru saja berhenti dari pekerjaan sehari -hari karena blogging membangun saya 2 rumah

FreeCodeCamp memiliki video jalur kerusakan di VSCode, yang harus Anda gunakan untuk mengetahui lebih banyak tentangnya. Namun perlu diingat, durasinya hampir 1,5 jam. Jika Anda mencari sesuatu yang dapat menghemat waktu, ada hyperlink ke klip video Brad nanti.

Video Brad di VSCode:

  1. Intro dan Pengaturan VSCode (38 mnt)
  2. Ekstensi VSCode untuk pengembang pintu masuk (28 menit)
  3. Pintasan VSCode (17 menit)

Langkah 4. Biasakan diri Anda dengan tugas penerapan dengan membuat situs web sederhana

Saya penggemar berat belajar sambil melakukan. Jadi mari kita lakukan ini.

  • Buat repo kosong di akun GitHub Anda
  • Tambahkan file index.html yang mudah ke dalamnya.
  • Tambahkan kode berikutnya ke berkas index.html Anda
<html><head></head><physique><h1>Hello World<h1></physique></html>

Petunjuk: Anda dapat membuat file html boilerplate di VSCode hanya dengan mengetik “! ”dan memutuskan singkatan emmet. VSCode akan membuatkan file untuk Anda. Sekarang yang perlu Anda lakukan hanyalah menulis “Hello international” pada tag <body></body> yang baru saja disisipkan VSCode untuk Anda.

  • Dorong kode Anda ke repo git Anda (Anda harus memahami metode mudah untuk melakukannya jika Anda telah membiasakan diri dengan GitHub terlebih dahulu)

Ini menjadi bagian yang sulit.

Menyebarkannya ke URL online itu mudah.

Buat akun gratis di Vercel. Hubungkan akun GitHub Anda ke akun Vercel Anda.

Setelah Anda menghubungkan keduanya, Anda akan dapat membuat proyek baru di Vercel dan memilih repo GitHub tempat Anda hanya membuat file index. html.

Tekan "siapkan".

Itu dia. Dalam beberapa menit, Vercel akan menyebarkan situs web Anda dan memberikan URL yang dapat Anda lihat sendiri.

Apalagi:

  1. Setiap kali Anda membuat perubahan pada informasi Anda, segera setelah Anda memasukkannya ke repo GitHub Anda, Vercel akan secara otomatis membuat perubahan di situs web langsung Anda
  2. index.html akan terlihat di https://domainanda.vercel.app.Jika Anda membuat about.html, itu akan tersedia di https://domainanda.vercel.app/about.html
  3. Vercel akan menangani sertifikat SSL di wilayah Anda.Semua situs web Anda akan memiliki kunci hijau manis di bilah alamat browser yang menunjukkan situs yang stabil.
  4. Anda akan memberi Anda kesempatan untuk menukar URL tempat Anda melihat situs web Anda dengan menambahkan domain apa pun yang Anda miliki ke pengaturan domain usaha Anda.Gratis!

Ada banyak alternatif hosting lain yang tersedia untuk Anda. Dari Heroku hingga Netlify. Dari halaman Firebase Google hingga GitHub. Menurut pengalaman saya, Vercel adalah yang terbaik dan paling efektif dari semuanya, jadi begitu saya memulainya, saya bahkan belum pernah kembali.

Langkah 5. Mulai membuat situs web

Oke. Ini akan menjadi langkah yang bisa diperdebatkan, tapi langkah ini saya ikuti sendiri, dan langkah yang bisa saya anjurkan.

Anda akan menemukan banyak artikel yang menganjurkan Anda teknik unik, dan dari teknik dasar dan teoritis yang cerdas.

Teknik mereka adalah proses lima langkah:

  1. Pelajari dasar-dasar dan dasar-dasar HTML dan CSS
  2. Pelajari dasar-dasar JavaScript
  3. Pelajari kerangka kerja CSS (Tailwind, Bootstrap, Bulma, dan sebagainya.)
  4. Pelajari kerangka kerja JS (React.js, Vue.js, Svelte, dll.)
  5. Berlatih, berlatih, dan berlatih.

Saya menemukan diri saya terjebak dalam neraka instruksional. Ada begitu banyak konten yang tersedia di pasar yang mungkin Anda pelajari selama berminggu-minggu, berbulan-bulan, dan berbulan-bulan sebelum Anda mulai membuat kemajuan.

Dan demi kepuasan sesaat, berminggu-minggu dan berbulan-bulan tidaklah cukup bagi saya.

Jadi saya mulai memilih proyek dan membangunnya. Dan itulah metode yang saya rekomendasikan kepada Anda.

  • Ini lebih cepat
  • Ini tidak terlalu rumit
  • Itu lebih menyenangkan
  • Anda akan lebih sering dihadapkan pada pertanyaan
  • Anda akan menemukan metode yang lebih kuat dalam melakukan sesuatu sesekali
  • Anda akan meneliti hal-hal baru yang jika Anda mengetahuinya lebih awal akan membuat proyek Anda sebelumnya menjadi lebih sederhana dan lebih cepat

Anda dapat memulai dengan teknik ini dan setiap minggunya Anda akan membutuhkan template HTML pertama yang benar-benar responsif di pasaran di Gumroad, Themeforest, atau di mana pun Anda ingin menjual tema.

  1. Habiskan 2 hari mempelajari dasar-dasar HTML, beberapa CSS, dan beberapa JavaScript.Anda tidak harus melakukannyamenghabiskan banyak waktu untuk belajar sebanyak mungkin.Anda perlu belajar secukupnya agar bahasa tersebut dapat dipahami oleh Anda.
  2. Habiskan 2 hari untuk mempelajari dasar-dasar Vue.js.Bangun aplikasi web sederhana dengan bantuan Vue.Ikuti bersama dengan tutorial dasar youtube apa pun.Buat apa saja.Tidak masalah.Anda baru saja membiasakan diri dengan kerangka kerja tersebut.
  3. Kunjungi https://nuxtjs.org/doctors/get-started/installation untuk membuat proyek Nuxt.js pertama Anda.(Nuxt adalah kerangka kerja untuk Vue, yang juga merupakan kerangka kerja untuk JavaScript. Menggunakan Nuxt akan mempercepat tugas pertumbuhan Anda dan pada akhirnya dapat ditingkatkan untuk Anda.)
  4. Mulailah membuat aplikasi dan komponen yang jelas.Misalnya, (1) buat situs web sederhana dengan menu dari situs yang Anda sukai, (2) buat aplikasi daftar tugas, (3) buat situs yang menggunakan API cuaca untuk menampilkan cuaca, (empat) membuat situs web yang mencakup satu halaman login, yaitu Anda dapat login untuk mengakses halaman itu.

Setiap situs (atau aplikasi internet) yang Anda buat akan membantu Anda mengajukan berbagai pertanyaan, semuanya mengikuti format yang sama: “Bagaimana cara saya melakukan X? ”

Cari tahu solusi untuk pertanyaan itu. Gunakan jawaban itu dalam usaha Anda. Anda akan belajar lebih banyak, dan jangan lupa ini lebih baik daripada sekadar mengikuti tutorial satu demi satu.

Semakin banyak Anda berlatih, semakin mudah Anda membangun hal lain yang mungkin Anda pertimbangkan.

Namun bagaimana jika Anda tidak ingin menerapkan teknik yang tidak biasa ini?

Jika Anda cenderung melakukan sesuatu dengan cara tradisional, Anda harus mencobanya. Kita semua harus menerapkan metodologi yang paling sesuai untuk kita dan yang paling nyaman bagi kita.

Also Read: Apa kemampuan belajar dalam desain UI dan UX?

Tujuan tengahnya serupa. Membantu Anda mempelajari dasar-dasar inti dari semua hal yang Anda perlukan dalam gudang senjata Anda untuk menjadi pengembang pemula yang hebat.

Berikut adalah catatan situs web dan aset yang akan sangat membantu Anda:

Kemungkinan Anda pernah mendengar tentang freeCodeCamp. Jika belum, cobalah sekarang juga!

Cara Memulai Sebagai Pengembang Web Front-end pada tahun 2022 (Peta Jalan Lengkap dengan Sumber Daya Gratis)

Apa yang dimulai sebagai panduan Medium oleh Quincy Larson adalah salah satu tujuan utama para pengembang web saat ini.

Dan apa pun yang dapat Anda bayangkan, mereka memiliki kelas untuk itu.

Cara Memulai Sebagai Pengembang Web Front-end pada tahun 2022 (Peta Jalan Lengkap dengan Sumber Daya Gratis)

Jika ingin berjalan cepat, berjalanlah sendiri. Tapi itu memungkinkan Anda untuk berjalan, berjalan secara kolektif.

100DaysOfCode adalah tentang itu.

Mempelajari pertumbuhan web, seperti halnya mempelajari keterampilan baru, pada awalnya merupakan suatu kesulitan, dan menjadi lebih mudah seiring berjalannya waktu.

Masalahnya adalah, banyak yang akan berhenti dan menyerah di masa-masa awal ini. Tibalah, #100DaysOfCode.

Seperti namanya, ini adalah hashtag Twitter, dan telah bertahan lama. Setiap hari, semakin banyak pengembang web yang menjadi anggota subjek ini.

Cara Memulai Sebagai Pengembang Web Front-end pada tahun 2022 (Peta Jalan Lengkap dengan Sumber Daya Gratis)

Idenya bukan hanya untuk membantu Anda belajar dengan memastikan Anda tetap bertanggung jawab dengan membagikan perkembangan Anda kepada semua orang di sekitar Anda, namun pada saat yang sama, membantu Anda memahami bahwa:

A. Anda tidak sendirian di dalamnya. Banyak orang lain yang mengarungi perairan yang sulit ini. Satu-satunya perasaan kebersamaan itulah yang Anda miliki sesekali.

B. Anda adalah bagian dari satu hal yang lebih besar dari diri Anda sendiri. Anda akan terus-menerus menemukan diri Anda berhadapan langsung dengan pengembang yang menderita persis seperti yang telah Anda perjuangkan beberapa minggu lalu. Anda adalah orang dewasa terbaik yang memberi tahu mereka bahwa kesulitannya menjadi lebih mudah. Anda adalah orang dewasa yang cocok untuk menyuruh mereka bertahan.

Anda dapat mempelajari lebih lanjut tentang masalah ini di situs web profesional mereka.

Jika Anda baru memulai kemajuan bersih, saya ingin Anda melupakan tentang mempelajari CSS.

Saya ingin Anda melupakan fakta bahwa kerangka CSS lain pun ada.

Saya hanya ingin Anda menggunakan Tailwind dan tetap menggunakannya.

Cara Memulai Sebagai Pengembang Web Front-end pada tahun 2022 (Peta Jalan Lengkap dengan Sumber Daya Gratis)

Ini membuat kemajuan web Anda begitu mudah dan cepat sehingga Anda akan kesulitan untuk mempertimbangkan beberapa kerangka kerja CSS lainnya setiap kali Anda memulai Tailwind.

Oh, dan file CSS Anda? Ukuran file CSS akhir yang dapat digunakan dan dikompilasi cukup kecil untuk membuat situs web Anda dimuat dengan sangat cepat. Namun karena kami baru memulai, kami tidak akan terlalu mengkhawatirkan hal tersebut saat ini.

Saat Anda memulai, Anda akan terus-menerus merujuk pada dokumentasi mereka untuk mengetahui instruksi perangkat lunak mana yang perlu Anda gunakan. Dokumentasi tertentu mereka membuat pekerjaan ini sangat mudah dan bebas stres.

Dan saat Anda terus membangun lebih banyak situs web dan elemen melalui Tailwind, kebutuhan untuk memeriksa dokumentasinya akan semakin berkurang seiring berjalannya waktu.

Berikut Tailwind yang ditentukan dalam seratus detik:

Dan sekarang setelah Anda jatuh cinta dengan Tailwind, saksikan Adam Wathan (pendiri Tailwind) membuat dasbor Vercel melalui Tailwind dalam gerakan langsung:

Atau, jika Anda sedang mencari tutorial singkat dan menarik, ini tutorial dari Fireship:

Also Read: Top 25 Blog Memancing Bass Mulut Besar

PS: Saya tidak akan memasukkan dua tutorial di sini, tapi kemudian saya menemukan komentar ini di video Fireship.

Cara Memulai Sebagai Pengembang Web Front-end pada tahun 2022 (Peta Jalan Lengkap dengan Sumber Daya Gratis)

Merupakan dosa jika tidak menyertakan video tersebut bahkan setelah membacanya.

Bagaimanapun. Jika Anda masih ingin mencoba Tailwind terlebih dahulu, mereka telah membuatkan sesuatu hanya untuk Anda.

Anda dapat menggunakan FreeCodeCamp untuk memanfaatkan dasar-dasar JavaScript.

Cara Memulai Sebagai Pengembang Web Front-end pada tahun 2022 (Peta Jalan Lengkap dengan Sumber Daya Gratis)

Ketika memilih kerangka kerja javascript untuk memulai, Anda tidak boleh salah dengan React atau Vue. Keduanya cukup efektif, serbaguna, dan memiliki pengikutnya sendiri-sendiri.

Cara Memulai Sebagai Pengembang Web Front-end pada tahun 2022 (Peta Jalan Lengkap dengan Sumber Daya Gratis)Cara Memulai Sebagai Pengembang Web Front-end pada tahun 2022 (Peta Jalan Lengkap dengan Sumber Daya Gratis)

Saya memulai dengan Vue, dan saya menyukai setiap detiknya. Jika itu yang ingin Anda ikuti, Anda tidak akan menyesali pilihan Anda.

Namun, React lebih populer. Jadi, jika tujuan Anda adalah berkarir di bidang pengembangan web, saya rasa Anda akan menemukan permintaan yang jauh lebih tinggi untuk pengembang React.

Jadi, tergantung pada tujuan Anda, pilih kerangka kerja Anda.

Ada kerangka kerja JavaScript, dan kemudian ada kerangka kerja untuk kerangka kerja tersebut.

Cara Memulai Sebagai Pengembang Web Front-end pada tahun 2022 (Peta Jalan Lengkap dengan Sumber Daya Gratis)

Next. js adalah kerangka kerja untuk React (oleh orang-orang di Vercel).

Dan Nuxt. js adalah kerangka kerja untuk Vue.

Keuntungan penting yang dibawa oleh hal ini ke tugas pengembangan Anda adalah membuat rendering sisi server dapat dilakukan untuk aplikasi Anda. Kerangka kerja Javascript terkenal dirender di sisi pelanggan (di browser seseorang), jadi ada batasan pemasaran mesin pencari yang penting. Next dan Nuxt membantu mengatasi hal itu.

Selain itu, mereka membuat pengaturan aplikasi web menjadi sangat cepat, melalui kerangka kerja cepat yang mereka buat untuk membantu.

Itu dia. Mulailah sekarang juga, dan Anda akan segera menyiapkan situs web yang menawan.

Selain situs web dan sumber daya yang disebutkan di atas, berikut adalah beberapa hal yang dapat mempermudahnya:

  1. Vercel — Memberikan ruang tersendiri bagi semua aplikasi web Anda di internet
  2. Firebase — Infrastruktur yang sepenuhnya tanpa server.Dari database NoSQL hingga kontrol login pengguna, Firebase akan menangani semuanya dengan sedikit atau tanpa kode.Semua itu tanpa biaya.Anda perlu menginstal informasi kartu kredit Anda untuk menerapkan Cloud Functions (yang saya anjurkan), namun untuk sementara, kami dapat mengabaikannya.[Kita akan membahas Cloud Functions dan kekuatannya nanti.]
  3. Dribbble, Behance — Situs web ini akan membantu Anda memulai dengan desain situs web yang bagus.Temukan beberapa desain halaman touchdown yang menakjubkan di sini, dan gunakan TailwindCSS untuk menentukan apakah Anda dapat mengubah desain tersebut menjadi situs web yang benar-benar berguna.
  4. ThemeForest, TemplateMonster, Gumroad — Buat halaman web dan template yang indah, dan tempatkan untuk dijual.Tidak ada yang bisa mengalahkan sensasi menghasilkan uang pertama dari sesuatu yang mungkin baru saja Anda pelajari.Ini menawarkan banyak peningkatan dan kekuatan untuk usaha dan pekerjaan sulit Anda.

Apakah postingan ini berguna?

Apa lagi yang Anda ingin saya bahas di sini?

Topik apa yang Anda ingin saya bahas di masa depan?

Beri tahu saya di komentar di bawah, dan saya akan mencoba yang terbaik untuk menindaklanjutinya. 👊

Saya akan membagikan lebih banyak konten untuk pengembang front-end dan back-end di bidang ini. Ikuti terus untuk mendapatkan informasi terbaru tentang postingan terbaru saya.

Apa rencana Anda untuk mendapatkan keuntungan di tahun 2022? Saya tidak sabar untuk menentukan berapa persentasenya.

Sampai waktu berikutnya, tetap aman, tetap utuh. Bersulang!

Konten lainnya diplainenglish. io. Daftar ke kamibuletin elektronik mingguan gratis. Dapatkan akses unik ke kemungkinan dan rekomendasi penulisan di kamiperselisihan komunitas.

Coding and web development is my field.

Visit my Portfolio

Posting Komentar

Please provide a comment. Check the "Notify me" box to get notified by email when someone has comments.