Featured

Landing Page #3 - Tutorial Membuat COMPANY PROFILE dengan HTML CSS (FLEX & GRID) JS | Full Lengkap



Published
*Use Earphone / Headphone For Recommendation

Hallo Semuanya, Selamat Datang di Channel Ngoding Mastery, pada Video kali ini kita akan membuat sebuah Website Landing Page COMPANY PROFILE dengan menggunakan HTML CSS JS.

Dan tak lupa kita juga akan menambahkan sebuah animasi dengan menggunakan Animate Style yang dimana ketika Website di refresh atau misalkan kita masuk kedalam sebuah website maka website tersebut akan ada animasinya, kemudian Animate On Scroll yang dimana ketika website di scroll, kita akan menambahkan sebuah animasi dengan menggunakan animate on scroll.

Selain itu, kita juga akan menambahkan sebuah Pre Loader, yang dimana ketika sebelum masuk kedalam halaman website maka akan ada animasi Loading, serta kita juga akan menambahkan sebuah Formspree atau Formsubmit, yang dimana ketika kita mengisikan sebuah Form atau Contact maka Pesan yang di kirim akan di terima kedalam sebuah Gmail.

Dan yang lainnya.

- Highlight pada video kali ini -
1. Membuat Website Landing Page dengan HTML CSS JS Step by Step.
2. Best Practice menggunakan HTML CSS JS.
3. Tips and Trick menggunakan FLEX dan GRID.
4. Tips and Trick menggunakan Library.
5. Tips and Trick membuat Responsive di ukuran Tablet maupun Mobile.
6. Cara menambahkan Icon dengan Font Awesome.
7. Cara mengirim Pesan ke Gmail dengan Formspree dan Formsubmit.
8. Menambahkan Fungsi merubah Warna Background pada Navbar dengan menggunakan Javascript.
9. Cara menambahkan sebuah Pre Loader ketika masuk ke dalam Website.
10. Cara menambahkan Animasi ketika onload dengan Animate Style.
11. Cara menambahkan Animasi ketika Scroll dengan Animate On Scroll.

- Extension Vs 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

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

- chapter -
00:00 - Intro
01:22 - Overview Project yang akan dibuat
03:58 - Download STARTER PROJECT dan Open Folder di Code Editor
05:55 - Membuat Sruktur Folder atau File
08:30 - Membuat Struktur HTML Awal
19:24 - Membuat Section Navbar
38:09 - Menambahkan Background Color pada Navbar ketika Scroll
51:35 - Menambahkan Fungsi untuk memunculkan Button Hamburger
1:05:28 - Membuat Section Header
1:22:41 - Membuat Section About
1:37:29 - Membuat Section Partners
1:44:43 - Membuat Section Services
2:08:05 - Membuat Section Contact
2:26:53 - Mengirim Pesan ke Gmail dengan menggunakan Formspree
2:31:05 - Mengirim Pesan ke Gmail dengan menggunakan Formsubmit
2:34:50 - Membuat Section Footer
2:45:12 - Membuat Section Copyright
2:51:42 - Menambahkan Link disetiap Menu dengan Section
2:53:26 - Menambahkan Animasi pada Website ketika Refresh atau load dengan Animasi Style
2:58:57 - Menambahkan Pre Loader sebelum masuk ke Page Website
3:05:11 - Menambahkan Animasi ketika Scroll dengan Animate On Scroll
3:14:00 - Penutupan

- STARTER PROJECT / Assets -
https://drive.google.com/drive/folders/1KfZVQOgzRQcg8556lkiUA8kvWYT30jJF?usp=share_link

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

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

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

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

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

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

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

- Playlist React Web Design -
https://www.youtube.com/playlist?list=PLxLtIf3VX_3DeamMkQsC2rZluIPmXiVbY

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

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

https://unsplash.com/
https://cdnjs.com/libraries/font-awesome
https://fontawesome.com/
https://jonsuh.com/hamburgers/
https://animate.style/
https://michalsnik.github.io/aos/
https://formspree.io/
https://formsubmit.co/
https://getwaves.io/
https://coolors.co/

-----------------------------------------------------------------------------
Like dan Subscribe jika teman - teman Suka
Category
Web design
Be the first to comment