Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/ardywsptr/materi-menjadi-front-end-web-developer-expert
Repositori ini merupakan kumpulan praktek dari materi yang ada pada kelas menjadi front end web developer expert di Dicoding
https://github.com/ardywsptr/materi-menjadi-front-end-web-developer-expert
accessibility dicoding-academy front-end-web-development mobile-first-layout web-performance
Last synced: about 1 month ago
JSON representation
Repositori ini merupakan kumpulan praktek dari materi yang ada pada kelas menjadi front end web developer expert di Dicoding
- Host: GitHub
- URL: https://github.com/ardywsptr/materi-menjadi-front-end-web-developer-expert
- Owner: Ardywsptr
- Created: 2023-04-15T15:36:15.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2023-04-15T15:50:44.000Z (almost 2 years ago)
- Last Synced: 2024-11-14T09:51:51.083Z (3 months ago)
- Topics: accessibility, dicoding-academy, front-end-web-development, mobile-first-layout, web-performance
- Language: HTML
- Homepage: https://www.dicoding.com/academies/219
- Size: 25 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Menjadi Front End Web Developer Expert
## 🚀 Deskripsi Kelas
Menjadi Front-End Web Developer Expert
Disusun oleh: Dicoding Indonesia
Level: Mahir - Profesional
![]()
Kelas ini ditujukan untuk seorang Front-End Web Developer yang ingin mengembangkan website yang optimal, mudah digunakan, serta canggih ketika diakses oleh seluruh perangkat terutama smartphone. Di akhir kelas, siswa dapat membuat aplikasi front-end web yang responsif, memiliki aksesibilitas yang baik, mudah di-maintenance, memiliki sifat native, dapat diuji, dan memiliki performa yang baik.
### Materi yang dipelajari:
- **Pengenalan Kelas :** Menjelaskan tentang pentingnya membuat website yang optimal untuk diakses oleh berbagai perangkat, khususnya smartphone yang mendominasi pengguna internet. (20 menit)
- **Mobile First Approach :** Memahami pendekatan mobile-first, serta belajar membangun website yang responsif menggunakan CSS Grid System, Media Query, dan Off Screen Canvas melalui pendekatan Mobile First. (7 jam 30 menit)
- **Aksesibilitas :** Belajar aspek aksesibilitas web seperti focus, semantic HTML, tab order, label, alternative teks, serta penggunaan screen reader agar website yang dikembangkan dapat diakses oleh siapa pun. (13 jam 10 menit)
- **JavaScript Clean Code :** Belajar prinsip-prinsip penulisan kode JavaScript berdasarkan acuan buku Clean Code yang ditulis oleh senior software engineer Robert C. Martin. (6 jam)
- **Progressive Web Apps :** Belajar membuat website yang progressive sehingga website memiliki sifat native seperti installable, offline capability, dan lainnya. (30 jam 15 menit)
- **Automation Testing :** Belajar penerapan testing seperti Unit Test, Integration Test, dan End to End Test pada website yang dibuat, serta belajar menggunakan DevTools untuk debugging. (16 jam 25 menit)
- **Web Performance :** Belajar menggunakan web auditor untuk mengetahui sejauh mana performa website yang dibuat, dan mengoptimalkan performa website berdasarkan hasil yang diperoleh. (7 jam 55 menit)
- **Deployment dengan CI/CD :** Belajar menerapkan teknik Continuous Integration/Continuous Deployment untuk melakukan proses testing dan build secara otomatis sehingga aplikasi dapat diakses secara publik. (6 jam 20 menit)### Evaluasi pembelajaran:
- **Submission :** Proyek akhir berupa web app katalog restoran dengan experience dan fungsionalitas yang baik ketika diakses pada perangkat mobile
Total jam yang dibutuhkan untuk menyelesaikan kelas ini, mulai dari persiapan kelas sampai evaluasi belajar, adalah **100** jam.
> Jika ada pertanyaan atau issue, kunjungi [new issue](https://github.com/Ardywsptr/Materi-Menjadi-Front-End-Web-Developer-Expert/issues/new)
>
>Jika dokumentasi ini bermanfaat mari berteman dengan menekan tombol follow pada [profile](https://github.com/Ardywsptr) ini ☺☺☺
Big Thanks for [Dicoding](https://www.dicoding.com/)
![]()