React Web Design #1 - Tutorial Membuat Website Landing Page Responsive dengan React JS | Bootstrap 5

*Use Headphone / Earphone for Recommendation

Hallo Semuanya, Selamat Datang di Channel Ngoding Mastery, pada video kali ini kita akan membuat sebuah Website Landing Page Responsive Sederhana dengan menggunakan sebuah Library React JS, dan juga Framework CSS Bootstrap 5, dan tak lupa pada Project kali ini kita juga akan menambahkan sebuah Animasi dengan menggunakan Animate Style dan Animate On Scroll.

- Highlight Video Kali ini -
1. Membuat Website Landing Page Sederhana dengan React JS + Bootstrap 5 Cocok untuk Pemula.
2. Membuat Website LP dengan Bootstrap React.
3. Menampilkan Navbar dengan menggunakan useState dan useEffect.
4. Cara penggunaan Row agar Responsive.
5. Membuat & Mengkustom Accordion pada Bootstrap 5.
6. Menambahkan Animasi ketika Load / Refresh dengan Animate Style.
7. Menambahkan Animasi ketika Scroll dengan Animate On Scroll.

- Chapter -
00:00 - Intro
00:30 - Overview Project yang akan dibuat
02:01 - Persiapan
02:40 - Menginstall React Js
04:49 - Membuat Struktur Folder / File
09:01 - Tips agar tidak mengubah Language Mode
10:18 - Menambahkan Font Poppins
12:10 - Menambahkan Font Awesome CDN
12:55 - Menginisialisasikan File CSS ke index.js (global)
14:32 - Mengubah Favicon
15:42 - Import semua Component ke dalam App.js
18:23 - Menginstall Bootstrap 5 / Bootstrap React
21:27 - Membuat Hero Component
29:17 - Membuat Navbar Component
48:32 - Membuat Gallery Component
58:22 - Membuat Service Component
1:10:53 - Membuat FAQ Component
1:24:18 - Membuat Footer Component
1:31:45 - Membuat link direct
1:33:46 - Menambahkan Animasi ketika Load / Refresh dengan Animate Style
1:38:30 - Menambahkan Animasi Ketika Scroll dengan Animate On Scroll
1:48:22 - Penutupan

- Assets -
https://drive.google.com/drive/folders/19D4REzuJ9Jr59CrW4830uRMn84wApfVK?usp=sharing

https://reactjs.org/
https://react-bootstrap.github.io/
https://getbootstrap.com/
https://animate.style/
https://michalsnik.github.io/aos/
https://fontawesome.com/
https://cdnjs.com/libraries/font-awesome

- Playlist Website Responsive -
https://www.youtube.com/playlist?list=PLxLtIf3VX_3Dz36dJKWYVmzl1-bZFkrGD

- Playlist Bootstrap 5 -
https://www.youtube.com/playlist?list=PLxLtIf3VX_3BHLe9ijLFzX9o7N2f3dUfB

- Playlist CSS GRID -
https://www.youtube.com/playlist?list=PLxLtIf3VX_3B_WYa7EX80et7A_IwKXLpI

- Playlist CSS FLEXBOX -
https://www.youtube.com/playlist?list=PLxLtIf3VX_3Co1DAIVs2BlMlsTYjjtJga

- Playlist Membuat Website dengan HTML CSS JS -
https://www.youtube.com/playlist?list=PLxLtIf3VX_3ALfhQfe37qKRPk4eJquGrU

- Playlist Membuat Website dengan HTML CSS -
https://www.youtube.com/playlist?list=PLxLtIf3VX_3D7D_ISKHBA7EfD-C2KR6W9

- Playlist Membuat Animasi pada Website -
https://www.youtube.com/playlist?list=PLxLtIf3VX_3CgG4iqZU4Y8fG0gajxpnCd

- Playlist Membuat RESTFUL API -
https://www.youtube.com/playlist?list=PLxLtIf3VX_3BMqiadv2dATYotfYKq0SjJ

- Playlist GITHUB -
https://www.youtube.com/playlist?list=PLxLtIf3VX_3CtzHU1jnGR-iuyqh08W1NW

------------------------------------------------------------------------------
Like dan Subscribe jika Teman - Teman Suka