Kelas Online
Full-Stack JavaScript Developer
Dibangun oleh Yein Narayana
STUDENT
3009
TINGKAT
ALL LEVELS
KONSULTASI
check_circleSERTIFIKAT
check_circleTentang Kelas
MERN Stack adalah bagian dari Full-Stack Web Developer yang difokuskan kepada JavaScript (Full-Stack JavaScript Developer). M untuk MongoDB, E untuk ExpressJS, R untuk ReactJS, dan N untuk NodeJS. Kalian akan mempelajari semua hal tersebut pada kelas ini. Tapi bukan hanya sekedar ngoding aja namun kalian akan mulai dari bagian UI dan UX sehingga paham betul bagaimana caranya membangun suatu website yang memiliki better experience.
Tools pada kelas ini semuanya gratis dan pengguna OS apa saja dapat mengikutinya. Pertama kalian akan mulai merancang design website dari tahap melakukan riset dan pembuatan information architecture. Lalu setelah itu kita juga akan membuat Wireframe untuk digunakan sebagai gambaran kasar.
Setelah proses Wireframe selesai maka akan dilanjutkan kepada tahap Visual Design dan Web Development. Silakan bergabung untuk mempelajarinya lebih lanjut. Kami akan tunggu kalian di kelas ya.
Screenshots
Lihat dulu yuk foto projek kelas
Gabung dan Pelajari
Materi kelas yang akan kita pelajari bersama
keyboard_arrow_down
lock
Brief Project
lock
Break Heula
lock
Customer Part 1
lock
Customer Part 2
lock
Customer Part 3
lock
Break Heula
lock
Break Heula Again
lock
Information Architecture Part 1
lock
Information Architecture Part 2
lock
Quiz
keyboard_arrow_down
lock
Break Sebentar
lock
UX User Flow Part 1
lock
UX User Flow Part 2
lock
UX User Flow Part 3
lock
Share UX Project
lock
Quiz
keyboard_arrow_down
lock
Persiapan
lock
Part 1
lock
Part 2
lock
Part 3
lock
Part 4
lock
Part 5
lock
Part 6
keyboard_arrow_down
lock
Perkenalan
lock
New MoodBoard
lock
Color Scheme
lock
Icon Design Inspiration
lock
Illustration Empty States
lock
Pemilihan Font Tipografi
keyboard_arrow_down
lock
Perkenalan Figma
lock
Grid System
lock
Logo & Navigation
lock
Coloring Logo
lock
Hero Banner Title
lock
UX Above the Fold
lock
CTA Button
lock
Drop Shadows
lock
Components
lock
Banner Image
lock
Customize Frame
lock
Data Placeholder Statistic
lock
Icon Traveler
lock
Icon Treasure & Cities
lock
Export & Resize Icons
keyboard_arrow_down
lock
Column
lock
Linear Gradient
lock
Tugas Design
lock
Badge Hotel
lock
Other Items
lock
New Badge
keyboard_arrow_down
lock
Add Image
lock
Icon Star
lock
UX Content
lock
Design Footer
lock
Copyright
lock
Details
lock
House Photos
lock
Room Descriptions
lock
Features dan Icons
lock
Lamp Icon
lock
Bathroom Icon
lock
Dining Room Icon
lock
Wifi Icon
lock
AC Icon
lock
Others Icon
lock
Booking Form
lock
Calendar Module
lock
Icon Calendar
lock
CTA Button
lock
Tweking Design
lock
Treasure Section
lock
Story Section
keyboard_arrow_down
lock
Item Booking
lock
Stepper Section
lock
Form Customer
lock
Design Button CTA
lock
UX Stepper
lock
Payment Section
lock
Final Page
lock
Sketching Illustration
lock
Shapes Illustration
lock
New Elements
lock
Export Illustration
keyboard_arrow_down
lock
UI Animation
lock
UI Prototype
lock
Final Prototype
lock
Persiapan Kolaborasi
lock
Presentation
lock
Feedback Design
lock
Slicing Design Asset
lock
Inspect Design Element
lock
Support Developer
keyboard_arrow_down
lock
Pengenalan project
lock
Tools required
lock
Persiapan workspace part 1
lock
Persiapan workspace part 2
lock
Quiz
keyboard_arrow_down
lock
Mempersiapkan component button
lock
Mempersiapkan component button part 2
lock
Mempersiapkan component button part 3
lock
Testing component button
lock
Testing component button part 2
lock
Commit component button
lock
Quiz
keyboard_arrow_down
lock
Update variable color
lock
Create logo as parts components
keyboard_arrow_down
lock
Persiapan Slicing header
lock
Mulai slicing header component
lock
Styling navbar header
lock
Troubleshooting ketika mengalami salah penutupan tag + commit git
keyboard_arrow_down
lock
Export image from figma
lock
Import image to hero js
lock
Menyusun component hero
lock
Menyusun component hero part 2
lock
Menyusun component hero part 3
lock
Styling Component Hero
lock
Styling Component Hero Part 2
lock
Number Format with internationalization browser API
keyboard_arrow_down
lock
Penjelasan singkat section mostpicked
lock
export image dari figma + contoh menggunakan grid bootstrap
lock
display grid + simple grid markup
lock
markup mostpicked complete
lock
mostpicked styling css
lock
mostpicked styling css part 2
lock
mostpicked styling css part 3
lock
double check kerjaan di section mostpicked
lock
Quiz
keyboard_arrow_down
lock
Penjelasan Section Categories
lock
Component categories
lock
Component categories part 2
lock
Component categories part 3 sampai conclusion component categories
keyboard_arrow_down
lock
Penjelasan Section Testimonial + Export assets
lock
Smart component star
lock
Smart component star part 2
lock
Styling component star
lock
Styling component star part 2
lock
Testing component star
lock
Component testimony
lock
Component testimony part 2
lock
Styling component testimony
keyboard_arrow_down
lock
Penjelasan dan mulai menulis component footer
lock
Component footer part 2
lock
Component footer part 3
lock
menambahkan react reveal
keyboard_arrow_down
lock
Penjelasan singkat item details
lock
Persiapan untuk slicing item details
keyboard_arrow_down
lock
component element input number
lock
component element input number part 2
lock
styling input number
lock
testing input number
lock
contoh input number
keyboard_arrow_down
lock
Elements input date dan pengenalan singkat hooks useEffect dan useRef
lock
Elements input date part 2
lock
Elements input date part 3
lock
Styling input date
lock
Testing input date + utils formatDate
lock
Testing input date part 2
lock
Contoh input date
keyboard_arrow_down
lock
Element breadcrumb
lock
Styling breadcrumb
lock
Testing breadcrumb
lock
Sample breadcrumb
keyboard_arrow_down
lock
Parts page detail title
lock
Parts page detail title part 2
lock
detail page featured image
lock
page detail description
lock
page detail description bug fix
lock
booking form
lock
booking form part 2
lock
styling booking form
lock
menyelesaikan details page
keyboard_arrow_down
lock
Intro checkout page
lock
Improve parts header
keyboard_arrow_down
lock
Sneak peak component stepper
lock
Component Stepper
lock
Component Controller
lock
Component main content
lock
Component meta
lock
Component numbering
lock
Styling numbering
lock
Quiz
keyboard_arrow_down
lock
Component input text
lock
Styling input text
lock
Component input file
keyboard_arrow_down
lock
Booking Information
lock
Payment
lock
Completed
lock
Checkout page
lock
Checkout page part 2
lock
End slicing session
keyboard_arrow_down
lock
Roadmap Node JS
lock
Intro Node JS
lock
Tools
lock
Install Node JS on Windows
lock
How to Use Node with REPL & File JS
lock
Module build in
lock
Module npm
lock
Membuat module sendiri
keyboard_arrow_down
lock
Install Express JS with Node JS
lock
Belajar Menangani Routing dan Instalasi Nodemon Development
lock
Instalasi Template Engine EJS
lock
Belajar Parsing data
lock
Quiz
keyboard_arrow_down
lock
Installing MongoDB on Windows Compass
keyboard_arrow_down
lock
Mengenal Mongoose dan Create Data
lock
Membaca data dari database mongodb menggunakan mongoose
lock
Validasi data menggunakan mongoose
lock
Update dan Delete data menggunakan Mongoose
lock
Membuat relationship dan memasukkan data menggunakan mongoose
lock
Quiz
keyboard_arrow_down
lock
Schema Staycation Part 1
lock
Schema Staycation part 2
lock
Schema Staycation part 3
keyboard_arrow_down
lock
Install Express Generator
lock
Create Structure folder Express JS
keyboard_arrow_down
lock
Install Mongoose & Create Models Part 1
lock
Validasi Mongoose
lock
Install Mongoose & Create Models Part 2
lock
Install Mongoose & Create Models Part 3
keyboard_arrow_down
lock
Install sbadmin2
lock
Integrasi template sbadmin2
keyboard_arrow_down
lock
Pemisahan Template dan Content
lock
View Dashboard
lock
Setting Sidebar and Navbar Project Staycation
lock
Setting url Admin Staycation
lock
View Category
lock
View Bank
lock
View Item
lock
View Booking
lock
Quiz
keyboard_arrow_down
lock
Membuat Koneksi Database
keyboard_arrow_down
lock
CRUD Project Staycation Category Create
lock
CRUD Project Staycation Category Read
lock
CRUD Project Staycation Update Part 1
lock
CRUD Project Staycation Update Part 2
lock
CRUD Project Staycation Delete
keyboard_arrow_down
lock
Handle Error with try catch and validasi input required
lock
Alert Message &Title Dinamis
keyboard_arrow_down
lock
CRUD Project Staycation Bank Create
lock
CRUD Project Staycation Bank Read
lock
CRUD Project Staycation Bank Update
lock
CRUD Project Staycation Bank Delete
keyboard_arrow_down
lock
Repair Relasi Project Staycation
lock
View Item with Nav Tabs
lock
CRUD Project Staycation Item Create
lock
CRUD Project Staycation Item Read
lock
Show image Project Staycation Item
lock
Show Item Single by id
lock
CRUD Projrect Staycation Item Update
lock
CRUD Project Staycation Item Delete
keyboard_arrow_down
lock
Detail Item Project Staycation Show Feature & Activity
lock
CRUD Project Staycation Create Feature
lock
CRUD Project Staycation Read Feature
lock
CRUD Project Staycation Update Feature
lock
CRUD Project Staycation Delete Feature
keyboard_arrow_down
lock
CRUD Project Staycation Create Activity
lock
CRUD Project Staycation Read Activity
lock
CRUD Project Staycation Update Activity
lock
CRUD Project Staycation Delete Activity
keyboard_arrow_down
lock
Add Schema Users and Seeder
lock
Login Project Staycation
lock
Autentikasi Project Staycation
lock
Logout Project Staycation
keyboard_arrow_down
lock
Booking Project Staycation
lock
Show Detail Booking
lock
Action Confirmation and Reject booking Project Staycation
keyboard_arrow_down
lock
Dashboard Project Staycation
keyboard_arrow_down
lock
API Landing Page Project Staycation Part 1
lock
API Landing Page Project Staycation Part 2
lock
API Landing Page Project Staycation Part 3
lock
API Landing Page Project Staycation Part 4
lock
API Landing Page Project Staycation Part 5
lock
Quiz
keyboard_arrow_down
lock
API Detail Page Project Staycation
keyboard_arrow_down
lock
API Booking Project Staycation Part 1
lock
API Booking Project Staycation Part 2
keyboard_arrow_down
lock
Documentation API with Postman
keyboard_arrow_down
lock
Testing API Landing Page
lock
Testing API Detail Page
lock
Testing API Booking Page
keyboard_arrow_down
lock
Persiapan Tools
lock
Create Akun Heroku
lock
Create Repository Github
lock
Create akun mongodb atlas
lock
Deploy Heroku
lock
Quiz
keyboard_arrow_down
lock
Instalasi Redux
lock
Actions, Reducers, Provider, store installed
lock
Connect item details to checkout booking page
lock
Try checkout booking
keyboard_arrow_down
lock
Setup postman to test ready endpoint
lock
Action fetchPage
lock
Action fetchPage part 2
lock
Tracing error while integration landing page
lock
Tracing error while integration landing page part 2
lock
Tracing error while integration landing page part 3
keyboard_arrow_down
lock
API integration item details page
lock
API integration item details page part 2
lock
API integration item details page part 3
lock
API integration item details page part 4
lock
API integration item details page part 5
keyboard_arrow_down
lock
Setup postman method post checkout
lock
Integrasi checkout page
lock
Integrasi checkout page part 2
lock
Integrasi checkout page part 3
lock
Axios interceptor
lock
Error handler with toaster
lock
Quiz
