Proyek Praktik untuk Pengembang Front-End

Pengembangan front-end seperti keterampilan lainnya membutuhkan banyak pekerjaan. Ada berbagai cara untuk menangani tugas besar ini, beberapa di antaranya adalah:

1. Bekerja di agensi sebagai pengembang front-end.
2. Belajar di rumah Anda dan bangun proyek sampingan.
3. Bekerja sebagai freelancer untuk klien.

Masing-masing memiliki sisi positif dan negatifnya sendiri, tetapi satu hal tetap konstan - semakin beragam tugas yang Anda dapatkan, semakin cepat Anda akan maju.

Dalam artikel ini, kita akan melihat beberapa proyek potensial yang dapat Anda kerjakan sendiri-sendiri, di mana Anda dapat mempelajari teknologi baru, pendekatan, dan kemungkinan “Aha!” momen dalam karir front-end Anda.

Semua tugas di bawah ini adalah repositori yang cukup bagus untuk dimiliki di profil GitHub Anda, terutama ketika Anda memutuskan untuk melamar posisi front-end.

Sebuah catatan! Semua contoh di bawah ini dibuat oleh desainer untuk produk nyata. Kami TIDAK mengusulkan kepada Anda agar Anda mengambilnya, memberi kode, dan melakukan apa pun yang Anda inginkan. Semua ini adalah contoh elemen UI yang dapat Anda kerjakan tanpa mendistribusikan atau menjualnya nanti.

1 - Pustaka UI Komponen

Kesulitan: Mudah-Sedang.

Jangan salah paham dengan yang "mudah", karena seperti halnya proyek apa pun di sini, baik pengembang junior maupun senior dapat berjuang tergantung pada masalah yang mereka pecahkan. Kami telah menempatkan ini pada skala yang mudah karena tidak akan terdiri dari elemen UI yang rumit dan semuanya dapat dikemas.

Anda dapat memilih desain yang sudah ada seperti ini, yang berfokus pada dropdown / tombol:

Sumber

Atau Anda bisa menggunakan yang lebih umum seperti Bootstrap dan Foundation. Apa yang harus dipertimbangkan:

• Konvensi penamaan yang terdefinisi dengan baik.
• Presentasi komponen.
• Pengubah - Kebanyakan orang suka mengubah elemen kecil, jadi pertimbangkan bagaimana menerapkannya. Contoh - Anda menginginkan warna primer, warna sekunder; sukses, status kesalahan, dll.
• Pertahankan agar tetap "pasang dan mainkan". Tujuan Anda adalah mengizinkan pengembang lain menggunakan kode Anda tanpa harus menulis CSS apa pun. Anda juga dapat menggabungkannya dengan sistem grid dasar.

Arsitektur yang baik dari perpustakaan seperti itu bukanlah hal yang sepele. Anda dapat mencoba tugas yang sama ini di awal karir Anda serta beberapa tahun ke depan dan membandingkan apa yang telah Anda pelajari.

2 - Menerapkan UI Animasi Kompleks

Kesulitan: Sulit

Tugas ini adalah tentang animasi dan kinerja yang ramping. Tetapi di samping itu, Anda juga harus menuliskan beberapa visual yang tidak terlalu umum. Lihat contoh di bawah ini:

Anda dapat melihat animasi lengkapnya di sini. Setelah UI Anda tidak aktif, inilah saatnya untuk menambahkan interaktivitas. Tidak semua animasi akan terlihat seperti desain karena tidak dibuat di browser tetapi di alat lain, tetapi itu tidak berarti Anda tidak bisa mendekati aslinya. Tentu saja, kami akan melewatkan efek buram gerakan dan deformasi bentuk yang aneh, tetapi sebagian besar sisanya adalah sesuatu yang dapat Anda lakukan. Ada juga perpustakaan JS untuk membantu Anda dengan keyframing semuanya.

Tugas ini hanya membutuhkan dua kali pertukaran layar untuk membuatnya lebih pendek. Tidak perlu bekerja pada tampilan seluler di sini kecuali Anda punya tenaga.

3 - UI Game

Kesulitan: Sulit

Tugas rumit lainnya! Sebagian besar game memiliki gaya seni yang sangat unik yang tidak dapat dengan mudah diterjemahkan di web. Untuk mempersulit, ada aturan lain di sini - Jangan gunakan gambar / svg apa pun untuk mencapai bentuk di UI.

Sumber: StarCraft II

Kami telah memilih StarCraft 2 untuk tujuan ini. Seperti yang Anda lihat, ada banyak detail kecil di sana-sini yang harus Anda pertimbangkan dalam implementasi Anda. Memang, di sini aturan "tidak ada aset" yang membuat ini sulit. Anda harus bekerja dengan bentuk, kliping, bayangan magix, gradien, batas dan banyak lagi. Tentu saja dibutuhkan gambar untuk potret dan kelautan di sebelah kanan.

Untuk membuatnya lebih realistis, bingkai potret kanan atas dapat ditukar dengan salah satu baris atas dari gambar berikutnya:

Sumber: StarCraft II

Jika Anda berhasil membuatnya juga terlihat bagus di layar dan perangkat seluler yang lebih kecil, Anda memenangkan poin ekstra! Ini akan menjadi sangat "Wow!" efek proyek pada CV Anda.

4 - Game Kuis

Kesulitan: Sedang

Game kuis tidak terlalu sulit untuk dibuat dibandingkan dengan beberapa desain di atas, tetapi mereka membutuhkan beberapa JS yang ditulis untuk membuatnya berfungsi. Yap, selama ini kami hanya memiliki proyek berbasis CSS, untuk yang satu ini Anda juga harus membuatnya interaktif, agar orang dapat mengklik, melihat jawaban yang benar / salah dan banyak lagi.

