web developer roadmap

Peta jalan pengembang web

Web Developer Roadmap adalah jalur pembelajaran untuk memahami pengembangan web, termasuk Frontend, Backend dan Cloud (AWS).

Bagaimana cara mempelajari pengembangan web?

Pengembangan web dapat dibagi menjadi empat bagian yang berbeda,

1. Database
2. Backend
3. Frontend
4. Cloud (server)

Peta jalan ini terdiri dari teknologi/kerangka kerja yang banyak digunakan untuk Frontend and Backend. Ini juga termasuk ikhtisar tentang cloud (AWS) dan beberapa informasi tentang server.

Daftar isi

• Sprint 1 - Perintah Linux Dasar, Kontrol Versi, Teknologi Web dan Konvensi Pengkodean
• Sprint 2 - Docker, Database, dan PHP
• Sprint 3 - Golang
• Sprint 4 - Node.js
• Sprint 5 - Vue.js
• Sprint 6 - Konsep yang Berguna

Sprint 1 - Perintah Linux Dasar, Kontrol Versi, Teknologi Web dan Konvensi Pengkodean

Praktis 1.1 - Perintah Dasar dan Kontrol Versi

• Tulis perintah untuk operasi berikut di terminal

  • Sebutkan semua file dengan detail di direktori
  • Berikan hanya izin baca untuk file apa pun
  • Berikan semua izin baca dan tulis ke file apa pun
  • Dapatkan alamat IP PC sendiri
  • Amati penggunaan ruang disk
  • Lihat Sejarah Perintah yang Dieksekusi sebelumnya
  • Perintah Linux Untuk Menginstal/Menghapus Instalan PHP
  • Perintah Linux Untuk Memulai/Menghentikan Layanan MySQL
  • Tulis dan simpan file apa pun dari terminal

• Lakukan operasi berikut di Gitlab

  • Buat repositori ke gitlab
  • Periksa status git repositori
  • Melakukan file baru/diperbarui ke dalam repositori git
  • Dorong dalam repositori git
  • Tarik perubahan baru dari repositori
  • Checkout Cabang Baru
  • Gabungkan cabang menjadi yang lain
  • Rebase dan Squash
  • Buat Permintaan Gabungan
  • Tulis perintah untuk mengkloning repo ini

Referensi

• Perintah Linux Dasar

• Apa itu kontrol versi?

• Cara menggunakan git

  • Kontrol Versi dengan Git
  • Git: Panduan Pemula untuk Memahami Konsep Kontrol Versi Inti
  • Perintah git

Praktis 1.2 - Teknologi web dasar dengan konvensi pengkodean

• Desain UI dengan standar pengkodean
  • Desain UI statis yang diberikan di tautan
  • Desain UI responsif yang diberikan di tautan

Referensi

• Html5

  • Kursus Bootcamp Pengembangan Web di Udemy - Bagian 2 dan 3
  • HTML dan HTML5 Dasar dari Kamp Kode Gratis

• CSS3

  • Kursus Bootcamp Pengembangan Web di Udemy - Bagian 4 dan 5
  • Bootstrap dari Web Development Bootcamp Course di Udemy - Bagian 6 dan 8
  • Apa itu Flexbox?
  • Bootstrap dari Frontend Libraries di kamp kode gratis
  • Selesaikan Kursus Sertifikasi Desain Web Responsif dari Kamp Kode Gratis

• Pemformatan kode dan praktik terbaik

  • 25 Pintasan Vs Code yang paling banyak digunakan
  • Pemformatan kode dalam kode vs
  • Praktik Terbaik Pengembangan Web

Praktis 1.3

• Konverter unit
  • Buat konverter unit yang harus mengambil input dari pengguna dan mengeluarkan nilai di unit yang diajukan (unit konversi dapat berupa sentimeter, meter, dan kilometer)

Referensi

