Membuat Website Profil Diri

Tugas 1 PWeb

Link Penting


Deskripsi Tugas

Pada tugas ini, saya membuat website profil diri yang berisikan biodata dan pengalaman saya.


Dokumentasi Website

Penjelasan Kode

File index.html


Pada header, saya meng-import font Monserrat dan file style.css



Potongan kode di atas mempresentasikan halaman awal yang muncul pertama kali saat web dibuka. Section ini berisi gambar beserta teks pelengkap seperti nama, jurusan, serta link icon menuju sosial media.



Section ini mempresentasikan bagian tentang diri saya yang hanya berisi heading dan teks.



Section ini mempresentasikan preferensi teknologi yang saya pakai. Terbagi menjadi 3 bagian besar, tiap bagian dibungkus ke dalam sebuah tag div yang saya beri class card-skill.



Section ini mempresentasikan portofolio yang pernah saya kerjakan. Tiap proyek saya bungkus ke dalam tag anchor supaya bisa ditekan dan me-redirect ke website terkait. Selain itu, saya menaruh copyright di bagian paling bawah web, lebih tepatnya di dalam tag footer.


File style.css


Bagian css ini mendefinisikan styling dasar. Pada selector :root, saya mendefinisikan nilai color and font weight untuk dapat digunakan pada kode yang lain sebagai variabel. Pada selector *, saya mereset margin, padding, serta menerapkan styling pada semua elemen html.



Kode di atas merupakan styling yang ditujukan pada masing-masing article, seperti overview, aboutme, dan sebagainya.



Kode di atas merupakan implementasi media query, yaitu untuk membuat web responsif pada beberapa breakpoint.

Komentar

Posting Komentar

Postingan populer dari blog ini

Membuat Form Upload Gambar

Gambar
Tugas 7 PWeb Link Lihat Portofolio Deskripsi Tugas Pada tugas ini, saya membuat aplikasi CRUD menggunakan PHP dan MySQL yang form-nya memiliki input gambar. Dokumentasi Website Halaman awal Halaman form pendaftaran Redirect ke halaman awal setelah pendaftaran sukses Halaman daftar siswa Halaman edit data Redirect ke halaman daftar siswa setelah berhasil melakukan perubahan data. Nama data pertama berubah dari ITS menjadi ITS Surabaya Jika tombol hapus ditekan, maka data terhapus. Gambar di bawah m...
Baca selengkapnya

Membuat Web dengan Styling Bootstrap

Gambar
Tugas 5 PWeb Link Penting Lihat Website Lihat Portofolio Deskripsi Tugas Pada tugas ini, saya membuat website dengan styling bootstrap Dokumentasi Website Penjelasan Kode File index.html Pada head HTML di atas, saya menuliskan judul web pada tag title dan meng- import file bootstrap serta css custom milik saya. Kode di atas mempresentasikan header pada web. Saya mengisi navbar di dalam tag header. Styling navbar dibentuk dengan warna gelap, ditandai dengan class dark . Opsi navigasi navbar dibentuk menggunakan tag anchor . Kode di atas membentuk jumbotron atau banner pada web yang berisikan heading 1 dan teks paragraf. Kode di atas membentuk tam...
Baca selengkapnya