Jika Anda melakukan pencarian untuk "Quiz" di Dribbble, Anda dapat menemukan banyak contoh, tetapi jika Anda merasa sulit untuk memilihnya, Anda dapat mengambil ini:

Sumber

Seperti yang Anda lihat, hanya ada dua layar, yang berarti Anda harus membuat sisanya berdasarkan desain di atas.

Fitur untuk kuis:

• Hitung jawaban yang benar
• Jawaban dari opsi N.
• Tunjukkan jawaban benar / salah setelah mengklik
• Laporkan popup pertanyaan
• Kembali ke semua kuis, pilih kuis
• Tampilkan skor akhir setelah kuis berakhir

Anda dapat melakukan lebih banyak dari yang disebutkan di atas jika Anda mau. Ini umumnya merupakan jenis proyek "satu sore".

5 - Pilih Situs Acak dan Jadikan Ramah Printer

Kesulitan: Mudah

Mengoptimalkan pencetakan memiliki keunikannya sendiri. Terutama saat Anda menyembunyikan elemen yang ada di situs, membersihkan latar belakang, meningkatkan tipografi, bekerja dengan hentian halaman, dan memformat halaman.

Untuk tugas ini, Anda bisa memilih situs di web, memilih halaman artikel dan mulai mengerjakan gaya pencetakan. Ada artikel panjang yang ditulis tentang topik tersebut, jadi ada banyak hal yang dapat membantu Anda.

Contoh situs web yang dapat Anda gunakan:

• Halaman penjualan Amazon - Fokus hanya pada informasi penting.
• Halaman penjualan kursus - dari SitePoint.
• Halaman kursus lain

Silakan pilih situs lain yang Anda inginkan, Anda dapat membuatnya mudah atau sulit untuk diri Anda sendiri. Jika Anda ingin melihat contoh gaya cetak yang bagus, lihat di https://www.smashingmagazine.com/, mereka benar-benar berhasil.

6 - Tata Letak Gaya Majalah yang Kompleks

Kesulitan: Gila

Yang satu ini selain keras juga rumit. Dan ini membutuhkan lebih banyak waktu dibandingkan dengan tugas lain yang disebutkan di atas, jadi Anda mungkin perlu mengosongkan lebih dari 20-30 jam untuk itu.

Sumber

Desain di atas adalah desain ulang The New York Times oleh Slava Kornilov. Di tautan tersebut Anda akan melihat semua desain yang telah dia lakukan termasuk layar besar yang menampilkan seluruh beranda.

Dalam proyek ini, Anda perlu memikirkan dalam hal komponen, mengatur gaya beberapa elemen UI yang kompleks seperti video yang keluar dari viewport (yang harus tetap responsif), pengaturan tipografi, elemen yang tumpang tindih dan banyak lagi.

Bahkan hanya dengan melihat latar belakang di balik judul besar di bagian atas menyembunyikan beberapa bagian rumit dalam penerapannya.

Dia telah merancang banyak elemen, sehingga Anda dapat menghabiskan lebih dari satu atau dua bulan di sini jika Anda mau dan akan ada banyak hal yang harus dipelajari. Mungkin Anda bahkan dapat membuat video di latar belakang seperti yang ditunjukkan di bawah ini:

Sumber

Untuk yang satu ini, ada juga animasi yang terjadi untuk berbagai artikel berita yang dapat diterapkan juga. Anda juga harus mempertimbangkan tampilan seluler di sini.

7 - Dasbor dan Bagannya

Kesulitan: Sedang-Keras

Dasbor ada di mana-mana. Dan ketika desainer tidak tahu apa yang harus dilakukan di malam hari, terkadang mereka hanya mendesain yang lain. Hanya karena.
Dan berkat itu, ada banyak pilihan. Pada titik tertentu Anda mungkin harus membangun yang asli untuk produk yang nyata. Dan Anda mungkin tidak cukup beruntung untuk mendapatkan salah satu antarmuka yang "tampak mengagumkan" ini dengan jutaan animasi yang sedang dimuat yang tidak masuk akal.

Untuk mempersiapkan hari seperti itu, inilah tantangan bagi Anda:

Terapkan desain berikut:

Sumber

Yang perlu Anda pertimbangkan di sini - Grafik harus nyata. Mereka harus menggunakan data nyata , dan Anda harus mencoba membuatnya terlihat seperti yang Anda lihat di atas. Ada banyak pustaka yang dapat Anda gunakan, dan kemungkinan besar Anda harus banyak memperluas / memodifikasi.

Jika Anda memutuskan untuk memasukkan beberapa animasi ke dalamnya, itu bisa menjadi lebih baik. Ini akan terlihat bagus di CV, bukan?

Pada akhirnya:

Salah satu cara terbaik untuk belajar dan menjadi pengembang yang lebih baik adalah dengan mulai menulis kode dan membangun situs. Lakukan setiap hari, cukup buat kode satu ton! Ini sangat membantu terutama dalam 3-4 tahun pertama karir Anda.

Dengan pengalaman ini di belakang Anda, Anda dapat dengan mudah mengisi peran yang lebih senior. Di sana Anda dapat membuat keputusan dan memimpin tim Anda sendiri secara efektif dengan menggunakan pengalaman yang diperoleh dari semua proyek ini dan masalah serta masalah yang Anda temukan dan atasi sepanjang jalan. Dan ingat, selalu berusaha menemukan sesuatu yang sulit untuk dikerjakan!