Tutorial Membuat WEBSITE RESPONSIVE dengan Bootstrap 5 (2024)🚀+ Deploy ke GITHUB PAGES

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

Pada video kali ini, di Tutorial Membuat WEBSITE RESPONSIVE dengan BOOTSTRAP 5 (2024), kita akan membuat sebuah website responsive dari nol step by step untuk pemula, dan juga kita akan menambahkan sedikit bumbu yaitu Animate Style dan AOS.

- Yang akan kita Pelajari -
1. Membuat Website Responsive dengan Bootstrap 5 untuk Pemula dari nol.
2. Belajar menggunakan component - component yang ada pada Bootstrap.
3. Belajar Bagaimana penerapan System Layout Flexbox dan Grid pada Boostrap.
4. Belajar bagaimana caranya website dapat ditampilkan di Mobile, Tablet dan Desktop dengan Bootstrap.
5. Belajar menggunakan Animate Style dan AOS untuk memberikan Animasi Transisi.
6. Belajar Mendeploy atau Menyimpan Project Website kedalam Github.
7. Belajar Menampilkan Website dengan Github Pages agar Website dapat dilihat oleh orang lain.

- Extension Front End -
1. HTML CSS Support
2. Color Highlight
3. Color Info
4. Auto Close Tag
5. Auto Rename Tag
6. Better Comments
7. Error Lens
8. PostCSS Language Support
9. Tailwind CSS Intellisense

- Extension Back End -
1. EJS Language Support
2. Error Lens
3. ES7+ React/Redux/React-Native snippets (dsznajder)
4. ESLint
5. Javascript (ES6) code snippets
6. Rest Client
7. Thunder Client

- Extension For VsCode -
1. Andromeda
2. Git History
3. Live Preview
4. Live Server
5. Live Share
6. Material Icon Theme
7. Prettier - Code Formatter

- Extention Chrome -
1. What Font
2. Mobile Simulator - responsive testing tools
3. ColorPick Eyedropper
4. React Developer Tools
5. CSS Viewer

- chapter -
00:00 - Opening
01:00 - Overview Website yang akan dibuat
04:21 - Download Assets dan Starter Project
11:31 - Membuat Section Navbar
22:45 - Membuat Section Hero
36:14 - Membuat Section About
40:24 - Membuat Section Services
49:00 - Membuat Section Projects
1:04:30 - Membuat Section FAQ
1:16:03 - Membuat Section Footer
1:30:27 - Membuat Section Copyright
1:33:20 - Menambahkan Animate Style
1:40:19 - Menambahkan Animate On Scroll
1:52:45 - Deploy ke Github
1:57:38 - Menampilkan Website dengan Github Pages
2:00:05 - Closing

- Assets -
https://drive.google.com/drive/folders/1VQlLnYoIJwHbYckey7DQ0rshTCShVBN0?usp=sharing

- WER TEKEWER KEWER😁☕ -
https://saweria.co/dikydev27

- 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/

-------------------------------------------------------------------------------
Like and Subscribe Jika Teman - Teman Suka 😁
-------------------------------------------------------------------------------

#bootstrap #bootstrap5 #bootstraptutorial #bootstrapwebsite #ngoding #ngodingpintar #ngodingmastery #bootstrapindonesia #programmerindonesia

Видео Tutorial Membuat WEBSITE RESPONSIVE dengan Bootstrap 5 (2024)🚀+ Deploy ke GITHUB PAGES канала Ngoding Mastery