• Javascript & jQuery

  • JavaScript dasar dari kursus bootcamp pengembangan web di Udemy - Bagian 9 dan 10
  • Javascript dasar, ES6, ekspresi reguler, dan debugging dari kamp kode gratis
  • Kursus Bootcamp Pengembangan Web di Udemy - Bagian 11 dan 13
  • JSON, API, dan AJAX dari Kamp Kode Gratis
  • Selesaikan algoritma JavaScript dan struktur data dari kamp kode gratis
  • Kursus Bootcamp Pengembangan Web di Udemy - Bagian 14 hingga 16
  • Selesaikan Proyek Perpustakaan Frontend dari Kamp Kode Gratis
  • Perbedaan antara == dan ===
  • Dasar -dasar JQuery

• Konvensi pengkodean

  • Standar pengkodean-1
  • Standar pengkodean-2

Sprint 2 - Docker, Database, dan PHP

Praktis 2.1

• Instal MySQL menggunakan Docker
• Instal MongoDB menggunakan Docker

Referensi

• Apa itu Docker
• Memulai dengan Docker
• Instal MySQL menggunakan Docker
• Instal MongoDB menggunakan Docker

Praktis 2.2

• Lakukan pertanyaan berikut di MySQL

  • Buat tabel bernama students dengan ID Fields, First_Name, Last_Name, Standard, Persentase, Interest, dll ... dan masukkan data ke dalamnya
  • Buat tabel student_attendances dengan bidang ID, create_at, adanya/tidak ada bidang dan masukkan data ke dalamnya
  • Buat tabel bernama teachers dengan ID bidang, first_name, last_name, subjek, minat dll ... dan masukkan data ke dalamnya
  • Buat Table teachers_attendances dengan bidang ID, create_at, adanya/tidak ada bidang dan masukkan data ke dalamnya
  • Siapkan pertanyaan untuk menemukan kehadiran/ketidakhadiran siswa pada hari tertentu
  • Temukan total ketidakhadiran/kehadiran setiap siswa
  • Temukan siswa yang absen dengan persentase lebih rendah dari 70.
  • Temukan siswa yang memiliki kehadiran Higest
  • Dapatkan first_name siswa dan guru, last_name, full_name, minat, standar, subjek, dan absen total.

• Lakukan kueri berikut di MongoDB (dapat menggunakan MongoDBlayground untuk kueri peform)

  • Buat koleksi bernama students dengan ID Fields, First_Name, Last_Name, Standard, Persentase, Interest, dll ... dan masukkan data ke dalamnya
  • Bentuk permintaan untuk menemukan siswa dengan persentase lebih rendah dari 70 dan minat dalam olahraga.
  • Hitung total siswa dengan persentase di atas 70

Referensi

• Kursus Bootcamp Pengembangan Web Udemy - Bagian 24 dan 25
• MySQL SubQuery and Union Query

Praktis 2.3

• Buat aplikasi blog dengan persyaratan berikut menggunakan PHP
  • Itu harus memiliki dua sisi
    • 1. Admin
    • 2. Pengguna
  • Menerapkan fungsi register dan login untuk pengguna dan admin
  • Admin dapat menambahkan posting (bidang posting - judul, deskripsi, created_date, penulis, kategori, gambar)
  • Admin dapat memutuskan pengguna mana yang dapat melihat posting
  • Tulisan yang ditambahkan akan terlihat di sisi pengguna (terbaru pertama)

Referensi

• PHP: Referensi Bahasa
• PHP: Pendahuluan
• Standar pengkodean

Konsep Dasar

• Instalasi Wamp/MAMP/XAMPP
• Bagaimana sebenarnya kerjanya?
• Sintaks dasar
• Variabel, Konstanta, Operator & Struktur Kontrol
• Ketentuan, loop, sakelar kasing
• Array, string dan berbagai fungsi string
• Fungsi
• Termasuk & Diperlukan
• Kelas & Objek & Konstruktor
• Ruang nama
• Ekstensi
• Pengecualian
• JSON Encode & Decode
• Sesi
• Cookie
• Manipulasi file
• Array yang diindeks vs array asosiatif
• Objek vs stdObject
• Timeout of PHP Script

Variabel yang telah ditentukan

• http://php.net/manual/en/reserved.variables.php
• $ Global
• $ _Server
• $ _Get
• $ _Post
• $ _Files
• $ _REQUEST
• $ _Sesi
• $ _Cookie

