Get best of the week

Jika saya mengajar Frontend hari ini. Tips Pemula

Jalur saya dalam pengembangan web dimulai 5 tahun yang lalu. Selama waktu ini saya berhasil mencoba banyak teknologi, dan dalam 3 tahun terakhir saya telah berkembang ke arah frontend.

Dalam artikel ini, saya ingin menyatakan dengan jelas teknologi apa yang perlu dipelajari seorang pemula, serta berbagi metode untuk pengembangannya. Panduan ini ditujukan untuk orang-orang yang mengambil langkah pertama dalam pengembangan web, dan di dalamnya saya akan mencoba menjelaskan secara rinci esensi dari setiap teknologi. Juga pada akhirnya saya akan memberitahu Anda ke mana harus pergi selanjutnya.

Jadi, Anda ingin menjadi pengembang Frontend. Apa yang dibutuhkan untuk ini?

Belajar HTML, CSS, Javascript

HTML dan CSS


Kedua teknologi ini diperlukan untuk tata letak situs. Layout adalah susunan teks, gambar, tombol dan elemen antarmuka lainnya pada halaman.

Menggunakan HTML, kita dapat menambahkan dan menjelaskan elemen-elemen ini. Awalnya, mereka akan mentah, dengan penampilan standar. Untuk mengubah gaya, CSS digunakan. Ini memungkinkan Anda menentukan warna, ukuran, lokasi, dan lusinan parameter lainnya untuk penampilan elemen.

Situs web tanpa CSS dan dengan itu

Bagaimana cara menguasainya


Pertama-tama, Anda harus membaca artikel ulasan atau video tentang teknologi ini. Jadi, Anda memahami esensi mereka.

Maka tata letak yang paling nyaman untuk dipelajari dan ditingkatkan dalam praktek. Coba tata letak tata letak untuk halaman atau elemen individual. Anda juga dapat mencoba melihat proses tata letak halaman di Youtube dan ulangi setelah penulis.

Pada awalnya akan sulit, dan Anda harus sering pergi ke Google untuk menyelesaikan masalah lain. Namun seiring waktu, Anda akan belajar untuk dengan cepat menemukan di dalam kepala Anda struktur HTML yang benar dan properti CSS yang diperlukan untuk tata letak elemen.

Di mana mendapatkan ide dan tata letak untuk tata letak?


Saya menggunakan Dribbble dan CollectUI , tetapi juga dapat dicari di Behance dan One Page Love .

Anda juga dapat mengambil tata letak nyata dari Desain Toko UI . Saya sarankan membuat layout dari Figma, as itu digunakan oleh banyak desainer, dan di masa depan Anda kemungkinan besar akan bekerja dengannya. Ini juga gratis dan berfungsi di browser.

gambar

Javascript


Bahasa ini mulai pemrograman di web. Ini memungkinkan Anda untuk mengelola elemen pada halaman, mendeskripsikan dan mengontrol interaksi dengan antarmuka.

Jika kami membuat halaman dengan HTML dan CSS, maka JavaScript bertanggung jawab atas bagian dinamis halaman: animasi, tampilan data, pemrosesan tindakan, dan banyak lagi.

Mengapa saya membutuhkannya?


Contoh sederhana. Misalkan ada halaman di mana, di klik tombol, Anda perlu menampilkan jendela modal. HTML dan CSS akan memungkinkan kita untuk membuat tata letak halaman itu sendiri dan jendela modal. Namun, teknologi ini tidak dapat menangkap dan memproses klik tombol.
Di sinilah kita membutuhkan JavaScript. Dengan menggunakannya, kami menggambarkan perilaku di halaman. Dalam kode yang kami maksud: jika pengguna mengklik tombol, maka Anda perlu menunjukkan jendela modal.

Berikut adalah contoh implementasi seperti itu menggunakan jQuery :



Menggunakan JavaScript, Anda dapat melakukan hampir semua operasi pada halaman. Namun, kemampuannya tidak terbatas pada jendela browser. Menggunakan platform Node.js , bahasa ini dapat digunakan untuk pengembangan server, membangun proyek, dan banyak lagi. Di masa depan, Anda akan membutuhkan ini untuk bekerja dengan proyek besar, membangun dari Webpack . Namun, saya menyarankan Anda terlebih dahulu untuk mempelajari cara menggunakan bahasa di dalam browser.

Bagaimana cara menguasainya


Taruhan terbaik Anda adalah mulai belajar di learn.javascript.ru . Ini adalah sumber yang bagus, yang merupakan basis pengetahuan untuk pemula dan pengembang maju.

Di sini penting untuk memahami dasar-dasar JavaScript itu sendiri, serta fitur-fitur operasinya di browser. Jika beberapa topik tampak terlalu rumit untuk Anda (misalnya, prototipe ), maka Anda dapat mengabaikannya dan kembali lagi nanti.

Jangan terlalu terbawa oleh teori JavaScript saja. Saya sarankan Anda mencoba tangan Anda pada saat yang sama ketika Anda belajar dan menulis skrip sederhana. Anda juga dapat mencoba menguraikan bagian lain dari kode pada Codepen .

gambar

Pelajari secara bertahap plugin dan perpustakaan baru. Salah satu yang paling populer dan termudah untuk dipahami adalah jQuery.. Jauh lebih mudah untuk berinteraksi dengan konten halaman dengannya, dan dapat dengan cepat dikuasai di tingkat dasar.

Pada umumnya, Anda akan sering menggunakan perpustakaan pihak ketiga dalam proyek Anda. Untuk lebih memahami bagaimana ini dilakukan, saya sarankan mencoba memformat tanggal menggunakan Luxon atau membuat korsel melalui Owl Carousel .

Apa berikutnya?


Dengan keterampilan dasar dalam HTML, CSS dan JavaScript, Anda dapat membuat halaman arahan yang indah, membuat halaman dari toko atau blog online. Inilah yang saya sarankan Anda lakukan untuk mengkonsolidasikan pengetahuan Anda dalam pengembangan web.

Pada dasarnya, hampir semua antarmuka dapat ditulis pada teknologi ini. Satu-satunya pertanyaan adalah spesifik aplikasi apa yang akan Anda kembangkan. Semakin besar dan kompleksnya, semakin banyak pustaka, plugin, dan teknologi yang Anda perlukan untuk mengatasi tugas tersebut.

gambar

Saya sarankan Anda membiasakan diri dengan Roadmap Frontend . Berikut adalah teknologi pengembangan antarmuka yang akan Anda butuhkan di masa depan.

Di masa depan, Anda mungkin akan tertarik pada kerangka kerja reaktif seperti React atau Vue.. Untuk membangun aplikasi di atasnya Anda akan belajar Webpack , dan untuk mempercepat proses tata letak, Anda akan mempelajari preprocessor PUG dan SASS . Atau mungkin Anda ingin masuk lebih dalam ke grafik dan belajar bagaimana bekerja dengan D3 atau WebGL .

Seperti yang sudah Anda pahami, frontend dalam pengembangan web sangat fleksibel dan kaya akan berbagai teknologi untuk tugas yang sangat berbeda. Pelajari, coba, coba, dan nikmati membuat antarmuka yang indah dan nyaman untuk tujuan apa pun. Untuk ini kami suka frontend.


PS Saya menemani setiap teknologi dalam artikel ini dengan tautan ke dokumentasi atau contoh penggunaan. Anda dapat membiasakan diri dengan mereka untuk mendapatkan pemahaman yang lebih luas tentang pengembangan web.

More articles:


All Articles