https://github.com/impfundev/idcamp2023
Kumpulan web apps dalam seri Bootcamp IDCamp 2023 dari Dicoding Academy dan Indosat
https://github.com/impfundev/idcamp2023
frontend javascript reactjs web
Last synced: 3 months ago
JSON representation
Kumpulan web apps dalam seri Bootcamp IDCamp 2023 dari Dicoding Academy dan Indosat
- Host: GitHub
- URL: https://github.com/impfundev/idcamp2023
- Owner: impfundev
- Created: 2023-10-02T12:07:09.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2023-10-02T12:58:03.000Z (over 2 years ago)
- Last Synced: 2025-01-08T21:41:24.541Z (over 1 year ago)
- Topics: frontend, javascript, reactjs, web
- Language: HTML
- Homepage: https://idcamp2023-notesapp.vercel.app/
- Size: 2.11 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Kumpulan Web Apps Seri Bootcamp IDCamp 2023 Dicoding x Indosat Ooredoo Hutchison
IDCamp adalah sebuah program beasiswa yang diselenggarakan oleh Indosat Ooredoo Hutchison dengan tujuan untuk mencetak developer/programmer muda Indonesia yang siap bersaing di dunia ekonomi digital.
Dalam IDCamp ini saya mengambil Learning Path React Developer dalam kelas basic dengan course:
## 1. Dasar Pemrograman Web
Belajar dasar adalah langkah yang tidak boleh dilewatkan untuk mahir di bidang apa pun. Di sini, Saya belajar dasar dari HTML, CSS dan JavaScript. sebagai 3 pilar pembentuk website.
Materi yang dipelajari:
1. Pendahuluan: Pengenalan mengenai website, server dan client, anatomi website, dan tools yang diperlukan dalam pengembangan halaman website. (40 menit)
2. Pengenalan HTML: Mempelajari alat yang digunakan dalam membangun struktur halaman website. Modul ini membahas tentang HTML, struktur dasar dokumen HTML, dsb. (1 jam 10 menit)
3. Pendalaman HTML: Mendalami penerapan HTML dalam membangun struktur halaman web secara lebih lanjut. Di antaranya seperti beragam elemen HTML, teknik mengorganisir konten website dengan elemen semantik, mengenal attribute pada elemen, generic element, table, dsb. Selain itu, modul ini membahas tentang perbedaan antara elemen yang bersifat inline dan block. (6 jam 45 menit)
4. Pengenalan CSS: Mempelajari alat yang digunakan untuk memperindah tampilan halaman website. Modul ini membahas mengenai peranan CSS, cara kerjanya, cara menuliskan kodenya, anatomi dari CSS rule, dsb. (1 jam 50 menit)
5. Pendalaman CSS: Mendalami penerapan CSS dalam mempercantik tampilan halaman website secara lebih lanjut. Di antaranya seperti variatif selector, styling untuk font dan text, memahami tentang foreground color dan background color, box model, shadow, positioning, layouting menggunakan float, dan media query. (15 jam 20 menit)
6. Layout Responsif dengan Flexbox: Mempelajari teknik layouting menggunakan Flexbox dalam membangun konten halaman website. Fitur ini merupakan teknik baru di CSS dalam menyusun layout yang responsif dan dapat dikombinasikan dengan media query sehingga tampilan pada perangkat mobile lebih optimal. (4 jam 5 menit)
7. Penutup: Implementasi teknik yang telah dipelajari dalam pembuatan dan improvisasi pada sebuah proyek website sederhana. (10 jam 15 menit)
Evaluasi pembelajaran:
- Ujian Akhir
- Submission: tugas akhir membuat halaman website menggunakan teknik semantic HTML dan layouting
Project akhir bisa dilihat disini:
- [Live Demo](https://idcamp2023-basicweb.vercel.app/)
- [Source Code](https://github.com/impfundev/idcamp2023/tree/main/1.%20Dasar%20Pemrograman%20Web/Submission_Tugas%20Akhir%20Membuat%20Website_Dasar%20Pemrograman%20Web)
## 2. Dasar Pemrograman Javascript
Disini saya belajar menguasai JavaScript sebagai bahasa pemrograman populer, mulai dari fundamental, sintaks dan fitur ES6, hingga konsep automation test menggunakan framework ternama seperti Jest.
Materi yang dipelajari:
1. Pengenalan Kelas : Pengenalan kelas dan apa saja yang akan dipelajari. (10 menit)
2. Pengenalan JavaScript : Pengenalan tentang apa itu JavaScript, bagaimana sejarahnya, dan beberapa alasan untuk mulai mempelajarinya. (30 menit)
3. JavaScript Fundamentals : Menjelaskan dasar logika dan sintaksis pemrograman menggunakan JavaScript, seperti variabel, tipe data, dan perulangan. (5 jam 35 menit)
4. Data Structure : Menjelaskan bagaimana menyimpan dan mengelola data yang lebih kompleks menggunakan Object, Array, Map, dan Set. (4 jam 35 menit)
5. Function : Menjelaskan bagaimana mengelompokkan kode menjadi fungsi yang dapat dipanggil ulang. (4 jam 35 menit)
6. Object-Oriented Programming : Menjelaskan konsep OOP pada JavaScript, bagaimana membuat class, properti, dan method dari class. (4 jam 55 menit)
7. Functional Programming : Memahami konsep functional programming seperti perilaku fungsi, lambda, dan higher-order. (2 jam 35 menit)
8. Setup Environment : Proses instalasi lingkungan pengembangan seperti Node.js dan IDE pada perangkat yang Anda miliki. (3 jam)
9. Module : Menjelaskan bagaimana beberapa berkas JavaScript dapat saling berkomunikasi dan berbagi data satu sama lain. (2 jam 55 menit)
10. Error Handling : Menjelaskan bagaimana menangani kegagalan yang mungkin muncul dalam program sehingga tidak berdampak kepada pengguna. (3 jam 35 menit)
11. Concurrency : Menjelaskan bagaimana menangani dan membuat proses asynchronous pada JavaScript. (5 jam 55 menit)
12. Node Package Manager : Mengenalkan beberapa library yang penting untuk ditambahkan ke dalam proyek aplikasi JavaScript. (1 jam 50 menit)
13. JavaScript Testing : Menjelaskan bagaimana melakukan pengujian otomatis pada kode JavaScript. (3 jam 20 menit)
Evaluasi pembelajaran:
- Ujian Akhir
## 3. Belajar Membuat Front-End Web
Seorang Front-End Web Developer harus mahir menggunakan JavaScript agar mampu membuat website yang interaktif. Di langkah ini, Saya belajar banyak tentang JavaScript untuk membuat website yang interaktif dan menarik.
Materi yang dipelajari:
1. Browser Object Model dan Document Object Model: Mempelajari penerapan BOM dan DOM pada halaman website. Selain itu, modul ini mengajarkan teknik pemanipulasian DOM menggunakan JavaScript. (7 jam 55 menit)
2. Interaktif dengan Event: Mempelajari penerapan event dalam menciptakan interaktifitas pada HTML element. (10 jam 45 menit)
3. Penyimpanan Data dengan Web Storage: Mempelajari API browser yang berguna untuk penyimpanan data melalui Web Storage. Dalam modul ini mengajarkan mengenai tipe-tipe storage beserta penerapannya. (8 jam 25 menit)
Evaluasi Pembelajaran:
- Submission (proyek akhir) membuat sebuah website yang menerapkan teknik manipulasi DOM dan web storage
Project akhir bisa dilihat disini:
- [Live Demo](https://idcamp2023-basicfrontend.vercel.app/)
- [Source Code](https://github.com/impfundev/idcamp2023/tree/main/3.%20Dasar%20Frontend%20Web/Bookshelf%20Apps)
## 4. Belajar Membuat Aplikasi Web Menggunakan React
Setelah mahir membuat web interaktif dalam seri "Belajar Membuat Front-End Web", kini lanjut menggunakan framework React Js. Disini saya berlatih untuk mahir menggunakan framwork React dan melangkah lebih dekat ke dunia profesional.
Materi yang dipelajari:
1. Pengenalan React : Berkenalan dengan React, mengetahui alasan mempelajari React, dan mengenal ekosistem yang ada di React (1 Jam 35 Menit)
2. Konsep Dasar React : Belajar tentang konsep dasar React seperti composition, declarative code, unidirectional data flow, dan menyadari bahwa React hanyalah JavaScript (2 Jam 45 Menit).
3. React UI Component : Belajar tentang membangun UI di React seperti mengenal element dan component. Serta, belajar juga konsep component properti yang membuat UI aplikasi bersifat reusable (7 Jam).
4. Stateful Component : Belajar tentang class component, menggunakan state di dalam component, memahami dan mempraktikkan controlled component (6 Jam 50 Menit).
Evaluasi pembelajaran :
- Submission (Proyek Akhir) berupa membangun web aplikasi dengan React yang menerapkan reusable component, stateful component, controlled component.
Project akhir bisa dilihat disini:
- [Live Demo](https://idcamp2023-notesapp.vercel.app/)
- [Source Code](https://github.com/impfundev/idcamp2023/tree/main/4.%20Dasar%20React/Notes%20App)
