Belajar Frontend Development
Belajar Frontend Development — Pembangunan frontend daripada HTML hingga React, dengan pratonton langsung
Belajar Frontend Development ialah aplikasi iOS dan Android percuma untuk pemula, pereka bentuk dan mereka yang ingin bertukar kerjaya menjadi pembangun web. HTML, CSS dan JavaScript dipaparkan bersebelahan dalam editor langsung, dan halaman di bawahnya dikemas kini semasa anda menaip. 41 kursus dan 163 pelajaran ringkas membawa anda daripada tag pertama hingga susun atur responsif, TypeScript, React dan Vue, dengan 20 projek berpandu, misi nyahpepijat dan mentor AI untuk pepijat yang tidak dapat anda temui.
- Harga
- Percuma, naik taraf Pro
- Platform
- iOS dan Android
- Bahasa
- 22
- Penarafan umur
- 4+
- Memerlukan
- iOS 15.1 atau lebih baharu
Ubah satu baris dan lihat halaman berubah.
Editor memaparkan panel HTML, CSS dan JavaScript bersebelahan dengan pratonton langsung di bawahnya, supaya markup, penggayaan dan tingkah laku dipelajari sebagai satu halaman, bukannya tiga subjek berasingan.
Apakah aplikasi ini
Belajar Frontend Development ialah aplikasi iOS dan Android percuma yang mengajar pembangunan frontend, iaitu bahagian laman web yang dilihat dan disentuh orang, menggunakan editor HTML, CSS dan JavaScript langsung pada telefon. Aplikasi ini menawarkan 41 kursus dan 163 pelajaran yang disusun daripada tahap pemula hingga senior, merangkumi asas web, susun atur responsif, JavaScript dan DOM, TypeScript, React, Vue, testing, kebolehcapaian dan prestasi, serta projek berpandu, misi nyahpepijat, soalan temu duga dan mentor AI.
Dalam aplikasi
Rupa aplikasi ini
Kursus
Kandungan kursus frontend
41 kursus dan 163 pelajaran, diambil daripada senarai kursus dalam aplikasi: daripada tag HTML pertama hingga seni bina frontend dan kejuruteraan peringkat senior.
Web dan Tiga Asas
Selamat Datang ke Pembangunan Frontend, Cara Web Berfungsi, Asas HTML, Asas CSS dan Asas JavaScript.
Reka Letak dan Reka Bentuk Responsif
Asas Reka Bentuk Responsif, Borang HTML dan Penandaan Semantik, Penguasaan Reka Letak CSS, serta Pemboleh Ubah, Peralihan dan Animasi CSS.
JavaScript dalam Pelayar
DOM dan API Pelayar, Tatasusunan, Objek dan ES6+, Pengaturcaraan Asinkron, serta Modul JavaScript dan Alat Binaan.
Aliran Kerja dan Alat
Alat Pembangun dan Aliran Kerja, Git dan Aliran Kerja Kolaborasi, serta Alat Pembangunan Frontend Moden.
TypeScript
Pengenalan TypeScript, Pendalaman Jenis dan Antara Muka, serta TypeScript Lanjutan untuk Frontend.
React dan Vue
Asas React, useEffect dan Pengambilan Data, Hook dan Corak Lanjutan, diikuti Asas Vue 3, Composition API dan Corak Lanjutan Vue.
Data, Pemaparan dan Masa Nyata
Pengurusan Keadaan, Integrasi API dan REST, Pemaparan Sebelah Pelayan dengan Next.js dan Nuxt 3, Progressive Web Apps, serta WebSockets dan Frontend Masa Nyata.
Kualiti dan Seni Bina
Kebolehcapaian, Pengujian Frontend, Pengoptimuman Prestasi Web, Keselamatan Frontend, Seni Bina CSS, Sistem Reka Bentuk, CI/CD Frontend dan Kejuruteraan Frontend Peringkat Senior.
Cara ia berfungsi
Cara anda belajar dengannya
Urutan aplikasi ini mengikut urutan kemahiran tersebut: bina halaman dahulu, kemudian jadikan ia berfungsi, selepas itu pelajari alat yang membolehkannya berkembang.
Mulakan dengan kursus pertama yang percuma
Welcome to Frontend Development membuka laluan pembelajaran, dan editor langsung tersedia secara percuma sejak awal. Setiap pelajaran mengandungi penerangan selama beberapa minit, diikuti sesuatu untuk diubah dan dijalankan.
Edit panel dan baca pratonton
Ubah HTML, CSS atau JavaScript, dan pratonton di bawah akan mengikutinya. Projek baharu boleh dimulakan daripada templat HTML, React, Vue, Angular, Node atau TypeScript.
Bina projek dan baiki pepijat sebenar
Dua puluh projek berpandu membina halaman resipi, borang hubungan, grid kad, navbar dan jadual data langkah demi langkah, manakala 15 misi nyahpepijat memberikan anda halaman rosak untuk dibaiki.
Kandungan
Kandungan aplikasi
41
Kursus, daripada pemula hingga senior
163 pelajaran yang disusun daripada A1 hingga C2, daripada cara web berfungsi dan asas HTML hingga TypeScript, React, Vue 3, pengurusan keadaan, pemaparan sisi pelayan dengan Next.js dan Nuxt 3, serta aplikasi web progresif.
Langsung
Editor dengan pratonton serta-merta
Panel HTML, CSS dan JavaScript dengan pratonton di bawahnya, supaya perubahan dipaparkan serta-merta. Mulakan projek baharu daripada beberapa templat framework.
15
Misi nyahpepijat
Misi yang dibina berdasarkan masalah frontend sebenar: susun atur yang rosak pada 375 piksel, imej yang memperlahankan halaman, borang yang tidak boleh dicapai dengan papan kekunci, kebocoran memori dalam komponen dan ujian yang lulus secara setempat tetapi gagal dalam CI.
20
Projek berpandu
Projek kecil yang diterangkan satu langkah pada satu masa, seperti halaman resipi, borang hubungan, grid kad, navbar dan jadual data.
AI
Mentor AI dan playground
Tanya tentang ralat, pelajaran atau kod anda sendiri, atau huraikan halaman dalam playground AI dan lihat kod ditulis. Pengguna percuma mendapat tiga soalan AI sehari.
50
Soalan temu duga dengan jawapan
Lima puluh soalan temu duga pembangun frontend dan web dengan jawapan, serta helaian rujukan pantas yang mengandungi 83 entri sintaks dan corak, dan pustaka contoh ringkas yang boleh anda buka dan edit.
Latar belakang
Apakah yang sebenarnya dipelajari oleh pembangun frontend, dan dalam urutan apa?
Pembangun frontend membina perkara yang berjalan dalam pelayar: struktur halaman, rupanya pada setiap saiz skrin dan tindak balasnya apabila seseorang mengklik, menaip atau menatal. Urutan yang munasabah ialah struktur dahulu (HTML), kemudian persembahan (CSS), selepas itu tingkah laku (JavaScript), dan hanya kemudian alat untuk menyusun projek yang lebih besar: TypeScript, framework seperti React atau Vue, testing dan langkah binaan. Melangkau terus ke framework sebelum menguasai tiga asas ini ialah sebab paling biasa pemula tersekat, kerana framework kebanyakannya menyembunyikan JavaScript biasa dan DOM di sebalik sintaksnya sendiri.
HTML semantikmakna sebelum rupa
Memilih tajuk, senarai, label borang atau butang berdasarkan kandungannya, bukan rupanya, memberikan pembaca skrin, enjin carian dan papan kekunci sesuatu untuk digunakan. Ini juga merupakan peningkatan kebolehcapaian paling mudah dan murah pada mana-mana halaman.
Susun atur responsifsatu halaman, setiap skrin
Flexbox, grid dan media queries membolehkan satu susun atur menyusun semula dirinya daripada telefon yang sempit hingga monitor yang lebar. Menguji pada lebar kecil seperti 375 piksel dari awal dapat mengesan pepijat susun atur yang sukar dibaiki kemudian.
DOMhalaman sebagai objek langsung
Pelayar menukar HTML menjadi pepohon objek yang boleh dibaca dan diubah oleh JavaScript. Setiap framework pada asasnya ialah cara mudah untuk mengemas kini pepohon itu, jadi memahaminya memudahkan anda memahami React dan Vue.
Core Web Vitals dan prestasikelajuan yang dapat dirasai
Halaman yang memuatkan imej besar yang tidak dioptimumkan secara lewat, atau berubah kedudukan semasa dimuatkan, terasa perlahan walaupun kodnya betul. Prestasi ialah kemahiran yang hanya benar-benar terserlah apabila halaman dan imej sebenar digunakan.
Sesuai
Untuk siapa — dan bukan untuk siapa
Sesuai untuk anda jika anda
- Ingin menjadi pembangun web dan bermula dari sifar
- Seorang pereka bentuk yang ingin membina halaman yang anda reka
- Sudah mengetahui sedikit HTML dan CSS serta ingin mempelajari JavaScript, TypeScript, React atau Vue
- Sedang bersedia untuk temu duga frontend pertama dan mahukan soalan berserta jawapan
- Lebih suka melihat halaman berubah semasa menaip berbanding membaca penerangan yang panjang
Bukan alat yang sesuai jika anda
- Perlu membina dan menerbitkan laman dengan banyak fail, yang masih memerlukan komputer riba dan editor lengkap
- Mengharapkan semuanya percuma: kursus pertama, projek pertama, dua misi penyahpepijatan dan editor adalah percuma, manakala Pro membuka selebihnya
- Mahukan kursus backend atau pangkalan data kerana laluan ini membincangkan perkara yang berjalan dalam pelayar
- Sudah bekerja sebagai jurutera frontend peringkat senior dan mahukan rujukan, bukan pelajaran
Soalan
Soalan lazim
Apakah pembangunan frontend?
Pembangunan frontend ialah proses membina bahagian laman web atau aplikasi web yang berjalan dalam pelayar: strukturnya dengan HTML, penampilannya dengan CSS dan kelakuannya dengan JavaScript, termasuk rangka kerja serta alat yang dibina berasaskannya. Belajar Frontend Development mengajar susunan teknologi itu mengikut urutan tersebut, dengan pratonton langsung supaya setiap perubahan dapat dilihat serta-merta.
Bolehkah saya mempelajari pembangunan frontend melalui telefon?
Konsep dan halaman pertama boleh dipelajari dengan baik melalui telefon kerana HTML, CSS dan JavaScript cukup ringkas untuk disunting dalam sesi pendek, manakala pratonton menunjukkan hasilnya serta-merta. Aplikasi ini memaparkan tiga anak tetingkap dan pratonton langsung pada skrin. Komputer riba menjadi lebih selesa apabila anda mengurus projek yang lebih besar dengan banyak fail, tetapi tidak diperlukan untuk bermula.
Untuk siapa aplikasi ini, dan dari mana patut pemula sepenuhnya bermula?
Ia sesuai untuk pemula sepenuhnya, pereka bentuk yang ingin membina hasil reka bentuk mereka, pembangun yang mengetahui sedikit HTML dan CSS, serta mereka yang bertukar kerjaya dan bersedia untuk pekerjaan frontend pertama. Mulakan dengan cara web berfungsi dan HTML asas, kemudian CSS, diikuti JavaScript. Belajar Frontend Development mengikut urutan ini, bermula dengan kursus percuma Selamat Datang ke Pembangunan Frontend.
Adakah aplikasi ini mengajar React dan Vue?
Ya. Selepas HTML, CSS, JavaScript dan TypeScript, aplikasi ini menyediakan kursus React tentang asas, useEffect dan pengambilan data, hook serta corak lanjutan, serta kursus Vue 3 tentang asas, Composition API dan corak lanjutan. Aplikasi ini turut merangkumi pengurusan keadaan dan pemaparan sebelah pelayan dengan Next.js dan Nuxt 3.
Adakah saya perlu mempelajari TypeScript?
Ia tidak diperlukan untuk membina halaman pertama, tetapi kebanyakan pangkalan kod React dan Vue profesional menggunakannya, jadi ia wajar dipelajari selepas asas JavaScript. Aplikasi ini memperkenalkan TypeScript melalui kursus jenis pertama, kursus lebih mendalam tentang jenis dan antara muka, serta kursus lanjutan untuk corak frontend.
Bagaimanakah misi penyahpepijatan berfungsi?
Setiap satu daripada 15 misi penyahpepijatan memberikan anda halaman atau komponen yang rosak dan mencerminkan masalah frontend sebenar, seperti reka letak yang rosak pada 375 piksel, borang yang tidak boleh digunakan dengan papan kekunci, kebocoran memori dalam komponen atau ujian yang hanya gagal dalam CI, dan anda perlu membaikinya. Dua misi adalah percuma.
Bolehkah aplikasi ini membantu saya membuat persediaan untuk temu duga pembangun frontend?
Aplikasi ini boleh membantu dari segi pengetahuan. Belajar Frontend Development mempunyai 50 soalan temu duga berserta jawapan, helaian rujukan pantas dengan 83 entri tentang sintaks dan corak, serta kursus tentang pengujian, prestasi, kebolehcapaian dan seni bina—iaitu topik yang biasanya ditanya dalam temu duga selepas asas. Aplikasi ini tidak menggantikan pembinaan portfolio projek anda sendiri.
Berapa lama masa yang diperlukan untuk mempelajari pembangunan frontend?
Pemula yang berlatih sedikit setiap hari biasanya boleh membina halaman responsif ringkas dalam masa beberapa minggu, manakala JavaScript yang mantap dan kemahiran menggunakan rangka kerja memerlukan beberapa bulan. Aplikasi ini membahagikan laluan kepada pelajaran yang mengambil masa beberapa minit, dengan rentetan dan peringatan, supaya kemajuan dicapai melalui sesi pendek yang konsisten dan bukannya satu sesi panjang.
Adakah Belajar Frontend Development percuma?
Aplikasi ini percuma untuk dimuat turun di App Store dan Google Play. Kursus pertama, projek berpandu pertama, dua misi penyahpepijatan dan editor kod adalah percuma, bersama tiga soalan mentor AI sehari, manakala versi percuma memaparkan iklan. Pro membuka semua kursus, projek dan misi, peperiksaan sijil serta AI tanpa had, dan membuang iklan.
Platform dan bahasa apakah yang disokongnya, dan adakah aplikasi di App Store sama?
Belajar Frontend Development tersedia pada iOS melalui App Store dan pada Android melalui Google Play, dalam 22 bahasa, dengan penarafan umur 4+. Penyenaraian App Store bertajuk Learn Frontend Development, manakala penyenaraian Google Play bertajuk Belajar Frontend Development, tetapi kedua-duanya ialah aplikasi yang sama. Lulus peperiksaan akhir memberikan sijil tamat kursus.
Mulakan
Bina halaman web pertama anda hari ini
Percuma untuk bermula di iOS dan Android, dalam 22 bahasa.
Lagi daripada CoddyKit
Tersedia di iOS.