Membuat Website Profil Diri menggunakan HTML & CSS

Tugas 1
Rahmat Faris Akbar
5025201003
PWEB (B)


        Pada mata kuliah Pemrograman Web diawali dengan tugas membuat sutu profil diri dalam bentuk website. Pada tugas pertama ini kita baru bisa menggunakan html (sebagai structure language dalam website development dan juga konten dari website ini) & css (sebagai desain yang ditambahkan kedalam HTML untuk membentuk layout style). Tools yang digunakan adalah code editor (visual studio code), browser (chrome), dan github.


Konten dari profil diri kali ini saya bagi menjadi 5 section yang terdiri dari:

  1. Home
    - sapaan
    - deskripsi diri
    - foto
    - tombol "Hire Me" yang memiliki referensi ke section contact
  2. About
    - perkenalan (nama dan profesi)
    - cita-cita
    - download CV
    - biodata (alamat, umur, website, status, pendidikan, asal, email, dan kontak)
    - riwayat pendidikan
    - pengalaman kepanitiaan
  3. Roadmaps (hal-hal yang ingin dikuasai dalam perencanaan ke depan)
  4. Portofolio (aplikasi yang pernah dibuat beserta link dan screenshotnya)
  5. Contact
    - nomor hp
    - lokasi
    - email
    - website

Langkah Pembuatan:
  1. Buat file html yang saya  namakan index.html dan file css yang saya namakan style.css
  2. Siapkan file foto pribadi dan dokumentasi portofolio
  3. Saya menggunakan font-awesome untuk menampilkan beberapa icon agar tampilan website lebih menarik (referensi: https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css). Saya juga menggunakan beberapa font yang saya ambil dari Google Fonts (https://fonts.googleapis.com/css2?family=Clicker+Script&family=Poppins:wght@200;300;400;500;600;700&display=swap) agar tampilan website lebih bervariasi dan tidak membosankan.
  4. Buat sidebar (disini saya menaruh sidebar saya di kiri, sehingga konten dari setiap section akan berada di kanan)
  5. Buat dan hias section satu persatu dari home sampai ke section contact
  6. Buat website supaya menjadi responsif dengan cara mendefinisikan Meta Tag, menentukan struktur html, dan membuat query di css.
        Untuk code html, css dan gambar yang digunakan dapat diakses melalui link repository di paling bawah dari postingan ini.

Tampilan Home Website yang Sudah Jadi:
        Untuk tampilan lengkapnya bisa dilihat melalui link profil diri di paling bawah dari postingan ini.


        Setelah kita telah menyelesaikan code sesuai dengan keinginan kita, maka kita harus melakukan commit ke dalam static website. Kali ini saya menggunakan GitHub Page untuk membuat suatu static website yang bisa diakses secara publik.


Langkah:
  1. Buat repository baru dengan nama yang memenuhi persyaratan.
  2. Lakukan commit file-file yang sudah dibuat ke repository yang barusan kita buat.
  3. Deploy menggunakan GitHub Page yang pengaturannya ada di menu setting dari repository yang telah dibuat. Lalu, pilih menu Pages dan gunakan branch yang akan di deploy (root) dan kemudian jangan lupa, save.
  4. Halaman profil diri telah terdeploy dan link untuk akses websitenya akan muncul.

Link Repository: Repository 
Link Tampilan Website Profil Diri:  Profil Diri

Comments

Post a Comment

Popular posts from this blog

TUGAS 1 PPB F : Aplikasi Profil Diri (Smartphone, Dekstop, Tablet, Smartwatch, TV)

Image
TUGAS 1 Membuat Aplikasi Profil Diri dengan Jetpack Compose 5025201003 -  Rahmat Faris Akbar PPB (F)           Dalam era digital saat ini, memiliki aplikasi profil pribadi atau bisnis bisa menjadi cara efektif untuk memperkenalkan diri atau layanan Anda kepada dunia. Dengan menggunakan Jetpack Compose, pembuatan UI di Android menjadi lebih sederhana dan lebih intuitif. Artikel ini akan membahas bagaimana membangun aplikasi profil sederhana dengan menggunakan Jetpack Compose. Persiapan:      Sebelum memulai, pastikan Anda telah menginstal Android Studio dan setup lingkungan pengembangan Android Anda dengan benar. Juga, pastikan bahwa Anda menggunakan versi Android Studio dan Gradle yang mendukung Jetpack Compose. Langkah 1: Setup Proyek Buat proyek baru di Android Studio dan pilih template "Empty Compose ...
Read more

TUGAS 7 PPB F : ViewModel and State in Compose

Image
TUGAS 7   ViewModel and State in Compose 5025201003 -  Rahmat Faris Akbar PPB (F)           Pada minggu ke-14 kelas Pemrograman Perangkat Bergerak F, kita ditugaskan membuat  aplikasi game Unscramble menggunakan Jetpack Compose dan ViewModel dari library Android Jetpack mengikuti panduan tutorial ViewModel and State in Compose . Panduan ini akan memandu kita melalui pengaturan proyek, memahami arsitektur, dan mengimplementasikan fungsionalitas game. Gambaran Proyek                Aplikasi Unscramble adalah permainan kata tunggal di mana pemain menebak kata yang diacak. Aplikasi ini menampilkan kata yang diacak, dan pemain menebak kata yang benar menggunakan semua huruf yang disediakan. Poin diberikan untuk tebakan yang benar, dan permainan melacak jumlah kata yang ditebak dengan benar. Setiap permainan terdiri dari 10 kata...
Read more

EVALUASI TENGAH SEMESTER PPB F

Image
Evaluasi Tengah Semester   Studi Kasus Aplikasi "myITS Mahasiswa" 5025201003 -  Rahmat Faris Akbar PPB (F) Link Docs:  jawaban dalam bentuk docs 1. Apa keuntungan menggunakan platform mobile Android dibandingkan dengan platform Propietary seperti Apple? Jawaban: Keterbukaan dan Fleksibilitas :  Android adalah sistem operasi yang bersifat open-source, yang memungkinkan para pengembang dan produsen perangkat untuk mengubah dan menyesuaikan sistem sesuai dengan kebutuhan mereka. Hal ini berbeda dengan iOS dari Apple yang memiliki sistem yang tertutup dan terkontrol ketat. Variasi Perangkat :  Android digunakan oleh berbagai merek dan model smartphone dan tablet, memberikan lebih banyak pilihan perangkat bagi konsumen dalam berbagai segmen harga. Sementara itu, Apple hanya menyediakan beberapa model yang umumnya berada di segmen harga lebih tinggi. Biaya Pengembangan yang Lebih Rendah :  Untuk para pengembang, masuk ke pasar Androi...
Read more