Berikut adalah pohon dengan 3 level untuk memulai perjalanan Anda sebagai pengembang web.
Karena semua ini sangat subyektif, dan Anda dapat menentukan rencana Anda. Ada banyak perbedaan antara wilayah, negara dan sebagainya. Tapi yang ini memberi setidaknya beberapa tingkat tinjauan.
Apa yang kami harapkan dari setiap level?
Mari kita mendefinisikan harapan kita. Harapan Anda mungkin berbeda.
Level 1 - tag dasar baru, dapat mengedit konten pada situs HTML siap, dapat memformat teks dengan benar, dapat menyisipkan beberapa hal yang disematkan (youtube, google map), dapat menggunakan git untuk dirinya sendiri (master, 1 kontributor). Dia dapat membuat beberapa situs sederhana, dan mungkin terlihat bagus (di komputer pribadinya). Bukan unit mandiri, beberapa panduan diperlukan untuk berhasil.
Level 2 - unit mandiri plus-minus (atau standalone untuk proyek kecil-menengah). Dia dapat membuat tata letak yang bagus dari awal untuk proyek kecil-menengah, dan itu akan terlihat bagus di semua browser modern. Tahu cara bekerja dengan mesin templat, bisa menggunakannya (jika kode lain disediakan). Dapat merencanakan pekerjaannya dengan baik, mendokumentasikan apa yang telah dilakukan dan bagaimana menggunakannya dapat memperkirakan waktu. Memahami pentingnya gaya kode. Memahami mengapa sistem grid dan kerangka kerja CSS ada. Dapat mengumpulkan informasi yang diperlukan sendiri dari desainer atau dari maket. Dia dapat berinteraksi dengan tim kecil hingga menengah. Dia dapat membuat cabang dan menarik permintaan.
Level 3 - dapat merancang sistem blok untuk proyek besar dari awal. Ketahui cara menghindari duplikasi kode dan masalah kapan kode itu akan digunakan oleh pengembang lain. Ia dapat mendekomposisi masalah kompleks dan mendefinisikan tugas dengan baik. Dia dapat menerapkan setidaknya satu metodologi modern (BEM, misalnya). Dia dapat membuat situs tersebut dengan sangat cepat. Memahami beberapa mesin template modern. Dapat membuat skrip build untuk mengotomatiskan proses kombinasi CSS / HTML / js. Dapat melakukan review kode dengan baik dan mengajar frontender lainnya.
Penjelasan blok yang tepat
Sebagian besar blok mewakili beberapa jenis skillset. Itu bisa diganti dengan yang serupa. Anda dapat menggunakan IDE, CMS atau apa pun. Saya hanya menunjukkan beberapa yang populer, dengan yang Anda dapat mulai bekerja "sekarang" (ada banyak tawaran pekerjaan terkait). Mungkin ada banyak tawaran pekerjaan untuk keterampilan lain di daerah Anda. Saya telah mencoba membuat skema universal yang akan bekerja untuk sebagian besar wilayah.
Level 1
HTML - pengetahuan tentang tag dan atribut dasar. Memahami cara menulis HTML (apa itu "tag", "properti", dll)
Tipografi - pemformatan teks yang tepat. Teks - dasar (hampir) setiap proyek. Tambahkan spasi tanpa putus di mana diperlukan, tebal, kursif, abbr, dll. Gunakan semacam tipografi atau layanan serupa, pahami mengapa +1 234 567 lebih baik daripada +1 234 567.
Font (dapat ditunda) - lebih rumit daripada tampilannya; Saya merekomendasikan bagi pemula untuk menggunakan font sistem. Kemampuan untuk memuat font, untuk kembali ke yang lain, mengoptimalkan tampilan / kecepatan, meminimalkan waktu render untuk font khusus.
Semantik - kemampuan untuk menemukan tag yang tepat untuk penggunaan yang tepat. Memahami mengapa ada begitu banyak tag.
Media - jenis media dapat ditampilkan pada halaman
Iframe - impor widget pihak ke-3 (video, audio, peta, dll)
Audio, Video (dapat ditunda) - dapat diselesaikan dengan iframe pada awalnya. Memahami jenis media apa yang didukung oleh browser, tahu cara mendesain pemutar dan sebagainya.
Gambar - format grafik, cara kerjanya di browser. Procs dan kontra untuk format yang berbeda
Raster - jpg, png, gif. Memahami perbedaan dan kemampuan untuk memilih yang tepat (mungkin mengoptimalkannya).
SVG (dapat ditunda) - Procs / kontra / batasan, cara menggunakan.
Tabel (opsional, bagus untuk surat email) - tetapi tabel itu sendiri harus dipelajari di bawah "HTML" :-)
CSS 1 - font, warna, perataan, ukuran
CSS 2.1 - blok perilaku, posisi, desain
Selektor - selektor sederhana pada tag, kelas, elemen bersarang. Penyeleksi semu sederhana, seperti: hover.
Penamaan - cara memberi nama kelas untuk menghindari rasa sakit di masa depan
Blok - cara membagi mockup ke blok terpisah, bagaimana menerapkan blok-blok ini dalam HTML dan desain dengan CSS
Browser (dapat ditunda) - browser mana yang ada, apa bedanya.
Alat Dev (dapat ditunda) - Gunakan alat peramban untuk mengidentifikasi mengapa ada sesuatu yang salah, cara "debug" CSS
Editor kode - editor apa yang ada, mengapa ada. Notepad ++ dan SublimeText di sini hanya sebagai contoh yang terkenal. Tahu cara mengatur pengaturan dasar seperti tab, baris baru, rangkaian karakter, dan sebagainya.
VCS (Sistem Kontrol Versi) - Saya percaya ini adalah suatu keharusan, setidaknya untuk diri Anda sendiri. Mengapa mereka ada, dan apa jenisnya.
Git / Bitbucket - dapat menggunakan setidaknya salah satu platform populer untuk git
Operasi checkout / komit / dorong / tarik - cukup untuk penggunaan pribadi
Stash - untuk penghematan sementara tidak diperlukan saat ini
10 karya - minimal 10 karya dengan desain yang berbeda. Mungkin itu hanya teks yang diformat atau apa pun. Tapi mereka harus menggunakan pengetahuan Anda saat ini.
Level 2
CSS 3 - gradien, bayangan, pembulatan, filter, transformasi, dll.
Penyeleksi tingkat lanjut - penyeleksi gabungan dengan penggunaan seperti "+", nth-child, shadow-dom, sebelum / sesudah dan seterusnya
Flexbox - mengerti model, bisa menggunakannya
Animasi (opsional) - transisi, animasi. Proc / kontra / batasan.
Kisi - mengapa ada, bagaimana menggunakannya, solusi siap apa yang ada. Sebagai contoh, Anda dapat melihat "Kotak Flexbox" atau yang lainnya
Kerangka kerja - mengapa ada, bagaimana cara menggunakan. Saya sangat merekomendasikan belajar yang baik setidaknya satu dari mereka. Sangat berguna untuk pembuatan prototipe. Secara dramatis meningkatkan kualitas proyek tanpa desainer (proyek internal, misalnya).
Preprosesor CSS (dapat ditunda) - kode yang lebih baik diatur dan kode bersih, mixin, variabel, dll. Coba yang berbeda seperti SASS, KURANG, Stylus
Kueri media (dapat ditunda) - tunjukkan gaya yang tepat tergantung pada kondisi (perangkat, ukuran layar, versi cetak, dll)
Surat email (opsional) - keterampilan yang berguna; Ada lusinan sistem email dengan beberapa perbedaan, dan tujuan utamanya adalah membuat surat Anda terlihat bagus di salah satu dari mereka, di perangkat apa pun. Ketahui cara melewati filter dan tidak pergi ke spam.
Polyfills - pahami cara menggunakan semantik modern dengan kompatibilitas kembali. Tahu proc / cons.
Cross-platform - mengerti panas untuk membuat situs tidak hanya untuk Windows, Mac, dan Linux, tetapi untuk SmartTV, PS, kindle dan sebagainya.
Seluler (dapat ditunda) - memahami batasan platform seluler. Gunakan ruang dengan bijak.
Optimalisasi (dapat ditunda) - pahami "harga" berbagai teknik. Memahami fase browser untuk menampilkan situs ke pengguna
Memuat (dapat ditunda) - Optimalisasi, terkait dengan ukuran, cache, menggabungkan sumber daya, dll.
Paint (dapat ditunda) - Optimalisasi render setelah (sedang berlangsung) memuat
SEO (dapat ditunda) - Setidaknya pemahaman dasar tentang mesin pencari. Kemampuan untuk membantu mereka memahami situs Anda, apa yang penting, dan sebagainya
Mesin templat - cara menggunakan kembali kode, cara mengelompokkan elemen, cara merakit halaman. Sangat penting untuk dipahami: rendering server dan klien. Ada juga templat bahasa murni, seperti bagian kode PHP langsung. Bagian-bagian sebelum mesin templat berada di luar ruang lingkup.
PHP (dapat ditunda) - memahami sintaks dasar dan dapat menambahkan perubahan kecil, terkait dengan desain halaman
CMS (dapat ditunda) - tahu, apa jenis CMS yang ada, mengapa mereka dibuat. Pelajari cara menulis templat ke setidaknya satu dari mereka (disarankan menggunakan Wordpress)
Javascript (dapat ditunda) - sintaks dasar, pemahaman penangan kejadian sederhana dan manipulasi DOM sederhana
Jquery (dapat ditunda) - pelajari cara menghemat banyak waktu untuk proyek kecil / menengah dengan menggunakan plugin siap pakai untuk tugas-tugas umum
NodeJS (dapat ditunda) - pelajari cara menjalankan server paling sederhana, sajikan file statis, render di sisi server. Mungkin menggunakan express atau lebih.
Membangun sistem (dapat ditunda) - cara merakit proyek dari file CSS / HTML. Sangat merekomendasikan untuk setidaknya melihat beberapa sistem yang berbeda (mendengus - gulp).
Gaya kode - mengapa orang menyetujui beberapa gaya, mempelajari setidaknya satu gaya dan mulai menggunakannya (lihat di Airbnb, atau untuk kerangka kerja modern seperti Vue)
KERING / KISS / SOLID (dapat ditunda) - teori-teori penting tentang pembangunan, secara dramatis mempengaruhi dukungan proyek di masa depan.
OOCSS (opsional) - apa itu CSS berorientasi objek? Mengapa dan bagaimana cara menggunakannya? Dalam beberapa bentuk digunakan di sebagian besar proyek (tetapi tanpa pemahaman bahwa mereka menggunakannya :-D). Idealnya, pelajari cara mendesainnya. Ini bisa sangat berguna untuk proyek-proyek besar.
Dokumentasi (dapat ditunda) - pahami bagaimana dan apa yang harus didokumentasikan. Mulai mendokumentasikan. Sintaks penurunan harga sangat dianjurkan.
Perencanaan - pelajari cara memperkirakan waktu hanya dengan melihat gambar, menentukan urutan pekerjaan
Dekomposisi (dapat ditunda) - membagi tugas besar menjadi tugas kecil. Itu lebih sulit daripada yang terlihat.
Menetapkan sasaran (dapat ditunda) - dapat menulis tugas dengan cara itu, sehingga pengembang lain (termasuk yang lebih rendah dari Anda), akan dapat memahaminya dengan jelas.
IDE (dapat ditunda) - mengapa IDE ada, bagaimana cara menggunakannya. Mempelajari IDE sama dengan mempelajari beberapa bahasa pemrograman (jika tidak, Anda tidak akan menggunakan kekuatannya). Saya, secara pribadi, hanya menggunakan editor teks dan menjalankan IDE hanya untuk proyek yang sangat besar.
Branching - mengontrol cabang di git
Gabungkan - pelajari cara menggabungkan cabang yang menggabungkan konflik
Ambil / Rebase (opsional) - apa ini? Pelajari bagaimana dan kapan menggunakannya
Editor grafis - pahami jenisnya yang berbeda, apa perbedaan antara vektor dan raster. Mampu membaca maket dari desainer di dalamnya. Mampu memilih font yang tepat, ukuran, warna, dan hal-hal lain, untuk membuat situs tampak persis seperti yang diminta oleh desainer.
Aksesibilitas web - penting, jika Anda orang baik. Jadikan situs Anda dapat diakses oleh orang-orang cacat.
Perbedaan regional (opsional) - kiri-ke-kanan, kanan-ke-kiri, dan hal-hal gila lainnya dari pasar Arab (atau lainnya). Ada banyak hal menyenangkan.
50 karya - pada akhir "Level 2" Anda harus memiliki sekitar 50 proyek yang berbeda, yang menunjukkan keahlian Anda. (Jika ini adalah proyek dengan 20 tata letak yang sangat berbeda, hitung sebagai 20).
Level 3
Pada skema bagian ini terlihat seperti yang terkecil, tetapi, pada kenyataannya, ini adalah yang terbesar, karena pada saat ini Anda harus tahu semua hal "dapat ditunda".
Adaptif / responsif - tingkat tertinggi; menggabungkan semua pengetahuan Anda! Proyek harus terlihat luar biasa di mana saja dan pada apa saja.
Degradasi Anggun / Pesona progresif - mengapa bagus, bagaimana menggunakannya. Gunakan
Gitflow (atau model percabangan lain) - dapat memanfaatkan beberapa praktik yang baik, dapat menjelaskan kepada pengembang lain cara menggunakan git, menggabungkan penggabungan cabang, cara melakukan tinjauan kode (dari HTML / CSS)
BEM (opsional) - Pelajari beberapa metodologi yang memberikan kemampuan untuk membuat proyek besar tanpa batas dengan cara itu, jadi dengan sinkronisasi minimum, tim yang berbeda akan dapat menggunakan blok satu sama lain. Ada banyak metodologi yang memberikan hasil yang sama / lebih baik. Pada saat ini, Anda akan mendengar tentang beberapa dari mereka dan akan dapat memilih dengan bijak.
100 karya - terdengar seperti tujuan yang bagus, bagi saya. Mereka harus menunjukkan keterampilan berbeda yang Anda miliki. Tetapi Anda dapat memiliki hanya satu karya (yang terdiri dari berbagai bagian) dalam portofolio, yang akan menunjukkan bahwa Anda tidak takut apa pun.
Terima kasih sudah membaca dan semoga harimu menyenangkan.