Opsi lanjutan

• Antarmuka
• Sifat-sifat
• Crons
• Komposer
• php.ini tweak

Kata kunci

• Pribadi
• Publik
• Statis

Sprint 3 - Golang

Praktis 3.1

• Menerapkan aplikasi musik dengan persyaratan yang diberikan

Konsep Dasar

• Mengapa pergi?

• Jalankan Program Hello World di Go

• GO Modul

• Kerangka kerja gin

• Konstanta, jenis variabel

• Fungsi, Multi Return Functions, init ()

• Paket dan impor

• Pernyataan dan loop bersyarat

• Array dan irisan

• Pointer, struct, dan metode

• Penanganan kesalahan

• gofmt

• Praktik terbaik

• Yang lain

  • Jwt
  • Json
  • API istirahat

Konsep Advance

• Peta di Go
• Concurrency dan Goroutine
• menunda
• Penanganan kesalahan
• Panik dan pulih
• Cerminan
• Ketik konversi
• Manipulasi file
• Logging
• Otentikasi dengan JWT (Token Web JSON)

Paket

• Gin
• Paket mysql
• net/http
• Kompresor File
• Logging
• Mongodb
• ioutil
• os
• string
• parse file statis ke biner
• penangan nilai nol
• Jwt
• socket.io
• penjaga

Sprint 4 - Node.js

Praktis 4.1

• Menerapkan aplikasi obrolan waktu nyata satu-satu

Praktis 4.2

• Menerapkan aplikasi eCommerce dengan persyaratan yang diberikan

Referensi

• benang

• NPM

• Benang vs NPM

• node

• Mengapa Node.js?

• Konsep Dasar:

  • CommonJS dan Esmodule
  • Menghibur
  • Cakupan
  • Kata kunci 'ini' Bagian 1
  • Kata kunci 'ini' Bagian 2
  • Memahami paket.json
  • Impor/Ekspor Perlu
  • Panggilan balik
  • async-aak
  • async.waterfall ()
  • Ref
  • Loop acara
  • Node mailer untuk mengirim email
  • Praktik terbaik

• Express.js

  • Instalasi
  • Ekspres Generator
  • Rute
  • Host file statis
  • Mesin Template (EJS)
  • Parser Tubuh

Sprint 5 - Vue.js

Praktis 5.1

• Menerapkan frontend aplikasi eCommerce menggunakan vue.js dengan persyaratan yang diberikan

Referensi

• Mulailah dengan vue.js

• Tailwind CSS untuk pemula

• Tutorial Tailwind CSS

• Pinia

• Konsep

  • Apa itu vue.js?
  • Memulai
  • Instalasi
  • Contoh aplikasi dan komponen
  • Sintaks template
  • Properti dan Metode Data
  • Properti dan pengamat yang dihitung
  • Binding kelas dan gaya
  • Rendering bersyarat, ikatan gaya bersyarat
  • Daftar rendering
  • Penanganan acara
  • Bentuk binding input
  • Dasar -dasar Komponen
  • Alat peraga
  • Pendaftaran Komponen
  • Slot
  • Template Refs
  • Manajemen negara

Sprint 6 - Konsep yang Berguna

Konsep

• Protokol HTTP
• Perilaku sinkron asinkron
• Caching (Pemahaman tentang Redis)
• Pengujian: Ikhtisar Pengujian Unit dan Fitur
• Docker secara detail
• Server Nginx vs Apache
• Login Server dengan Kata Sandi/Kunci SSH
• Tabel IP
• Php-fpm dan httpd
• Ssh, ssl, sertifikat dan kunci

Awan

• Apa itu AWS?
• S3
• EC2
• Rds
• Elasticache
• Rute 53
• Ses
• CloudWatch
• VPC
• AWS LAMDA
• AWS API Gateway
• Layanan Mikro
• Apa itu layanan microser? Bagaimana AWS mengimplementasikannya?
• Implementasi Microservices Menggunakan GO

Tambahan

• Roadmap Golang
• Peta jalan nodejs