Tutorial React Website - Membuat Website Responsive dengan ReactJs Vite Bootstrap Swiper ... смотреть онлайн

Hallo Semuanya, Selamat Datang di Channel Ngoding Mastery...

Pada Tutorial React Website kali ini, kita akan Membuat Website Responsive dengan ReactJs, Vite, Bootstrap/React-Bootstrap, React-Router, Swiper, Animate Style, Animate On Scroll, Accordion, dan komponen - komponen lainntya

- Benefit yang akan didapatkan -
1. Belajar Menggunakan React Js dengan VITE (Beginner Friendly).
2. Belajar Membuat Website Multi Page dengan React Js.
3. Belajar React Bootstrap/Boostrap5 dalam membuat Website.
4. Belajar React Router 6 dalam membuat Jalur Route.
5. Belajar Membuat Carouse dengan Swiper Js.
6. Belajar Membuat Accordion dengan React Bootstrap.
7. Belajar Merubah Warna Background pada Navbar dengan useState & useEffect.
8. Belajar Membuat Full Responsive Website dengan React Js.
9. Belajar Menambahkan Animasi Transisi dengan Animate Style.
10. Belajar Menambahkan Animasi ketika Scroll dengan Animate On Scroll.
11. dan Benefit Lainnya.

- Extension Visual Studio Code -
1. HTML CSS Support
2. Color Highlight
3. Color Info
4. Prettier - Code Formatter
5. Auto Rename Tag
6. css-auto-prefix
7. Material Icon Theme
8. Andromeda
9. Error Lens
10. Better Comments
11. Live Server
12. ES7+ React/Redux/React-Native by dsznajder

- Extention Chrome -
1. What Font
2. Mobile Simulator - responsive testing tools

- chapter -
00:00 - Intro
01:15 - Overview Project yang dibuat
05:09 - Persiapan Awal (Create Folder & Install React)
10:53 - Download Assets
14:24 - Membuat Struktur Folder & File
18:54 - Mengubah Icon & Title pada Website
19:36 - Instal & Menambahkan React Router
29:47 - Membuat Section Navbar
33:38 - Instal & Menambahkan React Bootstrap
1:00:05 - Merubah Warna Background Navbar ketika Scroll
1:09:40 - Membuat Section Homepage Header
1:29:13 - Membuat Section Homepage Kelas
1:53:09 - Membuat Section Homepage Testimonial
2:18:40 - Membuat Section FAQ dengan Accordion
2:33:30 - Membuat Section Footer
3:00:50 - Membuat Halaman Kelas
3:10:48 - Membuat Halaman Testimonial
3:21:34 - Menambahkan Style pada Halaman FAQ
3:22:14 - Membuat Halaman Syarat & Ketentuan
3:30:48 - Menambahkan useNavigate pada Button Lihat Kelas
3:31:45 - Menambahkan Scroll To Top
3:35:40 - Menambahkan Animasi dengan Animate Style pada Homepage
3:43:23 - Menambahkan Animasi dengan AOS pada Homepage
3:48:11 - Menambahkan Animasi dengan Animate Style pada Kelas
3:50:45 - Menambahkan Animasi dengan AOS pada Kelas
3:51:40 - Menambahkan Animasi dengan Animate Style pada Testimonial
3:52:37 - Menambahkan Animasi dengan Animate Style pada FAQ
3:53:06 - Menambahkan Animasi dengan Animate Style pada Syarat & Ketentuan
3:54:36 - Penutupan

- Assets -
https://drive.google.com/drive/folders/1f1T_8_9gaE7L3ZyOQ_v5aiWy_IIK3j7B?usp=share_link

- Playlist PORTFOLIO Website -
https://www.youtube.com/watch?v=C_4x_N8SMSY&list=PLxLtIf3VX_3C7ooq2RuEo7XEeZ-G6omxD

- Playlist React Js Website -
https://www.youtube.com/watch?v=r9kAp2zeU5s&list=PLxLtIf3VX_3A5RJFRZTtdHCLcA69el96o

- Playlist Tailwind CSS Website -
https://www.youtube.com/watch?v=-o_tBBtLS4U&list=PLxLtIf3VX_3C-Oe5VtgUBmONbScnGBYPB

- Playlist NGOJEK (NGOding proJEK) -
https://www.youtube.com/watch?v=WgSCJSG1lOw&list=PLxLtIf3VX_3BnAbuL-XDaPmq6AkL41K6g

- Playlist Website LANDING PAGE Responsive -
https://www.youtube.com/watch?v=hXPb8v4SFbI&list=PLxLtIf3VX_3D8y0acpsIzIlME_5J_6Ns6

- Playlist Library CSS & JAVASCRIPT -
https://www.youtube.com/watch?v=hErSquN7vS0&list=PLxLtIf3VX_3C7p1royoHxX0KFflbhUFAH

- Playlist BOOTSTRAP Website -
https://www.youtube.com/watch?v=rK92ZoMMU7U&list=PLxLtIf3VX_3BHLe9ijLFzX9o7N2f3dUfB

- Playlist HTML CSS JS Website -
https://www.youtube.com/watch?v=eYFN_TL8Ycw&list=PLxLtIf3VX_3ALfhQfe37qKRPk4eJquGrU

- Playlist REST API (Node Js, Express Js, MongodDB) -
https://www.youtube.com/watch?v=6vMWoJsG4YQ&list=PLxLtIf3VX_3BMqiadv2dATYotfYKq0SjJ

- Playlist GITHUB -
https://www.youtube.com/watch?v=s0bNDmqlHO0&list=PLxLtIf3VX_3CtzHU1jnGR-iuyqh08W1NW

- Playlist Website Responsive Sederhana -
https://www.youtube.com/watch?v=AQP80QaYhK8&list=PLxLtIf3VX_3At0wacILmuuSm_06as1oNy

https://unsplash.com/
https://getbootstrap.com/
https://cdnjs.com/libraries/font-awesome
https://fontawesome.com/icons
https://michalsnik.github.io/aos/
https://animate.style/
https://swiperjs.com/
https://vitejs.dev/
https://react.dev/
https://react-bootstrap.github.io/

-------------------------------------------------------------------------------
Like and Subscribe Jika Teman - Teman Suka ?
-------------------------------------------------------------------------------

#tutorial
#pemrograman
#webdevelopment
#reactjs
#reactjstutorial
#reactjsdeveloper
#reactjsforbeginners
#reactjsprojects