Di dunia modern, semakin banyak orang ingin belajar cara memprogram, sementara mereka tidak tahu harus mulai dari mana, tetapi pada saat yang sama, industri TI adalah apa yang mereka impikan karena menjadi programmer web sekarang menjadi mode. Bagi banyak orang, ini memposisikan langkah pertama ke dunia yang menakjubkan ini, seperti pengembang web atau pengembang front-end junior, pengembangan front-end dasar. Namun, Anda harus mulai dari suatu tempat sebelum Anda dapat menemukan pekerjaan impian Anda. Inilah buku pengetahuan pemula bagi Anda untuk mendapatkan beberapa jawaban: Apakah ada kursus gratis untuk pengembang front-end? Cara belajar sendiri secara online, di mana menemukan materi pembelajaran untuk menguasai HTML, CSS, dan JavaScript. Jika Anda tahu HTML dan CSS, Anda sudah bisa melamar posisi desainer tata letak web.
Apa dasar-dasar pengembangan front-end?
Memasuki dunia pemrograman web bisa jadi sulit bagi orang baru. Begitu banyak konsep yang terdengar aneh dan menjadi problematik pada tahap penulisan. Bagaimana cara menulis: pengembang perangkat lunak atau pengembang front-end? Mungkin seorang pengembang front-end, atau lebih tepatnya seorang insinyur perangkat lunak front-end? Namun, yang paling umum adalah entri tanda hubung. Pengembang front-end—orang yang bertanggung jawab atas bagian visual aplikasi (apa yang kita lihat, kita = pengguna situs).
Biasanya front-end developer bekerja sama dengan desainer grafis (web designer) yang menyediakan desain grafis. Seringkali, pengembang front-end memiliki kesempatan untuk bekerja dengan desainer UX yang mengusulkan dan membuat prototipe interaksi yang akan berlangsung di situs web. Peran pengembang front-end adalah menyatukan semuanya. Secara populer dikatakan bahwa pengembang front-end ditugaskan untuk memotong desain grafis — membagi desain menjadi bagian-bagian yang lebih kecil dan pengkodean (HTML dan CSS) ke dalam situs web yang akhirnya digunakan pengguna.
Kemudian, menggunakan JavaScript, interaksi yang disebutkan sebelumnya ditambahkan. Sementara HTML dan CSS3 memungkinkan kita untuk membuat transisi yang mulus dan animasi dasar, JavaScript memperkenalkan semua interaksi pengguna halaman tingkat lanjut. Dengan menggunakan JavaScript, kami akan menambahkan menu tarik-turun, penggeser pada halaman, validasi formulir, transisi antara sub-halaman atau animasi lanjutan, dan game 3D (misalnya, menggunakan Babylon-JavaScript). Data untuk logika dalam JavaScript dari back-end aplikasi, oleh karena itu kerjasama front-end—pengembang back-end.
Posisi pengembang front-end akan sangat bervariasi. Pekerjaan seorang pengembang front-end di agensi interaktif dan kreatif, seorang pengembang front-end di perusahaan pengembang perangkat lunak, akan terlihat berbeda, dan pekerjaan yang berbeda untuk seseorang yang bekerja di pengembangan front-end sebuah start-up .
Pengembang front-end dari pemotongan proyek grafis dapat berkembang menjadi Pengembang JavaScript—pemrogram web yang terutama berurusan dengan penulisan logika aplikasi dan operasi JavaScript tingkat lanjut. Selain itu, pengembang front-end sering kali (juga pengembang back-end) harus merencanakan arsitektur JavaScript aplikasi dan secara sadar memilih kerangka kerja dan pustaka untuk proyek tersebut.
Apakah Pengembangan Front-End Mudah?
- Anda dapat melihat efeknya dengan cepat; tidak seperti mempelajari pengembangan web/pengembangan back-end, membuat potongan kode bahkan dalam HTML murni langsung memberi kita efek visual, yang memotivasi kita untuk terus bekerja.
- Ambang masuk yang rendah—keterampilan front-end yang relatif sedikit diperlukan untuk memulai karir profesional dalam posisi magang atau junior di awal.
- Banyak tawaran pekerjaan untuk junior—terutama ketika liburan akan datang, dan ada banyak magang musim panas.
- Kemandirian—kita dapat mengurus pembuatan situs web untuk diri kita sendiri dan kemudian menerima pesanan sebagai pekerja lepas. Lagi pula, dalam lingkup dasar, kita harus dapat mengatur situs web sederhana dari A hingga Z.
Apa yang kita butuhkan untuk pengembangan front-end?
Berikut resep suksesnya. Untuk membuat situs web, Anda perlu:
HTML + CSS
Ini adalah bahan dasar untuk membangun sebuah situs web. HTML menyediakan struktur situs web—elemen yang dijelaskan, dan CSS memberi tahu browser seperti apa tampilan elemen ini. Setelah Anda menguasai HTML dan CSS, Anda dapat membuat ulang desain (grafis) apa pun dan mengubahnya menjadi situs web.
JavaScript
Bahasa pengembangan front-end pemrograman web untuk membuat situs web. Berkat JavaScript, Anda menambahkan interaktivitas ke situs web Anda, yaitu, Anda mengembangkan situs web yang merespons tindakan pengguna. Anda bahkan dapat membuat game. Kami merekomendasikan untuk menguasai setidaknya kode JavaScript dasar untuk memahami cara kerja bahasa atau logika bahasa pemrograman web. Kemudian Anda bisa pergi ke jQuery.
jQuery
Secara teknis, ini bukan bahasa tetapi perpustakaan JavaScript. Seperti perantara yang memungkinkan Anda menulis JavaScript lebih mudah dan lebih cepat. Anda memasukkan kode jQuery; perpustakaan mengkhawatirkan Anda dan bermain dengan penerjemah untuk menyampaikan makna JavaScript yang sedikit rumit ke browser. Meskipun saat ini jQuery "agak lama", Kami menyarankan untuk mempelajarinya "berdasarkan permintaan", ini akan mempermudah mempelajari logika pemrograman web dan Bootstrap (kerangka CSS yang digunakan) dan masih muncul dalam tawaran pekerjaan.
Kerangka kerja
Tugas mereka adalah menyederhanakan proses pembuatan situs web dan aplikasi dengan menyediakan solusi siap pakai untuk masalah paling umum. Selain itu, mereka memberikan pola bagaimana mengembangkan kode Anda dengan rapi. Sebagai permulaan, kami sarankan untuk memilih satu kerangka kerja CSS, misalnya Bootstrap (opsi lainnya adalah: Foundation, Pure, YAML CSS), dan kemudian menambahkan salah satu kerangka kerja JavaScript yang populer saat ini: Angular 4, ReactJS, Vue.js, Ember.js, Meteor.js.
Git
Ini tidak terkait langsung dengan pengkodean web, yang kami pahami sering tertunda hingga akhir. Salah, semakin cepat Anda mulai menggunakan Git, sistem kontrol versi, semakin baik. Ini adalah urutan yang kami usulkan. Tentu saja, Anda dapat melakukannya dengan sangat berbeda: lewati jQuery dan pelajari Bootstrap segera setelah menguasai dasar-dasar HTML dan CSS; namun, kami menyarankan Anda untuk tidak terlalu menyederhanakan dan memotong diri Anda dari mencari solusi yang ditulis dengan tangan, dan tidak menggunakan cetakan dari kerangka kerja atau mempelajari kerangka kerja JavaScript dengan hampir tidak bisa mendapatkan garis dalam JavaScript murni.
Di mana saya mulai dengan pengembangan front-end?
Pelajari secara teratur, dan coba terapkan setiap keterampilan baru dalam praktik, bahkan dalam potongan-potongan kecil kode dengan hanya satu tujuan—untuk menunjukkan apa yang baru saja Anda kuasai. Bagikan di web. Batasi grup motivasi Anda di Facebook. Setelah hanya 3 jam membaca cerita motivasi, Anda seringkali tidak termotivasi 3 kali lipat. Anda biasanya memiliki 3 jam lebih sedikit untuk belajar Anda.
Perhatikan pasar, dan baca persyaratan dalam tawaran pekerjaan. Mereka berubah! Kami menulis posting ini hari ini dan mungkin perlu memperbaruinya dalam setahun karena perubahan teknologi. Setelah Anda memahami dasar-dasarnya: HTML CSS JavaScript, sesuatu yang baru pasti akan menjadi tren—perbarui daftar "untuk dipelajari" Anda. Carilah lokakarya gratis (untuk belajar dari mentor dan membuat kontak yang menarik secara bersamaan) dan magang industri sesegera mungkin. Pekerjaan itu akan berubah menjadi guru terbaik.
Apa contoh pengembangan front-end?
HTML + CSS
Tiga mungkin adalah situs paling terkenal dengan kursus pengembangan front-end web interaktif. Gratis, terorganisir dengan baik, mereka menyampaikan pengetahuan kepada pemula dengan sangat mudah. Mereka mengadakan kursus interaktif di browser. Kita tidak perlu memasang apapun di rumah, kita cukup melakukan kursus saja, dan kemajuan kita langsung terukur.
Khan Academy, Codecademy, dan Homeschool
Khan Academy memiliki materi yang sepenuhnya gratis dan juga memiliki opsi untuk menggunakan bahasa web lain. Ini adalah platform pendidikan, tidak hanya tentang pengembangan web. Anda dapat melakukan berbagai tugas, mulai dari elemen dasar, termasuk HTML dan CSS, hingga skrip JavaScript yang lebih canggih.
Codecademy memiliki banyak hal gratis dan jalur pengembangan front-end menarik yang dibuat sebelumnya yang hanya tersedia untuk pengguna profesional.
Code School - menurut kami, kursus yang paling terorganisir. Mereka terdiri dari video + bagian interaktif dengan tugas pengembangan front-end. Tingkat pertama setiap kursus gratis, tetapi sayangnya, Anda harus membayar sisanya. Namun, bahkan suku cadang gratis (biasanya sekitar 1 jam) layak untuk dilihat.
Bagaimana cara memilih jurusan yang akan diambil?
Lihat ketiga platform web. Topiknya tumpang tindih, tetapi ada baiknya membahas beberapa topik duplikat. Pertama, pengulangan mengkonsolidasikan pengetahuan, dan kedua, setiap platform front-end memiliki pendekatan pengajaran yang sedikit berbeda. Pilihan ada padamu. Begitu banyak orang ingin membayar untuk Bootcamp bulanan atau kursus pengembangan web, karena mereka memiliki segalanya secara gratis di ujung jari mereka. Tidak ada yang tidak biasa.
Hal terburuknya adalah kami memiliki banyak materi dan ingin mempelajari semua yang kami butuhkan dengan cepat, tanpa memeriksa atau memilih—ambil semuanya di baki dan melangkah lebih jauh di luar materi dasar. Oleh karena itu, kami memahami bahwa jika Anda tidak punya waktu untuk semua kursus front-end dan pengambilan keputusan bukanlah keahlian Anda, lihat Khan Academy: Pengantar HTML CSS—Pengembangan Web.
JavaScript
Apa jadinya kursus pengembangan front-end kami tanpa menggunakan JavaScript? Situs interaktif di atas sangat bagus. Mereka memiliki kursus JavaScript untuk kita—bagus, sederhana, sayangnya tidak terlalu komprehensif, tapi bagus untuk pemanasan. Jika Anda sudah memiliki dasar-dasar HTML dan CSS, Anda tidak perlu memulai dengan saran sebelumnya.
Untuk memulai dengan 9 latihan pengembangan singkat dalam pendahuluan: dengan JavaScript, Anda dapat membangun topik yang sama di Udacity: Intro JavaScript, lalu (atau segera) beralih ke serangkaian tugas yang lebih besar: HTML / JavaScript: Membuat Web Interaktif Halaman.
jQuery
Satu langkah lagi di jalan front-end kami, tetapi sangat opsional. Saat ini, kursus pengembangan front-end dapat dilakukan tanpa jQuery. Terutama karena ada banyak opsi baru yang menarik untuk pengembang front-end saat ini, kami telah melihat tawaran pekerjaan, dan itu masih layak untuk dimiliki.
Ya, Khan Academy dan Codecademy memiliki kursus jQuery. Namun, dalam hal ini, saya ingin merekomendasikan—kursus pengembangan front-end jQuery Pluralsight (sebelumnya Code School) selama satu jam dan sepenuhnya gratis.
Kerangka belajar
Pada tahap ini, Anda dapat memilih sendiri materi front-end dan menilai kesesuaiannya dengan pengetahuan Anda. Ketika datang ke kerangka Bootstrap, membangun situs web didasarkan pada kisi 12 kolom, dan pengetahuan ini sangat penting untuk memahami sisanya dalam praktik. Bootstrap memungkinkan Anda membuat situs web responsif (RWD) dengan cepat—yaitu, disesuaikan untuk perangkat seluler. Jika Anda lebih suka belajar dalam bentuk tutorial: Kursus bootstrap tersedia di Code academy, dan dengan Daily Web, Anda akan membuat slider bootstrap pertama Anda dalam 30 menit.
Kerangka JavaScript
Saat ini, kursus pengembangan front-end yang layak tentu harus memperkenalkan kerangka kerja JavaScript yang saat ini digunakan dan setidaknya mengajarkannya. Anda dapat menemukan kursus interaktif dengan kerangka kerja di Pluralsight (sebelumnya Code School), yang gratis selama 14 hari. Anda dapat menemukan koleksi materi gratis yang sangat kaya di scotch.io. Di sisi lain, berhenti berlangganan di mana Anda akan menemukan kursus pengembangan front-end gratis untuk setiap kerangka kerja adalah topik untuk posting terpisah.
Mereka ada banyak. Pilihannya sulit, dan mengenal mereka semua tidak mungkin. Apa pun yang Anda pilih untuk memulai, patuhi saja. Jangan melompat dari bunga ke bunga karena setelah seminggu belajar pengembangan web; seseorang akan memberitahu Anda bahwa yang lain lebih baik. Pelajari yang pertama dan tulis aplikasi web sederhana di atasnya. Biasanya, aplikasi seperti perencana, daftar tugas, dan berita peringkat direkomendasikan untuk pemula. Yang Anda butuhkan hanyalah nama kerangka kerja dan nama aplikasi web yang ingin Anda buat.
Contoh kursus gratis:
- AngularJS
- Angular 2+ (saat ini 6—tetapi 4/5 hanyalah versi pengembangan front-end lainnya)
- ReactJS
- Vue.js
- Ember.js
Apakah ini akhir? Bukan! Ini adalah awal yang sangat baik dan dasar yang kuat untuk Pengembang Front-End Junior.
Apa selanjutnya setelah kursus ini?
Mulailah dengan mengerjakan proyek web Anda. Seperti yang kami tulis di awal, dokumentasikan pekerjaan Anda dari langkah pengembangan front-end pertama, dan letakkan kode di GitHub, meskipun jauh dari ideal.
Apakah Anda ingin menguji diri sendiri?
Cara terbaik untuk mengkonsolidasikan apa yang telah Anda pelajari adalah melalui latihan. Mengikuti kursus front-end adalah satu hal, tetapi hanya mengerjakan proyek web Anda mengajarkan Anda untuk membuat kode—untuk memecahkan masalah sendiri. Buat formulir (halaman arahan) di mana Anda dapat mengirim email ke penulis halaman.
Buat situs web kartu bisnis Anda - portofolio - pikirkan tentang penggunaan JavaScript untuk mengisi tabel dengan deret Fibonacci, penggeser, atau permainan sederhana dari awal. Pikirkan Anda sudah memiliki keterampilan pengkodean tetapi tidak memiliki keterampilan grafis, sehingga pengembangan yang Anda lakukan "jelek"? Sama sama! Pilih desain grafis yang sudah jadi, misalnya dari Weekly Dev Challenge, dan coba buat.
Berapa lama untuk mempelajari dasar-dasarnya?
Itu tergantung pada Anda. Disiplin adalah yang paling penting. Kebanyakan orang merasa lebih sulit untuk mempelajari bahasa pemrograman web tetapi meluangkan waktu untuk mengambil kursus yang tidak memerlukan biaya. Menguasai dasar-dasar untuk menyiapkan situs web pertama Anda dapat memakan waktu sekitar 1-3 bulan, tergantung seberapa ambisius Anda dalam pengembangan front-end.
Untuk menguasai JavaScript, saya akan menambahkan 3 bulan lagi belajar keras. Saya berasumsi Anda bekerja, jadi Anda akan mencurahkan sekitar 5-10 jam seminggu untuk belajar, yaitu, setidaknya 1 jam sehari. Anda tidak akan menjadi spesialis front-end dalam enam bulan, tapi itu cukup waktu untuk membuat dasar untuk pembelajaran lebih lanjut.
Cari bantuan online
Lebih dari sekali saat belajar, Anda akan mengalami masalah: Bagaimana cara memusatkan elemen? Mengapa skrip ini tidak berfungsi? HTML dan CSS terlihat berbeda di Chrome daripada di Firefox. Bagaimana menjadi pro dalam pengembangan front-end?
Ini normal, tetapi mereka yang bertanya tidak salah.
- Google —tanyakan pada Paman Google, sebaiknya dalam bahasa Inggris.
- Stack Overflow —mungkin akan menjadi yang pertama memunculkan respons dari Stack Overflow. Ini adalah portal pengembang web tempat pengguna memposting pertanyaan terkait bahasa pemrograman web, dan lainnya (biasanya pemrogram web yang lebih berpengalaman) mencoba memberi Anda jawaban tentang pengembangan front-end. Solusi terbaik sebelumnya adalah poin, dan penulis pertanyaan dapat menandai komentar yang memecahkan masalahnya. Terkadang ada beberapa atau selusin solusi, jadi ada baiknya membaca semuanya dan memeriksanya di tempat Anda. Jika ada solusi yang membantu Anda, pilih—berikan panah ke atas.
- Facebook —grup pengembangan front-end di FB untuk pemula dapat banyak membantu Anda, terutama jika Anda tidak tahu cara menanyakan masalah Anda. Unggah layar dan kode Anda. Jangan berharap seseorang menulisnya untuk Anda, tetapi komentar pasti akan mengarahkan Anda ke jalan yang benar. Sayangnya, dengan pertanyaan sepele yang sederhana, orang akan selalu menulis sesuatu yang tidak menyenangkan—sulit, bersabarlah. Kami merekomendasikan grup Web—dukungan mulai adalah yang terbaik untuk pertanyaan yang terkait dengan permulaan, dan moderator memastikan bahwa tidak ada kebencian.
- CanIUse —jika masalah Anda terkait dengan CSS yang tidak berfungsi di salah satu browser Anda, pastikan apa yang Anda gunakan didukung untuk versi yang Anda periksa. Dengan cara ini, Anda akan menghindari pencarian yang panjang dan membosankan untuk masalah front-end hantu.
Kesimpulan
Jadi, dalam artikel ini, Anda telah belajar lebih banyak tentang dunia TI, dan kami akan senang jika kami dapat membantu Anda dengan arahan. Dunia front-end sangat besar, dan mudah bagi pemula untuk tersesat di dalamnya, tetapi kami fokus untuk membantu orang-orang mendapatkan jalan yang benar. Tetapi perhatikan juga bahwa selain bahasa web tradisional, ada bahasa pemrograman web tanpa kode . Sampai alat bebas kode tersedia secara luas, pengembangan aplikasi web secara eksklusif dilakukan oleh pemrogram web.
Untungnya, waktu hampir habis, dan sekarang setiap siswa yang menguasai materi dapat membuat aplikasi web atau halaman arahan mereka. Setelah mempelajari dasar-dasarnya, bahkan pada tingkat pengetahuan, HTML, dan CSS, Anda sudah dapat menemukan pekerjaan impian Anda. Banyak ilmuwan telah mencatat bahwa bahasa pemrograman web meningkatkan kemampuan manusia dan berkontribusi untuk mengembangkan soft skill. Pada akhirnya, inilah kemandirian finansial Anda. Kami mengenal orang-orang yang berbeda dari dunia front-end yang meluncurkan start-up mereka dan melakukan hal-hal yang diperlukan untuk kebaikan planet kita.
Dan, tentu saja, pendekatan semacam itu memiliki kelebihan:
- Kemudahan penggunaan dan kekuatan besar.
- Perpustakaan template yang bagus.
- Dukungan pengaturan berbagai parameter.
Tanpa kode atau bahasa pemrograman visual adalah pendekatan baru di mana Anda tidak perlu menulis kode dari awal. Kami mendorong Anda untuk menggunakan alat dengan antarmuka grafis, yang merupakan masa depan pengembangan web. Aplikasi web front-end tradisional adalah hal yang keren, tetapi kami pikir Anda perlu berinovasi, sehingga produk kami mungkin berguna bagi Anda. Kami dengan tulus ingin menemukan jalan yang benar untuk menguasai profesi seorang programmer. Jalan ini berduri, tetapi jika Anda menguasainya, itu akan memuaskan Anda sepanjang hidup Anda yang Anda habiskan saat ini.
