100 days of code frontend
1.0.0
Catatan: Sumber ini sudah tua! Saya akan mengarsipkan repositori ini pada akhir Juli 2021 karena saya merasa bahwa banyak rekomendasi di sini sudah ketinggalan zaman untuk mempelajari pengembangan web front-end pada tahun 2021.
Harap dukung repo ini dengan memberikan bintang ️ di bagian atas halaman dan ikuti saya untuk lebih banyak sumber daya!
Ingin mempelajari lebih lanjut tentang pengembangan frontend? Mempertimbangkan:
Ini adalah kurikulum yang agak berpendapat untuk mempelajari pengembangan front-end selama #100daysofcode. Karena mencakup berbagai topik pengembangan front-end, dapat dianggap lebih sebagai kursus gaya "survei" daripada menyelam dalam ke satu area. Idealnya, takeaway Anda dari menyelesaikan kurikulum ini akan menjadi beberapa keakraban dengan setiap topik dan kemampuan untuk dengan mudah menyelam lebih dalam di area mana pun di masa depan bila perlu.
Kurikulum ini dipengaruhi secara signifikan oleh roadmap pengembang frontend modern Kamran Ahmed. Silakan periksa-ini sangat bagus.
Catatan : Saya tahu pengembangan front-end berarti banyak hal yang berbeda bagi banyak orang! Jika Anda seorang pengembang front-end dan Anda pikir panduan ini dapat ditingkatkan, beri tahu saya dengan mengangkat masalah seperti yang dijelaskan di bagian yang berkontribusi. Terima kasih!
Berkat beberapa kontributor yang luar biasa, kurikulum ini telah diterjemahkan ke dalam bahasa berikut!
Prinsip yang mendasari repositori ini adalah timebox. Jika Anda telah menghabiskan banyak waktu di masa lalu mencoba mempelajari pengembangan web atau keterampilan serupa, Anda kemungkinan telah mengalami turunnya lubang kelinci pada satu topik tertentu. Repositori ini bertujuan untuk menetapkan sejumlah hari tertentu untuk setiap teknologi dan mendorong Anda untuk pindah ke hari berikutnya setelah jumlah hari habis.
Diperkirakan bahwa setiap orang berada pada tingkat kemahiran yang berbeda ketika memulai tantangan ini, dan tidak apa -apa. Pengembang front-end pemula dan ahli dapat mengambil manfaat dari praktik timebox di masing-masing bidang ini.
Kegiatan harian yang direkomendasikan adalah sebagai berikut:
Di bawah ini Anda dapat menemukan sedikit informasi tentang setiap topik dalam kurikulum serta beberapa ide/panduan tentang apa yang harus dilakukan untuk masing -masing. Untuk inspirasi proyek yang dapat dilakukan bersama kurikulum ini, lihat bagian Project Ideas.
Sebagai bagian dari prinsip timebox, tidak apa -apa jika Anda tidak melewati semua item di bagian "Area Pembelajaran dan Ide". Anda sebaliknya harus fokus untuk mendapatkan yang terbaik yang Anda bisa keluar dari jumlah hari yang ditugaskan untuk setiap area dan kemudian melanjutkan.
Hypertext Markup Language (HTML) adalah bahasa markup standar untuk membuat halaman web dan aplikasi web. Dengan Cascading Style Sheets (CSS) dan JavaScript, ia membentuk triad teknologi landasan untuk World Wide Web. Browser web menerima dokumen HTML dari server web atau dari penyimpanan lokal dan membuat dokumen ke halaman web multimedia. HTML menjelaskan struktur halaman web secara semantik dan awalnya termasuk isyarat untuk tampilan dokumen. (Sumber: Wikipedia)
HTML benar -benar fondasi pengembangan web. Bahkan dalam kerangka kerja berbasis JavaScript, Anda akhirnya menulis HTML dalam satu atau lain bentuk.
Cascading Style Sheets (CSS) adalah bahasa lembar gaya yang digunakan untuk menggambarkan presentasi dokumen yang ditulis dalam bahasa markup seperti HTML. CSS adalah teknologi landasan dari World Wide Web, bersama HTML dan JavaScript. CSS dirancang untuk memungkinkan pemisahan presentasi dan konten, termasuk tata letak, warna, dan font. Pemisahan ini dapat meningkatkan aksesibilitas konten, memberikan lebih banyak fleksibilitas dan kontrol dalam spesifikasi karakteristik presentasi, memungkinkan beberapa halaman Web untuk berbagi pemformatan dengan menentukan CSS yang relevan dalam file .CSS terpisah, dan mengurangi kompleksitas dan pengulangan dalam konten struktural. (Sumber: Wikipedia)
CSS adalah komponen penting lain dari pengembangan web. Meskipun terutama digunakan untuk menata dan memposisikan elemen HTML, ia menjadi semakin mampu melakukan tugas yang lebih dinamis (misalnya, animasi) yang pernah ditangani oleh JavaScript.
<style> tag<link>Javascript, sering disingkat sebagai JS, adalah bahasa pemrograman tingkat tinggi yang ditafsirkan yang sesuai dengan spesifikasi ecmascript. Ini adalah bahasa yang juga ditandai sebagai dinamis, diketik lemah, berbasis prototipe dan multi-paradigma. Bersamaan dengan HTML dan CSS, JavaScript adalah salah satu dari tiga teknologi inti dari World Wide Web. JavaScript memungkinkan halaman web interaktif dan dengan demikian merupakan bagian penting dari aplikasi web. Sebagian besar situs web menggunakannya, dan semua browser web utama memiliki mesin JavaScript khusus untuk menjalankannya. (Sumber: Wikipedia)
Javascript menjadi semakin penting di dunia front-end. Meskipun pernah digunakan terutama untuk membuat halaman dinamis, sekarang menjadi fondasi dari banyak kerangka kerja front-end. Kerangka kerja ini menangani banyak tugas yang sebelumnya ditangani oleh back-end (misalnya, merutekan dan menampilkan berbagai tampilan).
<script> Tag dan penempatanJQuery adalah perpustakaan JavaScript yang cepat, kecil, dan kaya fitur. Itu membuat hal-hal seperti dokumen HTML Traversal dan manipulasi, penanganan acara, animasi, dan Ajax jauh lebih sederhana dengan API yang mudah digunakan yang bekerja di banyak browser. Dengan kombinasi fleksibilitas dan ekstensibilitas, JQuery telah mengubah cara jutaan orang menulis JavaScript. (Sumber: jQuery.com)
Setelah Anda menghabiskan beberapa waktu dengan JavaScript polos (juga disebut "vanilla"), Anda mungkin menemukan beberapa tugas agak rumit, terutama yang terkait dengan mengakses dan memanipulasi elemen HTML. Untuk sementara waktu, JQuery adalah perpustakaan masuk untuk membuat tugas-tugas semacam ini lebih mudah dan konsisten di berbagai browser. Saat ini, jQuery tidak harus belajar "wajib" karena kemajuan dalam vanilla javascript, CSS, dan kerangka kerja JavaScript yang lebih baru (kita akan melihat kerangka kerja nanti). Namun, akan bermanfaat untuk membutuhkan sedikit waktu untuk mempelajari beberapa jQuery dan menerapkannya pada proyek kecil.
Responsive Web Design (RWD) adalah pendekatan untuk desain web yang membuat halaman web membuat dengan baik pada berbagai perangkat dan ukuran jendela atau layar. Pekerjaan terbaru juga mempertimbangkan kedekatan penonton sebagai bagian dari konteks tampilan sebagai perpanjangan untuk RWD. Konten, desain, dan kinerja diperlukan di semua perangkat untuk memastikan kegunaan dan kepuasan. Sebuah situs yang dirancang dengan RWD mengadaptasi tata letak ke lingkungan tampilan dengan menggunakan grid cairan, berbasis proporsi, gambar fleksibel, dan kueri media CSS3, perpanjangan dari aturan @Media. (Sumber: Wikipedia)
Desain web yang responsif adalah tentang membuat aplikasi web terlihat dan berfungsi dengan baik pada semua jenis perangkat. Contoh yang cepat dan kotor adalah bahwa situs web harus terlihat dan berfungsi dengan baik baik di browser web desktop dan di browser ponsel. Pemahaman tentang desain responsif sangat penting untuk setiap pengembang front-end!
Aksesibilitas web adalah praktik inklusif untuk memastikan tidak ada hambatan yang mencegah interaksi dengan, atau akses ke, situs web di World Wide Web oleh para penyandang cacat. Ketika situs dirancang, dikembangkan, dan diedit dengan benar, umumnya semua pengguna memiliki akses yang sama ke informasi dan fungsionalitas. (Sumber: Wikipedia)
Aksesibilitas, sering ditulis sebagai A11Y, adalah salah satu topik terpenting dalam pengembangan web front-end, namun tampaknya sering kali mendapatkan sedikit perhatian. Membuat aplikasi web yang dapat diakses tidak hanya sehat secara etis, tetapi juga membuat banyak akal sehat mengingat audiens tambahan yang akan dapat melihat aplikasi Anda ketika mereka dapat diakses.
GIT adalah sistem kontrol versi terdistribusi sumber terbuka yang dirancang untuk menangani segala sesuatu dari proyek kecil hingga sangat besar dengan kecepatan dan efisiensi. (Sumber: git-scm.com)
Kontrol Versi/Kode adalah bagian penting dari alat pengembang web mana pun. Ada sejumlah sistem kontrol versi yang berbeda, tetapi GIT sejauh ini paling lazim saat ini. Anda dapat (dan harus!) Menggunakannya untuk melacak proyek Anda saat Anda belajar!
Node.js adalah lingkungan run-time-platform open-source, cross-platform yang mengeksekusi kode JavaScript di luar browser. JavaScript digunakan terutama untuk skrip sisi klien, di mana skrip yang ditulis dalam JavaScript tertanam dalam HTML halaman web dan menjalankan sisi klien oleh mesin JavaScript di browser web pengguna. Node.js memungkinkan pengembang menggunakan JavaScript untuk menulis alat baris perintah dan untuk skrip sisi server-skrip script sisi server untuk menghasilkan konten halaman web yang dinamis sebelum halaman dikirim ke browser web pengguna. Akibatnya, Node.js mewakili paradigma "JavaScript Everywhere", menyatukan pengembangan aplikasi web di sekitar satu bahasa pemrograman tunggal, daripada berbagai bahasa untuk sisi server dan skrip sisi klien. (Sumber: Wikipedia)
Sementara Node.js biasanya dikenal sebagai solusi back-end, ini digunakan cukup sering untuk mendukung pengembangan front-end. Ini melakukan ini dalam beberapa cara, termasuk hal -hal seperti menjalankan alat pembuatan, pengujian, dan berbaris (semua akan segera dibahas!). Node Package Manager (NPM) adalah fitur hebat lain dari Node dan dapat digunakan untuk mengelola dependensi proyek Anda (yaitu, perpustakaan kode yang mungkin diandalkan proyek Anda - jQuery adalah contoh!).
Sass adalah perpanjangan dari CSS yang menambah kekuatan dan keanggunan pada bahasa dasar. Ini memungkinkan Anda untuk menggunakan variabel, aturan bersarang, mixin, impor inline, dan banyak lagi, semuanya dengan sintaks yang kompatibel sepenuhnya CSS. Sass membantu menjaga stylesheet besar terorganisir dengan baik, dan membuat stylesheet kecil dan berjalan dengan cepat, terutama dengan bantuan perpustakaan gaya kompas. (Sumber: sass-lang.com)
Sass memungkinkan Anda untuk menulis CSS dengan cara yang lebih terprogram. Jika Anda telah melakukan beberapa CSS, Anda mungkin telah memperhatikan bahwa Anda akhirnya mengulangi banyak informasi-misalnya, menentukan kode warna yang sama. Di SASS, Anda dapat menggunakan hal -hal seperti variabel, loop, dan bersarang untuk mengurangi redundansi dan meningkatkan keterbacaan. Setelah menulis kode Anda di SASS, Anda dapat dengan cepat dan mudah mengkompilasinya ke CSS biasa.
* Beberapa alternatif: fondasi, bulma, terwujud
Bootstrap adalah kerangka kerja front-end gratis dan open-source untuk mengembangkan situs web dan aplikasi web. Ini berisi templat desain berbasis HTML dan CSS untuk tipografi, bentuk, tombol, navigasi dan komponen antarmuka lainnya, serta ekstensi javascript opsional. (Sumber: Wikipedia)
Ada banyak opsi untuk meletakkan, menata, dan membuat aplikasi aplikasi web Anda dinamis, tetapi Anda akan menemukan bahwa dimulai dengan kerangka kerja membantu Anda dalam memulai. Bootstrap adalah salah satu kerangka kerja seperti itu, tetapi jelas jauh dari satu -satunya pilihan! Saya merekomendasikan untuk mengetahui satu kerangka kerja seperti ini, tetapi jauh lebih penting untuk memahami HTML, CSS, dan fundamental JavaScript daripada yang terjebak dalam satu kerangka kerja.
Metodologi blok, elemen, pengubah (biasanya disebut sebagai BEM) adalah konvensi penamaan populer untuk kelas -kelas di HTML dan CSS. Dikembangkan oleh tim di Yandex, tujuannya adalah untuk membantu pengembang lebih memahami hubungan antara HTML dan CSS dalam proyek tertentu. (Sumber: css-tricks.com)
Penting untuk mengetahui penamaan dan sistem organisasi seperti BEM ada dan mengapa mereka digunakan. Lakukan riset di sini, tetapi pada tingkat pemula saya tidak akan merekomendasikan terlalu banyak mencurahkan waktu untuk subjek.
Gulp adalah toolkit untuk mengotomatiskan tugas-tugas yang menyakitkan atau memakan waktu dalam alur kerja pengembangan Anda, sehingga Anda dapat berhenti bermain-main dan membangun sesuatu. (Sumber: gulpjs.com)
Dalam pengembangan front-end modern, Anda akan sering mendapati diri Anda perlu mengotomatiskan tugas-tugas seperti bundling, memindahkan file, dan menyuntikkan referensi ke dalam file HTML. Gulp adalah salah satu alat yang dapat membantu Anda melakukan hal -hal ini!
buildPada intinya, Webpack adalah bundler modul statis untuk aplikasi JavaScript modern. Saat Webpack memproses aplikasi Anda, secara internal membangun grafik ketergantungan yang memetakan setiap modul kebutuhan proyek Anda dan menghasilkan satu atau lebih bundel. (Sumber: webpack.js.org)
Bayangkan Anda memiliki proyek pengembangan web besar dengan sejumlah pengembang berbeda yang mengerjakan banyak tugas yang berbeda. Daripada semua bekerja di file yang sama, Anda mungkin ingin memodulasi mereka sebanyak mungkin. Webpack membantu mengaktifkan ini dengan membiarkan tim Anda bekerja secara modular dan kemudian, tiba saatnya untuk membangun aplikasi, Webpack akan menyatukan semuanya: html, css/sass, javasscript, gambar, dll. Webpack bukan satu-satunya bundler modul, tetapi tampaknya menjadi pelari depan saat ini.
ESLINT adalah utilitas serat javascript open source yang awalnya dibuat oleh Nicholas C. Zakas pada Juni 2013. Linting kode adalah jenis analisis statis yang sering digunakan untuk menemukan pola atau kode bermasalah yang tidak mematuhi pedoman gaya tertentu. Ada linter kode untuk sebagian besar bahasa pemrograman, dan kompiler terkadang memasukkan serat ke dalam proses kompilasi. (Sumber: eslint.org)
Linting adalah alat yang fantastis untuk kualitas kode, keterbacaan, dan konsistensi. Menggunakan linter akan membantu Anda menangkap sintaks dan memformat kesalahan sebelum mereka pergi ke produksi. Anda dapat menjalankan linters secara manual atau memasukkannya ke dalam proses build/penyebaran Anda.
* Beberapa alternatif: vue, sudut, bara
React (juga dikenal sebagai react.js atau reactjs) adalah perpustakaan JavaScript untuk membangun antarmuka pengguna. Ini dikelola oleh Facebook dan komunitas pengembang dan perusahaan individu. Bereaksi dapat digunakan sebagai basis dalam pengembangan satu halaman atau aplikasi seluler. Aplikasi React yang kompleks biasanya memerlukan penggunaan pustaka tambahan untuk manajemen negara, perutean, dan interaksi dengan API. (Sumber: Wikipedia)
Kerangka kerja JavaScript front-end berada di garis depan pengembangan front-end modern. Salah satu takeaway penting di sini adalah bahwa bereaksi, meskipun sangat populer, hanyalah perpustakaan untuk membangun antarmuka pengguna sedangkan kerangka kerja seperti Vue dan Angular bertujuan untuk lebih berfitur lengkap. Misalnya, jika Anda membangun aplikasi dengan di React yang perlu diarahkan ke berbagai pandangan, Anda harus membawa sesuatu seperti react-router .
create-react-app adalah alat yang nyaman untuk merancang proyek reaksi baru.Redux adalah wadah negara yang dapat diprediksi untuk aplikasi JavaScript. Ini membantu Anda menulis aplikasi yang berperilaku konsisten, berjalan di lingkungan yang berbeda (klien, server, dan asli), dan mudah diuji. Selain itu, ini memberikan pengalaman pengembang yang hebat, seperti pengeditan kode langsung yang dikombinasikan dengan debugger perjalanan waktu. (Sumber: redux.js.org)
Saat Anda membangun aplikasi front-end yang lebih besar dan lebih besar, Anda mulai menyadari bahwa sulit untuk mempertahankan status aplikasi: hal-hal seperti jika pengguna masuk, siapa pengguna, dan umumnya apa yang terjadi dalam aplikasi. Redux adalah perpustakaan hebat yang membantu Anda mempertahankan satu sumber keadaan di mana aplikasi Anda dapat mendasarkan logikanya.
Jest adalah kerangka pengujian JavaScript yang menyenangkan dengan fokus pada kesederhanaan. Ini bekerja dengan proyek menggunakan: Babel, naskah, node, bereaksi, sudut, vue dan banyak lagi! (Sumber: jestjs.io)
Sangat penting untuk mengatur pengujian otomatis untuk proyek front-end Anda. Menyiapkan pengujian otomatis akan memungkinkan Anda untuk membuat perubahan di masa depan dengan keyakinan-jika Anda membuat perubahan dan tes Anda masih lulus, Anda akan cukup nyaman Anda tidak merusak fungsionalitas yang ada. Ada terlalu banyak kerangka kerja pengujian untuk dicantumkan; Jest hanyalah salah satu favorties saya.
create-react-app , Jest sudah dikonfigurasi.* Alternatif: Aliran
Typescript adalah bahasa pemrograman open-source yang dikembangkan dan dikelola oleh Microsoft. Ini adalah superset sintaksis yang ketat dari JavaScript, dan menambahkan pengetikan statis opsional pada bahasa tersebut. TypeScript dirancang untuk pengembangan aplikasi besar dan transkompil ke JavaScript. Karena TypeScript adalah superset dari JavaScript, program JavaScript yang ada juga merupakan program TypeScript yang valid. TypeScript dapat digunakan untuk mengembangkan aplikasi JavaScript untuk eksekusi sisi klien dan sisi server (NODE.JS). (Sumber: Wikipedia)
Javascript diketik secara dinamis. Namun, ini adalah keyakinan umum bahwa pengetikan statis (yaitu, menentukan jenis variabel, kelas, antarmuka sebelumnya) lebih jelas dan mengurangi kemungkinan cacat/bug. Terlepas dari perasaan Anda tentang topik tersebut, penting untuk setidaknya merasakan versi JavaScript yang diketik secara statis seperti TypeScript. Perhatikan bahwa naskah dikompilasi ke JavaScript sehingga dapat ditafsirkan oleh browser (yaitu, browser tidak secara native menafsirkan naskah naskah).
Next.js adalah kerangka kerja minimalis untuk aplikasi bereaksi server yang diserahkan. (Sumber: Next.js - React Server Side Renders dilakukan dengan benar)
Sekarang kita akan maju! Sekarang Anda telah membangun aplikasi reaksi (atau vue atau sudut) yang melakukan sedikit pekerjaan di browser. Karena berbagai alasan (misalnya, SEO, kekhawatiran atas kinerja klien), Anda mungkin benar-benar ingin aplikasi front-end Anda diterjemahkan di server daripada klien. Di situlah kerangka kerja seperti Next.js masuk.
Daftar ini seharusnya memberi Anda paparan luas ke ekosistem front-end, tetapi tidak mungkin untuk mencapai setiap topik, belum lagi berbagai alat dalam setiap area! Jika Anda pikir saya melewatkan sesuatu yang sangat penting, silakan lihat bagian yang berkontribusi untuk melihat bagaimana Anda dapat membantu membuat panduan ini lebih baik.
Saat Anda maju melalui #100DaySofCode, Anda ingin satu atau beberapa proyek yang dapat Anda terapkan pengetahuan baru Anda. Di bagian ini, saya berusaha memberikan beberapa ide proyek yang dapat Anda gunakan. Atau, Anda didorong untuk membuat ide proyek Anda sendiri karena ide -ide itu mungkin menarik dan memotivasi Anda lebih banyak.
Secara umum, saya telah menemukan sumber daya berikut yang sangat berharga untuk belajar pengembangan perangkat lunak:
Jika Anda ingin masukan saya tentang apa pun, jangan ragu untuk terhubung dengan saya di Twitter dan saya akan melakukan yang terbaik untuk mencoba menawarkan bantuan. Jika Anda pikir ada masalah dengan kurikulum atau memiliki rekomendasi, lihat bagian yang berkontribusi di bawah ini.
Jika Anda menghargai pekerjaan yang dilakukan di sini, Anda dapat berkontribusi secara signifikan dengan menyebarkan berita tentang repositori ini, termasuk hal -hal seperti:
Ini adalah pekerjaan yang sedang berlangsung dan saya sangat menghargai bantuan dalam mempertahankan basis pengetahuan ini!
Saat berkontribusi pada repositori ini, silakan diskusikan kembali perubahan yang ingin Anda lakukan melalui masalah sebelum membuat perubahan. Kalau tidak, akan sangat sulit untuk memahami proposal Anda dan berpotensi membuat Anda melakukan banyak pekerjaan untuk perubahan yang tidak akan digabungkan.
Harap dicatat bahwa semua orang yang terlibat dalam proyek ini mencoba belajar atau mencoba membantu-tolong bersikaplah baik!
