Dokumentasi Materi Web Developer SC MAMQ

Halo gaes... kembali lagi bersma guweh, kali ini gweh mimin akan memberikan materi cara mebuat website portfolio sederhana untuk pembelajaran. Langsung saja yagesya masuk ke tutorialnya.

Website portfolio adalah cara yang bagus untuk menunjukkan pekerjaan dan kemampuan Kita kepada dunia. Bootstrap adalah kerangka kerja CSS populer yang akan memudahkan kita untuk membuat situs web yang responsif dan menarik. Mari kita mulai! Letsgoo!!

Membuat Website Portfolio

1. Membuat Kerangka Website

Kalian cukup salin kode berikut sebagai kerangka head website

See the Pen
Membuat header SC by rickthor7 (@rickthor7)
on CodePen.

2. Membuat Navbar

Navbar adalah navigasi menu pada website kita. Biasannya navbar berisi link link yang memuat isi dari website

See the Pen
Membuat Navbar SC by rickthor7 (@rickthor7)
on CodePen.

3. Membuat Jumbotron

Jumbotron adalah elemen pada website yang digunakan untuk menyampaikan informasi dari website atau pengumuman pada website. Disini kita gunakan untuk membuat head yagesya 🤩

See the Pen
Membuat Jumbotron SC by rickthor7 (@rickthor7)
on CodePen.

4. Membuat bagian About

Dibagian about, kalian bisa menuliskan sedikit atau banyak tentang diri kalian yagesya. Atau kalian bisa menjelaskan tentang profil nama kalian.

See the Pen
Untitled by rickthor7 (@rickthor7)
on CodePen.

5. Membuat bagian Project

Di bagian ini, kalian dapat memamerkan project project kalian. Atau yang sedang kalian kerjakan saat ini. Disini juga bisa kalian isi dengan product product.

See the Pen
Untitled by rickthor7 (@rickthor7)
on CodePen.

6. Membuat Bagian Contact

Dibagian ini akan berisi form yang dapat diisi dan akan masuk ke alamat email kita nantinya. Dilengkapi dengan animasi preload loading yang akan menghiasi website kita.

See the Pen
Untitled by rickthor7 (@rickthor7)
on CodePen.

7. Membuat bagian Footer

Footer merupakan bagian bawah pada website kamu dan selalu tampil di setiap halaman situs layaknya header

See the Pen
Bagian footer SC by rickthor7 (@rickthor7)
on CodePen.

8. Membuat animasi JS dan penutup html

Agar website kita responsif dan indah, kita memerlukan sebuah elemen bahasa yang bernama Javascript / JS. Kita kali ini menggunakan library yang bernama AOS.

AOS Documentation

 Simak kode berikut...

See the Pen
Bagian JS dan penutup SC by rickthor7 (@rickthor7)
on CodePen.

Demo
Source Code

Nah... Selesai sudah materi kita kali ini, semoga bermanfaat.... 

Sekian terimaagajiieh....